Refactor and cleanup CSS classes

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

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
+*/

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;
   }
 

templates/content.html

@@ -4,11 +4,11 @@
 {%- endblock -%}
 
 {% block content %}
-        <article class="blog-post">
-          <h1 id="post-title">{{ page.title }}</h1>
+        <article>
+          <h1>{{ page.title }}</h1>
           <div class="content-metadata">
               <div class="content-date">
-                  <time class="post-date">
+                  <time class="content-date">
                       {{- page.date | date(format="%Y-%m-%d %H:%M:%S") -}}
                   </time>
               </div>

templates/index.html

@@ -32,7 +32,7 @@
           <ul id="posts">
             {% for note in notes.pages %}
             <li>
-              <span class="post-date">{{ note.date | date(format="%Y-%m-%d") }}</span>
+              <span class="content-date">{{ note.date | date(format="%Y-%m-%d") }}</span>
               <a href="{{ note.permalink | safe }}">{{ note.title }}</a>
             </li>
             {% if loop.index == 5  %}{% break %}{% endif %}
@@ -56,7 +56,7 @@
           <ul id="posts">
             {% for link in links.pages %}
             <li>
-              <span class="post-date">{{ link.date | date(format="%Y-%m-%d") }}</span>
+              <span class="content-date">{{ link.date | date(format="%Y-%m-%d") }}</span>
               <a href="
                   {%- if link.content -%}
                   {{ link.permalink | safe }}
@@ -86,7 +86,7 @@
           <ul id="posts">
             {% for post in posts.pages %}
             <li>
-              <span class="post-date">{{ post.date | date(format="%Y-%m-%d") }}</span>
+              <span class="content-date">{{ post.date | date(format="%Y-%m-%d") }}</span>
               <a href="{{ post.permalink | safe }}">{{ post.title }}</a>
             </li>
             {% if loop.index == 5  %}{% break %}{% endif %}

templates/link-page.html

@@ -5,9 +5,9 @@
     <h1 class="link-title">
         <a href="{{ page.extra.url }}" rel="octo:bookmarks">{{ page.title }}</a>
     </h1>
-    <div class="content-metadata link-page-metadata">
+    <div class="content-metadata">
         <span class="link-author">{% if lang == "pt" %}Por{% else %}By{% endif %} {{ page.authors | join(sep=", ") }}</span>
-        <time class="link-date"><strong>{% if lang == "pt" %}Linkado{% else %}Linked{% endif %} {{ page.date | date(format="%Y-%m-%d %H:%M:%S") }}</strong></time>
+        <time class="content-date"><strong>{% if lang == "pt" %}Linkado{% else %}Linked{% endif %} {{ page.date | date(format="%Y-%m-%d %H:%M:%S") }}</strong></time>
         {%- for taxonomy, terms in page.taxonomies -%}
         {%- if taxonomy == "tags" -%}
         <div class="content-tags"><span>tags:</span><ul>
@@ -20,7 +20,8 @@
         {%- endif -%}
         {% endfor -%}
     </div>
+</div>
 
-        {%- if page.extra.comment %}<p>{{ page.extra.comment }}</p>{% endif %}
-        {{- page.content | safe }}
+{%- if page.extra.comment %}<p>{{ page.extra.comment }}</p>{% endif %}
+{{- page.content | safe }}
 {%- endblock content %}

templates/links.html

@@ -8,7 +8,7 @@
           <li>
           {%- if page.content -%}
           {%- set portuguese_page = get_page(path="links/" ~ page.slug ~ ".pt.md") %}
-            <time class="link-date"><a href="
+            <time class="content-date"><a href="
             {%- if lang == "pt" -%}
               {{ portuguese_page.permalink -}}
             {%- else -%}
@@ -16,7 +16,7 @@
             {%- endif -%}
             ">{{ page.date | date(format="%Y-%m-%d") -}}</a></time>
           {%- else %}
-            <time class="link-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
+            <time class="content-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
           {%- endif %}
             <a href="{{ page.extra.url | safe }}">{{ page.title }}</a>
             <small class="link-author">by {{ page.authors | join(sep=", ") }}</small>

templates/notes.html

@@ -5,7 +5,7 @@
         <ul id="posts">
           {%- for page in section.pages %}
           <li>
-            <time class="post-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
+            <time class="content-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
             <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
           </li>
           {%- endfor %}

templates/posts.html

@@ -5,7 +5,7 @@
         <ul id="posts">
           {%- for page in section.pages %}
           <li>
-            <time class="post-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
+            <time class="content-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
             <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
           </li>
           {%- endfor %}