incident tracker
This commit is contained in:
parent
7d29f615c5
commit
52331a90e1
6 changed files with 158 additions and 4 deletions
|
|
@ -57,7 +57,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
17
incidenttrack/incident.html
Normal file
17
incidenttrack/incident.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="style.scss">
|
||||
<script>Splitting();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1 data-splitting>0</h1>
|
||||
<h1 data-splitting>DAYS</h1>
|
||||
<h1 data-splitting>SINCE</h1>
|
||||
<h1 data-splitting>LAST</h1>
|
||||
<h1 data-splitting>INCIDENT</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
incidenttrack/script.js
Executable file
1
incidenttrack/script.js
Executable file
|
|
@ -0,0 +1 @@
|
|||
Splitting();
|
||||
132
incidenttrack/style.scss
Executable file
132
incidenttrack/style.scss
Executable file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
@ -61,6 +61,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
<br><br><br>
|
||||
<a href="incident.html">time since last incident</a>
|
||||
<br><br>
|
||||
<p>"Forever - is composed of Nows</p>
|
||||
<p>`Tis not a different time -</p>
|
||||
<p>Except for Infiniteness -</p>
|
||||
|
|
@ -72,7 +76,7 @@
|
|||
<p>And Years - exhale in Years ..."</p>
|
||||
<p>- Emily Dickinson</p>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const menuToggle = document.querySelector('.menuToggle');
|
||||
const navigation = document.querySelector('.navigation');
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ body{
|
|||
padding: 0 23px;
|
||||
}
|
||||
.navigation.mTitle .menuToggle::after{
|
||||
content:'Limepot';
|
||||
content:'LimePotato';
|
||||
}
|
||||
.navigation.open .menuToggle::after{
|
||||
transform: translateY(0px) rotate(-45deg);
|
||||
|
|
@ -222,4 +222,4 @@ body{
|
|||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
/*AWFUL FUCKING GALLERY BULLSHIT FUCK FUCK FUCK FUCK FUCK FUCK*/
|
||||
/*AWFUL FUCKING GALLERY BULLSHIT FUCK FUCK FUCK FUCK FUCK FUCK*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue