From ec29bebbda2a278e78da1a0f91bd7a8e100d5dd7 Mon Sep 17 00:00:00 2001 From: Yaroslav Date: Fri, 2 Oct 2020 02:09:59 +0300 Subject: Style changes Mainly changes to the color palette of the site, but also added a background image and increased the maximum width of the main container. Also added separate links for the RSS feeds of the weblog and recipe book. --- sass/css/_colors.scss | 11 +++++--- sass/css/_fonts.scss | 7 +---- sass/css/yaroslavps.scss | 58 ++++++++++++++++++++++++++++++------------ static/img/star_pattern.jpg | Bin 0 -> 24283 bytes templates/base.html | 11 ++++---- templates/index.html | 11 +++++--- templates/weblog.html | 8 +++--- templates/weblog_archive.html | 2 +- 8 files changed, 70 insertions(+), 38 deletions(-) create mode 100644 static/img/star_pattern.jpg diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss index a24f933..6ce5373 100644 --- a/sass/css/_colors.scss +++ b/sass/css/_colors.scss @@ -1,7 +1,12 @@ $bg0: #000000; -$bg1: #1b1e25; +$bg1: #0a0a0f; $white: #e5e9f0; $gray: #a1a6b2; -$magenta: #9c6992; +$red: #b73030; +$red1: #c45c5c; +$yellow: #b2872f; +$blue: #3f6e90; +$blue1: #63a9cc; +$green: #7ea95a; $cyan: #7fac96; -$dark_cyan: #5b8277; +$cyan1: #5b8277; diff --git a/sass/css/_fonts.scss b/sass/css/_fonts.scss index 686bc1b..f2d9a6d 100644 --- a/sass/css/_fonts.scss +++ b/sass/css/_fonts.scss @@ -1,8 +1,3 @@ -@font-face { - font-family: "IBM Plex Mono"; - src: url("/fonts/IBMPlexMono-Regular.ttf"); -} - $font_sans: Verdana, Geneva, sans-serif; $font_serif: Georgia, serif; -$font_mono: "IBM Plex Mono", monospace; +$font_mono: monospace; diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss index 93d87f9..46d22b0 100644 --- a/sass/css/yaroslavps.scss +++ b/sass/css/yaroslavps.scss @@ -6,6 +6,9 @@ html, body { width: 100%; min-height: 100vh; background-color: $bg1; + background-image: url("/img/star_pattern.jpg"); + background-attachment: fixed; + background-size: 25%; } h1, @@ -30,29 +33,42 @@ p { font-family: $font_sans; } -a, a:visited { - color: $cyan; - text-decoration: none; -} - -a:hover { - color: $dark_cyan; -} - -h1, h2, h3, h4, h5, h6, -h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font-family: $font_serif; - font-weight: normal; + font-weight: 500; +} + +h2, +h3, +h4, +h5, +h6 { + color: $red1; +} + +a, a:visited { + color: $blue1; +} + +a:hover { + color: $blue; +} + +h1 { + color: $red; + font-family: $font_serif; + font-variant-caps: small-caps; + font-weight: 500; + font-size: 2.5em; } hr { @@ -65,6 +81,7 @@ pre { padding: 1em 0; overflow-x: auto; font-family: $font_mono; + color: $gray; } code { @@ -97,7 +114,7 @@ h2 > span.publish-date { display: grid; grid-template-columns: minmax(0, 5fr) 2fr; grid-template-rows: min-content auto; - max-width: 1080px; + max-width: 1180px; margin: 0 auto; min-height: 100vh; height: auto; @@ -139,6 +156,7 @@ h2 > span.publish-date { grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; + background-color: $bg1; } .sidebar-container span.icon { @@ -147,15 +165,20 @@ h2 > span.publish-date { } .sticky-wrapper { - padding: 1em; + padding: 1em 2em; position: sticky; top: 1em; + max-height: 100vh; } .links-container { text-align: center; } +.links-container a { + text-decoration: none; +} + .post-container { padding: 1em 2em; } @@ -172,12 +195,13 @@ h2 > span.publish-date { .paginator a { display: inline-block; padding: 0.5em; - background-color: $cyan; + background-color: $blue1; color: $bg0; + text-decoration: none; } .paginator a:hover { - background-color: $dark_cyan; + background-color: $blue; color: $white; } @@ -185,12 +209,14 @@ h2 > span.publish-date { .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/static/img/star_pattern.jpg b/static/img/star_pattern.jpg new file mode 100644 index 0000000..bdcc773 Binary files /dev/null and b/static/img/star_pattern.jpg differ diff --git a/templates/base.html b/templates/base.html index c64b27d..f341e32 100644 --- a/templates/base.html +++ b/templates/base.html @@ -51,9 +51,6 @@ - - -

Navigation

-

Contact

-

If you want to tell me something, you can contact me by email at:

+

RSS Feeds

+ +

Email

contact@yaroslavps.com

PGP

BD900E5D624046DC diff --git a/templates/index.html b/templates/index.html index a9ef8c2..4dfd843 100644 --- a/templates/index.html +++ b/templates/index.html @@ -13,17 +13,22 @@ - - -

Welcome, my name is Yaroslav de la Peña Smirnov. I keep this site to sometimes write about what I do or think on my weblog, or to remind myself of how to do certain things. You can take a look around, maybe you'll find something interesting or useful.

+

Getting in contact

If you want to contact me, you can do so by email at: contact@yaroslavps.com

Public PGP key: BD900E5D624046DC

+

RSS feeds

+

If you are interested in following what I may publish here (however often it + may be), you can add these RSS/Atom urls to your favorite RSS reader:

+ 
+    https://www.yaroslavps.com/weblog/feed.xml
+    https://www.yaroslavps.com/food/feed.xml
+
{% endblock %} diff --git a/templates/weblog.html b/templates/weblog.html index 06673ee..253f79e 100644 --- a/templates/weblog.html +++ b/templates/weblog.html @@ -35,12 +35,12 @@ {% if paginator.number_pagers > 1 %}
{% if paginator.previous %} - First - Page {{ paginator.current_index - 1 }} + |← First + ← Page {{ paginator.current_index - 1 }} {% endif %} {% if paginator.next %} - Page {{ paginator.current_index + 1 }} - Last + Page {{ paginator.current_index + 1 }} → + Last →| {% endif %}
{% endif %} diff --git a/templates/weblog_archive.html b/templates/weblog_archive.html index b06bdb2..cd507ba 100644 --- a/templates/weblog_archive.html +++ b/templates/weblog_archive.html @@ -9,7 +9,7 @@ Weblog archive - Yaroslav's weblog {% set section = get_section(path="weblog/_index.md") %}
{% for year, posts in section.pages | group_by(attribute="year") %} -

{{ year }}

+

{{ year }}