colors!

content/posts/cad-shootout-onshape.md

@@ -1,14 +1,13 @@
 ---
 title: "Hobby CAD shootout: Onshape"
-date: 2023-09-11T17:00:00+02:00
+date: 2023-09-11T19:00:00+02:00
 toc: true
----
-
-{{< tldr >}}
-This article explores Onshape for hobbyist use.
+tldr: |
+  I explore Onshape for hobbyist use.
   Onshape is an incredible application that is both powerful and intuitive.
   The free tier gives you everything, provided you are ok with the non-commercial and non-private constraints however performance gets really sketchy with complex designs and the pricing is steep.
-{{< /tldr >}}
+---
+
 
 Hello, I am a generic nobody armed with a caliper and a 3D printer!
 

layouts/index.html

@@ -11,9 +11,7 @@
 <section class="post-list">
 	<h2>Latest {{$pagename}}</h2>
   {{- range ( $pages | first $limit ) }}
-<p>
-    <h3><time datetime="{{ .Date | time.Format "2006-01-02"}}">{{ .Date | time.Format "2006-01-02"}}</time> <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-</p>
+    <article><time datetime="{{ .Date | time.Format "2006-01-02"}}">{{ .Date | time.Format "2006-01-02"}}</time> <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></article>
   {{ end }}
   {{ if (gt ($pages | len) $limit )}}
 <a href="/{{ $pageurl }}">See more…</a>

layouts/pages/list.html

@@ -1,9 +1,11 @@
 {{ define "main" }}
 <h1>All pages</h1>
 <p>These documents are a personal dump of notes and may change at any time.</p>
+<section class="post-list">
 {{ range .Pages.ByPublishDate.Reverse }}
-<p>
-	<h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a> <span class="lastmod">(Last modified: <time datetime="{{ .Lastmod | time.Format "2006-01-02"}}">{{ .Lastmod | time.Format "2006-01-02"}}</time>)</span></h3>
-</p>
+<article>
+	<a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a> <span class="lastmod">(Last modified: <time datetime="{{ .Lastmod | time.Format "2006-01-02"}}">{{ .Lastmod | time.Format "2006-01-02"}}</time>)</span>
+</article>
 {{ end }}
+</section>
 {{ end }}

layouts/posts/list.html

@@ -1,9 +1,14 @@
 {{ define "main" }}
 <h1>Blog</h1>
 <p>Here is a list of my personal ranting from newest to oldest.</p>
+<section class="post-list">
 {{ range .Pages.ByPublishDate.Reverse }}
-<p>
-	<h3><time datetime="{{ .Date | time.Format "2006-01-02"}}">{{ .Date | time.Format "2006-01-02"}}</time> <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-</p>
+<article>
+	<time datetime="{{ .Date | time.Format "2006-01-02"}}">{{ .Date | time.Format "2006-01-02"}}</time> <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a>
+	{{ if .Params.tldr }}
+	<div class="summary">{{.Params.tldr|markdownify}}</div>
 	{{ end }} 
+</article>
+{{ end }}
+</section>
 {{ end }}

themes/fesite/assets/scss/__var.scss

@@ -1,6 +1,7 @@
 $inter: "Inter", "Gill Sans", "Gill Sans MT", "Segoe UI", sans-serif;
 $iosevka: "Iosevka Aile Web", "Courier New", Courier, monospace;
-$text-small: 9pt;
+$text-smaller: 9pt;
+$text-small: 11pt;
 $screen-width: 50rem;
 $color-bg: #151515;
 $color-copy: #f3f3f3;

themes/fesite/assets/scss/layout.scss

@@ -7,7 +7,7 @@ $footer-border: 1px dotted $color-light-border;
 footer {
   border-top: $footer-border;
   padding: 10pt 0;
-  font-size: $text-small;
+  font-size: $text-smaller;
   font-family: $iosevka;
   line-height: 1.5;
   margin-top: 20pt;
@@ -91,6 +91,21 @@ a.summary {
   font-size: 10pt;
 }
 
+.post-list article {
+  font-family: $iosevka;
+  font-size: 14pt;
+  margin-bottom: 0.5rem;
+}
+
+.summary {
+  font-family: $inter;
+  font-size: $text-small;
+  margin: 5pt 0 15pt 2pt;
+  line-height: 1.5;
+  border-left: 2px solid #5e5971;
+  padding-left: 6pt;
+}
+
 .lightbox {
   display: none;
   position: fixed;

themes/fesite/assets/scss/post.scss

@@ -8,6 +8,9 @@ $toc-border: 1px solid #333;
 $toc-color: #d1e3e8;
 $toc-label-color: #96ccff;
 $caption-color: #bfb1bf;
+$bold-color: #e7aeff;
+$h2-color: #fffdca;
+$h3-color: #d1c5f8;
 
 .meta {
   font-family: $iosevka;
@@ -46,6 +49,15 @@ $caption-color: #bfb1bf;
 }
 
 .content {
+  h2 {
+    color: $h2-color;
+  }
+  h3 {
+    color: $h3-color;
+  }
+  strong {
+    color: $bold-color;
+  }
   table {
     border-collapse: collapse;
     background-color: $table-bg;
@@ -64,6 +76,7 @@ $caption-color: #bfb1bf;
     }
   }
   figure {
+    text-align: center;
     margin: 0;
     padding-top: 1rem;
   }
@@ -113,6 +126,9 @@ $caption-color: #bfb1bf;
   ul li ul li a {
     --link-color: #a991f5;
   }
+  ul li:last-child ul li::before {
+    content: "  ├─ ";
+  }
   ul li:last-child ul li:last-child::before {
     content: "  └─ ";
   }

themes/fesite/layouts/_default/list.html

@@ -1,11 +0,0 @@
-{{ define "main" }}
-<h1>{{ .Title }}</h1>
-{{ range .Pages.ByPublishDate.Reverse }}
-<p>
-    <h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-    <a class="summary" href="{{ .RelPermalink }}">
-        <p>{{ .Summary }}</p>
-    </a>
-</p>
-{{ end }}
-{{ end }}

themes/fesite/layouts/_default/single.html

@@ -4,7 +4,9 @@
   Published on {{.Date | time.Format "2006-01-02" }} {{ if (gt .Lastmod .Date)
   }}| Last modified on {{.Lastmod | time.Format "2006-01-02" }} {{ end }}
 </section>
-{{ if .Params.toc }}
+{{ if .Params.tldr }}
+<div class="tldr">{{.Params.tldr|markdownify}}</div>
+{{ end }} {{ if .Params.toc }}
 <div class="toc">
   <aside>{{ .TableOfContents }}</aside>
 </div>