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

1 files changed, 263 insertions, 0 deletions

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;
+    }
+}
+