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: |
-
+  I explore Onshape for hobbyist use.
-{{< tldr >}}
-This article explores 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>
+    <article><time datetime="{{ .Date | time.Format "2006-01-02"}}">{{ .Date | time.Format "2006-01-02"}}</time> <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></article>
-    <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>
   {{ 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>
+<article>
-	<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>
+	<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>
-</p>
+</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>
+<article>
-	<h3><time datetime="{{ .Date | time.Format "2006-01-02"}}">{{ .Date | time.Format "2006-01-02"}}</time> <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+	<time datetime="{{ .Date | time.Format "2006-01-02"}}">{{ .Date | time.Format "2006-01-02"}}</time> <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a>
-</p>
+	{{ 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>