Theme refresh

themes/devroom-2020/assets/scss/devroom.scss

@@ -1,35 +1,48 @@
-@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:wght@400;700&display=swap');
-@import "./nord.scss";
 
-$h1_font_size: 1.6rem;
+$h1_font_size: 2.4rem;
-$h2_font_size: 1.2rem;
+$h2_font_size: 2rem;
-$font_size: 0.96rem;
+$header_size: 1.4rem;
-$line-height: 1.5rem;
+$font_size: 1.1rem;
+$code_font_size: 0.96rem;
+$code_line_height: 1.4rem;
+$line-height: 1.6rem;
 
-$backdrop: darken($nord0, 10%);
+$background: #FBFBF2;
-$background: darken($nord0, 10%);
+$backdrop: $background;
-$text: $nord5;
+$text: #272932;
-$links: lighten($nord10, 17%);
+$links: #0081AF;
-$footer: $nord5;
+$footer: $text;
 $meta: $text;
-$header: $nord10;
+$header: $text;
-$highlight: darken($nord14, 25%);
+$highlight: $links;
+$code_background: #fff;
+$code_border_color: #9A8873;
+$code: #A4508B;
 
 html, body {
     background-color: $backdrop;
     color: $text;
-    font-family: 'IBM Plex Mono', monospace;
+    font-family: 'PT Serif', serif;
     font-size: $font_size;
     line-height: $line-height;
 }
 
+code, pre {
+    font-family: 'IBM Plex Mono', monospace;
+}
+
 .important {
-  background-color: $highlight;
-  color: $background;
   width: 100%;
   display: block;
-  padding: 1rem;
+  font-style: italic;
-  text-align: center;
+}
+
+.important::before {
+    content: '\f0a4';
+    font-family: "Font Awesome 6 Free";
+    font-size: 1rem;
+    margin-right: 0.7rem;
 }
 
 .container {
@@ -48,38 +61,21 @@ nav a {
 }
 
 h1, h2, h3, h4, h5 {
-    font-size: $font_size;
+    font-family: 'Rubik', sans-serif;
+    font-size: $header_size;
     font-weight: bold;
     color: $header;
     margin: 0.67rem 0;
-    text-transform: uppercase;
 }
 
 h1 {
     font-size: $h1_font_size;
     color: $text;
-    &::before {
+    margin-bottom: 1.6rem;
-        content: "# ";
-    }
 }
 
 h2 {
     font-size: $h2_font_size;
-    &::before {
-        content: "## "
-    }
-}
-
-h3::before {
-    content: "### "
-}
-
-h4::before {
-    content: "#### "
-}
-
-h5::before {
-    content: "##### "
 }
 
 b,
@@ -87,8 +83,9 @@ strong {
   font-weight: bold;
 }
 
-blockquote *::before {
+blockquote {
-    content: "> ";
+    border-left: 5px solid $code_border_color;
+    padding-left: 1rem;
 }
 
 img {
@@ -100,24 +97,31 @@ ol {
 }
 
 ul {
-    list-style-type: "* ";
     list-style-position: outside;
 }
 
 span.begin-task-list + ul {
     list-style-type: none;
-    padding-left: 20px;
+    padding-left: 1rem;
     
     input[type="checkbox"] {
       appearance: none;
     }
 
     input[type="checkbox"]::before {
-      content: "[ ]";
+        content: '\f111';
+        font-family: "Font Awesome 6 Free";
+        font-size: 1rem;
+        color: rgba($links, 0.3);
+        margin-right: 0.4rem;
     }
 
     input[type="checkbox"]:checked::before {
-      content: "[✓]";
+        content: '\f058';
+        font-family: "Font Awesome 6 Free";
+        font-size: 1rem;
+        color: $links;
+        margin-right: 0.4rem;
     }
 }
 
@@ -125,22 +129,9 @@ header {
     margin-bottom: 1.5rem;
 }
 
-.privacy-notice {
-    border-top: 2px dashed $footer;
-    margin-top: 1.5rem;
-
-    .buymeacoffee {
-        background-color: #FF6C11;
-        color: #fff;
-        text-decoration: none;
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
-    }
-}
-
 footer {
     color: $footer;
-    border-top: 2px dashed $footer;
+    border-top: 1px solid $footer;
     margin-top: 1.5rem;
 
     em {
@@ -159,28 +150,15 @@ small {
     font-weight: normal;
 }
 
-hr {
-    border: none;
-    border-top: 2px dashed $footer;
-}
-
 code {
-    color: $nord14;
+    color: $code;
 }
 
-code::before,
-code::after {
-    content: "`";
-}
-
-pre > code::before,
-pre > code::after {
-    content: "";
-}
 
 pre, code {
     font-family: 'IBM Plex Mono', monospace;
-    font-size: $font_size;
+    font-size: $code_font_size;
+    line-height: $code_line_height;
 }
 
 pre > code {
@@ -191,29 +169,16 @@ pre > code {
 }
 
 pre {
-    background-color: $background !important;
+    background-color: $code_background !important;
-    margin-left: 2.5rem;
+    padding: 1rem 1rem 1rem 2.5rem;
     overflow-x: auto;
     overflow-y: hidden;
     line-height: $line-height;
+    border: 2px solid $code_border_color;
 }
 
-pre::before {
+table td, table th {
-    display: block;
+    padding: 0.2rem 1rem;
-    content: "```";
-    color: $footer;
-}
-pre::after {
-    display: block;
-    content: "```";
-    color: $footer;
-}
-
-table td::before,
-table th::before {
-    content: " | ";
-    color: $footer;
-    font-weight: normal;
 }
 
 .flex-columns {

themes/devroom-2020/layouts/_default/baseof.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/buttons-min.css" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/forms-min.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/regular.min.css" />
     {{ if .Site.IsServer }}
       {{ $cssOpts := (dict "targetPath" "css/devroom.css" "enableSourceMap" true ) }}
       {{ $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}

themes/devroom-2020/layouts/partials/footer.html

@@ -1,17 +1,11 @@
-<section class="privacy-notice">
-    <p>
-        My site is free of ads and trackers. I record privacy-respecting usage statistics with 
-        <a href="https://usefathom.com/">Fathom</a>.
-    </p>    
-
-    <p>Was this post helpful to you? Why not 
-        <a class="buymeacoffee" target="_blank" href="https://www.buymeacoffee.com/ariejan">☕ Buy me a coffee</a>.
-    </p>
-</section>
-
 <footer>
-    <p>{{ .Site.Copyright | safeHTML }}</p>
+    <p>
-    <p>{{ .Site.Params.footerquote | safeHTML }}</p>
+        {{ .Site.Copyright | safeHTML }}
+        <br />
+        This site is free of ads. Statistics are tracked respecting your privacy with <a href="https://usefathom.com/">Fathom</a>.
+        <br />
+        Was this post helpful to you? Why not <a class="buymeacoffee" target="_blank" href="https://www.buymeacoffee.com/ariejan">☕ Buy me a coffee</a>
+    </p>
 </footer>
 
 <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->

themes/devroom-2020/layouts/partials/post.html

@@ -3,22 +3,20 @@
 <article>
     <h1>{{ .Title }}</h1>
     <div class="meta">
-        | Posted: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+        Posted: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-            {{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
+            {{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}</time>
-        </time>
+        ~{{ .FuzzyWordCount }} words
-
+        ~{{ .ReadingTime }} min
-        | ~{{ .FuzzyWordCount }}wrds
-        (~{{ .ReadingTime }}min)
 
         {{ if not (eq $lastmod $date) }}
-            | Last updated: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+            Last updated: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
                 {{ .Lastmod.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
             </time>
         {{ end }}
 
         <br />
 
-        | Tagged
+        Tagged
         {{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}    
     </div>
     {{ .Content }}