From 1c4ab30eabede1ffea33e45b5e68a14201da40a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yaroslav=20de=20la=20Pe=C3=B1a=20Smirnov?=
<yps@yaroslavps.com>
Date: Sun, 11 Oct 2020 19:32:49 +0300
Subject: Smol style changes
* Corrected recipes' archive headings
* Improved rendering of footnotes
* Stylistic changes to landing page: smaller font, bigger horizontal
padding
* Background attachment no longer fixed
---
sass/css/_fonts.scss | 3 +-
sass/css/yaroslavps.scss | 211 ++++++++++++++++++++++++--------------------
templates/food_archive.html | 2 +-
3 files changed, 117 insertions(+), 99 deletions(-)
diff --git a/sass/css/_fonts.scss b/sass/css/_fonts.scss
index f2d9a6d..f40cad3 100644
--- a/sass/css/_fonts.scss
+++ b/sass/css/_fonts.scss
@@ -1,3 +1,4 @@
-$font_sans: Verdana, Geneva, sans-serif;
+$font_sans: Helvetica, Verdana, sans-serif;
$font_serif: Georgia, serif;
$font_mono: monospace;
+
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index 46d22b0..38e49cb 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -3,12 +3,11 @@
@import "fonts";
html, body {
- width: 100%;
- min-height: 100vh;
- background-color: $bg1;
- background-image: url("/img/star_pattern.jpg");
- background-attachment: fixed;
- background-size: 25%;
+ width: 100%;
+ min-height: 100vh;
+ background-color: $bg1;
+ background-image: url("/img/star_pattern.jpg");
+ background-size: 25%;
}
h1,
@@ -20,8 +19,10 @@ h6,
ul,
ol,
li,
-p {
- color: $white;
+p,
+sup,
+sub {
+ color: $white;
}
ol,
@@ -29,8 +30,8 @@ ul,
li,
a,
p {
- line-height: 1.4;
- font-family: $font_sans;
+ line-height: 1.4;
+ font-family: $font_sans;
}
h2,
@@ -43,8 +44,8 @@ h3 > a,
h4 > a,
h5 > a,
h6 > a {
- font-family: $font_serif;
- font-weight: 500;
+ font-family: $font_serif;
+ font-weight: 500;
}
h2,
@@ -52,173 +53,189 @@ h3,
h4,
h5,
h6 {
- color: $red1;
+ color: $red1;
}
a, a:visited {
- color: $blue1;
+ color: $blue1;
}
a:hover {
- color: $blue;
+ color: $blue;
}
h1 {
- color: $red;
- font-family: $font_serif;
- font-variant-caps: small-caps;
- font-weight: 500;
- font-size: 2.5em;
+ color: $red;
+ font-family: $font_serif;
+ font-variant-caps: small-caps;
+ font-weight: 500;
+ font-size: 2.5em;
+}
+
+h2 {
+ font-size: 1.6em;
+}
+
+h3 {
+ font-size: 1.3em;
}
hr {
- border-style: solid;
- border-color: $white;
- border-width: 1px 0 0 0;
+ border-style: solid;
+ border-color: $white;
+ border-width: 1px 0 0 0;
}
pre {
- padding: 1em 0;
- overflow-x: auto;
- font-family: $font_mono;
- color: $gray;
+ padding: 1em 0;
+ overflow-x: auto;
+ font-family: $font_mono;
+ color: $gray;
}
code {
- color: $gray;
- font-family: $font_mono;
+ color: $gray;
+ font-family: $font_mono;
}
span.icon {
- height: 1em;
+ height: 1em;
}
span.icon > img {
- height: 1em;
- width: 1em;
+ height: 1em;
+ width: 1em;
}
.publish-date {
- color: $gray;
- font-family: $font_sans;
- font-weight: normal;
- font-style: italic;
+ color: $gray;
+ font-family: $font_sans;
+ font-weight: normal;
+ font-style: italic;
}
h2 > span.publish-date {
- display: inline-block;
- font-size: 0.8em;
+ display: inline-block;
+ font-size: 0.8em;
}
.main-container {
- display: grid;
- grid-template-columns: minmax(0, 5fr) 2fr;
- grid-template-rows: min-content auto;
- max-width: 1180px;
- margin: 0 auto;
- min-height: 100vh;
- height: auto;
- background-color: $bg0;
+ display: grid;
+ grid-template-columns: minmax(0, 5fr) 2fr;
+ grid-template-rows: min-content auto;
+ max-width: 1180px;
+ margin: 0 auto;
+ min-height: 100vh;
+ height: auto;
+ background-color: $bg0;
}
.landing-page-container {
- grid-column-start: 1;
- grid-column-end: 3;
- padding: 2em;
- font-size: 1.3em;
+ grid-column-start: 1;
+ grid-column-end: 3;
+ padding: 2em 4em;
}
.landing-page-container > h1 {
- text-align: center;
- font-size: 3em;
+ text-align: center;
+ font-size: 3em;
}
.landing-page-container > .links-container {
- padding: 0.5em;
+ padding: 0.5em;
}
.landing-page-container > .links-container > a {
- display: inline-block;
- font-size: 1.5em;
- margin: auto 1em;
+ display: inline-block;
+ font-size: 1.5em;
+ margin: auto 1em;
}
.landing-page-container > .links-container > a > span.icon {
- font-size: 1.5em;
+ font-size: 1.5em;
}
.header-container {
- padding: 0 2em;
+ padding: 0 2em;
}
.sidebar-container {
- grid-row-start: 1;
- grid-row-end: 3;
- grid-column-start: 2;
- grid-column-end: 3;
- background-color: $bg1;
+ grid-row-start: 1;
+ grid-row-end: 3;
+ grid-column-start: 2;
+ grid-column-end: 3;
+ background-color: $bg1;
}
.sidebar-container span.icon {
- font-size: 2em;
- margin: auto 0.5em;
+ font-size: 2em;
+ margin: auto 0.5em;
}
.sticky-wrapper {
- padding: 1em 2em;
- position: sticky;
- top: 1em;
- max-height: 100vh;
+ padding: 1em 2em;
+ position: sticky;
+ top: 1em;
+ max-height: 100vh;
}
.links-container {
- text-align: center;
+ text-align: center;
}
.links-container a {
- text-decoration: none;
+ text-decoration: none;
}
.post-container {
- padding: 1em 2em;
+ padding: 1em 2em;
}
.post-container img {
- max-width: 100%;
+ max-width: 100%;
+}
+
+.footnote-definition:first-of-type {
+ border-top: 1px solid $gray;
+ padding-top: 1em;
+}
+
+.footnote-definition p {
+ display: inline-block;
}
.paginator {
- padding: 2em;
- text-align: center;
+ padding: 2em;
+ text-align: center;
}
.paginator a {
- display: inline-block;
- padding: 0.5em;
- background-color: $blue1;
- color: $bg0;
- text-decoration: none;
+ display: inline-block;
+ padding: 0.5em;
+ background-color: $blue1;
+ color: $bg0;
+ text-decoration: none;
}
.paginator a:hover {
- background-color: $blue;
- color: $white;
+ background-color: $blue;
+ color: $white;
}
@media (max-width: 768px){
- .landing-page-container {
- font-size: 1em;
- }
-
- .header-container,
- .content-container,
- .sidebar-container {
- grid-column-start: 1;
- grid-column-end: 3;
- }
-
- .sidebar-container {
- grid-row-start: auto;
- grid-row-end: auto;
- }
+ .landing-page-container {
+ font-size: 1em;
+ }
+
+ .header-container,
+ .content-container,
+ .sidebar-container {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ }
+
+ .sidebar-container {
+ grid-row-start: auto;
+ grid-row-end: auto;
+ }
}
diff --git a/templates/food_archive.html b/templates/food_archive.html
index bd709e2..b298815 100644
--- a/templates/food_archive.html
+++ b/templates/food_archive.html
@@ -9,7 +9,7 @@ Recipe archive - Yaroslav's recipe book
{% set section = get_section(path="food/_index.md") %}
<div class="post-container">
{% for year, posts in section.pages | group_by(attribute="year") %}
- <h3>{{ year }}</h3>
+ <h2>{{ year }}</h2>
<ul>
{% for post in posts %}
<li><span class="publish-date">{{ post.date | date }}</span> - <a href="{{ post.permalink }}">{{ post.title }}</a></li>
--
cgit v1.2.3