Add 'www/alert.css'

2022-02-13 05:39:12 +00:00 · 2022-02-13 05:39:12 +00:00 · cc74ab5dba
parent a6f24a0a85
commit cc74ab5dba
1 changed files with 139 additions and 0 deletions
--- a/www/alert.css
+++ b/www/alert.css
@ -0,0 +1,139 @@
+body {
+  font-family: canada-type-gibson, sans-serif;
+  font-size: .5rem;
+  font-weight: 300;
+  font-size: 1.25rem;
+  display: grid;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+img {
+  border-radius: 8px;
+  margin: auto;
+}
+
+.alerts {
+  display: grid;
+  justify-content: center;
+  width: 1040px;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+
+.text-shadows {
+  text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d,
+    9px 9px #f07a6a, 12px 12px 0 #f07a6a;
+  font-family: bungee, sans-serif;
+  font-size: calc(.25rem + 5vw);
+  font-weight: 400;
+  text-transform: uppercase;
+  text-align: center;
+  margin: 0;
+  color: #f6aca2;
+  animation: shadows 1.5s ease-in infinite, move 1.5s ease-in infinite;
+  letter-spacing: 0.4rem;
+}
+
+
+.fade-in {
+  animation: fadeIn ease 6s;
+  -webkit-animation: fadeIn ease 6s;
+  -moz-animation: fadeIn ease 6s;
+  -o-animation: fadeIn ease 6s;
+  -ms-animation: fadeIn ease 6s;
+}
+
+@keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-moz-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-webkit-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-o-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-ms-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+@keyframes shadows {
+  0% {
+    text-shadow: none;
+  }
+  10% {
+    text-shadow: 3px 3px 0 #f49b90;
+  }
+  20% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d;
+  }
+  30% {
+    text-shadow: 3px 3px 0 #f28b7d,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a;
+  }
+  40% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a,
+      12px 12px 0 #ee6352;
+  }
+  50% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a,
+      12px 12px 0 #ee6352;
+  }
+  60% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a,
+      12px 12px 0 #ee6352;
+  }
+  70% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a;
+  }
+  80% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d;
+  }
+  90% {
+    text-shadow: 3px 3px 0 #f49b90;
+  }
+  100% {
+    text-shadow: none;
+  }
+}
+
+@keyframes move {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  40% {
+    transform: translate(-12px, -12px);
+  }
+  50% {
+    transform: translate(-12px, -12px);
+  }
+  60% {
+    transform: translate(-12px, -12px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}