1 files changed, 77 insertions, 0 deletions
diff --git a/static/css/blog.css b/static/css/blog.css
new file mode 100644
index 0000000..08097f0
--- /dev/null
+++ b/static/css/blog.css
@@ -0,0 +1,77 @@
+:root {
+    --blog-bg: var(--body-bg);
+    --blog-fg: var(--body-fg);
+
+    --blog-date-color: #69dbd6;
+
+    --blog-h1-fg: #bf87d0;
+    --blog-h2-fg: #bf87d0;
+    --blog-h3-fg: #ff7070;
+    --blog-h4-fg: #76d674;
+    --blog-h5-fg: #9c80f4;
+    --blog-h6-fg: #ef7b7a;
+}
+
+#site-blog-page a {
+    text-decoration: none;
+}
+
+#site-blog-page h1 { color: var(--blog-h1-fg); }
+#site-blog-page h2 { color: var(--blog-h2-fg); }
+#site-blog-page h3 { color: var(--blog-h3-fg); }
+#site-blog-page h4 { color: var(--blog-h4-fg); }
+#site-blog-page h5 { color: var(--blog-h5-fg); }
+#site-blog-page h6 { color: var(--blog-h6-fg); }
+
+#blog-list .blog-post-wrapper {
+    padding: 0.3rem 0;
+}
+
+#blog-list .blog-section-wrapper {
+    margin: 2rem 0;
+}
+
+#blog-list .blog-section {
+    background-color: var(--listitem-bg1);
+    margin: 0;
+    padding: 0.5rem 0 0 0.8rem;
+    border-radius: 1rem 1rem 0 0;
+    border-bottom: 1px dotted var(--blog-date-color);
+}
+
+#blog-list .blog-post-wrapper:nth-child(even) {
+    background-color: var(--listitem-bg2);
+}
+
+#blog-list .blog-post-wrapper:nth-child(odd) {
+    background-color: var(--listitem-bg1);
+}
+
+#blog-list .blog-post {
+    display: grid;
+    grid-template-columns: 4rem 1fr;
+    align-items: start;
+    padding-left: 0.8rem;
+}
+
+#blog-list .blog-post .date {
+    color: var(--blog-date-color);
+}
+
+#blog-list .blog-post .title {
+    color: var(--blog-fg);
+}
+
+#blog-post header h1 {
+    text-align: center;
+}
+
+#blog-post-details {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+#blog-post header hr {
+    color: var(--blog-h1-fg);
+}