WIP sticky toc and more elements themed

assets/scss/base/list.scss

@@ -1,8 +1,8 @@
 .list {
     .container {
         display: grid;
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
-        gap: 1em;
+        gap: 3em;
     }
     .list-item {
         color: inherit;
@@ -17,14 +17,16 @@
             margin: 0.5em 0;
         }
         &__summary {
-            margin-bottom: 1.5em;
+            margin-bottom: 0.5em;
             line-height: 1.4;
         }
         &__date {
-
+            display: block;
+            margin-bottom: 1em;
         }
-        &:hover {
+        &__readmore {
-            color: #0060ff;
+            margin-bottom: 1em;
+            display: block;
         }
     }
 }

assets/scss/base/page.scss

@@ -9,7 +9,7 @@
 		grid-template-columns: minmax(45ch,65ch) 1fr;
 		grid-template-rows: auto auto;
 		grid-template-areas:
-			"header ."
+			"header header"
 			"content meta";
 	}
 	.section {
@@ -59,7 +59,25 @@
 	}
 	ul {list-style: disc; margin: 1em 0;}
 	li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;}
-	ol {list-style: number; margin: 1em 0;}
+	ol {list-style: decimal; margin: 1em 0;}
+	dl {margin: 1em 0; line-height: 1.4;}
+	dt {font-weight: 700;}
+	dd {margin-left: 1em;}
+	em {font-style: italic}
+	strong {font-weight: 700}
+	sup {
+		position: relative;
+		font-size: 0.8em;
+		a {position: relative; top: -0.5em;}
+	}
+	table {
+		text-align: center;
+		thead {
+			font-weight: 700;
+		}
+		th, td {border: 1px solid black; padding: 0.5em;}
+	}
+
 }
 
 .tags {
@@ -75,9 +93,24 @@
 	}
 }
 
+.meta .container {height: 100%}
+
 #TableOfContents {
-	list-style: none;
+	position: sticky;
+	top: 2rem;
+	max-width: max-content;
+	font-size: 0.75em;
 	margin: 2em 0;
-	li {margin-bottom: 0; margin-left: 1em;}
+	ul {list-style: none; margin: 0;}
-	a {color: inherit;}
+	li {margin-bottom: 0; margin-left: 0;}
+	li li {margin-left: 1em;}
+	a {
+		color: inherit;
+		text-decoration: none;
+		transition: color 0.2s ease-in-out;
+		&:hover {
+			color: #0060ff;
+			text-decoration: underline;
+		}
+	}
 }

assets/scss/index/cards.scss

@@ -19,4 +19,5 @@
 }
 .card p {
 	margin-bottom: 1em;
+	line-height: 1.4;
 }

assets/scss/partials/site-footer.scss

@@ -2,7 +2,11 @@
     background: #333;
     color: white;
     hr {display: none;}
-    .container {padding: 2em 1em;}
+    .container {
+        padding: 2em 1em;
+        display: flex;
+        flex-flow: row wrap;
+    }
     dt {font-weight: 700;}
     dd {margin-bottom: 0.5em;}
     a {color: inherit;}

content/blog/elements/index.md

@@ -1,7 +1,7 @@
 ---
 title: "Elements"
 summary: "Testing styles"
-draft: true
+draft: false
 ---
 
 # h1
@@ -40,4 +40,27 @@ Lorem ipsum
         et dolore
     magna
 aliqua.
-```
+```
+*emphasis*
+
+**strong**
+
+---
+
+Here is a table[^1].
+
+[^1]: Footnote
+
+| Syntax | Description |
+| ----------- | ----------- |
+| Header | Title |
+| Paragraph | Text |
+
+term
+: definition
+
+~~strikethrough~~
+
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media 

content/work/mastodon/index.md

@@ -3,6 +3,7 @@ title: "Mastodon documentation revamp"
 summary: "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it."
 date: "2020-01-04"
 tags: ["mastodon", "documentation", "information architecture", "rest api"]
+cover: "/images/mastodocs.jpg"
 ---
 
 ## Overview

content/work/pixelfed/index.md

@@ -3,6 +3,7 @@ title: "Pixelfed team member"
 summary: "Turning a one-person project into an organized effort."
 date: "2019-01-01"
 tags: ["pixelfed", "project management", "product management", "github issues", "documentation"]
+cover: "/images/pixelfed.jpg"
 ---
 
 ## Overview

layouts/_default/list.html

@@ -11,12 +11,15 @@
 	<section class="section list">
 		<div class="container">
 			{{ range .Pages }}
-				<a class="list-item" href="{{ .Permalink }}">
+				<article class="list-item">
-				<img class="list-item__image" src="{{.Permalink}}cover.jpg">
+				{{ with .Params.cover }}
+				<img class="list-item__image" src="{{.}}">
+				{{end}}
 				<h2 class="list-item__title">{{ .Title }}</h2>
 				<p class="list-item__summary">{{.Summary}}</p>
 				<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
-				</a>
+				<a class="list-item__readmore" href="{{ .Permalink }}">Read more...</a>
+			</article>
 			{{ end }}
 		</div>
 	</section>

layouts/_default/single.html

@@ -8,13 +8,16 @@
 			<div class="container">
 				<h1 class="page-title">{{ .Title }}</h1>
 				<p class="page-summary">{{.Summary}}</p>
-				<img class="page-cover" src="cover.jpg">
+				{{ with .Params.cover }}
+				<img class="page-cover" src="{{.}}">
+				{{end}}
 			</div>
 		</header>
 		<aside class="meta section">
 			<div class="container">
 				<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
 				<p class="wordcount"> {{.WordCount}} words</p>
+				<!--
 				{{ with .Params.tags }}
 				<p>Keywords:</p>
 				<ul class="tags">
@@ -23,6 +26,7 @@
 					{{ end }}
 				</ul>
 				{{ end }}
+				-->
 				{{ .TableOfContents }}
 			</div>
 		</aside>

layouts/index.html

@@ -52,13 +52,13 @@
 					<img src="/images/mastodocs.jpg">
 					<h3>Mastodon<br>Documentation Revamp</h3>
 					<p>Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it.</p>
-					<a href="">Read more</a>
+					<a href="/work/mastodon">Read more</a>
 				</div>
 				<div class="card">
 					<img src="/images/pixelfed.jpg">
 					<h3>Pixelfed<br>Project Management</h3>
 					<p>After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort.</p>
-					<a href="">Read more</a>
+					<a href="/work/pixelfed">Read more</a>
 				</div>
 				<div class="card">
 					<img src="/images/namecheap.jpg" alt="">
@@ -92,17 +92,17 @@
 			<div class="testimonials">
 				<div class="testimonial">
 					<img class="avatar" width=32 height=32 src="/images/khalil.jpg">
-					<p class="name">Khalil Saadiq</p>
+					<p class="name">Khalil Saadiq,<br>former classmate</p>
 					<blockquote class="bubble">it's scary how much you know.</blockquote>
 				</div>
 				<div class="testimonial">
 					<img class="avatar" width=32 height=32 src="/images/gargron.jpg">
-					<p class="name">Eugen Rochko</p>
+					<p class="name">Eugen Rochko,<br>Mastodon developer</p>
 					<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
 				</div>
 				<div class="testimonial">
 					<img class="avatar" width=32 height=32 src="/images/dansup.jpg">
-					<p class="name">Daniel Supernault</p>
+					<p class="name">Daniel Supernault,<br>Pixelfed developer</p>
 					<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
 				</div>
 			</div>

layouts/partials/site-footer.html

@@ -1,7 +1,7 @@
 <footer class="site-footer">
 	<hr>
 	<div class="container">
-		<dl style="max-width: max-content; margin: 0 auto;">
+		<dl>
 			<dt>email</dt>
 			<dd>a@trwnh.com</dd>
 			<dt>jabber</dt>
@@ -9,5 +9,6 @@
 			<dt>fediverse</dt>
 			<dd><a href="https://mastodon.social/@trwnh" rel="me">mastodon.social/@trwnh</a></dd>
 		</dl>
+		
 	</div>
 </footer>

resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"scss/main.min.38ec2c33a877306d8370794aed7a2ff778484eed49da2c100f12c3180e387913.css","MediaType":"text/css","Data":{"Integrity":"sha256-OOwsM6h3MG2DcHlK7Xov93hITu1J2iwQDxLDGA44eRM="}}
+{"Target":"scss/main.min.69d4711fe0e0bb357457852f01b5350f97d301b6069516d46c11edae2910bda0.css","MediaType":"text/css","Data":{"Integrity":"sha256-adRxH+DguzV0V4UvAbU1D5fTAbYGlRbUbBHtrikQvaA="}}