home: update website

home/style.css

@@ -1,46 +1,63 @@
+:root {
+    font-family: Inter, sans-serif;
+    font-feature-settings: 'liga' 1, 'calt' 1;
+    @supports (font-variation-settings: normal) {
+        font-family: InterVariable, sans-serif;
+    }
+}
+
 body {
     height: 100vh;
-    background: url("clouds_test.png"), linear-gradient(180deg, hwb(224 30% 0%) 0%, hwb(226 90% 0%) 100%);
+    background: url("assets/clouds.png"), linear-gradient(180deg, hwb(230 20% 0%) 0%, hwb(230 90% 0%) 110%);
     background-repeat: no-repeat;
     background-size: cover, cover;
     padding: 20px;
 }
 
 * {
-    font-family: Inter, sans-serif;
-    color: white
-}
-
-p, a {
-    font-size: 20px;
-    @media (max-width: 1024px) {
-        font-size: 30px
-    }
     font-style: italic;
-}
-
-p {
+    color: white;
     font-weight: 300;
 }
 
-a {
+.heavy {
     font-weight: 400;
 }
 
-.flex {
-    display: flex;
-    width: fit-content;
+.heavier {
+    font-weight: 500;
 }
 
-.flex-col {
-    flex-direction: column;
+p, a, li, ul {
+    font-size: 20px;
+    @media (max-width: 1024px) {
+        font-size: 30px;
+    }
 }
 
-:root { --space: 4px }
-.gap-1 { gap: calc(var(--space) * 1); }
+.big {
+    font-size: 24px;
+    @media (max-width: 1024px) {
+        font-size: 36px;
+    }
+}
+
+/* tailwind lite */
+:root { --space: 4px; }
+
+.flex { display: flex; width: fit-content; }
+.flex-col { flex-direction: column; }
+
 .gap-2 { gap: calc(var(--space) * 2); }
-.gap-3 { gap: calc(var(--space) * 3); }
 .gap-4 { gap: calc(var(--space) * 4); }
+.gap-8 { gap: calc(var(--space) * 8); }
+
+.mt-4 { margin-top: calc(var(--space) * 4); }
+
+.max-w-160 { max-width: calc(var(--space) * 160) }
+
+.self-start { align-self: flex-start; }
+/* tailwind lite */
 
 .pop {
     display: inline-block;
@@ -51,3 +68,17 @@ a {
 .pop:hover {
     transform: scale(1.25);
 }
+
+.img {
+    object-fit: contain;
+    align-self: flex-start;
+    max-height: 64px;
+    @media (max-width: 1024px) {
+        max-height: 96px;
+    }
+}
+
+ul {
+    list-style-type: "» ";
+    padding-left: 1.2em;
+}