diff --git a/about.html b/about.html index dcd80a0..bd6b31e 100644 --- a/about.html +++ b/about.html @@ -57,7 +57,7 @@ - +
diff --git a/incidenttrack/incident.html b/incidenttrack/incident.html new file mode 100644 index 0000000..1e3e219 --- /dev/null +++ b/incidenttrack/incident.html @@ -0,0 +1,17 @@ + + + + + + + +
+

0

+

DAYS

+

SINCE

+

LAST

+

INCIDENT

+
+ + \ No newline at end of file diff --git a/incidenttrack/script.js b/incidenttrack/script.js new file mode 100755 index 0000000..f93e764 --- /dev/null +++ b/incidenttrack/script.js @@ -0,0 +1 @@ +Splitting(); diff --git a/incidenttrack/style.scss b/incidenttrack/style.scss new file mode 100755 index 0000000..c9de59f --- /dev/null +++ b/incidenttrack/style.scss @@ -0,0 +1,132 @@ +@font-face { + font-family: 'Marvin Visions Variable'; + src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/MarvinVisionsTrial-Variable.ttf"); +} + +:root { + --black: #010101; + --red: #fd0002; + --blue: #1600fe; + --green: #00ff00; + --letter-skew: 8deg; +} + + +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + background: var(--black); +} + +.words { + font-size: 7.5rem; + letter-spacing: 1rem; + font-family: 'Marvin Visions Variable'; + text-transform: uppercase; + + &:nth-child(odd) { + .char { + &:nth-child(odd) { + --rotation: 10deg; + transform-origin: bottom left; + animation-name: stretchHozThenVert; + } + + &:nth-child(even) { + --rotation: -10deg; + transform-origin: bottom left; + animation-name: stretchVertThenHoz; + + &:before, + &:after { + animation-name: stretchVertThenHoz; + } + } + } + } + + &:nth-child(even) { + .char { + &:nth-child(odd) { + --rotation: -10deg; + transform-origin: top right; + animation-name: stretchVertThenHoz; + } + + &:nth-child(even) { + --rotation: 10deg; + transform-origin: top left; + animation-name: stretchHozThenVert; + + &:before, + &:after { + animation-name: stretchHozThenVert; + } + } + } + } +} + +.char { + position: relative; + display: inline-block; + color: var(--blue); + mix-blend-mode: screen; + font-variation-settings: 'wght' 200; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-easing: ease-in-out; + + &::after, + &::before { + content: attr(data-char); + position: absolute; + mix-blend-mode: screen; + left: 0; + animation-duration: 1.3s; + animation-iteration-count: infinite; + animation-name: stretchHozThenVert; + animation-easing: ease-in-out; + } + + &::before { + color: var(--red); + font-variation-settings: 'wght' 170; + animation-delay: 0.25s; + font-size: 7.75rem; + } + + &::after { + color: var(--green); + font-variation-settings: 'wght' 150; + animation-delay: 0.5s; + font-size: 8rem; + } +} + +@keyframes stretchHozThenVert { + 0% { + transform: rotate(var(--rotation)) skew(var(--letter-skew), 0) scale(0.9, 1.15) + } + 50% { + transform: rotate(var(--rotation)) skew(var(--letter-skew), 0) scale(1.15, 0.9) + } + 100% { + transform: rotate(var(--rotation)) skew(var(--letter-skew), 0) scale(0.9, 1.15) + } +} + +@keyframes stretchVertThenHoz { + 0% { + transform: rotate(var(--rotation)) scale(1.15, 0.9) + } + 50% { + transform: rotate(var(--rotation)) scale(0.9, 1.15) + } + 100% { + transform: rotate(var(--rotation)) scale(1.15, 0.9) + } +} \ No newline at end of file diff --git a/index.html b/index.html index de495bf..788fc37 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,10 @@
+ +


+ time since last incident +

"Forever - is composed of Nows

`Tis not a different time -

Except for Infiniteness -

@@ -72,7 +76,7 @@

And Years - exhale in Years ..."

- Emily Dickinson

- +