From 0e6723961d5d91780cb217b3ff8bb277ebcaec7c Mon Sep 17 00:00:00 2001 From: Emil Miler Date: Tue, 14 Dec 2021 20:36:55 +0100 Subject: [PATCH] New header --- sass/style.scss | 57 +++++++++++++++++++++++++++++++++----------- templates/index.html | 39 ++++++++++++++++++------------ 2 files changed, 67 insertions(+), 29 deletions(-) diff --git a/sass/style.scss b/sass/style.scss index 327e93e..a7dd716 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -23,32 +23,54 @@ url("/fonts/spectral-italic.ttf") format("truetype"); } +.wrap { + max-width: 55rem; + margin: 0 auto; + padding: 0 1rem; +} +.grid { + display: grid; + grid-template-columns: 10em auto; + grid-column-gap: 2em; + + & aside>*:first-child, + & main>*:first-child, + & main>article:first-child h2 + { padding-top: 0; margin-top: 0; } +} body { font-family: spectral, serif; text-rendering: optimizeLegibility; font-size: 18px; line-height: 1.5; - - max-width: 45em; - margin: 0 auto; - padding: 1em; - - display: grid; - grid-template-columns: 10em auto; - grid-column-gap: 2em; + margin: 0; } header { - grid-column: 1/-1; - padding: 2rem 0; - font-weight: bold; - font-size: 1.5em; + padding: 1rem 0; + margin-bottom: 5rem; + background-color: #000; + color: #fff; + line-height: 1; a { color: inherit } + + .wrap { + display: flex; + justify-content: space-between; + align-items: baseline; + } + + .title { font-size: 1.5em; } + .title:hover { text-decoration: none } + + nav { font-size: 1rem } } aside { + margin-bottom: 4rem; + span.title { display: block; margin: 2em 0 1em 0; @@ -76,6 +98,7 @@ main { margin-bottom: 5rem; article h2 a { color: inherit } + .info { border-top: 1px solid #eee; margin: 2em 0; @@ -91,6 +114,7 @@ main { li { margin-right: 1em } } } + img { max-width: 100%; box-sizing: border-box; @@ -103,6 +127,7 @@ main { text-align: center; } } + table { max-width: 100%; margin: 0 auto; @@ -110,6 +135,7 @@ main { td, th { padding: 0 1em } } + blockquote { margin: 1em 2em 1em 1.5em; @@ -118,6 +144,7 @@ main { padding-left: 1.5em; } } + p>code { background-color: #2b303b; color: #fff; @@ -125,12 +152,14 @@ main { padding: .3em .5em; border-radius: .3em; } + pre { font-size: 14px; padding: 1em; overflow: auto; border-radius: .3em; } + input.search { display: none; // Hide for non-js browsers box-sizing: border-box; @@ -149,6 +178,6 @@ a { &:hover { text-decoration: underline } } -@media screen and (max-width: 50em) { - body { grid-template-columns: auto } +@media screen and (max-width: 50rem) { + .grid { grid-template-columns: auto } } diff --git a/templates/index.html b/templates/index.html index fdb4859..57fa5c3 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,27 +3,36 @@ + {% block title %}{{ config.title }}{% endblock %}
- {{ config.title }} +
+ {{ config.title }} + +
- -
- {% block content %} - {{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }} - {% endblock %} -
+
+ +
+ {% block content %} + {{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }} + {% endblock %} +
+
{% block script %}{% endblock %}