feat: Move from pico to custom css

Use css from my current blog, which is a lot smaller. The text itself
looks good but the code still breaks the page.

Metrics:

- hyper: 16.37 KB / 16.47 KB transferred
- 1 request

5 files changed, 316 insertions, 43 deletions

diff --git a/templates/head.html b/templates/head.html
index c054157..3492eda 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -3,5 +3,5 @@
 <title>Yet Another Blog</title>
 <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,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">
 <style>
-    <% include!("pico.min.css"); %>
+<% include!("main.css"); %>
 </style>
diff --git a/templates/header.html b/templates/header.html
index 1340aa1..c830273 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,10 +1,12 @@
 <header class="container">
-    <nav class="container-fluid">
-        <ul>
-            <li><h2><a href="/">Yet Another Blog</a></h2></li>
-        </ul>
-        <ul>
-            <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li>
-        </ul>
-    </nav>
+    <div class="title-wrapper">
+        <a href="/">
+            <h2 class="title">Yet Another Blog</h2>
+        </a>
+        <nav class="container-fluid">
+            <ul>
+                <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li>
+            </ul>
+        </nav>
+    </div>
 </header>
diff --git a/templates/index.html b/templates/index.html
index 006643a..f6f3ca9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,22 +1,28 @@
 <!DOCTYPE html>
 <html data-theme="light" lang="en">
-<head>
-    <% include!("head.html"); %>
-</head>
-<body>
-<% include!("header.html"); %>
-<main class="container">
-    <section>
-            A gathering of information about some things I do on my spare time.
-            You can find me on gitlab, twitter and linkedin.
-    </section>
-    <section>
-        <ul>
-        <% for p in &posts { %>
-            <li><a href="/posts/<%- p.file %>"><%- p.title %></a></li>
-        <% } %>
-        </ul>
-    </section>
-</main>
-</body>
+    <head>
+        <% include!("head.html"); %>
+    </head>
+    <body>
+        <div class="layout">
+            <% include!("header.html"); %>
+            <main>
+                <div class="slim-description">
+                    A gathering of information about some things I do on my
+                    spare time. You can find me on gitlab, twitter and
+                    linkedin.
+                </div>
+                <div class="blog-list">
+                    <% for p in &posts { %>
+                    <article class="list-item">
+                        <div class="post-title">
+                            <a href="/posts/<%- p.file %>"><%- p.title %></a>
+                        </div>
+                        <span classname="data-label"><%- p.datetime | disp %></span>
+                    </article>
+                    <% } %>
+                </div>
+            </main>
+        </div>
+    </body>
 </html>
diff --git a/templates/main.css b/templates/main.css
new file mode 100644
index 0000000..f056a50
--- /dev/null
+++ b/templates/main.css
@@ -0,0 +1,263 @@
+* {
+    box-sizing: border-box;
+    font-family: dejavu sans;
+}
+body {
+    margin: 0;
+}
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 400;
+}
+code[class*="language-"],
+nav,
+.blog-list {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1.025rem;
+}
+code {
+    font-family: dejavu sans mono;
+}
+tags {
+    font-family: dejavu sans mono;
+}
+.list-item {
+    font-family: dejavu sans mono;
+}
+html {
+    font-size: 16px;
+}
+body {
+    line-height: 1.8em;
+    color: #333;
+    background: #fefefe;
+}
+.post-title,
+.date-label {
+    letter-spacing: 0.025rem;
+}
+p,
+sub,
+nav {
+    letter-spacing: 0.05rem;
+}
+.title-wrapper,
+.title {
+    letter-spacing: 0.075rem;
+}
+a {
+    text-decoration: none;
+}
+.brand-icon {
+    color: #f93a3a;
+    display: inline-flex;
+    border-bottom: 1px solid;
+}
+.brand-icon:hover {
+    border-bottom: none;
+}
+.layout {
+    max-width: 48rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 2.625rem 1.3125rem;
+}
+.layout .title-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+.layout .title {
+    color: #333;
+    text-align: left;
+    display: block;
+    font-size: 1.875rem;
+    margin: 0;
+}
+nav {
+    font-size: 1.025rem;
+    text-align: center;
+}
+nav ul {
+    display: block;
+    padding: 0;
+}
+nav ul li {
+    display: inline;
+    list-style-type: none;
+}
+nav ul li a {
+    color: #333;
+    display: inline-block;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #fefefe;
+}
+nav ul li a:hover {
+    color: #f93a3a;
+}
+nav ul li:not(:last-child) {
+    padding: 0 1rem 0 0;
+}
+.slim-description {
+    margin-bottom: calc(16px * 2);
+    color: #666;
+}
+.blog-post-content a {
+    color: #f93a3a;
+    text-decoration: none;
+    border-bottom: 1px solid;
+}
+.blog-post-content a:hover {
+    border-bottom: none;
+}
+.blog-list .list-item {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: baseline;
+    padding: 0.5rem 0.5rem 0.5rem 0;
+}
+.blog-list .post-title a {
+    text-decoration: none;
+    color: #333;
+    border-bottom: none;
+}
+.blog-list .post-title a:hover {
+    border-bottom: 1px solid;
+}
+.blog-list .date-label {
+    font-size: 80%;
+    margin-right: 1rem;
+}
+.content .title {
+    font-size: 1.275rem;
+}
+.blog-post-content a {
+    color: #f93a3a;
+    text-decoration: none;
+    border-bottom: 1px solid;
+}
+.blog-post-content a:hover {
+    border-bottom: none;
+}
+.blog-post-content img {
+    width: 100%;
+}
+.post-image {
+    margin-left: calc(-1.3125rem);
+    margin-right: calc(-1.3125rem);
+}
+.post-image img {
+    width: 100%;
+}
+.tags {
+    font-size: 0.9em;
+    text-align: left;
+}
+.tags ul {
+    display: block;
+    padding: 0;
+}
+.tags ul li {
+    display: inline;
+    list-style-type: none;
+    text-align: center;
+}
+.tags ul li a {
+    border: 1px solid #f93a3a;
+    border-radius: 3px;
+    background: #f93a3a;
+    padding: 0.2em;
+    color: #fff;
+    margin: 10px 2px 10px 0;
+    line-height: 1em;
+}
+.tags ul li a:hover {
+    background: #fefefe;
+    color: #f93a3a;
+}
+.tags ul li:not(:last-child) {
+    padding: 0 0.1rem 0 0;
+}
+.highlight {
+    margin-left: calc(-1.3125rem);
+    margin-right: calc(-1.3125rem);
+}
+.highlight pre {
+    line-height: 1.2rem;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: auto;
+    padding: 1.3125rem;
+    margin: 0;
+}
+.highlight pre code[class*="language-"] {
+    font-size: 0.9em;
+}
+.highlight pre .token.comment {
+    font-style: italic;
+}
+blockquote {
+    background: #f9f9f9;
+    border-left: 5px solid #333;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+    quotes: "“" "”" "‘" "’";
+}
+blockquote:before {
+    color: #333;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+}
+blockquote p {
+    display: inline;
+}
+time {
+    font-size: 80%;
+    margin-right: 1rem;
+}
+@media only screen and (min-width: 600px) {
+    .layout .title-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: row;
+    }
+    .layout .title {
+        margin-block-start: 0.83em;
+        margin-block-end: 0.83em;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+    }
+    .blog-list .list-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: unset;
+        padding: 0;
+        margin-bottom: 0.5rem;
+    }
+    .blog-list .date-label {
+        font-size: 100%;
+        margin-right: 0;
+    }
+    .project-board {
+        grid-template-columns: 1fr 1fr;
+    }
+    .highlight {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .post-image {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
diff --git a/templates/post.html b/templates/post.html
index 7e0a909..99a7852 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html data-theme="light" lang="en">
-<head>
-    <% include!("head.html"); %>
-</head>
-<body>
-<% include!("header.html"); %>
-<main class="container">
-    <h2><%- title %></h2>
-    <h5>Created At: <%- date %></h2>
-    <%- content %>
-    </section>
-</main>
-</body>
-
-<script>
-</script>
+    <head>
+        <% include!("head.html"); %>
+    </head>
+    <body>
+        <div class="layout">
+            <% include!("header.html"); %>
+            <main>
+                <article>
+                    <h1><%- title %></h1>
+                    <time>Created At: <%- date %></time>
+                    <div class="blog-post-content">
+                        <%- content %>
+                    </div>
+                </article>
+            </main>
+        </div>
+    </body>
 </html>