refactor: add .section-title (#36)

For the small title before the card

Remove .widget-title, .archive-date, .taxonomy-type from SCSS, as they all share the same style.

assets/scss/partials/layout/archives.scss

@@ -1,15 +1,5 @@
 .archives-group {
     margin-bottom: var(--section-separation);
-    .archives-date {
-        text-transform: uppercase;
-        margin-bottom: 10px;
-        font-size: 1.6rem;
-        font-weight: bold;
-
-        a {
-            color: var(--body-text-color);
-        }
-    }
 }
 
 .template-archives {

assets/scss/partials/layout/taxonomy.scss

@@ -1,11 +1,3 @@
-.taxonomy-type {
-    text-transform: uppercase;
-    color: var(--body-text-color);
-    font-weight: bold;
-    margin-bottom: 5px;
-    font-size: 1.6rem;
-}
-
 .taxonomy-card {
     border-radius: var(--card-border-radius);
     background-color: var(--card-background);

assets/scss/partials/widgets.scss

@@ -1,13 +1,4 @@
 .widget {
-    .widget-title {
-        text-transform: uppercase;
-        color: var(--body-text-color);
-        font-weight: bold;
-        margin: 0;
-        margin-bottom: 10px;
-        font-size: 1.6rem;
-    }
-
     .widget-icon {
         svg {
             width: 32px;

assets/scss/style.scss

@@ -40,4 +40,18 @@ a {
             box-shadow: 0px -10px 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
         }
     }
-}
+}
+
+.section-title {
+    text-transform: uppercase;
+    margin-top: 0;
+    margin-bottom: 10px;
+    display: block;
+    font-size: 1.6rem;
+    font-weight: bold;
+    color: var(--body-text-color);
+
+    a {
+        color: var(--body-text-color);
+    }
+}

layouts/_default/archives.html

@@ -2,14 +2,12 @@
 {{ define "main" }}
     {{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
     {{ if $categories }}
-    <div class="widget">
+    <h2 class="section-title">Categories</h2>
-        <h1 class="widget-title">Categories</h1>
+    <div class="category-list">
-        <div class="category-list">
+        <div class="article-list--tile">
-            <div class="article-list--tile">
+            {{ range $categories }}
-                {{ range $categories }}
+                {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
+            {{ end }}
-                {{ end }}
-            </div>
         </div>
     </div>
     {{ end }}
@@ -21,7 +19,7 @@
     {{ range $filtered.GroupByDate "2006" }}
     {{ $id := lower (replace .Key " " "-") }}
     <div class="archives-group" id="{{ $id }}">
-        <h3 class="archives-date"><a href="{{ $.Permalink }}#{{ $id }}">{{ .Key }}</a></h3>
+        <h2 class="archives-date section-title"><a href="{{ $.Permalink }}#{{ $id }}">{{ .Key }}</a></h2>
         <div class="article-list--compact">
             {{ range .Pages }}
                 {{ partial "article-list/compact" . }}

layouts/_default/term.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <h3 class="taxonomy-type">{{ .Type | singularize  | humanize }}</h3>
+    <h3 class="taxonomy-type section-title">{{ .Type | singularize | humanize }}</h3>
     <div class="taxonomy-card">
         <div class="taxonomy-details">
             <h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>

layouts/partials/article/components/related-contents.html

@@ -1,7 +1,7 @@
-<aside class="widget related-contents--wrapper">
+<aside class="related-contents--wrapper">
     {{ $related := .Site.RegularPages.Related . | first 5 }}
     {{ with $related }}
-        <h1 class="widget-title">{{ T "relatedContents" }}</h1>
+        <h2 class="section-title">{{ T "relatedContents" }}</h2>
         <div class="related-contents">
             <div class="flex article-list--tile">
                 {{ range . }}

layouts/partials/widget/archives.html

@@ -2,7 +2,7 @@
     <div class="widget-icon">
         {{ partial "helper/icon" "infinity" }}
     </div>
-    <h1 class="widget-title">{{ T "widgetArchivesTitle" }}</h1>
+    <h2 class="widget-title section-title">{{ T "widgetArchivesTitle" }}</h2>
 
     {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
     {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}

layouts/partials/widget/tag-cloud.html

@@ -2,7 +2,7 @@
     <div class="widget-icon">
         {{ partial "helper/icon" "tag" }}
     </div>
-    <h1 class="widget-title">{{ T "widgetTagCloudTitle" }}</h1>
+    <h2 class="widget-title section-title">{{ T "widgetTagCloudTitle" }}</h2>
 
     <div class="tagCloud-tags">
         {{ range first .Site.Params.widgets.tagCloud.limit .Site.Taxonomies.tags.ByCount }}