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/style.css | 177 | ||||
| -rw-r--r-- | assets/syntax.css | 10 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | layouts/_default/list.html | 2 | ||||
| -rw-r--r-- | layouts/_default/single.html | 2 | ||||
| -rw-r--r-- | layouts/partials/social_card.html | 4 | ||||
| -rw-r--r-- | layouts/shortcodes/absfigure.html | 29 |
11 files changed, 243 insertions, 187 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/style.css b/assets/style.css deleted file mode 100644 index 0173a36..0000000 --- a/assets/style.css +++ /dev/null @@ -1,177 +0,0 @@ -body { - font-family: Verdana, sans-serif; - margin: auto; - padding: 20px; - max-width: 720px; - text-align: left; - background-color: #1d1f27; - word-wrap: break-word; - overflow-wrap: break-word; - line-height: 1.5; - color: #c9d1d9; -} - -h1, -h2, -h3, -h4, -h5, -h6, -strong, -b { - color: #eee; -} - -a { - color: #8cc2dd; -} - -.title { - text-decoration: none; - border: 0; -} -.title h1 { - font-size: 24px; - margin: 19.92px 0 19.92px 0; -} - -.title span { - font-weight: 400; -} - -nav a { - margin-right: 10px; -} - -textarea { - background-color: #252525; - color: #ddd; - width: 100%; - font-size: 16px; -} - -input { - background-color: #252525; - color: #ddd; - font-size: 16px; -} - -content { - line-height: 1.6; -} - -table { - width: 100%; -} - -table, -th, -td { - border: 1px solid; - border-collapse: collapse; - border-color: #c9d1d9; - padding: 5px; -} - -img { - max-width: 100%; -} - -code { - padding: 2px 5px; - color: #f8f8f2; - background-color: #282a36; -} - -pre code { - display: block; - padding: 20px; - white-space: pre-wrap; - font-size: 14px; - overflow-x: auto; -} - -blockquote { - border-left: 1px solid #999; - color: #ccc; - padding-left: 20px; - font-style: italic; -} - -footer { - padding: 25px; - text-align: center; -} - -.helptext { - color: #aaa; - font-size: small; -} - -.errorlist { - color: #eba613; - font-size: small; -} - -/* blog posts */ -ul.blog-posts { - list-style-type: none; - padding: unset; -} - -ul.blog-posts li { - display: flex; - margin-bottom: 10px; -} - -ul.blog-posts li span { - flex: 0 0 130px; -} - -ul.blog-posts li a:visited { - color: #8b6fcb; -} - -a.blog-tags { - line-height: 2; -} - -h3.blog-filter { - margin-bottom: 0; -} - -.disabled { - color: currentColor; - cursor: not-allowed; - opacity: 0.7; -} - -p.byline { - font-style: italic; -} - -/* "Skip to main content" link */ -.skip-link { - position: absolute; - top: 5; - transform: translateY(-600%); - transition: transform 0.5s; - background-color: #1d1f27; - padding: 6px; -} - -.skip-link:focus { - transform: translateY(0%); -} - -figure { - margin-inline-start: 0em; - margin-inline-end: 0em; -} - -figcaption > p { - margin-block-start: 0px; - text-align: center; - font-style: italic; - color: #ccc; -} 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/_default/baseof.html b/layouts/_default/baseof.html index 475d6f9..e5c4f01 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -11,7 +11,7 @@ {{- partial "seo_tags.html" . -}} <meta name="referrer" content="no-referrer-when-downgrade" /> - {{ $style := resources.Get "style.css" | minify }} + {{ $style := resources.Get "herman.css" | minify }} <link href="{{ $style.RelPermalink }}" rel="stylesheet"> {{ if (.Page.Store.Get "hasCodeBlock") }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 354bc9c..3813bd0 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -28,7 +28,7 @@ {{ if not .Data.Singular }} <div> {{ range .Site.Taxonomies.tags }} - <a class="blog-tags" href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a> + <a class="blog-tags" href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a> {{ end }} </div> {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 6f6c699..b176628 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -13,7 +13,7 @@ </content> <p> {{ range (.GetTerms "tags") }} - <a class="blog-tags" href="{{ .Permalink }}">#{{ .LinkTitle }}</a> + <a class="blog-tags" href="{{ .Permalink }}">#{{ .LinkTitle }}</a> {{ end }} </p> {{ with .Site.Params.author.email }} diff --git a/layouts/partials/social_card.html b/layouts/partials/social_card.html index 74f1b88..6faacc0 100644 --- a/layouts/partials/social_card.html +++ b/layouts/partials/social_card.html @@ -5,7 +5,7 @@ {{ $fg = $fg.Filter (images.Text .Title (dict "font" $font - "color" "#f8f8f2" + "color" "#fafafa" "size" 130 "linespacing" 20 "x" 0 @@ -18,7 +18,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 |
