layout changes

nntrn · Sep 24, 2024 · dafd016 · dafd016
1 parent 8f489df
commit dafd016
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 62 deletions.
diff --git a/_includes/docs.css b/_includes/docs.css
@@ -1,8 +1,6 @@
 aside{border-top:dotted 2px gray;padding-top:2rem}
 h2{margin:.5rem 0}
-h3,h4,h5{margin-bottom:.25rem}
-h3,h4,h5{margin-top:0}
-h3{margin:0 0}
+h3,h4,h5{margin:0 0}
 q:after{content:""}
 q:before{content:""}
 .bookmark q{white-space:pre-wrap}
@@ -14,3 +12,7 @@ q:before{content:""}
 .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}
 .mark q{background:var(--bs-highlight-bg)}
+.smaller{font-size:.9em}
+.muted{color:#aaa}
+.sans-serif{font-family:var(--bs-font-sans-serif)}
+a{text-decoration-skip-ink:none}
diff --git a/_includes/postlist.html b/_includes/postlist.html
@@ -1,17 +1,17 @@
 {%- assign pagetag = page.tags  %}
 {%- assign books = site.data.books | where: 'tags', pagetag |sort: 'title' %}
 <aside class="my-3">
-  <h5>Other posts in <a class="fs-5" href="{{pagetag|relative_url}}">{{pagetag|upcase}}</a></h5>
-  <ul class="d-flex flex-column gap-2 my-3">
-    {%- for book in books %}
-    <li>
-      {%- if book.slug == page.slug -%}
-        <u>{{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="text-muted">&nbsp;by {{book.author}}</span>
+  <h5>Other posts in <a class="fs-6" href="{{pagetag|relative_url}}">{{pagetag|upcase}}</a></h5>
+  <ul class="d-flex flex-column gap-2 my-3 smaller">
+  {%- for book in books %}
+    <li class="text-muted">
+    {%- if book.slug == page.slug %}
+      <u>{{book.title}}</u>
+    {%- else %}
+      <a title="{{book.count}} bookmark{%- if book.count > 1 -%}s{%- endif-%}" href="{{book.permalink|relative_url}}">{{book.title}}</a>
+    {%- endif -%}
+      &nbsp;<span>by {{book.author}}</span>
     </li>
-    {%- endfor %}
+  {%- endfor %}
   </ul>
 </aside>
diff --git a/_includes/theme.css b/_includes/theme.css
@@ -1,23 +1,21 @@
-root{
-  --line-height:1.3
-}
-[data-layout="monospace"]{
-  --bs-body-font-family: courier,monospace;
-}
-
-[data-layout="serif"]{
-  --bs-body-font-family: times,serif;
+[data-layout=monospace] {
+  font-family: courier, monospace;
+  line-height: 1.15;
+  font-size: 14px
 }
 
-[data-layout="sans-serif"]{
-  --bs-body-font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+[data-layout=serif] {
+  font-family: times, serif;
+  line-height: 1.3;
+  font-size: 14px
 }
 
-body{
-  font-family: var(--bs-body-font-family);
-  line-height:1.2;
+[data-layout=sans-serif] {
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  line-height: 1.3;
+  font-size: 14px
 }
 
 @media (min-width:900px){
-body > .container{max-width:80%;margin:0 auto}
+body>.container{max-width:80%;margin:0 auto}
 }
diff --git a/_layouts/book.html b/_layouts/book.html
@@ -30,7 +30,7 @@ <h3 class="h4" id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'
         <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">
-            <a href="#{{annotation.id}}">#{{annotation.id}}</a>
+            <a class="fw-semibold" href="#{{annotation.id}}">#{{annotation.id}}</a>
             <span>&bull;</span>
             <time class="text-muted">{{annotation.created|date:'%b %-d %Y %-I:%M%p'}}</time>
           </div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -32,10 +32,11 @@
 <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">
+    <div class="d-flex gap-2 smaller">
     {%- for link in site.links %}
-      <a href="{{ site.baseurl }}/{{link}}">{{link}}</a>
+      <a class="text-dark" href="{{ site.baseurl }}/{{link}}">{{link}}</a>
     {%- endfor %}
+      <a class="text-dark" href="https://github.com/{{site.repository}}">github</a>
     </div>
   </header>
   <main id="top">

diff --git a/_layouts/genre.html b/_layouts/genre.html
@@ -8,7 +8,7 @@ <h2>#{{page.tag}}</h2>
 <ul style="width:90%" class="d-flex flex-column gap-3">
   {%- for book in booklist %}
   <li>
-    <h4 class="h6"><a href="{{book.slug}}">{{book.title}}</a> by {{book.author|split: ","|first}}</h4>
+    <h4 class="h6 my-0"><a href="{{book.slug}}">{{book.title}}</a> by {{book.author|split: ","|first}}</h4>
     <div class="d-flex small gap" style="--gap:4px">
       <span class="accent">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span>
       <span>&bull;</span>

diff --git a/_pages/feed.html b/_pages/feed.html
@@ -16,7 +16,7 @@
   {%- 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>{{book.created|date: '%F'}}</time><br><a class="small text-muted text-decoration-none" href="{{book.tags}}">{{book.tags}}</a>
+      <time>{{book.created|date: '%F'}}</time><br><a class="small muted text-decoration-none fw-normal sans-serif" href="{{book.tags}}">{{book.tags}}</a>
     </th>
     <td class="pb-3">
       <h4 class="h6"><a href="./{{book.tags}}/{{book.slug}}.html">{{book.title}}</a></h4>

diff --git a/_pages/tags.html b/_pages/tags.html
@@ -18,32 +18,21 @@
 </style>
 {% assign genres = site.data.genres %}
 <div class="column-container">
-{%- for genre in genres -%}
+{%- 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>
-    <ul class="posts d-flex flex-column gap-3 py-3 px-0" data-tag="{{genre.name}}">
-      {%- assign books = genre.books %}
-      {%- for book in books -%}
-        {%- assign bookmodified = book.modified | date: "%b %Y" -%}
-        <li class="d-flex flex-column w-100" data-modified="{{book.modified|date: '%F' }}">
-            <h3 class="h6"><a href="{{ site.baseurl }}/{{genre.tag}}/{{book.slug}}">{{book.title}}</a></h3>
-            <span class="clamp small">{{book.author}}</span>
-            <div class="d-flex text-muted text-uppercase gap-1 small">
-              <span data-label="last read">{{ bookmodified }}</span>
-              {%- comment -%}
-              {%- assign bookcreated = book.created | date: "%b %d" -%}
-              {%- assign bookmodified = book.modified | date: "%b %Y" -%}
-              {%- if bookmodified != bookcreated %}
-              <span>&bullet;</span>
-              <span data-label="updated">{{book.modified|date: '%b %-d %Y'}}</span>
-              {%- endif -%} 
-              {%- endcomment %}
-              <span>&bullet;</span>
-              <span class="pre">{{book.count}}</span>
-            </div>
-        </li>
-      {%- endfor -%}
-    </ul>
+    <ol class="posts d-flex flex-column gap-3 py-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'}}">
+        <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>        
+      </li>
+    {%- endfor %}
+    </ol>
   </div>
 {%- endfor -%}
 </div>

diff --git a/scripts/group.sh b/scripts/group.sh
@@ -43,13 +43,20 @@ permalink: /activity
 ---
 
 <style>
-li p{margin: 0 0;}
 span[started]:after{content:"*";color:red}
+main{font-size:12px;line-height:1.15}
+main>ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:1rem}
+li ul strong{font-weight:500}
+strong a{text-decoration:none;font-weight:700;color:inherit}
+li p strong{color:#000;font-weight:700;font-size:.95rem}
+li p{margin:0 0;padding-bottom:.25rem}
+ul{list-style-type:disc}
+li,ul{color:#666}
+h2{font-size:1.4rem;text-align:right;margin-right:10%;border-bottom:2px dotted gray;margin:2rem 0;padding:0 .5rem}
 </style>
 
 # Reading Activity 
 
-<span started="1"></span> = started book 
 '
 
 jq -r --slurpfile books $DATADIR/books.json '($books[] | 
@@ -62,8 +69,8 @@ jq -r --slurpfile books $DATADIR/books.json '($books[] |
     | map(.date as $d2 | [
       "* **\(.date)**" ,
       "", 
-     (.books | map("  - \(.count) annotation\(if .count > 1 then "s" else "" end) for [" + $asset[.assetid].title + "][\(.assetid)]" 
-      + (if $asset[.assetid].cdate == $d2 then " <span started=1></span>" else "" end)  )),""][] )|flatten|join("\n"))  
+     (.books | map("  - [" + $asset[.assetid].title + "][\(.assetid)] - \(.count) annotation\(if .count > 1 then "s" else "" end)" 
+      + (if $asset[.assetid].cdate == $d2 then "  \n  - **Started [\($asset[.assetid].title)][\(.assetid)]**" else "" end)  )),""][] )|flatten|join("\n"))  
   ])
   | flatten(2)
   | join("\n\n") +"\n"' $HISTORYDATAPATH