From 1c4ab30eabede1ffea33e45b5e68a14201da40a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yaroslav=20de=20la=20Pe=C3=B1a=20Smirnov?= 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/yaroslavps.scss | 211 +++++++++++++++++++++++++---------------------- 1 file changed, 114 insertions(+), 97 deletions(-) (limited to 'sass/css/yaroslavps.scss') 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; + } } -- cgit v1.2.3