minor fixes to new css, remove unused assets, no more webmention avatars

hooks/precommit.js

@@ -30,14 +30,6 @@ const rootdir = `${__dirname}/../`;
 	const json = JSON.stringify(mentions, null, 4)
 	await fsp.writeFile(`${rootdir}/data/webmentions.json`, json, 'utf-8')
 
-	console.log("4.1 Fetching pictures from wm authors...")
-	await webmention.getPictures(mentions, {
-		endpoint: wmconfig.endpoint,
-		directory: `${rootdir}/assets/wmpics`,
-		override: false,
-		extension: "jpg"
-	})
-
 	// 4. generate youtube thumbnails
 	console.log("5. Generating YouTube thumbnails...")
 	await youtube.thumbify({

layouts/index.html

@@ -11,8 +11,8 @@
     <div class="txtblock">
         <article>
             <div class="flexgrid flexgrid-8020">
-                <h2>Freshly Baked Thoughts</h2>
-                <small><a href="/archives">Archives</a> &raquo;</small>
+                <h2><em>Freshly Baked</em></h2>
+                <span><a href="/archives">Archives</a> &raquo;</span>
             </div>
 
             <ul class="small">
@@ -32,7 +32,7 @@
         </article>
         <article>
             <div class="flexgrid flexgrid-8020">
-                <h2>Popular Bakings This Month</h2>
+                <h2><em>Best Sellers</em></h2>
                 <small><a href="https://stats.brainbaking.com">Statistics</a> &raquo;</small>
             </div>
 
@@ -51,8 +51,8 @@
         </article>
         <article>
             <div class="flexgrid flexgrid-8020">
-                <h2>Random Tasty Treats</h2>
-                <small><a href="/post">All posts</a> &raquo;</small>
+                <h2><em>Random Treats</em></h2>
+                <span><a href="/post">All posts</a> &raquo;</span>
             </div>
             <ul class="small">
             {{ range first $itms (shuffle (where (where .Site.Pages ".Params.disableComments" "!=" "true") "Section" "post")) }}
@@ -70,26 +70,24 @@
             </ul>
         </article>        
     </div>
-
-    <div class="belowsingle">
-        <div class="txtblock">
-            <h2 class="page-header">The Head Brain Baker</h2>
-            <article class="p-author h-card">
-                <div class="avatar">
-                    <img class="u-photo" src="{{ .Site.BaseURL }}/img/avatar.jpg" alt="A photo of Me!" />
-                </div>
-                <p class="p-note">
-                    Hey! I'm <a class="p-name u-uid u-url" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>, a <em class="p-job-title">Brain Baker</em> living in <span class="p-locality">Belgium</span>. I currently find myself teaching, writing, programming, researching, and of course baking bread! <em>Brain Baking</em> is my way to inspire myself and others to ponder and learn. Read more <a class="u-url" href="about">about me here</a>.
-                </p>
-                <p>
-                    If you found my bakings amusing and/or helpful, you can <a rel="me" href="https://ko-fi.com/woutergroeneveld"><strong>buy me a coffee</strong></a>—if you don't mind I'll use it to enjoy a cup of tea instead. I also like to hear about your own <em>bakings</em> via <svg class='icon icon-text'><title>chat icon</title><use xlink:href='#discuss'></use></svg><a rel="me" class="u-url" href="{{ .Site.Author.mastodonlink }}">Mastodon</a> or <svg class='icon icon-text'><title>mail icon</title><use xlink:href='#mail'></use></svg><span class="link meel">e-mail</span>. Thanks!
-                </p>
-            </article>
-            &nbsp;
-        </div>
-    </div>
 </main>
-
+<div class="belowsingle">
+    <div class="txtblock">
+        <h2 class="page-header">The Head Brain Baker</h2>
+        <article class="p-author h-card">
+            <div class="avatar">
+                <img class="u-photo" src="{{ .Site.BaseURL }}/img/avatar.jpg" alt="A photo of Me!" />
+            </div>
+            <p class="p-note">
+                Hey! I'm <a class="p-name u-uid u-url" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>, a <em class="p-job-title">Brain Baker</em> living in <span class="p-locality">Belgium</span>. I currently find myself teaching, writing, programming, researching, and of course baking bread! <em>Brain Baking</em> is my way to inspire myself and others to ponder and learn. Read more <a class="u-url" href="about">about me here</a>.
+            </p>
+            <p>
+                If you found my bakings amusing and/or helpful, you can <a rel="me" href="https://ko-fi.com/woutergroeneveld"><strong>buy me a coffee</strong></a>—if you don't mind I'll use it to enjoy a cup of tea instead. I also like to hear about your own <em>bakings</em> via <svg class='icon icon-text'><title>chat icon</title><use xlink:href='#discuss'></use></svg><a rel="me" class="u-url" href="{{ .Site.Author.mastodonlink }}">Mastodon</a> or <svg class='icon icon-text'><title>mail icon</title><use xlink:href='#mail'></use></svg><span class="link meel">e-mail</span>. Thanks!
+            </p>
+        </article>
+        &nbsp;
+    </div>
+</div>
 <footer>
     <p class="copyright text-muted">{{ .Site.Params.copyright | markdownify }}</p>
 </footer>

themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass

@@ -81,34 +81,15 @@ pre code
 		content: " "
 		clear: both
 
-.col-md-6
-	position: relative
-	min-height: 1px
-	padding-right: 15px
-	padding-left: 15px
-	@media (min-width: 992px)
-		float: left
-		width: 46%
-
 .text-justify
     text-align: justify
 
 .page-header
     padding-bottom: 9px
-    margin: 40px 0 20px
+    margin: 3em 0 0.9em
     border-bottom: 1px solid #eee
     text-align: center
 
-.jumbotron
-	padding-top: 30px
-	padding-bottom: 30px
-	margin-bottom: 30px
-	color: inherit
-
-	@media screen and (min-width: 768px)
-	    padding-top: 48px
-	    padding-bottom: 48px
-
 
 .container
 	@media (min-width: 768px)

themes/brainbaking-minimal/assets/sass/_brainbaking.sass

@@ -80,6 +80,7 @@ ul
 
 ul.small
   padding: 0
+  margin-bottom: 0
   list-style: none
 
 div.highlight 
@@ -163,7 +164,6 @@ article
 
 .belowsingle
   background-color: $belowsingle
-  border-top: 3px solid $accent
   padding-bottom: 2rem
 
   .page-header

themes/brainbaking-minimal/assets/sass/_toot.sass

@@ -1,8 +1,15 @@
 
+#morementions
+	display: none
+
+	&:target
+		display: block
+
 .toot
 	background: white
 	border: 1px solid #cccccc
 	padding: 0.5em
+	margin-bottom: 2em
 	border-radius: 5px
 	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
 
@@ -32,8 +39,8 @@
 
 	.toot
 		cursor: pointer
-		margin-bottom: 3rem !important
-		margin-top: 2rem !important
+		margin-bottom: 1rem
+		margin-top: 1rem
 
 		.meta
 			border-top: 1px solid #eeeeee

themes/brainbaking-minimal/layouts/_default/list.html

@@ -17,7 +17,7 @@
 		{{ if ne .Key "0001" }}
 		<h2>{{ .Key }}</h2>
 
-		    {{ range .Pages.GroupByDate "Jan" }}
+		    {{ range .Pages.GroupByDate "January" }}
 			<ul class="small">
 			{{ range .Pages.ByDate.Reverse }}
 				<li class="flexgrid flexgrid-8020">

themes/brainbaking-minimal/layouts/notes/list.html

@@ -1,43 +1,39 @@
 {{ partial "header" . }}
 <a id="top"></a>
 <main class="list">
-
 	<header>
 	    <h1 id="header" class="p-name">
       		<svg class='icon'><use xlink:href="#{{ .Params.icontag }}"></use></svg>&nbsp;{{ .Title }}
 		</h1>
 	</header>
 
+    {{ with .Content }}
+    <article>
+    	{{ . }}
+	</article>
+	{{ end }}
 
-	{{ $paginator := .Paginate (where .Data.Pages ".Params.type" "ne" "archive") $.Site.Params.pagination }}
-
-	{{ if eq $paginator.PageNumber 1 }}
-	    <hr/>
-	    {{ with .Content }}
-	    <article>
-	    	{{ . }}
-		</article>
-		{{ end }}
-	{{ end }}	
-
-	<div class="tootlist">
-	{{ range ($paginator.Pages).GroupByDate "2006" "desc" }}
+	<div class="tootlist txtblock">
+	{{ range (where .Data.Pages ".Params.type" "ne" "archive").GroupByDate "2006" "desc" }}
 		<h2>{{ .Key }}</h2>
 
 	    {{ range .Pages.GroupByDate "January" }}
 	    	<h3>{{ .Key }}</h3>
 
 			{{ range .Pages.ByDate.Reverse }}
-				{{ partial "toot" . }}
+				<small>
+					{{ partial "toot" . }}
+				</small>
 			{{ end }}
 
 	    {{ end }}
     {{ end }}
 	</div>
-	{{ template "_internal/pagination.html" . }}
-
-	<footer>
-	</footer>
 </main>
+<div class="belowsingle">
+	<div class="txtblock">
+    	{{ partial "single-comments" . }}
+	</div>
+</div>
 
 {{ partial "footer" . }}

themes/brainbaking-minimal/layouts/notes/single.html

@@ -1,62 +1,59 @@
 {{ partial "header" . }}
-<main class="h-entry">
-	<article class="single {{ .Section }}">
+<main class="h-entry" data-pagefind-body>
+	<header>
 		<a id="top"></a>
-		<header>
-			<h1 id="header" class="p-name">
-				Half-Baked Thought
-			</h1>
-		    <h2>
-		        {{ .Title | safeHTML }}
-		    </h2>
+		<h1 id="header" class="p-name">
+			Half-Baked Thought
+		</h1>
+	    <h2>
+	        {{ .Title | safeHTML }}
+	    </h2>
 
-	        <h3>
-	            <time datetime='{{ .Date.Format "2006-01-02T15:04:00" }}' class="dt-published">
-	                <svg class='icon icon-text' width='24' height='24'>
-	                    <use xlink:href='#cal1'></use>
-	                </svg>
-	                <a class="u-url u-uid" href="{{ .RelPermalink }}">
-	                    {{ .Date.Format "2 January 2006, 15:04" }}
-	                </a>
-	            </time>
-                &nbsp;|&nbsp;
-                <span title="Categories">
-                    <svg class='icon icon-text' width='24' height='24'>
-                        <use xlink:href='#folder'></use>
-                    </svg>
-                    <a class="p-category u-url" href="/notes">notes</a> 
-                </span>
-			  	{{ if (and (isset .Params "context") (not (eq .Params.context ""))) }}
-			  		&nbsp;|&nbsp;
-                    <svg class='icon icon-text' width='24' height='24'>
-                        <use xlink:href='#discuss'></use>
-                    </svg>
-			  		<a href="{{ .Params.context }}" class="u-in-reply-to">In reply to</a>{{ with .Params.rsvp }}&nbsp;(RSVP: <span class="p-rsvp">{{ . }}</span>){{ end }}<br/>
-			  	{{ end }}
-	        </h3>
-		</header>
+        <time datetime='{{ .Date.Format "2006-01-02T15:04:00" }}' class="dt-published">
+            <svg class='icon icon-text' width='24' height='24'>
+                <use xlink:href='#cal1'></use>
+            </svg>
+            <a class="u-url u-uid" href="{{ .RelPermalink }}">
+                {{ .Date.Format "2 January 2006, 15:04" }}
+            </a>
+        </time>
+        &nbsp;|&nbsp;
+        <span title="Categories">
+            <svg class='icon icon-text' width='24' height='24'>
+                <use xlink:href='#folder'></use>
+            </svg>
+            <a class="p-category u-url" href="/notes">notes</a> 
+        </span>
+	</header>
+	<article class="single {{ .Section }}">
+	  	{{ if (and (isset .Params "context") (not (eq .Params.context ""))) }}
+	  	<p>
+            <svg class='icon icon-text' width='24' height='24'>
+                <use xlink:href='#discuss'></use>
+            </svg>
+	  		In reply to: <a href="{{ .Params.context }}" class="u-in-reply-to">{{ .Params.context }}</a>{{ with .Params.rsvp }}&nbsp;(RSVP: <span class="p-rsvp">{{ . }}</span>){{ end }}<br/>
+	  	</p>
+	  	{{ end }}
 	    <div class="e-content content toot">
 	  		{{ .Content | safeHTML }}
 	  	</div>
 
-	  	<hr/>
 	  	{{ if .Params.source }}
-	  	Also posted <svg class='icon icon-text' width='16' height='16'><use xlink:href='#discuss'></use></svg><a href="{{ .Params.source }}" rel="syndication" class="u-syndication">on Mastodon</a> by <a rel="author" href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>.
+	  	<p>
+	  		<svg class='icon icon-text' width='16' height='16'>
+	  			<use xlink:href='#discuss'></use>
+	  		</svg>
+	  		Also posted on: <a href="{{ .Params.source }}" rel="syndication" class="u-syndication">{{ .Params.source }}</a>.
+	  	</p>
 	  	{{ end }}
 	  </article>
-
-		<div class="belowsingle">
-			<div class="txtblock">
-				{{ partial "single-comments" . }}
-		    	{{ partial "single-webmentions" . }}
-
-		    	{{ partial "single-related" . }}
-
-			<footer>
-			</footer>
-
-			</div>
-		</div>
 </main>
+<div class="belowsingle">
+	<div class="txtblock">
+    	{{ partial "single-related" . }}
+    	{{ partial "single-webmentions" . }}
+		{{ partial "single-comments" . }}
+	</div>
+</div>
 
 {{ partial "footer.html" . }}

themes/brainbaking-minimal/layouts/partials/single-webmentions.html

@@ -12,10 +12,20 @@
 	    Mentions and Replies
 	</h3>
 
+	<small>
 	<div class="tootlist" style="margin-bottom: -3rem">
+	{{ $i := 0 }}
+	{{ $done := 0 }}
 	{{ range $mentions }}
-	  	{{ $name := .author.name | safeHTML }}
+		{{ $i = add $i 1 }}
+		{{ if and (gt $i 5) (eq $done 0) }}
+			{{ $done = 1 }}
+			<a href="#morementions"><button>Show {{ add (sub (len $mentions) $i) 1 }} more...</button></a>
+			<div id="morementions">
+		{{ end }}
+
 		<article class="u-comment h-cite toot">
+	  		{{ $name := .author.name | safeHTML }}
 		  <p class="p-content p-name">
 		  	{{ if .content }}
 	  			{{ .content | safeHTML }}
@@ -24,7 +34,7 @@
 	  		{{ end }}
 		  </p>
 		  <div class="meta">
-			<svg class='icon icon-text' width='24' height='24'>
+			<svg class='icon icon-small'>
                 <use xlink:href='#cal1'></use>
             </svg>		  	
 		    <time class="dt-published" datetime="{{ .published }}">
@@ -33,28 +43,17 @@
 		    </time>
 		    &nbsp;|&nbsp;by&nbsp;
 			  <a rel="author" class="u-author h-card u-url permalink" href="{{ .source }}">
-			  	{{ if isset .author "picture" }}
-			  		<div class="avatar">
-			  			{{- $image := resources.Get (printf "%s%s.jpg" "wmpics/" .author.picture ) -}}
-
-					  	{{ if eq $image nil }}
-						  <img class="u-photo" loading="lazy" src="/img/avatar-anonymous.jpg" alt="{{ $name }} anonymous photo" />
-					  	{{ else }}		  			    
-  			  			    {{- $imgsmall := $image.Resize "100x jpg q85" }}
-			  				<img class="u-photo" loading="lazy" src="{{ $imgsmall.RelPermalink }}" alt="{{ $name }}" />
-			  			{{ end }}
-			  		</div>
-			  	{{ else }}
-			  		<div class="avatar">
-			  			<img class="u-photo" loading="lazy" src="/img/avatar-anonymous.jpg" alt="{{ $name }} anonymous photo" />
-			  		</div>
-			  	{{ end }}
 			  	{{ $name }}
 			  </a>		    
 		  </div>
 	 </article>
 	{{ end }}
+	{{ if gt $i 5 }}
+		<a href="#mentions"><button>Collapse mentions</button></a>
+		</div>
+	{{ end }}
 	</div>
+</small>
 	<br/>
 {{ end }}
 

themes/brainbaking-minimal/layouts/partials/toot.html

@@ -4,7 +4,7 @@
 			{{ .Content }}
 		</div>
 		<div class="meta">
-			<svg class='icon icon-text' width='24' height='24'>
+			<svg class='icon icon-small' width='16' height='16'>
                 <use xlink:href='#cal1'></use>
             </svg>
 			<time datetime='{{ .Date.Format "2006-01-02T15:04:00" }}' class="dt-published">
@@ -13,8 +13,8 @@
 			&nbsp;|&nbsp;
 			<a href="{{ .RelPermalink }}" class="permalink">Permalink</a>
 			{{ with .Params.context }}
-				&nbsp;|&nbsp;<svg class='icon icon-text' width='24' height='24'><use xlink:href='#discuss'></use></svg>
-				<a href="{{ . }}" class="permalink">Context</a>
+				&nbsp;|&nbsp;<svg class='icon icon-small' width='16' height='16'><use xlink:href='#discuss'></use></svg>
+				Reply to: <a href="{{ . }}" class="permalink">{{ . | truncate 40 }}</a>
 			{{ end }}
 		</div>
 	</div>