WIP breadcrumb style

See #52

assets/css/bobastyle.css

@@ -123,8 +123,8 @@
   gap: 40px;
 }
 
-.page-list,
+.page-list ul,
-.series-taxonomy-list {
+.series-taxonomy ul {
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -132,13 +132,12 @@
   gap: 40px;
 }
 
-.series-taxonomy-list {
+.series-taxonomy ul {
   gap: 80px;
 }
 
-.page-list .post,
+.page-list li,
-.series-taxonomy-list .series-taxonomy,
+.series-taxonomy li {
-.series-taxonomy .post {
   padding-top: 8px;
   padding-left: 24px;
   padding-right: 24px;
@@ -207,7 +206,7 @@
   margin: 0;
 }
 
-.taxonomy-list {
+.taxonomy-list ul {
   list-style: none;
   padding: 0;
   display: flex;
@@ -215,7 +214,7 @@
   gap: 10px;
 }
 
-.taxonomy-list .taxonomy-term {
+.taxonomy-list li {
   background-color: var(--background-1);
   color: var(--text-1);
   padding: 8px 12px;
@@ -231,7 +230,7 @@
 }
 
 @media (max-width: 480px) {
-  .taxonomy-list .taxonomy-term {
+  .taxonomy-list li {
     flex-direction: column;
     gap: 4px;
   }
@@ -245,7 +244,7 @@
 
 
 /* Series list format */
-.series-page-list {
+.series-pages ul {
   display: flex;
   gap: 10px;
   flex-flow: row wrap;
@@ -256,7 +255,7 @@
   border-radius: 16px;
 }
 
-.series-page-list .post {
+.series-pages li {
   flex: 1;
   min-width: 49%;
 }
@@ -305,13 +304,8 @@
 
 
 /* Header formatting (website title and article section headers) */
-.header {
+h1.header {
-  margin: 16px 0;
-}
-
-.header h1 {
   font-size: 1.5em;
-  font-weight: bold;
 }
 
 .header a,
@@ -353,7 +347,6 @@
 }
 
 
-
 /* Related posts */
 .full-width-page-list {
   /* make left/right 0 margin so it takes up full width */
@@ -366,16 +359,16 @@
   margin-right: 20px;
 }
 
-.full-width-page-list .post {
+.full-width-page-list li {
   min-width: 300px;
   max-width: 300px;
 
 }
 
-.full-width-page-list .post:first-child {
+.full-width-page-list li:first-child {
   margin-left: 20px;
 }
-.full-width-page-list .post:last-child {
+.full-width-page-list li:last-child {
   margin-right: 20px;
 }
 
@@ -400,7 +393,7 @@
   }
 }
 
-.full-width-page-list .page-list {
+.full-width-page-list .page-list ul {
   display: flex;
   flex-direction: row;
   gap: 20px;
@@ -408,7 +401,6 @@
 }
 
 
-
 /* Social media share buttons */
 .share-buttons {
   background: var(--background-1);
@@ -447,7 +439,6 @@
 */
 
 
-
 /* See also formating */
 .see-also {
   background-color: var(--background-1);
@@ -462,7 +453,6 @@
 }
 
 
-
 /* Back to top */
 #back-to-top {
   position: fixed;
@@ -658,13 +648,6 @@ table.markdown {
   color: var(--text-1);
 }
 
-:target {
-  animation: target-fade 10s ease-out;
-}
-@keyframes target-fade {
-    0% { background-color: var(--background-yellow-2); }
-}
-
 * {
   box-sizing: border-box;
 }
@@ -808,20 +791,45 @@ li.disabled > .page-link:hover {
 
 /* Breadcrumb navigation */
 .breadcrumb {
-  margin: 30px 0 20px;
+  margin: 16px 0;
 }
 
 .breadcrumb ul {
   padding: 0;
   list-style: none;
+  display: flex;
+  justify-content: space-between;
+  flex-grow: 1;
 }
 
 .breadcrumb li {
   display: inline;
+  padding: 8px;
+  background-color: var(--background-1);
 }
 
-.breadcrumb li+li:before {
+.breadcrumb li:hover {
-  content: "»"
+  background-color: var(--background-2);
+  cursor: pointer;
+}
+
+.breadcrumb li a:hover {
+  text-decoration: none;
+}
+
+.breadcrumb li.active:hover {
+  cursor: default;
+}
+
+.breadcrumb li:first-child {
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+  padding-left: 12px;
+}
+.breadcrumb li:last-child {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+  padding-right: 12px;
 }
 
 

layouts/_default/summary/post.html

@@ -1,21 +1,23 @@
-<h2 class="post-title">
+<div class="post">
+    <h2 class="post-title">
         {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
         {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
-</h2>
+    </h2>
 
-{{ partial "post-metadata/short.html" . }}
+    {{ partial "post-metadata/short.html" . }}
 
-{{ with .Resources.GetMatch "feature" }}
+    {{ with .Resources.GetMatch "feature" }}
         <div class="post-media">
             {{ partial "figure.html" (dict "src" .) }}
         </div>
-{{ end }}
+    {{ end }}
 
-<div class="post-description">
+    <div class="post-description">
         {{ partial "description-or-summary.html" . }}
-</div>
+    </div>
 
-<div class="readmore">
+    <div class="readmore">
         <a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
+    </div>
 </div>

layouts/_default/summary/series.html

@@ -1,24 +1,26 @@
-<h2 class="post-title">
+<div class="post">
+    <h2 class="post-title">
         {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
         {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
-</h2>
+    </h2>
 
-{{ partial "post-metadata/series.html" . }}
+    {{ partial "post-metadata/series.html" . }}
 
-<div class="post-description">
+    <div class="post-description">
         {{ partial "description-or-summary.html" . }}
-</div>
+    </div>
 
-<div class="series-page-list">
+    <div class="series-pages">
+        <ul>
             {{ $i := 0 }}
             {{ $total := len .Data.Pages }}
             {{ range .Data.Pages.Reverse }}
                 {{ $i = add 1 $i }}
                 {{ .Scratch.Set "series_position" $i }}
                 {{ .Scratch.Set "series_total" $total }}
-        <article class="post">
+                <li>{{ .Render "summary/series_post" }}</li>
-            {{ .Render "summary/series_post" }}
-        </article>
             {{ end }}
+        </ul>
+    </div>
 </div>

layouts/_default/summary/series_post.html

@@ -1,27 +1,29 @@
-<div class="post-series-position">
+<div class="post">
+    <div class="post-series-position">
         {{ if .Scratch.Get "series_position" }}
             ({{ .Scratch.Get "series_position" }}/{{ .Scratch.Get "series_total" }})
         {{ end }}
-</div>
+    </div>
 
-<h2 class="post-title">
+    <h2 class="post-title">
         {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
         {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
-</h2>
+    </h2>
 
-{{ partial "post-metadata/short.html" . }}
+    {{ partial "post-metadata/short.html" . }}
 
-{{ with .Resources.GetMatch "feature" }}
+    {{ with .Resources.GetMatch "feature" }}
         <div class="post-media">
             {{ partial "figure.html" (dict "src" .) }}
         </div>
-{{ end }}
+    {{ end }}
 
-<div class="post-description">
+    <div class="post-description">
         {{ partial "description-or-summary.html" . }}
-</div>
+    </div>
 
-<div class="readmore">
+    <div class="readmore">
         <a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
+    </div>
 </div>

layouts/authors/list.html

@@ -6,11 +6,11 @@
 
     <div class="page-list">
         {{ with .Paginator.Pages }}
+            <ul>
                 {{ range . }}
-                <article class="post">
+                    <li>{{ .Render "summary/author" }}</li>
-                    {{ .Render "summary/author" }}
-                </article>
                 {{ end }}
+            </ul>
         {{ else }}
             <div>
                 {{ i18n "no_posts" }}

layouts/partials/page-list.html

@@ -1,10 +1,10 @@
 <div class="page-list">
     {{ with . }}
+        <ul>
             {{ range . }}
-            <article class="post">
+                <li>{{ .Render "summary/post" }}</li>
-                {{ .Render "summary/post" }}
-            </article>
             {{ end }}
+        </ul>
     {{ else }}
         <div>
             {{ i18n "no_posts" }}

layouts/partials/seo-tags/schema.html

@@ -21,10 +21,6 @@
     <meta itemprop="image" content="{{ $featured.Permalink }}">
 {{ end }}
 
-{{ with (.GetTerms "tags") }}
+{{ with .Params.tags }}
-    {{ $tags := slice }}
+    <meta itemprop="keywords" content="{{ delimit . ", " }}">
-    {{ range . }}
-        {{ $tags = $tags | append .LinkTitle }}
-    {{ end }}
-    <meta itemprop="keywords" content="{{ delimit $tags ", " }}">
 {{ end }}

layouts/partials/top.html

@@ -1,10 +1,6 @@
-<header class="header">
+<h1 class="header">
-    <h1>
+    <a href="{{ .Site.Home.Permalink | absLangURL }}">{{ .Site.Title | markdownify }}</a>
-        <a href="{{ .Site.Home.Permalink | absLangURL }}">
+</h1>
-            {{ .Site.Title | markdownify }}
-        </a>
-    </h1>
-</header>
 
 <div class="topbar">
     <nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">

layouts/series/list.html

@@ -4,13 +4,13 @@
         {{ .Title | markdownify }}
     </h1>
 
-    <div class="series-taxonomy-list">
+    <div class="series-taxonomy">
         {{ with .Pages }}
+            <ul>
                 {{ range . }}
-                <article class="series-taxonomy">
+                    <li>{{ .Render "summary/series" }}</li>
-                    {{ .Render "summary/series" }}
-                </article>
                 {{ end }}
+            </ul>
         {{ else }}
             <div>
                 {{ i18n "no_posts" }}

layouts/taxonomy/list.html

@@ -13,9 +13,10 @@
 
     <div class="taxonomy-list">
         {{ with .Data.Terms.Alphabetical }}
+            <ul>
                 {{ range . }}
                     {{ with .Page }}
-                    <article class="taxonomy-term">
+                        <li>
                             <div class="taxonomy-list-left">
                                 <a href="{{ .Permalink }}">
                                     <p>{{ .Title | markdownify }}</p>
@@ -23,9 +24,10 @@
                                 {{ partial "post-metadata/taxonomy.html" . }}
                             </div>
                             {{ partial "description-or-summary.html" . }}
-                    </article>
+                        </li>
                     {{ end }}
                 {{ end }}
+            </ul>
         {{ else }}
             <div>
                 {{ i18n "no_posts" }}