Create links page

2023-05-05 11:29:49 -07:00 · 2023-05-05 11:29:49 -07:00 · aea3cb2011
commit aea3cb2011
3 changed files with 163 additions and 0 deletions
--- a/main.css
+++ b/main.css
@ -0,0 +1,103 @@
+:root {
+    --foreground-color: #090809;
+    --background-color: #977fbb;
+    --accent-color: #8ebb78;
+    --wolf-color: #4296ba;
+    --icon-color: #fffdec;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: "Oxanium", cursive;
+    color: var(--foreground-color);
+    background-color: var(--background-color);
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem auto;
+    max-width: 40rem;
+    padding: 1.2rem;
+    gap: 1rem;
+    align-items: center;
+    text-align: center;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+#pfp {
+    picture img {
+        width: 8rem;
+        border-radius: 50%;
+        box-shadow: 0.25rem 0.25rem 0.25rem #00000040
+    }
+
+    figcaption {
+        margin-top: 0.5rem;
+        font-size: 1.2em;
+        font-weight: bold;
+    }
+}
+
+#bio {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+#socials {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    list-style: none;
+    gap: 0.4rem;
+
+    .icon {
+        height: 2rem;
+        fill: var(--icon-color);
+        filter: drop-shadow(0.25rem 0.25rem 0.25rem #00000040);
+        &:hover {
+            filter: brightness(80%) drop-shadow(0.25rem 0.25rem 0.25rem #00000060);
+        }
+    }
+}
+
+#links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    list-style: none;
+    gap: 1rem;
+
+    li {
+        width: 100%;
+        color: var(--foreground-color);
+        background-color: var(--accent-color);
+        text-align: center;
+        box-shadow: 0 0 0.5rem 0.25rem rgba(0, 0, 0, 0.125);
+        font-weight: 500;
+
+        &.wolfmetrotransit {
+            background-color: var(--wolf-color);
+        }
+
+        &:hover {
+            filter: brightness(80%);
+        }
+
+        a {
+            display: block;
+            width: 100%;
+            padding: 1rem 2rem;
+        }
+    }
+}