Fix syntax highlighting / code

config.toml

@@ -10,11 +10,9 @@ paginate = 99999
 canonifyurls = true
 
 # pygmentsstyle = "solarized-dark256"
-pygmentsstyle = "monokai"
-pygmentscodefences = true
-pygmentscodefencesguesssyntax = true
+# pygmentscodefences = true
+# pygmentscodefencesguesssyntax = true
 
-googleAnalytics = "UA-60089-16"
 disqusShortname = ""
 
 enableGitInfo = true
@@ -27,6 +25,16 @@ enableGitInfo = true
     [markup.goldmark.renderer]
         unsafe = true
 
+  [markup.highlight]
+    codeFences = true
+    guessSyntax = true
+    lineNoStart = 1
+    lineNos = true
+    lineNumbersInTable = false
+    noClasses = true
+    style = "dracula"
+
+
 [params]
     author = "Ariejan de Vroom"
     info = "Family man, software engineer, bass guitar player, DIY car mechanic, among many other things"

themes/devroom-2024/assets/scss/devroom.scss

@@ -1,11 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 $h1_font_size: 2.0rem;
 $h2_font_size: 1.7rem;
 $header_size: 1.2rem;
 
 $font_size: 16px;
-$code_font_size: 16px;
+$code_font_size: 14px;
 $code_line_height: 17px;
 $line-height: 1.6;
 
@@ -21,9 +21,9 @@ $header: $text;
 $highlight: $links;
 $blockquote_border: $accent;
 $important_border: #f00;
-$code_background: $background;
-$code_border_color: $background;
-$code: #ff9327;
+$code_background: $text;
+$code_border_color: $text;
+$code: $background;
 $separator: darken(desaturate($accent, 20%), 20%);
 
 html, body {
@@ -36,7 +36,10 @@ html, body {
 }
 
 code, pre {
-    font-family: monospace;
+    font-family: "Roboto Mono", monospace;
+    font-optical-sizing: auto;
+    font-weight: 600;
+    font-style: normal;
 }
 
 .important {
@@ -219,18 +222,15 @@ small {
     color: $footer;
 }
 
-.meta {
-    color: $meta;
-    font-weight: normal;
-}
-
 code {
-    color: $code;
+    color: $text;
+    background-color: $backdrop;
+    padding: 1px 4px 3px;
+    border-radius: 4px;
 }
 
 
 pre, code {
-    font-family: 'IBM Plex Mono', monospace;
     font-size: $code_font_size;
     line-height: $code_line_height;
 }
@@ -238,17 +238,19 @@ pre, code {
 pre > code {
     overflow-wrap: normal;
     white-space: pre;
+    padding: 0;
     color: $text;
-    background-color: $background !important;
+    background-color: $backdrop !important;
 }
 
 pre {
-    background-color: $code_background !important;
-    padding: 1rem 1rem 1rem 2.5rem;
+    background-color: $backdrop !important;
+    padding: 12px;
     overflow-x: auto;
     overflow-y: hidden;
     line-height: $line-height;
-    border: 2px solid $code_border_color;
+    border: 2px solid $accent;
+    border-radius: 4px;
 }
 
 table td, table th {
@@ -367,6 +369,10 @@ article.full {
     }
 }
 
+.listing > h1 {
+    text-align: center;
+}
+
 a.tag {
     background-color: $accent;
     color: $text;

themes/devroom-2024/layouts/partials/list.html

@@ -1,16 +1,20 @@
-<section class="container list">
-    <h1 class="title">
-      {{- if eq .Kind "taxonomy" -}}
-        {{- i18n .Data.Singular | title -}}
-        {{- print "Tagged " -}}
-      {{- end -}}
+<div class="listing">   
+  <h1>{{- .Title -}}</h1>
+</div>
+
+<div class="narrow">
+  {{ range .Paginator.Pages.GroupByDate "2006" }}
+      <h2 class="year">{{ .Key }}</h2>
   
-      {{- .Title -}}
-    </h1>
-    <ul>
-      {{ range .Paginator.Pages }}
-      <li>{{ .Title }}<br/><a href="{{ .Params.ExternalLink | default .RelPermalink }}">{{ .Params.ExternalLink | default .RelPermalink }}</a></li>
+      <div class="post-feed">
+      {{ range .Pages }}
+          <article class="post">
+              <div class="calendar">{{ time.Format "02 Jan" .Date }}</div>
+              <h2 class="title">{{ .Title }}</h2>
+              <div class="actions">{{ .ReadingTime }} min read &raquo;</div>
+              <a class="permalink" href="{{ .Params.ExternalLink | default .RelPermalink }}"></a>
+          </article>
       {{ end }}
-    </ul>
-    
-  </section>
+      </div>
+  {{ end }}
+  </div>