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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<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>"Forever - is composed of Nows</p>
|
||||||
<p>`Tis not a different time -</p>
|
<p>`Tis not a different time -</p>
|
||||||
<p>Except for Infiniteness -</p>
|
<p>Except for Infiniteness -</p>
|
||||||
|
|
@ -72,7 +76,7 @@
|
||||||
<p>And Years - exhale in Years ..."</p>
|
<p>And Years - exhale in Years ..."</p>
|
||||||
<p>- Emily Dickinson</p>
|
<p>- Emily Dickinson</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const menuToggle = document.querySelector('.menuToggle');
|
const menuToggle = document.querySelector('.menuToggle');
|
||||||
const navigation = document.querySelector('.navigation');
|
const navigation = document.querySelector('.navigation');
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ body{
|
||||||
padding: 0 23px;
|
padding: 0 23px;
|
||||||
}
|
}
|
||||||
.navigation.mTitle .menuToggle::after{
|
.navigation.mTitle .menuToggle::after{
|
||||||
content:'Limepot';
|
content:'LimePotato';
|
||||||
}
|
}
|
||||||
.navigation.open .menuToggle::after{
|
.navigation.open .menuToggle::after{
|
||||||
transform: translateY(0px) rotate(-45deg);
|
transform: translateY(0px) rotate(-45deg);
|
||||||
|
|
@ -222,4 +222,4 @@ body{
|
||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
grid-row-end: 3;
|
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