1 files changed, 139 insertions, 0 deletions
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..41381a9
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,139 @@
+:root {
+    --foreground-color: hsl(355, 26%, 21%);
+    --background-color: hsl(27, 45%, 91%);
+    --decorative-color: hsl(20, 43%, 84%);
+}
+body {
+    font-family: 'Alegreya', serif;
+    color: var(--foreground-color);
+    background-color: var(--background-color);
+    background-size: 20vw;
+    background-image: url('/static/confetti-doodles.svg');
+}
+
+a {
+    color: var(--foreground-color);
+    text-decoration-style: wavy;
+    text-decoration-color: var(--decorative-color);
+    text-underline-offset: 0.25rem;
+    transition: text-decoration-color 0.3s;
+    &:hover {
+        text-decoration-color: var(--foreground-color);
+    }
+}
+
+.container {
+    width: 500px;
+    margin: 5rem auto;
+}
+
+.header {
+    @media screen and (min-width: 786px) {
+        display: flex;
+        align-items: center;
+        gap: 3rem;
+    }
+
+    .header-image {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        filter: sepia(50%);
+        transition: filter 0.3s
+    }
+
+    .header-image:hover {
+        filter: sepia(0)
+    }
+
+    .header-text {
+        display: flex;
+        flex-direction: column;
+        line-height: 2;
+
+        .header-title {
+            font-weight: 800;
+            font-size: 2rem;
+        }
+
+        .header-desc {
+            font-size: 1.25rem;
+        }
+    }
+}
+
+.badge {
+    padding: 0.35rem 0.5rem;
+    background-color: hsl(from var(--decorative-color) h s calc(l + 3));
+    border-radius: 1rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    line-height: 1;
+    text-decoration: none;
+    font-size: 95%;
+    margin: 0 0.25rem;
+    transition: background 0.3;
+    img {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+    }
+    span {
+        display: inline-block;
+    }
+    &:hover {
+        background-color: var(--decorative-color);
+    }
+}
+
+.prose-container {
+    font-size: 1.25rem;
+    line-height: 2;
+    width: 500px;
+    margin: 2rem auto;
+    &.small {
+        font-size: 1.15rem;
+        color: hsl(from var(--foreground-color) h calc(s - 10) calc(l + 30));
+    }
+}
+
+.linkbox {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+
+    text-decoration: none;
+    border: 1px dashed hsl(from var(--foreground-color) h 15% 76%);
+
+    &:hover {
+        border-style: solid;
+    }
+
+    h4 {
+        font-weight: 800;
+        font-size: 1.1rem;
+    }
+
+    p {
+        font-size: 1rem;
+    }
+
+    img {
+        filter: sepia(50%);
+        width: 60px;
+        height: 60px;
+    }
+}
+
+.linkline {
+    --gap: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+    li:not(:last-child):after {
+        margin-left: var(--gap);
+        content: "·"
+    }
+}