diff --git a/.forgejo/workflows/build.yml b/.forgejo/workflows/build.yml index 85f2e00..6c4af19 100644 --- a/.forgejo/workflows/build.yml +++ b/.forgejo/workflows/build.yml @@ -17,7 +17,7 @@ jobs: - name: Set up zola uses: https://github.com/taiki-e/install-action@v2 with: - tool: zola@0.22.1 + tool: zola@0.23.6 - name: Build project run: zola build diff --git a/config.toml b/config.toml index 23ca87e..7e17907 100644 --- a/config.toml +++ b/config.toml @@ -7,9 +7,8 @@ compile_sass = false generate_feeds = true build_search_index = false -[markdown] +[[taxonomies]] +name = "tags" [markdown.highlighting] theme = "catppuccin-macchiato" - -[extra] diff --git a/content/blog/post-content-styles.md b/content/blog/post-content-styles.md index 87762ed..17da7fa 100755 --- a/content/blog/post-content-styles.md +++ b/content/blog/post-content-styles.md @@ -1,6 +1,9 @@ +++ title = "Testing post content styles" date = 2026-01-03 + +[taxonomies] +tags = ["Test"] +++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget diff --git a/static/global.css b/static/global.css index a5eb5d4..4c128f2 100755 --- a/static/global.css +++ b/static/global.css @@ -1,287 +1,448 @@ :root { - --background-color: #212529; - --text-color: #ededed; - --primary-color: #133b6e; - --accent-color: #dc7c28; + color-scheme: dark; + --background-color: #16191d; + --surface-color: #1e2328; + --text-color: #e9e7e2; + --muted-color: #a8afb6; + --code-color: #e1e4e8; + --accent-color: #f0902f; --link-color: #70b3ff; - --border1-color: #dc7c28; - --border2-color: #3d444d; + --line-color: #3d444d; + --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", Consolas, "Liberation Mono", monospace; + --content-width: 42rem; + --logo-gap: 1.25rem; + --logo-nav-gap: 1.5rem; + --gutter: clamp(1rem, 4vw, 1.5rem); } -body { +/* ========================================================================== + Base + ========================================================================== */ +*, +*::before, +*::after { box-sizing: border-box; - background-color: var(--background-color); - color: var(--text-color); - font-family: sans-serif; - font-weight: 400; - line-height: 1.5; - margin: 0 auto; } html { min-height: 100%; scroll-behavior: smooth; font-size: 100%; + -webkit-text-size-adjust: 100%; } -h1 { - font-size: 1.8rem; +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } } -h2 { - font-size: 1.5rem; +body { + margin: 0; + background-color: var(--background-color); + color: var(--text-color); + font-family: var(--font-sans); + line-height: 1.6; } -h3 { - font-size: 1.25rem; +.container { + width: min(100%, var(--content-width)); + margin-inline: auto; + padding: var(--gutter); } -h4 { - font-size: 1.1rem; +/* adjacent containers (header + main + footer) shouldn't stack their padding */ +header.container { + padding-top: 0.4rem; + padding-bottom: 0; } -h5 { - font-size: 1rem; +header + .container, +.container + .container { + padding-top: 0; } -small { - font-size: 0.667rem; /* 10.72px */ +main { + font-size: 1.0625rem; } +main img { + display: block; + max-width: 100%; + height: auto; + border-radius: 6px; +} + +figure { + margin: 1.5rem 0; +} + +figcaption { + margin-top: 0.5rem; + color: var(--muted-color); + font-size: 0.875rem; +} + +/* ========================================================================== + Headings + ========================================================================== */ h1, h2, h3, h4, h5, h6 { - margin-top: 24px; - margin-bottom: 10px; + margin-top: 2rem; + margin-bottom: 0.6rem; color: var(--text-color); - line-height: 1.2; font-weight: 700; + line-height: 1.2; + letter-spacing: -0.01em; + text-wrap: balance; +} + +h1 { + font-size: 2rem; +} +h2 { + font-size: 1.5rem; +} +h3 { + font-size: 1.25rem; +} +h4 { + font-size: 1.1rem; +} +h5, +h6 { + font-size: 1rem; +} + +small { + font-size: 0.875em; + color: var(--muted-color); } p { - margin-top: 8px; -} - -ul { - display: flex; - flex-direction: column; - list-style: none; - padding-left: 0; margin-top: 0; - margin-bottom: 0; -} - -ul, -ol { - list-style-position: inside; - padding-left: 0px; -} - -ul { - list-style-type: disc; -} - -ul ul { - list-style-type: disc; - padding-left: 10px; -} - -.container { - max-width: 40rem; - width: 100%; - margin-right: auto; - margin-left: auto; - padding: 10px; -} - -@media (min-width: 576px) { - .container { - width: 540px; - } -} - -@media (min-width: 768px) { - .container { - width: 720px; - } -} - -@media (min-width: 992px) { - .container { - width: 960px; - } -} - -@media (min-width: 1200px) { - .container { - width: 1140px; - } -} - -hr { - background-color: var(--border1-color); -} - -blockquote { - border-left: 4px solid var(--border1-color); - margin-left: 0px; - padding-left: 10px; -} - -a { - border-bottom: 2px solid transparent; - color: var(--link-color); - text-decoration: none; -} - -a:hover { - border-bottom: 2px solid var(--link-color); - text-decoration: none; -} - -main { - color: var(--text-color); - font-size: 1.1rem; -} - -main img { - max-width: 100%; -} - -/* code blocks */ -figure { - margin: 0; -} - -pre { - padding: 8px; - border: 1px solid var(--border2-color); -} - -pre code { - overflow-x: scroll; - display: block; - border-radius: 0; - color: #e1e4e8; + margin-bottom: 1.1rem; + text-wrap: pretty; } .title h1 { - margin-top: 0px; - margin-bottom: 0px; + margin: 0; } -/* header/footer */ -header { - color: var(--text-color); - margin-bottom: 5px; +/* ========================================================================== + Links + ========================================================================== */ +a { + color: var(--link-color); + text-decoration-line: none; + text-decoration-thickness: 1px; + text-decoration-color: color-mix(in srgb, var(--link-color) 75%, transparent); + text-underline-offset: 0.2em; } -nav { - max-width: 1200px; - margin: 0 auto; +a:hover { + text-decoration-line: underline; + text-decoration-thickness: 2px; + text-decoration-color: currentColor; } +a:focus-visible { + outline: 2px solid var(--accent-color); + outline-offset: 3px; + border-radius: 2px; +} + +/* ========================================================================== + Lists + ========================================================================== */ +main ul, +main ol { + margin: 0 0 1.1rem; + padding-left: 1.4rem; + list-style-position: outside; +} + +main li + li { + margin-top: 0.35rem; +} + +main li::marker { + color: var(--accent-color); +} + +main ul ul, +main ol ol, +main ul ol, +main ol ul { + margin-top: 0.35rem; + margin-bottom: 0; +} + +/* ========================================================================== + Rules, quotes, code, tables + ========================================================================== */ +hr { + margin: 2rem 0; + border: none; + border-top: 2px solid var(--line-color); +} + +blockquote { + margin: 1.5rem 0; + padding: 0.25rem 0 0.25rem 1.1rem; + border-left: 4px solid var(--accent-color); + color: var(--muted-color); + font-style: italic; +} + +blockquote p:last-child { + margin-bottom: 0; +} + +code { + padding: 0.1em 0.35em; + border-radius: 4px; + background-color: var(--surface-color); + font-family: var(--font-mono); + font-size: 0.9em; +} + +pre { + margin: 1.5rem 0; + padding: 1rem; + overflow-x: auto; + border: 1px solid var(--line-color); + border-radius: 6px; + background-color: var(--surface-color); + line-height: 1.5; + tab-size: 2; +} + +pre code { + display: block; + padding: 0; + border-radius: 0; + background-color: transparent; + color: var(--code-color); + font-size: 0.875rem; +} + +table { + display: block; + width: 100%; + max-width: 100%; + margin: 1.5rem 0; + overflow-x: auto; + border-collapse: collapse; + font-size: 0.95rem; +} + +th, +td { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid var(--line-color); + text-align: left; +} + +th { + border-bottom-color: var(--accent-color); + font-weight: 700; +} + +/* ========================================================================== + Header / nav / footer + ========================================================================== */ nav ul { - list-style-type: none; - flex-direction: row; - gap: 25px; + display: flex; + flex-wrap: wrap; + gap: 0.25rem 1.5rem; + margin: 0; + padding: 0; + list-style: none; } nav li { - font-weight: bold; - padding-top: 2px; - padding-bottom: 2px; + font-weight: 600; +} + +nav a { + display: inline-block; + padding: 0.1rem 0; } footer { display: flex; justify-content: space-between; - margin-top: 20px; - margin-bottom: 20px; - padding-top: 10px; - padding-bottom: 10px; - border-top: 3px solid var(--border1-color); - color: var(--text-color); + gap: 1rem; + margin-block: 2.25rem 1.25rem; + color: var(--muted-color); } +footer div { + width: 100%; + border-top: 3px solid var(--accent-color); + padding-top: 0.75rem; +} -/* blog-list */ +/* ========================================================================== + Blog list + ========================================================================== */ .blog-list { + display: flex; flex-direction: column; - gap: 5px; - margin-top: 0; - margin-bottom: 10px; - list-style: none; + margin: 0 0 1rem; padding: 0; + list-style: none; } .blog-item { display: flex; - flex-direction: column; - gap: 2px; - padding: 6px 0px; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-between; + gap: 0.15rem 1.5rem; + margin: 0; + padding: 0.55rem 0; + border-bottom: 2px solid var(--line-color); } .blog-item a { - font-size: 1.063rem; - font-weight: bold; + font-size: 1.1rem; + font-weight: 600; + line-height: 1.35; } .blog-item-meta { + flex-shrink: 0; + color: var(--muted-color); font-size: 0.875rem; + font-variant-numeric: tabular-nums; } - -/* index content */ +/* ========================================================================== + Home page + ========================================================================== */ .index-content .title { display: flex; align-items: center; - gap: 16px; - margin-bottom: 20px; + gap: 1rem; + /* space above (nav to logo) is slightly larger than below (logo to intro + text); the 0.1rem offsets the nav link's own vertical padding */ + margin-top: calc(var(--logo-nav-gap) - 0.1rem); + margin-bottom: var(--logo-gap); } .index-content .title img { width: 64px; height: 64px; - border-radius: 5px; + border-radius: 8px; } - -/* blog content */ -.blog-content .title { - margin-bottom: 10px; +.index-content h2 { + padding-top: 1.8rem; + border-top: 3px solid var(--accent-color); } +/* ========================================================================== + Blog index & 404 page + ========================================================================== */ +.blog .title, +.error-404 { + /* heading above the rule, same 1.8rem spacings as the home page divider */ + margin-top: 1.8rem; + margin-bottom: 0.6rem; + padding-bottom: 1.8rem; + border-bottom: 3px solid var(--accent-color); +} -/* blog-page content */ +.error-404 .title { + margin-bottom: 1.5rem; +} + +/* ========================================================================== + Blog page + ========================================================================== */ .blog-page-content .title { display: flex; flex-direction: column; - gap: 4px; - border-bottom: 3px solid var(--border1-color); - margin-bottom: 20px; + gap: 0.6rem; + margin-top: 1.8rem; /* same gap above the title as the blog index page */ + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 3px solid var(--accent-color); } .blog-page-content .title h1 { - margin-top: 0px; - margin-bottom: 0px; + margin: 0; + padding-bottom: 0; + border-bottom: none; + font-weight: 700; } .blog-page-content .title span { - margin-bottom: 10px; - font-size: 0.875rem; - font-weight: normal; - color: var(--text-color); -} - -.blog-page-content p { - font-family: serif; + color: var(--muted-color); + font-size: 0.9rem; } +/* long-form text: reset to 1rem (main's base is slightly larger) */ +.blog-page-content p, .blog-page-content li { - font-family: serif; + font-size: 1rem; } +/* in-post headings */ +.blog-page-content h1, +.blog-page-content h2, +.blog-page-content h3, +.blog-page-content h4, +.blog-page-content h5, +.blog-page-content h6 { + margin: 1.25rem 0 0.5rem; + font-weight: 500; +} + +/* headings get a subtle underline rule */ +.blog-page-content h1, +.blog-page-content h2, +.blog-page-content h3, +.blog-page-content h4, +.blog-page-content h5 { + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--line-color); +} + +/* ========================================================================== + Post navigation + ========================================================================== */ +.post-nav { + display: flex; + justify-content: space-between; + gap: 1rem; + margin-top: 2rem; + padding-top: 0.75rem; + border-top: 2px solid var(--line-color); + font-size: 0.9375rem; +} + +/* ========================================================================== + Small screens + ========================================================================== */ +@media (max-width: 30rem) { + main { + font-size: 1rem; + } + + .blog-item { + flex-direction: column; + align-items: flex-start; + } + + footer { + flex-direction: column; + } +} diff --git a/templates/404.html b/templates/404.html index 315fc1d..ed0c43a 100644 --- a/templates/404.html +++ b/templates/404.html @@ -1,9 +1,12 @@ {% extends "base.html" %} +{% block title %}404 - {{ config.title }}{% endblock title %} + {% block content %} -
+

404 Page Not Found

+

That page does not exist.

{% endblock content %} diff --git a/templates/base.html b/templates/base.html index dabd349..b93d1c3 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,48 +2,52 @@ - - {% if page.title %} - {{ page.title }} - {% elif section.title %} - {{ config.title }} - {{ section.title }} - {% else %} - {{ config.title }} - {% endif %} - - - - + + + + {% block title %}{{ config.title }}{% endblock title %} + {% set desc = config.description %} + {% if page and page.description %} + {% set desc = page.description %} + {% endif %} + + {% if page %} + + + + + + {% endif %} - - + + + {% set path = current_path | default(value="") %} +
-
- {% block content %} {% endblock content %} + {% block content %} + {% endblock content %}
diff --git a/templates/blog-page.html b/templates/blog-page.html index 832f44f..4bec55a 100644 --- a/templates/blog-page.html +++ b/templates/blog-page.html @@ -1,12 +1,36 @@ {% extends "base.html" %} +{% block title %}{{ page.title }}{% endblock title %} + {% block content %}

{{ page.title }}

- {{ page.date }} + {{ page.date | date(format="%Y-%m-%d") }} + {% if page.taxonomies.tags %} + + {% for tag in page.taxonomies.tags %} + {% set t = get_taxonomy_term(kind="tags", term=tag) %} + {{ tag }}{% if not loop.last %} · {% endif %} + {% endfor %} + + {% endif %}
{{ page.content | safe }} -
+ {# adjacent posts: higher = older (below in the list), lower = newer (above) #} + {% if page.higher or page.lower %} + + {% endif %}
{% endblock content %} diff --git a/templates/blog.html b/templates/blog.html index 385e91a..3e69180 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -1,21 +1,19 @@ {% extends "base.html" %} +{% block title %}{{ section.title }} - {{ config.title }}{% endblock title %} + {% block content %} -
+

{{ section.title }}

-
-
    - {% for page in section.pages %} -
  • - - {{ page.date }} -
  • - {% endfor %} -
-
+
{% endblock content %} diff --git a/templates/index.html b/templates/index.html index 50414c2..022fe77 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,7 +3,7 @@ {% block content %}
- logo +

{{ config.title }}

@@ -15,13 +15,15 @@

Latest blog posts

    {% set blog = get_section(path="blog/_index.md") %} - {% for page in blog.pages | slice(end=5) %} -
  • - - {{ page.date }} -
  • + {% for page in blog.pages %} + {% if loop.index <= 5 %} +
  • + + {{ page.date | date(format="%Y-%m-%d") }} +
  • + {% endif %} {% endfor %}
diff --git a/templates/taxonomy_list.html b/templates/taxonomy_list.html new file mode 100644 index 0000000..4785293 --- /dev/null +++ b/templates/taxonomy_list.html @@ -0,0 +1,16 @@ +{% extends "base.html" %} + +{% block title %}Tags - {{ config.title }}{% endblock title %} + +{% block content %} +
+
+

Tags

+
+

+ {% for term in terms %} + {{ term.name }}{% if not loop.last %} · {% endif %} + {% endfor %} +

+
+{% endblock content %} diff --git a/templates/taxonomy_single.html b/templates/taxonomy_single.html new file mode 100644 index 0000000..26f7977 --- /dev/null +++ b/templates/taxonomy_single.html @@ -0,0 +1,19 @@ +{% extends "base.html" %} + +{% block title %}{{ term.name }} - {{ config.title }}{% endblock title %} + +{% block content %} +
+
+

{{ term.name }}

+
+
    + {% for page in term.pages %} +
  • + {{ page.title }} + {{ page.date | date(format="%Y-%m-%d") }} +
  • + {% endfor %} +
+
+{% endblock content %}