From b4472b41214eeeacce071df41bf0f782e1f16d6d Mon Sep 17 00:00:00 2001 From: "Gabriel A. Giovanini" Date: Thu, 9 Jun 2022 20:10:19 +0200 Subject: 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 --- templates/head.html | 2 +- templates/header.html | 18 ++-- templates/index.html | 44 +++++---- templates/main.css | 263 ++++++++++++++++++++++++++++++++++++++++++++++++++ templates/post.html | 32 +++--- 5 files changed, 316 insertions(+), 43 deletions(-) create mode 100644 templates/main.css (limited to 'templates') 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 @@ Yet Another Blog 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 @@

- +

+ +

Yet Another Blog

+ + +

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 @@ - - <% include!("head.html"); %> - - -<% include!("header.html"); %> -

- A gathering of information about some things I do on my spare time. - You can find me on gitlab, twitter and linkedin. -

<%- p.title %>

- + + <% include!("head.html"); %> + + +

+ <% include!("header.html"); %> +

+ A gathering of information about some things I do on my + spare time. You can find me on gitlab, twitter and + linkedin. +

+ <% for p in &posts { %> +

+ <%- p.title %> +

+ <%- p.datetime | disp %> +

+ <% } %> +

+ 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 @@ - - <% include!("head.html"); %> - - -<% include!("header.html"); %> -

<%- title %>

Created At: <%- date %>

- <%- content %> - -

- - - + + <% include!("head.html"); %> + + +

+ <% include!("header.html"); %> +

<%- title %>

+ Created At: <%- date %> +

+ <%- content %> +

+ -- cgit v1.2.3