home: wip

static/style.css

@@ -131,6 +131,47 @@ table {
   border-spacing: 0;
 }
 
+/* Animations */
+
+@keyframes woopwoop {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(-2deg);
+  }
+
+  50% {
+    transform: translateY(-10px) rotate(2deg);
+  }
+}
+
+
+@keyframes woopwoopmove {
+  to {
+    background-position: 200% center;
+  }
+}
+
+@keyframes scanlines {
+  0% {
+    background-position: 0 50%;
+  }
+}
+
+@keyframes boing {
+
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
 
 :root {
 
@@ -146,7 +187,6 @@ table {
 }
 
 ::selection {
-
   text-shadow: 0px 0px 3px var(--darkerer-pink)
 }
 
@@ -202,12 +242,6 @@ crt {
   }
 }
 
-@keyframes scanlines {
-  0% {
-    background-position: 0 50%;
-  }
-}
-
 /* persistent-ui */
 persistent-ui {
   position: fixed;
@@ -358,14 +392,15 @@ home-content {
 
   boxes {
     display: flex;
-    width: 30%;
+    flex-wrap: wrap;
+    width: min(90svw, 800px);
     gap: 1rem;
 
     box {
       border-radius: 0.25rem;
       box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
       background-color: white;
-      padding: 4rem;
+      padding: 1rem;
 
       &#bigbox {
         flex: 1;
@@ -376,6 +411,43 @@ home-content {
       }
     }
   }
+
+  pronouns {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.15rem 0.55rem;
+    border-radius: 9999px;
+    background-color: var(--blue);
+    font-weight: 500;
+    font-size: 13px;
+    color: white;
+    white-space: nowrap;
+    line-height: 1.4;
+  }
+
+  darkerer-pink {
+    color: var(--darkerer-pink);
+  }
+
+  boing {
+    display: inline-block;
+    color: var(--darkerer-pink);
+    animation: boing 0.8s infinite;
+  }
+
+  shitty {
+    color: #753b00;
+  }
+
+  woopwoop span {
+    display: inline-block;
+    background: linear-gradient(90deg, var(--blue), var(--darker-pink), var(--darkerer-pink), var(--lavender), var(--light-blue), var(--light-pink), var(--pink));
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: woopwoop 1.2s ease-in-out infinite, woopwoopmove 2s linear infinite;
+  }
 }
 
 /* 404 */