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.

8 files changed, 70 insertions, 38 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;
diff --git a/static/img/star_pattern.jpg b/static/img/star_pattern.jpg
new file mode 100644
index 0000000..bdcc773
--- /dev/null
+++ b/static/img/star_pattern.jpg
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 @@
               <a href="https://git.yaroslavps.com/yaroslav" title="Git server">
                 <span class="icon"><img src="/svg/icons/git.svg"/></span>
               </a>
-              <a href="/feed.xml" title="RSS feed">
-                <span class="icon"><img src="/svg/icons/rss.svg"/></span>
-              </a>
             </div>
             <h3>Navigation</h3>
             <ul class="navigation-list">
@@ -69,8 +66,12 @@
                 </ul>
               </li>
             </ul>
-            <h3>Contact</h3>
-            <p>If you want to tell me something, you can contact me by email at:</p>
+            <h3>RSS Feeds</h3>
+            <ul class="rss-list">
+                <li><a href="/weblog/feed.xml">Weblog RSS</a></li>
+                <li><a href="/food/feed.xml">Recipe book RSS</a></li>
+            </ul>
+            <h3>Email</h3>
             <a href="mailto:contact@yaroslavps.com">contact@yaroslavps.com</a>
             <h3>PGP</h3>
             <a href="https://www.yaroslavps.com/files/yaroslavpub.gpg">BD900E5D624046DC</a>
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 @@
       <a href="https://git.yaroslavps.com/yaroslav" title="Git server">
         <span class="icon"><img src="/svg/icons/git.svg"/></span>
       </a>
-      <a href="/feed.xml" title="RSS feed">
-        <span class="icon"><img src="/svg/icons/rss.svg"/></span>
-      </a>
     </div>
     <p>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.</p>
+    <h2>Getting in contact</h2>
     <p>If you want to contact me, you can do so by email at:
       <a href="mailto:contact@yaroslavps.com">contact@yaroslavps.com</a>
     </p>
     <p>Public PGP key: <a href="https://www.yaroslavps.com/files/yaroslavpub.gpg">BD900E5D624046DC</a></p>
+    <h2>RSS feeds</h2>
+    <p>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:</p>
+    <pre class="rss-links-list">
+    https://www.yaroslavps.com/weblog/feed.xml
+    https://www.yaroslavps.com/food/feed.xml
+    </pre>
   </div>
 {% 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 %}
   <div class="paginator">
     {% if paginator.previous %}
-    <a href="{{ paginator.first }}"><span class="icon"></span> First</a>
-      <a href="{{ paginator.previous }}"><span class="icon"></span> Page {{ paginator.current_index - 1 }}</a>
+    <a href="{{ paginator.first }}"><span class="icon">|←</span> First</a>
+      <a href="{{ paginator.previous }}"><span class="icon">←</span> Page {{ paginator.current_index - 1 }}</a>
     {% endif %}
     {% if paginator.next %}
-      <a href="{{ paginator.next }}">Page {{ paginator.current_index + 1 }} <span class="icon"></span></a>
-      <a href="{{ paginator.last }}">Last <span class="icon"></span></a>
+      <a href="{{ paginator.next }}">Page {{ paginator.current_index + 1 }} <span class="icon">→</span></a>
+      <a href="{{ paginator.last }}">Last <span class="icon">→|</span></a>
     {% endif %}
   </div>
   {% 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") %}
 <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>