Post, Project and index pages

Example posts

src/styles/_main.scss

@@ -0,0 +1,29 @@
+main {
+    margin: -500px auto 0;
+    padding: 32px;
+
+    width: 100%;
+    max-width: 800px;
+
+    flex-grow: 1;
+
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+    background-color: $dark;
+
+    box-shadow: 0 8px 8px rgba(#000, 0.3);
+    animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
+
+    > h1 {
+        padding-bottom: 8px;
+    }
+}
+
+@keyframes mainSlide {
+    0% {
+        transform: translateY(100px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}

src/styles/_pill.scss

@@ -0,0 +1,31 @@
+.pill {
+    padding: 0 10px;
+
+    width: max-content;
+    height: 30px;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 13px;
+
+    border-radius: 99999px;
+    border: 2px solid rgba($light, 0.04);
+    background-color: $dark;
+    color: $light;
+
+    list-style: none;
+
+    > a {
+        //text-decoration: none;
+        color: inherit;
+    }
+}
+
+.pill.large {
+    padding: 0 16px;
+    height: 40px;
+    font-size: 16px;
+}

src/styles/_reset.scss

@@ -0,0 +1,23 @@
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+html {
+    min-height: 100vh;
+    font-size: 100%;
+}
+
+body {
+    padding: 0 16px;
+
+    min-height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: #261f1b;
+    color: $light
+}

src/styles/styles.scss

@@ -0,0 +1,5 @@
+@import "vars";
+@import "reset";
+
+@import "pill";
+@import "main";