Merge pull request #750 from alexwlchan/tidy-up-css

Continue tidying up the Sass files

src/_includes/nav.html

@@ -1,13 +1,11 @@
 <nav>
-  <div id="nav_inner">
-    <h1><a href="/" aria-label="alex w l chan" aria-braillelabel="alexwlchan">alexwlchan</a></h1>
+  <h1><a href="/">alexwlchan</a></h1>
 
-    <ul class="dot_list">
-      <li><a href="/">about</a></li>
-      <li><a href="/writing/">writing</a></li>
-      <li><a href="/projects/">projects</a></li>
-      <li><a href="/contact/">contact</a></li>
-      <li><a href="/atom.xml">rss</a></li>
-    </ul>
-  </div>
+  <ul class="dot_list">
+    <li><a href="/">about</a></li>
+    <li><a href="/writing/">writing</a></li>
+    <li><a href="/projects/">projects</a></li>
+    <li><a href="/contact/">contact</a></li>
+    <li><a href="/atom.xml">rss</a></li>
+  </ul>
 </nav>

src/_includes/tweet.html

@@ -1,3 +1,7 @@
+<style type="x-text/scss">
+  @import "components/tweets.scss";
+</style>
+
 {% assign tweet_id = tweet_data["id"] %}
 {% assign name = tweet_data["user"]["name"] %}
 {% assign screen_name = tweet_data["user"]["screen_name"] %}

src/_plugins/filter_inline_style.rb

@@ -39,7 +39,6 @@ def self.get_inline_styles(html, site)
         converter = site.find_converter_instance(Jekyll::Converters::Scss)
         css = converter.convert(<<~SCSS
           @import "mixins.scss";
-          @import "_settings.scss";
           @import "variables.scss";
 
           #{style.text}

src/_scss/_main.scss

@@ -1,8 +1,6 @@
 @use "sass:math";
 
 @import "variables.scss";
-
-@import "_settings.scss";
 @import "mixins.scss";
 
 h1, h2,
@@ -46,28 +44,3 @@ a.download {
     background: var(--link-hover-background) !important;
   }
 }
-
-pre, blockquote {
-  border-color:     var(--block-border-color);
-  background-color: var(--block-background-color);
-}
-
-nav {
-  background: var(--nav-background-url) var(--primary-color-light);
-  background-size: auto 100%;
-}
-
-footer {
-  background: var(--primary-color-light);
-}
-
-@media print {
-  nav {
-    background: none;
-    border-bottom: var(--border-width) solid var(--base-color);
-  }
-
-  #nav_inner {
-    color: var(--base-color);
-  }
-}

src/_scss/base/code.scss

@@ -13,14 +13,6 @@ code {
   font-size: calc(1em * var(--code-scaling-factor));
 }
 
-// Disable selecting the $ or the following space in ``console`` code blocks.
-// See https://alexwlchan.net/2021/10/console-copying/
-.language-console {
-  .gp, .gp + .w  {
-    @include disable_select();
-  }
-}
-
 pre {
   padding:
     calc(2 * var(--default-padding) / 3)

src/_scss/base/footer.scss

@@ -1,6 +1,8 @@
 footer {
   padding-top:    15px;
   padding-bottom: 15px;
+
+  background: var(--primary-color-light);
 }
 
 #footer_inner {

src/_scss/base/layout.scss

@@ -19,23 +19,19 @@ body {
   }
 }
 
-main, #footer_inner, #nav_inner, #editing-toolbar_inner {
-  max-width: var(--max-width);
+main, #footer_inner, nav > *, #editing-toolbar_inner {
+  @include centred(var(--max-width));
+
   padding-left:  calc(var(--default-padding) + env(safe-area-inset-left));
   padding-right: calc(var(--default-padding) + env(safe-area-inset-right));
 }
 
-#nav_inner {
-  padding-top: calc(1px + env(safe-area-inset-top));
-  padding-bottom: 1px;
-}
-
 #footer_inner {
   padding-top: 1px;
   padding-bottom: calc(1px + env(safe-area-inset-bottom));
 }
 
-img, video, svg, iframe, figure, article, main, #footer_inner, #nav_inner, #editing-toolbar_inner {
+img, video, svg, iframe, figure, article {
   margin-left: auto;
   margin-right: auto;
 }
@@ -48,7 +44,12 @@ figcaption {
   margin-top: 8px;
 }
 
-pre, blockquote, img.screenshot, a.download {
+pre, blockquote {
+  border: var(--border-width) var(--border-style) var(--block-border-color);
+  background-color: var(--block-background-color);
+}
+
+img.screenshot, a.download {
   border-radius: var(--border-radius);
   border-style:  var(--border-style);
   border-width:  var(--border-width);
@@ -84,10 +85,8 @@ article, main {
   }
 }
 
-
-
 img.screenshot {
-  border-color: #f0f0f0;
+  border-color: var(--border-width) var(--border-style) var(--screenshot-border-color);
 }
 
 .post_cards .card {
@@ -104,10 +103,6 @@ img.screenshot {
     background-image: url('/theme/black-waves-transparent.png');
   }
 
-  img.screenshot {
-    border-color: #3f3f3f;
-  }
-
   .post_cards .card {
     background: #0d0d0d;
   }

src/_scss/base/text.scss

@@ -89,7 +89,7 @@ sup {
   border: 0 !important;
 }
 
-#footer_inner, #nav_inner {
+#footer_inner {
   color: white;
 
   a, a:visited {

src/_scss/components/nav.scss

@@ -0,0 +1,32 @@
+nav {
+  background: var(--nav-background-url) var(--primary-color-light);
+  background-size: auto 100%;
+
+  color: white;
+
+  a, a:visited {
+    @include link_styles(white, 0.5);
+  }
+
+  h1 {
+    padding-top: calc(1px + env(safe-area-inset-top));
+    margin-bottom: -5px;
+    font-size: 1.7em;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  ul {
+    padding: 0;
+    padding-bottom: 1px;
+    margin-bottom:  10px;
+  }
+
+  @media print {
+    background: none;
+    border-bottom: var(--border-width) solid var(--primary-color-light);
+    color: var(--primary-color-light);
+  }
+}

src/_scss/base/pygments.scss → src/_scss/components/syntax_highlighting.scss

@@ -186,3 +186,11 @@ pre {
     }
   }
 }
+
+// Disable selecting the $ or the following space in ``console`` code blocks.
+// See https://alexwlchan.net/2021/10/console-copying/
+.language-console {
+  .gp, .gp + .w  {
+    @include disable_select();
+  }
+}

src/_scss/variables.scss

@@ -41,6 +41,8 @@ $accent-grey-dark:  #999;
 
   --accent-grey:            #{$accent-grey-light};
   --accent-grey-link-hover: #{rgba($accent-grey-light, 0.2)};
+
+  --screenshot-border-color: #f0f0f0;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -49,6 +51,8 @@ $accent-grey-dark:  #999;
 
     --accent-grey:            #{$accent-grey-dark};
     --accent-grey-link-hover: #{rgba($accent-grey-dark, 0.2)};
+
+    --screenshot-border-color: #3f3f3f;
   }
 }
 

src/static/style.scss

@@ -16,12 +16,11 @@
 @import "base/footer.scss";
 @import "base/images_wide.scss";
 @import "base/latex.scss";
-@import "base/nav.scss";
 @import "base/post_cards.scss";
-@import "base/pygments.scss";
-@import "base/tweets.scss";
 
+@import "components/nav.scss";
 @import "components/pretty_hr.scss";
+@import "components/syntax_highlighting.scss";
 
 $primary-color-light: #d01c11;
 $primary-color-dark:  #ff4242;