Add breadcrumb

nntrn · Sep 30, 2024 · 08e238e · 08e238e
1 parent 5d199e6
commit 08e238e
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 62 deletions.
diff --git a/_includes/breadcrumb.html b/_includes/breadcrumb.html
@@ -0,0 +1,10 @@
+{%- assign crumbs = page.url | split: '/'  -%}
+{%- for crumb in crumbs -%}
+  {%- if forloop.last -%}
+  <span>&#47;</span><strong>{{crumb}}</strong>
+  {% elsif forloop.first %}
+  <a href="{{ '/' | relative_url}}">home</a>
+  {%- else -%}
+  <span>&#47;</span><a href="{{crumb|relative_url}}">{{crumb}}</a>
+  {%- endif -%}
+{%- endfor -%}
diff --git a/_includes/docs.css b/_includes/docs.css
@@ -1,38 +1,32 @@
-body{color:#222}
+body{--bs-heading-color:var(--bs-gray-dark);color:#222;text-size-adjust:none}
 aside{border-top:dotted 2px gray;padding-top:2rem;font-size:var(--aside-font-size)}
-h2{margin:.5rem 0}
 h3,h4,h5{margin:0 0}
+h1 a{text-decoration-skip-ink:all}
+.h2>a:hover,.h3>a:hover,.h4>a:hover,.h5>a:hover{font-style:oblique;transition:font-style .15s ease-in-out}
 q:after{content:""}
 q:before{content:""}
-a,u{text-decoration-skip-ink:none;text-decoration-thickness:calc(1rem/10)}
+a,u{text-decoration-skip-ink:none;text-decoration-thickness:.1em}
+a:hover{color:#222}
 .bookmark q{white-space:pre-line}
 .clamp{display:-webkit-box!important;-webkit-line-clamp:var(--clamp-lines,1);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
 .gap{gap:var(--gap)}
-.site-title{font-size:2rem}
+.site-title a{font-size:1.5rem;text-decoration-thickness:calc(1em / 10);text-underline-offset:.15rem;font-family:var(--bs-font-sans-serif)}
 .toc{max-height:min(300px,40vh);position:sticky;top:1rem;font-size:.9rem;z-index:1;width:20px;max-width:20px}
 .toc a{display:block;text-decoration:none;font-weight:400;white-space:pre;padding:0 4px;line-height:1;color:#222}
 .toc a:hover{text-decoration:none;background:#eee}
 .toc a:hover:after{text-decoration:none;border:0;content:attr(title);position:absolute;right:1.5rem;color:#fff;background:#222;padding:2px 4px;z-index:1;font-size:.8rem}
 .mark q{background:var(--bs-highlight-bg)}
 .smaller{font-size:var(--smaller-font-size,.85rem)}
 .muted{color:var(--bs-gray-500)}
-.gray{color:var(--bs-gray-500)}
-.g4,.g5,.g6,.g7,.g4h,.g5h,.g6h,.g7h{color:var(--gray)}
-.g4{--gray:var(--bs-gray-400)} 
-.g5{--gray:var(--bs-gray-500)} 
-.g6{--gray:var(--bs-gray-600)} 
-.g7{--gray:var(--bs-gray-700)} 
-.g4h:hover{--gray:var(--bs-gray-400)} 
-.g5h:hover{--gray:var(--bs-gray-500)} 
-.g6h:hover{--gray:var(--bs-gray-600)} 
-.g7h:hover{--gray:var(--bs-gray-700)} 
-
+.red{color:var(--bs-red)}
 .sans-serif{font-family:var(--bs-font-sans-serif)}
+.serif{font-family:var(--bs-font-serif)}
 .pre{white-space:pre}
 .letter-spacing-1{letter-spacing:1px}
 table{border-collapse:separate}
 .small>a{text-decoration:none}
 .tag-text{color:gray;font-weight:400;font-size:.8rem;text-decoration:none;line-height:1.5}
 .compact [data-level="2"]{display:none}
 .chapters{gap:2rem!important}
-.chapters ul{gap:var(--list-gap)}
+.chapters ul{gap:var(--list-gap)}
+.link-primary:hover{color:var(--bs-dark)!important;text-decoration-color:inherit!important}
diff --git a/_includes/postlist.html b/_includes/postlist.html
@@ -9,8 +9,8 @@ <h5>Other posts in <a class="fs-6 smaller letter-spacing-1" href="{{pagetag|rela
       <u class="fw-bold text-dark">{{book.title}}</u>
     {%- else %}
       <a title="{{book.count}} bookmark{%- if book.count > 1 -%}s{%- endif-%}" href="{{book.permalink|relative_url}}">{{book.title}}</a>
-    {%- endif -%}
-      <span class="smaller">&nbsp;<span>by {{book.author}}</span>&nbsp;<span class="muted">&bull;&nbsp;{{book.count}}</span></span>
+    {%- endif %}
+      <span class="smaller">by {{book.author}} / <span class="red">{{book.count}}</span></span>
     </li>
   {%- endfor %}
   </ul>

diff --git a/_includes/theme.css b/_includes/theme.css
@@ -1,28 +1,30 @@
+:root {
+  --bs-font-monospace: courier, monospace;
+  --bs-font-sans-serif: Helvetica Neue, Helvetica, Arial, sans-serif;
+  --bs-font-serif: times, serif;
+}
 [data-layout="monospace"] {
   --smaller-font-size: 0.9em;
-  --aside-font-size: 0.9rem;
+  --aside-font-size: 0.95rem;
   --list-gap: 1.4rem;
-  color: #3b3b3b;
   font-family: courier, monospace;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.1;
   tab-size: 4;
 }
 [data-layout="serif"] {
   --aside-font-size: 1rem;
   --smaller-font-size: 0.95em;
   --list-gap: 1.4rem;
-  color: #222;
   font-family: times, serif;
-  font-size: 15px;
+  font-size: 16px;
   line-height: 1.2;
   tab-size: 8;
 }
 [data-layout="sans-serif"] {
-  --aside-font-size: 0.9rem;
+  --aside-font-size: 0.95rem;
   --smaller-font-size: 0.95em;
   --list-gap: 1.6rem;
-  color: #222;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.2;

diff --git a/_layouts/book.html b/_layouts/book.html
@@ -25,9 +25,9 @@ <h3 class="h4" id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'
       <ul class="d-flex flex-column" style="--gap:5px">
         {%- for annotation in sortedchapteritems %}
         <li id="{{annotation.id}}" class="bookmark px-2">
-          <q>{{- annotation.text -}}</q>
-          <div class="small d-flex text-uppercase gap mt-1">
-            <a class="fw-semibold" href="#{{annotation.id}}">#{{annotation.id}}</a>
+          <q>{{ annotation.text }}</q>
+          <div aria-hidden="true" class="small d-flex text-uppercase gap mt-2">
+            <a href="#{{annotation.id}}">#{{annotation.id}}</a>
             <span>&bull;</span>
             <time class="g6">{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
           </div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="UTF-8">
   <title>{{page.title|default:"✨"}} | {{site.title}}</title>
   <link rel="canonical" href="{{ page.url | absolute_url }}" />
@@ -30,18 +30,21 @@
 </head>
 <body data-layout="{{site.font_family}}">
 <div class="container">
-  <header class="mt-2 mb-4">
-    <h1 class="site-title my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
-    <div class="d-flex gap-3 smaller">
-    {%- for link in site.links %}
-      <a class="text-dark" href="{{ site.baseurl }}/{{link}}">{{link}}</a>
-    {%- endfor %}
-      <a class="text-dark" href="https://github.com/{{site.repository}}">github</a>
+  <header class="mt-2 mb-4 d-flex flex-column">
+    <div class="d-flex justify-content-between align-items-center">
+      <h1 class="h1 my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
+      <div class="d-flex gap-2 smaller">
+      {%- for link in site.links %}
+        <a href="{{ site.baseurl }}/{{link}}">{{link}}</a>
+      {%- endfor %}
+        <a href="https://github.com/{{site.repository}}">github</a>
+      </div>      
     </div>
+    {%- if page.title -%}<div class="small">{%- include breadcrumb.html -%}</div>{%- endif -%}
   </header>
   <main id="top">
   {{ content }}
-  <div class="text-end"><a href="#top">[TOP]</a></div>
+  <div class="text-end pe-2"><a href="#top">[TOP]</a></div>
   <footer class="d-flex flex-column gap-3 py-4">
     <hr>
     <div class="d-flex flex-wrap justify-content-between align-content-center align-items-center gap-3 smaller">
@@ -57,6 +60,7 @@ <h1 class="site-title my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title
         </select>
       </div>
     </div>
+
   </footer>
   </main>
 </div>

diff --git a/_layouts/genre.html b/_layouts/genre.html
@@ -4,17 +4,15 @@
 ---
 {%-  assign booklist = page.books | sort: "title" %}
 <section>
-<h2>#{{page.tag}}</h2>
-<ul style="width:90%" class="d-flex flex-column gap-3">
-  {%- for book in booklist %}
-  <li>
-    <span class="h6 my-0"><a href="{{book.slug}}">{{book.title}}</a> by {{book.author|split: ","|first}}</span>
-    <div class="d-flex small gap" style="--gap:4px">
-      <span class="accent">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span>
+<h2>{{page.tag|replace: "-"," "}}</h2>
+  <ul style="width:90%" class="d-flex flex-column gap-3">
+    {%- for book in booklist %}
+    <li class="small">
+      <h3 class="h5"><a href="{{book.slug}}">{{book.title}}</a> by {{book.author|split: ","|first}}</h3>
+      <span>{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span>
       <span>&bull;</span>
       <span class="text-muted">last read on <time>{{book.modified|date: '%b %e %Y'}}</time></span>
-    </div>
-  </li>
-  {%- endfor %}
-</ul>
+    </li>
+    {%- endfor %}
+  </ul>
 </section>
diff --git a/_pages/activity.html b/_pages/activity.html
@@ -0,0 +1,21 @@
+---
+title: activity
+layout: default
+permalink: /activity
+---
+<style>
+main{font-size:12px;line-height:1.15}
+main>ul{list-style:none;display:flex;flex-direction:column;gap:1rem;list-style-type:disc}
+li ul strong{font-weight:500}
+li a {text-decoration:none;}
+li p strong{color:#000;font-weight:700;font-size:.95rem}
+li p{margin:0 0;padding-bottom:.25rem}
+
+main h2{font-size:1.4rem;margin-right:10%;border-bottom:2px dotted gray;margin:2rem 0}
+main h1{font-size:1.75rem;}
+em.started{color:var(--bs-red);font-style:normal}
+em.started:before{content:"**"}
+</style>
+
+{%- capture activity -%}{% include_relative activity.txt -%}{% endcapture %}
+{{ activity|markdownify|replace: "***",'<em class="started"></em>' }}
diff --git a/_pages/feed.html b/_pages/feed.html
@@ -29,7 +29,7 @@ <h4 class="h6"><a href="./{{book.tags}}/{{book.slug}}.html">{{book.title}}</a></
   </tr>
   {%- endfor %}
   <tr>
-    <td></td>
+    <td data-level="2"></td>
     <td class="pt-2 small text-muted">
       <span>started <strong>{{list.size}}</strong>&nbsp;book{% if list.size > 1 %}s{%- endif -%}</span>
       <span>&sol;</span>

diff --git a/_pages/index.html b/_pages/index.html
@@ -2,37 +2,35 @@
 layout: default
 permalink: /
 ---
-
 <style>
-.pre{white-space:pre}
 .column-container{margin:auto;column-width:max(250px,20vw);column-fill:balance;gap:3rem;column-count:1}
 .column-group{page-break-inside:avoid;margin-bottom:1rem}
+.column-group:nth-child(2n) .jump-top{display:none!important}
 h2{border-bottom:2px solid currentColor}
 h2>a{color:#222;text-decoration:none;font-weight:700}
-@media (min-width:650px){
-.column-container{column-count:2}
-}
-@media (min-width:950px){
-.column-container{column-count:3}
-}
+@media (min-width:650px){ .column-container{column-count:2} .jump-top{display:none}}
+@media (min-width:950px){ .column-container{column-count:3} }
+.jump-top a{color: #ccc;font-size:.85rem}
+.jump-top {margin-right:1rem}
 </style>
 {% assign genres = site.data.genres %}
 <div class="column-container">
 {%- for genre in genres %}
   <div class="column-group">
-    <h2 id="{{genre.tag}}" class="h5 text-uppercase border-bottom border-2 text-black border-black"><a href="{{ site.baseurl }}/{{genre.tag}}">{{genre.tag}}</a></h2>
-    <ol class="posts d-flex flex-column gap-3 py-2" data-tag="{{genre.name}}">
+    <h2 id="{{genre.tag}}" class="h5 text-uppercase border-bottom border-2 text-black border-black"><a href="{{ site.baseurl }}/{{genre.tag}}">{{genre.tag|replace: "-"," "}}</a></h2>
+    <ol class="d-flex flex-column gap-3 py-2 mx-2 small" data-tag="{{genre.name}}">
     {%- assign books = genre.books %}
     {%- for book in books %}
       {%- assign bookmodified = book.modified | date: "%b %Y" -%}
       {%- assign bookcreated = book.created | date: "%b %Y" %}
-      <li class="lh-1" data-modified="{{book.modified|date: '%F' }}" data-created="{{book.created|date:'%F'}}">
+      <li class="lh-1" data-modified="{{book.modified|date: '%F' }}" data-created="{{book.created|date:'%F'}}" data-count="{{book.count}}">
         <a class="h6 link-primary" href="{{ site.baseurl }}/{{genre.tag}}/{{book.slug}}">{{book.title}}</a>
-        <span class="clamp smaller">{{book.author}}</span>
-        <span class="text-uppercase small muted">{{ bookmodified }} &bullet; {{book.count}}</span>        
+        <span class="clamp">{{book.author}}</span>
+        <span class="text-uppercase small">{{ bookmodified }} &bullet; {{book.count}}</span>        
       </li>
     {%- endfor %}
     </ol>
+    <div class="jump-top text-end"><a href="#top">[TOP]</a></div>
   </div>
 {%- endfor -%}
 </div>