home: move css files to style/

2026-07-23 12:52:50 +01:00
parent 3a0ee27b6f
commit a8521ad139
4 changed files with 4 additions and 4 deletions
@@ -0,0 +1,44 @@
+/* CSS reset (https://www.joshwcomeau.com/css/custom-css-reset) */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+*:not(dialog) {
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+
+#root, #__next {
+  isolation: isolate;
+}
+/* CSS reset */
@@ -0,0 +1,83 @@
+:root {
+    font-family: Inter, sans-serif;
+    font-feature-settings: 'liga' 1, 'calt' 1;
+    @supports (font-variation-settings: normal) {
+        font-family: InterVariable, sans-serif;
+    }
+}
+
+html {
+    background: url("assets/clouds.avif"), linear-gradient(180deg, hwb(230 20% 0%) 0%, hwb(230 90% 0%) 110%);
+    background-repeat: no-repeat;
+    background-size: cover, cover;
+}
+
+body {
+    height: 100dvh;
+    padding: 20px;
+}
+
+p, a, li, ul, h2 {
+    color: white;
+    font-style: italic;
+    font-size: 20px;
+    @media (max-width: 1024px) {
+        font-size: 40px;
+    }
+}
+
+ul {
+    list-style-type: "» ";
+    padding-left: 1em;
+}
+
+/* tailwind lite */
+:root { --space: 4px; }
+
+.flex { display: flex; width: fit-content; }
+.flex-col { flex-direction: column; }
+
+.gap-2 { gap: calc(var(--space) * 2); }
+.gap-4 { gap: calc(var(--space) * 4); }
+.gap-8 { gap: calc(var(--space) * 8); }
+
+.mt-4 { margin-top: calc(var(--space) * 4); }
+
+.self-start { align-self: flex-start; }
+
+.font-light { font-weight: 300; }
+.font-normal { font-weight: 400; }
+.font-heavy { font-weight: 500; }
+
+.max-w-md {
+    max-width: calc(var(--space) * 160);
+    @media (max-width: 1024px) {
+        max-width: calc(var(--space) * 320);
+    }
+}
+/* tailwind lite */
+
+.big {
+    font-size: 24px;
+    @media (max-width: 1024px) {
+        font-size: 48px;
+    }
+}
+
+.pop {
+    transform-origin: left center;
+    transition: transform 0.1s ease;
+}
+
+.pop:hover {
+    transform: scale(1.25);
+}
+
+.logo {
+    object-fit: contain;
+    align-self: flex-start;
+    max-height: 64px;
+    @media (max-width: 1024px) {
+        max-height: 128px;
+    }
+}