diff --git a/_includes/header.html b/_includes/header.html index b857d37..05c43d4 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,4 +1,10 @@ -Ryan Walters + + + ryan walters + ryan walters + ryan walters + + ~/ : diff --git a/_sass/glitch.scss b/_sass/glitch.scss new file mode 100644 index 0000000..6b785d0 --- /dev/null +++ b/_sass/glitch.scss @@ -0,0 +1,59 @@ +.stack { + display: grid; + grid-template-columns: 1fr; +} + +.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 { + 0% { + opacity: 0; + transform: translateX(-50%); + text-shadow: -2px 3px 0 red, 2px -3px 0 blue; + } + 60% { + opacity: 0.5; + transform: translateX(50%); + } + 80% { + transform: none; + opacity: 1; + text-shadow: 2px -3px 0 red, -2px 3px 0 blue; + } + 100% { + text-shadow: none; + } +} + +@keyframes glitch { + 0% { + text-shadow: -2px 3px 0 red, 2px -3px 0 blue; + transform: translate(var(--glitch-translate)); + } + 2% { + text-shadow: 2px -3px 0 red, -2px 3px 0 blue; + } + 4%, 100% { + text-shadow: none; + transform: none; + } +} \ No newline at end of file diff --git a/_sass/main.scss b/_sass/main.scss index 6ea4435..b648392 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -1,3 +1,5 @@ +@import "glitch"; + ::selection { background: #606060; color: white; @@ -380,7 +382,6 @@ article { a { text-decoration: none; font-style: italic; - //color: #90bcff; } } }