diff --git a/_config.yml b/_config.yml index f56b53b..71d3fd5 100644 --- a/_config.yml +++ b/_config.yml @@ -19,6 +19,7 @@ exclude: - LICENSE sass: style: compressed + sourcemap: development compress_html: ignore: envs: ["development"] @@ -29,6 +30,4 @@ defaults: scope: path: "_pages" values: - permalink: "/:title:output_ext" -sass: - sourcemap: development \ No newline at end of file + permalink: "/:title:output_ext" \ No newline at end of file diff --git a/_layouts/base.html b/_layouts/base.html index 6ddf25c..ac3d06a 100644 --- a/_layouts/base.html +++ b/_layouts/base.html @@ -53,6 +53,24 @@ layout: compress {% endif %} + {{ content }} + diff --git a/_sass/glitch.scss b/_sass/glitch.scss index 445140b..232e90c 100644 --- a/_sass/glitch.scss +++ b/_sass/glitch.scss @@ -1,36 +1,44 @@ - header { - max-width: 100vw; - line-height: 1; + max-width: 100%; + width: 100%; + .stack { overflow: hidden; display: grid; grid-template-columns: 1fr; + + &.glitch span { + animation: glitch 340ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), + jitter 2000ms ease infinite 2s alternate-reverse; + } + + span { + font-weight: bold; + grid-row-start: 1; + grid-column-start: 1; + font-size: 4rem; + + --stack-height: calc(100% / var(--stacks) - 1px); + --inverse-index: calc(calc(var(--stacks) - 1) - var(--index)); + --clip-top: calc(var(--stack-height) * var(--index)); + --clip-bottom: calc(var(--stack-height) * var(--inverse-index)); + + clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0); + + animation: jitter 2000ms ease infinite 2s alternate-reverse; + + &:nth-child(odd) { + --glitch-translate: 8px; + } + + &:nth-child(even) { + --glitch-translate: -8px; + } + } } } -.stack span { - font-weight: bold; - grid-row-start: 1; - grid-column-start: 1; - font-size: 4rem; - --stack-height: calc(100% / var(--stacks) - 1px); - --inverse-index: calc(calc(var(--stacks) - 1) - var(--index)); - --clip-top: calc(var(--stack-height) * var(--index)); - --clip-bottom: calc(var(--stack-height) * var(--inverse-index)); - clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0); - animation: stack 340ms cubic-bezier(.46, .29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse; -} - -.stack span:nth-child(odd) { - --glitch-translate: 8px; -} - -.stack span:nth-child(even) { - --glitch-translate: -8px; -} - -@keyframes stack { +@keyframes glitch { 0% { opacity: 0; transform: translateX(-50%); @@ -50,7 +58,7 @@ header { } } -@keyframes glitch { +@keyframes jitter { 0% { text-shadow: -2px 3px 0 red, 2px -3px 0 blue; transform: translate(var(--glitch-translate)); @@ -58,8 +66,9 @@ header { 2% { text-shadow: 2px -3px 0 red, -2px 3px 0 blue; } - 4%, 100% { + 4%, + 100% { text-shadow: none; transform: none; } -} \ No newline at end of file +}