Update style

_includes/docs.css

@@ -1,20 +1,38 @@
+body{color:#222}
 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}
 q:after{content:""}
 q:before{content:""}
 a,u{text-decoration-skip-ink:none;text-decoration-thickness:calc(1rem/10)}
-.bookmark q{white-space:pre-wrap}
+.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}
 .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;background:#fff;padding:2px 4px;z-index:1;font-size:.8rem}
+.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:#a9a9a9}
+.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)} 
+
 .sans-serif{font-family:var(--bs-font-sans-serif)}
 .pre{white-space:pre}
-.letter-spacing-1{letter-spacing:1px}
+.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)}

_includes/postlist.html

@@ -2,7 +2,7 @@
 {%- assign books = site.data.books | where: 'tags', pagetag |sort: 'title' %}
 <aside class="my-3">
   <h5>Other posts in <a class="fs-6 smaller letter-spacing-1" href="{{pagetag|relative_url}}">{{pagetag|upcase}}</a></h5>
-  <ul class="d-flex flex-column gap-3 my-3 lh-1">
+  <ul class="d-flex flex-column gap-2 my-3 lh-sm">
   {%- for book in books %}
     <li class="text-muted">
     {%- if book.slug == page.slug %}

_includes/theme.css

@@ -1,27 +1,36 @@
-[data-layout=monospace] {
+[data-layout="monospace"] {
+  --smaller-font-size: 0.9em;
+  --aside-font-size: 0.9rem;
+  --list-gap: 1.4rem;
+  color: #3b3b3b;
   font-family: courier, monospace;
-  line-height: 1.15;
-  font-size: 14px;
-  --smaller-font-size: .9em;
-  --aside-font-size: .9rem
+  font-size: 13px;
+  line-height: 1.1;
+  tab-size: 4;
 }
-
-[data-layout=serif] {
+[data-layout="serif"] {
+  --aside-font-size: 1rem;
+  --smaller-font-size: 0.95em;
+  --list-gap: 1.4rem;
+  color: #222;
   font-family: times, serif;
-  line-height: 1.3;
   font-size: 15px;
-  --aside-font-size: 1rem;
-  --smaller-font-size: .95em
+  line-height: 1.2;
+  tab-size: 8;
 }
-
-[data-layout=sans-serif] {
+[data-layout="sans-serif"] {
+  --aside-font-size: 0.9rem;
+  --smaller-font-size: 0.95em;
+  --list-gap: 1.6rem;
+  color: #222;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  line-height: 1.3;
   font-size: 14px;
-  --aside-font-size: .9rem;
-  --smaller-font-size: .95em
+  line-height: 1.2;
+  tab-size: 6;
+}
+@media (min-width: 900px) {
+  body > .container {
+    max-width: 80%;
+    margin: 0 auto;
+  }
 }
-
-@media (min-width:900px){
-body>.container{max-width:80%;margin:0 auto}
-}

_layouts/book.html

@@ -6,33 +6,30 @@
 {%- assign pagecreated = page.created | date: "%b %Y" -%}
 {%- assign pagemodified = page.modified | date: "%b %Y" -%}
 {%- assign annotations = site.data.activity | where: 'assetid', page.assetid  | sort: "cfi" -%}
-{%- assign chapters = annotations | group_by: "chapter" -%}
+{%- assign chapters = annotations| sort: "rangestart" | group_by: "chapter" -%}
 
 <article class="content d-flex flex-column gap-2">
   <h2 class="my-0">{{page.title}}</h2>
   <h3 class="h5">{{page.author}}</h3>
   <div class="d-flex flex-sm-wrap gap-1">
     <span>{{annotations.size}} annotation{% if annotations.size > 1 %}s{%- endif -%}</span>
     <span class="accent">&bull;</span>
-    <span style="--gap:5px" class="gap d-flex">
-      <span title="Created">{{pagecreated}}</span>
-      {%- if pagemodified != pagecreated -%}<span>&ndash;</span><span title="Modified">{{pagemodified}}</span>{%- endif %}
-    </span>
+    <span><span title="Created">{{pagecreated}}</span>{%- if pagemodified != pagecreated -%}&nbsp;&ndash;&nbsp;<span title="Modified">{{pagemodified}}</span>{%- endif %}</span>
   </div>
   <hr>
-  <section class="d-flex gap-3">
+  <section class="d-flex gap-5">
     <div class="chapters d-flex flex-column gap-3 flex-grow-1">
     {%- for chapter in chapters %}
     {%- assign sortedchapteritems = chapter.items | sort: "cfi" %}
       <h3 class="h4" id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'#',''|strip}}</h3>
-      <ul class="d-flex flex-column gap-3" style="--gap:1rem">
+      <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" style="--gap:3px">
+          <q>{{- annotation.text -}}</q>
+          <div class="small d-flex text-uppercase gap mt-1">
             <a class="fw-semibold" href="#{{annotation.id}}">#{{annotation.id}}</a>
             <span>&bull;</span>
-            <time class="muted">{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
+            <time class="g6">{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
           </div>
         </li>
         {%- endfor %}
@@ -41,7 +38,7 @@ <h3 class="h4" id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'
     </div>
     <nav class="toc" tab-index="-1">
     {%- for chapter in chapters %}
-      <a aria-hidden="true" title="{{chapter.name|replace: '#',''|strip}}" href="#{{chapter.name | slugify: 'latin'}}">&mdash;</a>
+       <a aria-hidden="true" title="{{chapter.name|replace: '#',''|strip}}" href="#{{chapter.name | slugify: 'latin'}}">&mdash;</a>
     {%- endfor %}
     </nav>
   </section>

_pages/feed.html

@@ -5,7 +5,8 @@
 ---
 {% assign books_by_date = site.data.books|sort:'created'|reverse|group_by_exp:"item","item.created|date: '%b %Y'" -%}
 <section class="books">
-  <table>
+  <button class="btn btn-outline-success" onclick="this.nextElementSibling.classList.toggle('compact')">Toggle compact</button>
+  <table class="compact">
   {%- for books in books_by_date %}
   {%- assign list = books.items|sort:'created'|reverse %}
   <tr>
@@ -16,10 +17,11 @@ <h2 id="{{books.name|slugify:'latin'}}" class="mt-4 mb-3">{{books.name|replace:"
   </tr>
   {%- for book in list %}
   {%- assign statcount = site.data.stats.bookmarks_per_month[books.name]  %}
-  <tr data-genre="{{book.tags}}" data-created="{{book.created}}" data-author="{{book.author}}" data-count="{{book.count}}">
-    <th data-level="2" class="pb-3">
-      <time class="pre">{{book.created|date: '%F'}}</time><br><a class="small muted text-decoration-none fw-normal sans-serif" href="{{book.tags}}">{{book.tags}}</a>
-    </th>
+  <tr>
+    <th data-level="2"><div class="d-flex flex-column pb-3">
+      <time class="pre">{{book.created|date: '%F'}}</time>
+      <a class="tag-text" href="{{book.tags}}">{{book.tags}}</a>
+    </div></th>
     <td class="pb-3">
       <h4 class="h6"><a href="./{{book.tags}}/{{book.slug}}.html">{{book.title}}</a></h4>
       <div class="small">{{book.author|split: ","|first}} &bull; <span class="text-muted">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span></div>

_pages/tags.html

@@ -29,7 +29,7 @@ <h2 id="{{genre.tag}}" class="h5 text-uppercase border-bottom border-2 text-blac
       <li class="lh-1" data-modified="{{book.modified|date: '%F' }}" data-created="{{book.created|date:'%F'}}">
         <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 text-muted">{{ bookmodified }} &bullet; {{book.count}}</span>        
+        <span class="text-uppercase small muted">{{ bookmodified }} &bullet; {{book.count}}</span>        
       </li>
     {%- endfor %}
     </ol>