basic setup

styles/main.scss

@@ -0,0 +1,111 @@
+@use 'colors' as *;
+@use 'themes' as *;
+@use 'easings' as *;
+@use 'reset' as *;
+@use 'layers' as *;
+@use 'functions' as *;
+@use 'utils' as *;
+@use 'fonts' as *;
+@use 'font-style' as *;
+@use 'layout' as *;
+@use 'scroll' as *;
+@use 'transitions' as *;
+
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+    background: var(--white);
+    color: var(--black);
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+}
+
+// Type
+.h1,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @include h1;
+}
+.p,
+p,
+a,
+button,
+input,
+pre {
+    @include p;
+}
+
+.entry {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+    p {
+        min-height: 1px;
+    }
+    a {
+        text-decoration: underline;
+    }
+    & > * {
+        margin-bottom: 1em;
+        margin-top: 1em;
+    }
+    & > *:first-child {
+        margin-top: 0;
+    }
+    & > *:last-child {
+        margin-bottom: 0;
+    }
+
+    ul,
+    ol {
+        li {
+            margin-bottom: 1em;
+            width: desktop-vw(577px);
+        }
+    }
+    ul {
+        list-style: disc;
+        padding-left: 1em;
+    }
+}
+
+#app {
+    min-height: 100vh;
+}
+
+@keyframes blink {
+    5% {
+        opacity: 0;
+    }
+    40% {
+        opacity: 0;
+    }
+    60% {
+        opacity: 1;
+    }
+    95% {
+        opacity: 1;
+    }
+}
+
+@keyframes bonk {
+    0% {
+        transform: rotate(calc(var(--bonk-angle) * -1));
+    }
+    50% {
+        transform: rotate(var(--bonk-angle));
+    }
+}