diff options
| -rw-r--r-- | sass/css/_fonts.scss | 3 | ||||
| -rw-r--r-- | sass/css/yaroslavps.scss | 211 | ||||
| -rw-r--r-- | 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> |