Merge branch 'style/herman'

README.md

@@ -115,6 +115,8 @@ already implemented:
 - Reply by email: if you supply an email address, the theme creates a "Reply to
   this post by email" button at the end of every post (see Kev Quirk's [original
   implementation](https://kevquirk.com/adding-the-post-title-to-my-reply-by-email-button)).
+- `absfigure` shortcode: a shortcut to use the `figure` shortcode that also
+  converts relative URLs into absolute URLs by using the `absURL` function.
 - Single-use CSS (EXPERIMENTAL): you can add some styles to a single page by
   writing the CSS you need in `assets/{custom_css}.css` and then including
   `style: "{custom_css}.css"` in the [front

assets/herman.css

@@ -0,0 +1,202 @@
+:root {
+  font-size: 62.5%; /* 10px */
+  --color-dark: #181a20;
+  --color-light: #fafafa;
+  --color-primary: #1a8fe3;
+  --size: 1rem;
+  --spacing: calc(var(--size) * 2.4);
+}
+
+body {
+  background: var(--color-dark);
+  color: var(--color-light);
+  padding: 4rem;
+  font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic',
+    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: calc(var(--size) * 1.8);
+  line-height: 1.5;
+  min-height: 80vh;
+  max-width: 1600px;
+  margin: 0 auto;
+  word-wrap: break-word;
+}
+
+header,
+main,
+footer {
+  max-width: 70ch;
+  margin-inline: auto;
+}
+
+header {
+  padding-bottom: var(--spacing);
+}
+
+nav a, a.blog-tags {
+  margin-right: calc(var(--spacing) / 2);
+}
+a.blog-tags {
+  line-height: 2;
+}
+
+main {
+  padding-bottom: var(--spacing);
+}
+
+footer {
+  text-align: center;
+  padding-top: var(--spacing);
+}
+
+a {
+  color: currentColor;
+  text-decoration-color: var(--color-primary);
+  text-decoration-thickness: 0.3ex;
+  text-underline-offset: 0.3ex;
+}
+
+a:hover {
+  text-decoration-thickness: 0.4ex;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+h1 {
+  font-size: calc(var(--size) * 4.2);
+}
+h2 {
+  font-size: calc(var(--size) * 3.4);
+}
+h3 {
+  font-size: calc(var(--size) * 2.6);
+}
+h4 {
+  font-size: calc(var(--size) * 1.8);
+}
+
+ul,
+ol {
+  padding-inline-start: var(--spacing);
+}
+li {
+  margin-block-start: var(--spacing);
+}
+
+blockquote {
+  padding-inline-start: var(--spacing);
+  border-inline-start: 0.2em solid;
+  font-style: italic;
+  max-width: 50ch;
+}
+
+:is(h1, h2, h3, h4, blockquote) {
+  margin-block-end: calc(var(--spacing) / 2);
+}
+:is(h1, h2, h3, h4) + * {
+  margin-block-start: calc(var(--spacing) / 3);
+}
+:is(h1, h2, h3, h4) + :where(h2, h3, h4) {
+  margin-block-start: calc(var(--spacing) * 2);
+}
+
+.title {
+  text-decoration: none;
+}
+.title h1 {
+  font-size: calc(var(--size) * 3.4);
+  margin-top: calc(var(--spacing) / 2);
+}
+
+ul.blog-posts {
+  list-style-type: none;
+  padding: unset;
+}
+ul.blog-posts li {
+  display: flex;
+  flex-direction: column;
+}
+ul.blog-posts li span {
+  min-width: 11ch;
+}
+
+p.byline {
+  opacity: 0.5;
+}
+
+code {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro',
+    Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  padding: 2px calc(var(--spacing) / 4);
+  background-color: #282a36;
+  font-size: calc(var(--size) * 1.4);
+}
+pre code {
+  display: block;
+  padding: var(--spacing);
+  overflow-x: auto;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+}
+
+table {
+  width: 100%;
+}
+table,
+th,
+td {
+  border: 1px solid;
+  border-collapse: collapse;
+  border-color: var(--color-light);
+  padding: calc(var(--spacing) / 2);
+}
+
+.disabled {
+  color: currentColor;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media screen and (min-width: 600px) {
+  ul.blog-posts li {
+    flex-direction: row;
+    gap: calc(var(--spacing) / 2);
+  }
+}
+
+/* "Skip to main content" link */
+.skip-link {
+  position: absolute;
+  top: 5;
+  transform: translateY(-600%);
+  transition: transform 0.5s;
+  background-color: #181a20;
+  padding: 6px;
+}
+
+.skip-link:focus {
+  transform: translateY(0%);
+}
+
+figure {
+  margin-inline-start: 0em;
+  margin-inline-end: 0em;
+}
+
+figcaption > p {
+  margin-block-start: 9px;
+  text-align: center;
+  font-style: italic;
+}

assets/syntax.css

@@ -69,11 +69,11 @@
 /* Operator */ .chroma .o { color: #ff79c6 }
 /* OperatorWord */ .chroma .ow { color: #ff79c6 }
 /* Punctuation .chroma .p {  } */
-/* Comment */ .chroma .c { color: #7c90d0 }
-/* CommentHashbang */ .chroma .ch { color: #7c90d0 }
-/* CommentMultiline */ .chroma .cm { color: #7c90d0 }
-/* CommentSingle */ .chroma .c1 { color: #7c90d0 }
-/* CommentSpecial */ .chroma .cs { color: #7c90d0 }
+/* Comment */ .chroma .c { color: #8491b8 }
+/* CommentHashbang */ .chroma .ch { color: #8491b8 }
+/* CommentMultiline */ .chroma .cm { color: #8491b8 }
+/* CommentSingle */ .chroma .c1 { color: #8491b8 }
+/* CommentSpecial */ .chroma .cs { color: #8491b8 }
 /* CommentPreproc */ .chroma .cp { color: #ff79c6 }
 /* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
 /* Generic .chroma .g {  } */

layouts/partials/social_card.html

@@ -29,7 +29,7 @@
 
 {{ $fg = $fg.Filter (images.Text $byline (dict
     "font" $font
-    "color" "#c9d1d9"
+    "color" "#898a8d"
     "size" 60
     "linespacing" 30
     "x" 0

layouts/shortcodes/absfigure.html

@@ -0,0 +1,29 @@
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end -}}
+    <img src="{{ .Get "src" | absURL}}"
+         {{- if or (.Get "alt") (.Get "caption") }}
+         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+         {{- end -}}
+         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+         {{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
+    /><!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>