Update theme

_includes/breadcrumb.html

@@ -1,7 +1,7 @@
 {%- assign crumbs = page.url | split: '/'  -%}
 {%- for crumb in crumbs -%}
   {%- if forloop.last -%}
-  <span>&#47;</span><strong>{{crumb}}</strong>
+  <span>&#47;{{crumb}}</strong>
   {% elsif forloop.first %}
   <a href="{{ '/' | relative_url}}">home</a>
   {%- else -%}

_includes/docs.css

@@ -1,26 +1,33 @@
-body{--bs-heading-color:var(--bs-gray-dark);color:#222;}
+html{line-height:1.1;-webkit-text-size-adjust:100%;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
+dialog{padding:0}
+textarea{resize:vertical}
+input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
+html{height:100%;font-feature-settings:"cv02","cv03","cv04","cv11"}
+body{min-height:100%}
+abbr[title]{text-decoration:none}
+body{--bs-heading-color:var(--bs-gray-dark);color:#555}
 aside{border-top:dotted 2px gray;padding-top:2rem;font-size:var(--aside-font-size)}
 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:.1em}
+a{color:var(--bs-success)}
 a:hover{color:#222}
-.bookmark q{white-space:pre-line}
+.bookmark q{white-space:pre-line;text-align:justify}
 .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)}
-.h6{font-size:1.1rem}
-.site-title a{font-size:1.5rem;text-decoration-thickness:calc(1em / 10);text-underline-offset:.15rem;font-family:var(--bs-font-sans-serif)}
+.site-title a{font-size:1.75rem}
+.site-title{margin-bottom:1rem}
+.bigger{font-size:1.2em}
+.smaller{font-size:smaller}
 .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)}
-.red{color:var(--bs-red)}
-.g6{color:var(--bs-gray-500)}
+.muted{color:#656d76}
+.gray{color:#aaa}
 .sans-serif{font-family:var(--bs-font-sans-serif)}
 .serif{font-family:var(--bs-font-serif)}
 .pre{white-space:pre}

_includes/postlist.html

@@ -1,16 +1,16 @@
 {%- assign pagetag = page.tags  %}
 {%- assign books = site.data.books | where: 'tags', pagetag |sort: 'title' %}
-<aside class="my-3">
+<aside class="my-3 small">
   <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-2 my-3 lh-sm">
   {%- for book in books %}
     <li class="text-muted">
     {%- if book.slug == page.slug %}
-      <u class="fw-bold text-dark">{{book.title}}</u>
+      <u class="h6 text-success">{{book.title}}</u>
     {%- else %}
-      <a title="{{book.count}} bookmark{%- if book.count > 1 -%}s{%- endif-%}" href="{{book.permalink|relative_url}}">{{book.title}}</a>
+      <a class="h6" title="{{book.count}} bookmark{%- if book.count > 1 -%}s{%- endif-%}" href="{{book.permalink|relative_url}}">{{book.title}}</a>
     {%- endif %}
-      <span class="smaller">by {{book.author}} / <span class="red">{{book.count}}</span></span>
+      <span>by {{book.author}} / <span class="gray">{{book.count}}</span></span>
     </li>
   {%- endfor %}
   </ul>

_includes/theme.css

@@ -1,38 +1,49 @@
+html {
+  font-size: 16px;
+}
 :root {
   --bs-font-monospace: courier, monospace;
   --bs-font-sans-serif: Helvetica Neue, Helvetica, Arial, sans-serif;
   --bs-font-serif: times, serif;
+  --bs-primary: var(--bs-success);
+  --bs-primary-rgb: var(--bs-success-rgb);
+  --bs-link-color: var(--bs-success);
 }
 [data-layout="monospace"] {
-  --smaller-font-size: 0.9em;
   --aside-font-size: 0.95rem;
   --list-gap: 1.4rem;
+  --smaller-font-size: 0.9em;
   font-family: courier, monospace;
-  font-size: 1rem;
+  font-size: 0.9rem;
+  line-height: 1.2;
   tab-size: 4;
 }
 [data-layout="serif"] {
   --aside-font-size: 1rem;
-  --smaller-font-size: 0.95em;
   --list-gap: 1.4rem;
+  --smaller-font-size: 0.95em;
   font-family: times, serif;
   font-size: 1rem;
+  line-height: 1.3;
   tab-size: 8;
 }
 [data-layout="sans-serif"] {
-  --aside-font-size: 0.95rem;
-  --smaller-font-size: 0.95em;
+  --aside-font-size: 0.85rem;
   --list-gap: 1.6rem;
+  --smaller-font-size: 0.95em;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 1rem;
+  font-size: 0.9rem;
   tab-size: 6;
+  line-height: 1.2;
 }
 @media (min-width: 900px) {
   body > .container {
     max-width: 80%;
     margin: 0 auto;
   }
 }
-@media (max-width:767.98px){
-  .breadcrumb{display:none}
+@media (max-width: 767.98px) {
+  .breadcrumb {
+    display: none;
+  }
 }

_layouts/book.html

@@ -29,7 +29,7 @@ <h3 class="h4" id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'
           <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>
+            <time class="muted">{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
           </div>
         </li>
         {%- endfor %}

_layouts/default.html

@@ -26,13 +26,13 @@
   <meta name="twitter:title" content="{{ page.title | default: site.title }}">
   <meta name="twitter:description" content="{{ page.description | default: site.description }}">
   <link rel="stylesheet" href="{{'/assets/vendor/bootstrap.css'|relative_url}}">
-  <link rel="stylesheet" href="{{'/assets/minimal.css'|relative_url}}">
+  <link rel="stylesheet" href="{{'/assets/style.css'|relative_url}}">
 </head>
 <body data-layout="{{site.font_family}}">
 <div class="container">
-  <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>
+  <header class="my-2 d-flex flex-column gap-2">
+    <div class="d-flex justify-content-between align-items-baseline">
+      <h1 class="h1 site-title"><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>
@@ -53,7 +53,7 @@ <h1 class="h1 my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title}}</a></
     Copyright {{ site.time | date: '%Y' }}
     </div>
     <div class="align-content-center align-items-center">
-      <select class="form-select form-select-sm" id="theme" onclick="setTheme(this.value)">
+      <select class="form-select form-select-sm" style="font-size:inherit" id="theme" onclick="setTheme(this.value)">
       {%- for font in site.fonts %}
       <option name="{{font}}" value="{{font}}"{%- if site.font_family == font %} selected{%- endif -%}>{{font}}</option>
       {%- endfor %}

_pages/activity.html

@@ -17,5 +17,5 @@
 em.started:before{content:"**"}
 </style>
 
-{%- capture activity -%}{% include_relative activity.txt -%}{% endcapture %}
+{%- capture activity -%}{% include activity.txt -%}{% endcapture %}
 {{ activity|markdownify|replace: "***",'<em class="started"></em>' }}

_pages/index.html

@@ -12,21 +12,22 @@
 @media (min-width:950px){ .column-container{column-count:3} }
 .jump-top a{color: #ccc;font-size:.85rem}
 .jump-top {margin-right:1rem}
+ol li{padding-left:.25rem}
 </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|replace: "-"," "}}</a></h2>
-    <ol class="d-flex flex-column gap-3 py-2 mx-2 small" data-tag="{{genre.name}}">
+    <h2 id="{{genre.tag}}" class="h5 text-uppercase border-bottom border-2  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" 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'}}" data-count="{{book.count}}">
         <a class="h6 link-primary" href="{{ site.baseurl }}/{{genre.tag}}/{{book.slug}}">{{book.title}}</a>
         <span class="clamp">{{book.author}}</span>
-        <span class="text-uppercase small">{{ bookmodified }} &bullet; {{book.count}}</span>        
+        <span class="text-uppercase smaller muted">{{ bookmodified }} &bullet; {{book.count}}</span>        
       </li>
     {%- endfor %}
     </ol>

assets/style.css

@@ -1,6 +1,5 @@
 ---
 ---
 
-{% include root.css %}
-{% include style.css %}
-{% include table.css %}
+{% include theme.css %}
+{% include docs.css %}