From 1f718887ca02af26354393c17a1c31f06d57ed10 Mon Sep 17 00:00:00 2001 From: jultty Date: Mon, 4 May 2026 09:25:56 -0300 Subject: [PATCH] Refactor and cleanup CSS classes --- scripts/analyze-css.sh | 66 +++++++++++++++++++++++++++++++++++++ scripts/lint.cks | 31 +++++++++++++++++ static/assets/css/style.css | 49 ++++++++++----------------- templates/content.html | 6 ++-- templates/index.html | 6 ++-- templates/link-page.html | 9 ++--- templates/links.html | 4 +-- templates/notes.html | 2 +- templates/posts.html | 2 +- 9 files changed, 129 insertions(+), 46 deletions(-) create mode 100755 scripts/analyze-css.sh create mode 100644 scripts/lint.cks diff --git a/scripts/analyze-css.sh b/scripts/analyze-css.sh new file mode 100755 index 0000000..fc5d392 --- /dev/null +++ b/scripts/analyze-css.sh @@ -0,0 +1,66 @@ +#!/usr/bin/env sh + +exclusions='^(index-user-controls|subpage-user-controls|title|taxon-title)$' + +set -eu +git_root=$(git rev-parse --show-toplevel) +style="$git_root/static/assets/css/style.css" + +diff_classes() { + template_classes=$(mktemp -u) + mkfifo "$template_classes" + + # TODO support multiple classes in the same class= key + grep -Eoh 'class="[a-zA-Z0-9-]+"' "$git_root/templates/"* | + sed -E 's/class=|"//g' | + grep -Ev "${exclusions:-f481b6cd58e}" | + sort | uniq \ + > "$template_classes" & + + css_classes=$(mktemp -u) + mkfifo "$css_classes" + + grep -Eo '\.[a-zA-Z-]+[0-9-]*' "$style" | + sed 's/\.//g' | + grep -v '^ttf$' | + grep -Ev "${exclusions:-f481b6cd58e}" | + sort | uniq \ + > "$css_classes" & + + echo "Classes diff:" + if ! diff "$template_classes" "$css_classes" > /dev/null; then + echo '< html | css >' + diff --color=auto "$template_classes" "$css_classes" + fi + [ -z "$exclusions" ] || echo "Exclusions: $exclusions" + + rm -f "$template_classes" + rm -f "$css_classes" + +} + +purge_css() { + + purged_css=$( + purgecss \ + --content "$git_root/templates/*.html" \ + --css "$style" \ + --rejected | + jq '.[0].rejected' + ) + + purged_css_count=$(printf '%s' "$purged_css" | jq '. | length') + + if [ "$purged_css_count" -gt 0 ]; then + printf '\n%s\n' purgecss: + printf '%s' "$purged_css" | jq '.' + exit 1 + fi +} + +diff_classes + +printf '\n%s\n' csskit: +csskit check "$git_root/scripts/lint.cks" "$style" + +purge_css diff --git a/scripts/lint.cks b/scripts/lint.cks new file mode 100644 index 0000000..2612135 --- /dev/null +++ b/scripts/lint.cks @@ -0,0 +1,31 @@ +:prefixed { + Level: error; + diagnostic: "Avoid prefixed properties"; +} + +style-value[name="color"]:not(:computed) { + level: error; + diagnostic: "Avoid color literals"; +} + +declaration:important { + level: error; + diagnostic: "Avoid !important"; +} + +declaration:unknown { + level: error; + diagnostic: "Unknown property"; +} + +declaration:empty { + level: error; + diagnostic: "Empty ruleset"; +} + +@stat --total-size { type: bytes; } +:root { collect: --total-size; } + +/* + vi: ft=css +*/ diff --git a/static/assets/css/style.css b/static/assets/css/style.css index 620b0c4..5cc2761 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -5,7 +5,7 @@ @font-face { font-family: 'Mononoki'; - src: url('../fonts/Mononoki.ttf'), format('truetype'); + src: url('../fonts/Mononoki.ttf') format('truetype'); } html { @@ -79,7 +79,7 @@ a.nav-tags-link { a.nav-tags-link:hover { color: light-dark(#0aa, #0ff); background: light-dark(#ddd, #002); - text-decoration-color: none; + text-decoration: none; } #language-selector { @@ -117,7 +117,7 @@ ul { list-style: none; } -div.contet-metadata { +div.content-metadata { display: inline; } @@ -132,11 +132,6 @@ div.content-tags { margin-left: 15px; } -.link-page-metadata div.content-tags { - margin-left: 10px; - margin-top: 0px; -} - .content-tags span { color: light-dark(#063, #6db); } @@ -231,41 +226,31 @@ main { border: 2px dotted #888; border-radius: 12px; margin: 0 20px; + padding: 20px 5px; } .link-title { + margin-top: 0; margin-bottom: 5px; } -.post-date, .link-date { +.content-date { color: #777; font-size: 14px; margin-top: 0px; text-decoration-thickness: 0.1px; } -div.post-date, div.content-date { +div.content-date { display: inline; } -div.post-date { - display: inline; -} - -.link-data { - margin-top: 0 -} - -.link-data .link-author { - margin-right: 20px; -} - .content-metadata .link-author { margin-left: 30px; } -article .post-date { - margin-left: 30px; +article .content-date { + margin-left: 15px; } p { @@ -273,7 +258,7 @@ p { line-height: 1.7em; } -.article p { +article p { margin: 25px 0px; } @@ -389,7 +374,7 @@ footer { /* narrow */ @media (max-width: 650px) { - .article { + article { margin: 0 20px; } @@ -413,8 +398,8 @@ footer { margin-left: 20px; } - .post-date { display: block; } - .link-date { display: block; } + .content-date { display: block; } + .content-date { display: block; } .link-author { display: block; } ul#posts li:before, ul#links li:before { @@ -435,12 +420,12 @@ footer { padding-top: 0px; } - .link-box .link-date, .link-box .link-author { + .link-box .content-date, .link-box .link-author { display: block; margin-bottom: 10px; } - .link-box .link-date, .link-box div.content-tags { + .link-box .content-date, .link-box div.content-tags { margin-left: 30px; } @@ -482,7 +467,7 @@ footer { margin-left: 50px; } - .article { + article { margin: 0 45px; } } @@ -592,7 +577,7 @@ footer { color: #bbb; } - .post-date { + .content-date { color: #888; } diff --git a/templates/content.html b/templates/content.html index 302edd1..5894efe 100644 --- a/templates/content.html +++ b/templates/content.html @@ -4,11 +4,11 @@ {%- endblock -%} {% block content %} -
-

{{ page.title }}

+
+

{{ page.title }}

-
diff --git a/templates/index.html b/templates/index.html index 2def7cb..7aa6e25 100644 --- a/templates/index.html +++ b/templates/index.html @@ -32,7 +32,7 @@
    {% for note in notes.pages %}
  • - {{ note.date | date(format="%Y-%m-%d") }} + {{ note.date | date(format="%Y-%m-%d") }} {{ note.title }}
    • {% if loop.index == 5 %}{% break %}{% endif %} @@ -56,7 +56,7 @@
      {% for link in links.pages %}
    • - {{ link.date | date(format="%Y-%m-%d") }} + {{ link.date | date(format="%Y-%m-%d") }} {% for post in posts.pages %}
    • - {{ post.date | date(format="%Y-%m-%d") }} + {{ post.date | date(format="%Y-%m-%d") }} {{ post.title }}
      • {% if loop.index == 5 %}{% break %}{% endif %} diff --git a/templates/link-page.html b/templates/link-page.html index 06dcfc2..a2d43ac 100644 --- a/templates/link-page.html +++ b/templates/link-page.html @@ -5,9 +5,9 @@

      {{ page.title }}

      -
      +
      {% if lang == "pt" %}Por{% else %}By{% endif %} {{ page.authors | join(sep=", ") }} - + {%- for taxonomy, terms in page.taxonomies -%} {%- if taxonomy == "tags" -%}
      tags:
        @@ -20,7 +20,8 @@ {%- endif -%} {% endfor -%}
      +
      - {%- if page.extra.comment %}

      {{ page.extra.comment }}

      {% endif %} - {{- page.content | safe }} +{%- if page.extra.comment %}

      {{ page.extra.comment }}

      {% endif %} +{{- page.content | safe }} {%- endblock content %} diff --git a/templates/links.html b/templates/links.html index a44a683..ffe538a 100644 --- a/templates/links.html +++ b/templates/links.html @@ -8,7 +8,7 @@
    • {%- if page.content -%} {%- set portuguese_page = get_page(path="links/" ~ page.slug ~ ".pt.md") %} - {%- else %} - + {%- endif %} {{ page.title }} by {{ page.authors | join(sep=", ") }} diff --git a/templates/notes.html b/templates/notes.html index a17558a..7221e29 100644 --- a/templates/notes.html +++ b/templates/notes.html @@ -5,7 +5,7 @@
        {%- for page in section.pages %}
      • - + {{ page.title }}
        • {%- endfor %} diff --git a/templates/posts.html b/templates/posts.html index a17558a..7221e29 100644 --- a/templates/posts.html +++ b/templates/posts.html @@ -5,7 +5,7 @@
          {%- for page in section.pages %}
        • - + {{ page.title }}
          • {%- endfor %}