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.

3 files changed, 51 insertions, 25 deletions

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;