Update layouts

nntrn · Sep 30, 2024 · 90d65b3 · 90d65b3
1 parent 519994c
commit 90d65b3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 30 deletions.
diff --git a/_includes/docs.css b/_includes/docs.css
@@ -1,4 +1,4 @@
-body{--bs-heading-color:var(--bs-gray-dark);color:#222;text-size-adjust:none}
+body{--bs-heading-color:var(--bs-gray-dark);color:#222;}
 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}
@@ -10,6 +10,7 @@ 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)}
+.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)}
 .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}
@@ -19,6 +20,7 @@ a:hover{color:#222}
 .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)}
 .sans-serif{font-family:var(--bs-font-sans-serif)}
 .serif{font-family:var(--bs-font-serif)}
 .pre{white-space:pre}

diff --git a/_includes/theme.css b/_includes/theme.css
@@ -8,26 +8,23 @@
   --aside-font-size: 0.95rem;
   --list-gap: 1.4rem;
   font-family: courier, monospace;
-  font-size: 15px;
-  line-height: 1.1;
+  font-size: 1rem;
   tab-size: 4;
 }
 [data-layout="serif"] {
   --aside-font-size: 1rem;
   --smaller-font-size: 0.95em;
   --list-gap: 1.4rem;
   font-family: times, serif;
-  font-size: 16px;
-  line-height: 1.2;
+  font-size: 1rem;
   tab-size: 8;
 }
 [data-layout="sans-serif"] {
   --aside-font-size: 0.95rem;
   --smaller-font-size: 0.95em;
   --list-gap: 1.6rem;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.2;
+  font-size: 1rem;
   tab-size: 6;
 }
 @media (min-width: 900px) {
@@ -36,3 +33,6 @@
     margin: 0 auto;
   }
 }
+@media (max-width:767.98px){
+  .breadcrumb{display:none}
+}
diff --git a/_layouts/book.html b/_layouts/book.html
@@ -5,7 +5,7 @@
 ---
 {%- 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 annotations = site.data.activity | where: 'assetid', page.assetid  | sort: "rangestart" | sort: "cfi" -%}
 {%- assign chapters = annotations| sort: "rangestart" | group_by: "chapter" -%}
 
 <article class="content d-flex flex-column gap-2">
@@ -17,14 +17,14 @@ <h3 class="h5">{{page.author}}</h3>
     <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-5">
+  <section class="d-flex gap-sm-3 gap-lg-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" style="--gap:5px">
         {%- for annotation in sortedchapteritems %}
-        <li id="{{annotation.id}}" class="bookmark px-2">
+        <li id="{{annotation.id}}" class="bookmark px-3">
           <q>{{ annotation.text }}</q>
           <div aria-hidden="true" class="small d-flex text-uppercase gap mt-2">
             <a href="#{{annotation.id}}">#{{annotation.id}}</a>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -40,29 +40,27 @@ <h1 class="h1 my-0 mb-2"><a href="{{ '/' | relative_url }}">{{site.title}}</a></
         <a href="https://github.com/{{site.repository}}">github</a>
       </div>      
     </div>
-    {%- if page.title -%}<div class="small">{%- include breadcrumb.html -%}</div>{%- endif -%}
+    {%- if page.title -%}<p class="breadcrumb small">{%- include breadcrumb.html -%}</p>{%- endif -%}
   </header>
   <main id="top">
   {{ content }}
-  <div class="text-end pe-2"><a href="#top">[TOP]</a></div>
+  </main>
   <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">
-      <div>
-      Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</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)">
-        {%- for font in site.fonts %}
-        <option name="{{font}}" value="{{font}}"{%- if site.font_family == font %} selected{%- endif -%}>{{font}}</option>
-        {%- endfor %}
-        </select>
-      </div>
+  <hr>
+  <div class="d-flex flex-wrap justify-content-between align-content-center align-items-center gap-3 smaller">
+    <div>
+    Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</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)">
+      {%- for font in site.fonts %}
+      <option name="{{font}}" value="{{font}}"{%- if site.font_family == font %} selected{%- endif -%}>{{font}}</option>
+      {%- endfor %}
+      </select>
     </div>
-
+  </div>
   </footer>
-  </main>
 </div>
 <script>
 {% include script.js %}

diff --git a/_layouts/genre.html b/_layouts/genre.html
@@ -8,10 +8,10 @@ <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>
+      <h3 class="h6"><a href="{{book.slug}}">{{book.title}}</a> by {{book.author|split: ","|first}}</h3>
       <span class="text-muted">last read on <time>{{book.modified|date: '%b %e %Y'}}</time></span>
+      <span class="red">&nbsp;/&nbsp;</span>
+      <span>{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span>
     </li>
     {%- endfor %}
   </ul>