diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | assets/herman.css | 202 | ||||
| -rw-r--r-- | assets/images/social_card_bg.png | bin | 651110 -> 6698 bytes | |||
| -rw-r--r-- | assets/images/social_card_fg.png | bin | 367423 -> 4656 bytes | |||
| -rw-r--r-- | assets/syntax.css | 10 | ||||
| -rw-r--r-- | layouts/partials/social_card.html | 2 | ||||
| -rw-r--r-- | layouts/shortcodes/absfigure.html | 29 |
7 files changed, 239 insertions, 6 deletions
@@ -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 diff --git a/assets/herman.css b/assets/herman.css new file mode 100644 index 0000000..f2573c3 --- /dev/null +++ b/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; +} diff --git a/assets/images/social_card_bg.png b/assets/images/social_card_bg.png Binary files differindex ad1d528..857ea63 100644 --- a/assets/images/social_card_bg.png +++ b/assets/images/social_card_bg.png diff --git a/assets/images/social_card_fg.png b/assets/images/social_card_fg.png Binary files differindex 01b207c..e005b0a 100644 --- a/assets/images/social_card_fg.png +++ b/assets/images/social_card_fg.png diff --git a/assets/syntax.css b/assets/syntax.css index 5f15788..a28d967 100644 --- a/assets/syntax.css +++ b/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 { } */ diff --git a/layouts/partials/social_card.html b/layouts/partials/social_card.html index 1568475..d171da0 100644 --- a/layouts/partials/social_card.html +++ b/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 diff --git a/layouts/shortcodes/absfigure.html b/layouts/shortcodes/absfigure.html new file mode 100644 index 0000000..ad60c6c --- /dev/null +++ b/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>
\ No newline at end of file |
