Strip style

nntrn · Sep 9, 2024 · fe62cf3 · fe62cf3
1 parent b8f1087
commit fe62cf3
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 44 deletions.
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -23,15 +23,14 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: read
-      issues: write
+      actions: read
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - run: ./scripts/build-data.sh --remote
-      - name: Set up Ruby
-        uses: ruby/setup-ruby@v1
+      - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: "2.7.1"
+          ruby-version: 3.2
           bundler-cache: true
       - name: Build with Jekyll
         run: bundle exec jekyll build

diff --git a/_includes/root.css b/_includes/root.css
@@ -10,7 +10,7 @@
   --link-rgb: 51, 102, 203;
   --meta-color: rgb(var(--meta-rgb));
   --body-color: rgb(var(--body-rgb));
-  --h: 110;
+  --h: 10;
   --s: 73.4%;
   --l: 54%;
   --hsl: var(--h), var(--s), var(--l);
@@ -21,4 +21,5 @@
   --svg-size: 10px;
   --heart: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.25 9.75c3 3.5 4.75 4.5 4.75 4.5s1.75-1 4.75-4.5s1-7-1.5-7s-3.25 3-3.25 3s-.75-3-3.25-3s-4.5 3.5-1.5 7"/></svg>');
   --star: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path fill="currentColor" d="m12 2l3.104 6.728l7.358.873l-5.44 5.03l1.444 7.268L12 18.28L5.534 21.9l1.444-7.268L1.538 9.6l7.359-.873z" opacity=".16"/><path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="m12 2l3.104 6.728l7.358.873l-5.44 5.03l1.444 7.268L12 18.28L5.534 21.9l1.444-7.268L1.538 9.6l7.359-.873z"/></g></svg>')
-}
+}
+
diff --git a/_includes/style.css b/_includes/style.css
@@ -2,11 +2,11 @@
 .hidden,[hidden]{display:none!important}
 html{font-size:13px}
 body,html,main{height:100%}
-body{background:hsla(var(--h),40%,90%,0);font-variant:proportional-width;scrollbar-width:thin;padding:0 0;margin:auto;font-family:var(--sans-serif);font-size:inherit;line-height:1.3;text-rendering:optimizeLegibility;font-variant:proportional-width}
+body{background:hsla(var(--h),40%,90%,0);font-variant:proportional-width;scrollbar-width:thin;padding:0 0;margin:auto;font-family:sans-serif;font-size:inherit;line-height:1.3;text-rendering:optimizeLegibility;font-variant:proportional-width}
 header{padding:.85rem 0;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid hsl(var(--h),40%,90%);padding:.85rem 1rem;line-height:1;flex:1;gap:1rem;display:flex;flex-direction:column;min-width:140px}
 footer{margin-top:1rem}
 footer p{border-top:1px solid #aaa;padding-top:1rem/*! text-align:right */}
-main{gap:1rem;position:relative;padding-left:var(--px-size);padding-right:var(--px-size);width:100%;scrollbar-width:thin;overflow-y:scroll;margin-bottom:0;display:block;padding:calc(1rem/2) var(--px-size);height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem}
+main{gap:1rem;position:relative;padding-left:var(--px-size);padding-right:var(--px-size);width:100%;scrollbar-width:thin;overflow-y:scroll;margin-bottom:0;display:block;padding:calc(1rem/2) var(--px-size);height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem;/*! max-width: ; */max-width:1000px;overflow-y:unset}
 a,u{text-underline-offset:1px;text-decoration-skip-ink:all;text-decoration-thickness:2px;text-decoration-skip-ink:none}
 u{text-decoration-color:hsl(var(--h),var(--s),var(--l));text-decoration-skip-ink:all}
 a:empty{text-decoration:none;color:inherit}
@@ -41,6 +41,7 @@ strong{--darker:#222;color:var(--darker)}
 .col{flex-direction:column}
 .container{display:flex;height:100vh;overflow-y:scroll;gap:0 1rem}
 .flex{display:flex}
+.center{align-content:center;align-items:center}
 .darker{color:hsl(var(--h),50%,40%)}
 .bg{background:var(--bg-color),var(--bg-opacity)}
 .bgh:hover{background:hsla(var(--h),50%,40%,.15);color:hsl(var(--h),50%,40%)}
@@ -68,11 +69,11 @@ strong{--darker:#222;color:var(--darker)}
 .postlist{flex:1;min-width:25vw;position:relative}
 .postlist h4 a{font-family:sans-serif;font-size:.9em}
 .postlist a:hover{color:hsl(var(--h),50%,30%)}
-.postlist ul a{text-decoration-color:hsl(var(--h),40%,30%);font-weight:400;text-decoration-thickness:2px}
+.postlist ul a{/*! text-decoration-color:hsl(var(--h),40%,30%); */font-weight:400;text-decoration-thickness:2px}
 .postlist ul a:hover{text-decoration-color:currentColor}
 .postlist strong{font-weight:700;display:block;line-height:1.1}
 .postlist u{color:var(--body-color);text-decoration-color:var(--accent-color);text-decoration-skip-ink:none;font-weight:500}
-.postlist ul{display:inline-flex;gap:.4rem;position:relative;position:sticky;top:0;line-height:1.3;font-size:.925rem}
+.postlist ul{display:inline-flex;gap:.4rem;position:relative;position:sticky;top:0;line-height:1.1/*! font-size:.925rem; */}
 .chapters{display:flex;flex-direction:column;gap:4rem;margin:2.5rem 0;margin-bottom:1rem}
 .chapters ul{position:relative;margin:0 0}
 .chapters ul[data-label]:before{font-size:1.35rem;content:attr(data-label);margin:0 0;padding:0 0;/*! position:absolute; *//*! left:0; */margin-top:-2.5rem;font-family:times;font-weight:700;margin-left:-1.25rem}
@@ -99,6 +100,7 @@ i:before{opacity:.6}
 .container{flex-direction:column}
 .sm-col{flex-direction:column}
 .site-title{font-size:2rem}
+header{max-width:unset}
 }
 @media (max-width:750px){
 .md-colr,main>.flex{display:flex;flex-direction:column-reverse}
@@ -108,4 +110,5 @@ ol li{list-style:unset;padding-left:unset}
 }
 @media (min-width:600px){
 .show-md{display:unset!important}
+header{max-width:120px}
 }
diff --git a/_includes/table.css b/_includes/table.css
@@ -0,0 +1,12 @@
+table{line-height:1.3;border-collapse:collapse}
+tr>*{padding-bottom:.5rem;padding-top:.5rem}
+td,th{vertical-align:top}
+th date{white-space:pre;font-weight:400;color:#8e8e8e}
+th{border-right:1px dotted var(--body-color);line-height:1}
+th[data-level="1"]{border:0;white-space:pre;transition:all .6s linear;max-width:min-content;text-align:right}
+th[data-level="2"]{text-align:right}
+td[colspan]{padding-left:11%}
+td[colspan] h2{padding-top:1.5rem}
+tr{line-height:1.2}
+tr .padded:nth-child(1){padding-right:.75rem}
+tr .padded:nth-child(2){padding-left:.75rem}
diff --git a/_layouts/book.html b/_layouts/book.html
@@ -7,25 +7,26 @@
 {%- assign pagemodified = page.modified | date: "%b %Y" -%}
 {%- assign annotations = site.data.activity | where: 'assetid', page.assetid  | sort: "cfi" %}
 {%- assign chapters = annotations | group_by: "chapter" %}
-<div class="flex gap md-colr" style="--gap:1rem">
+<div class="flex gap md-colr column-reverse" style="--gap:1rem">
 {%- include postlist.html %}
 <article class="content">
   <h2 class="book-title">{{page.title}}</h2>
   <h3 class="book-author">{{page.author}}</h3>
   <p class="flex gap wrap" style="--gap:3px">
-    <span><i class="star icon-md">{{annotations.size}}</i></span>
-    <span>&middot;</span>
-    <span style="--gap:3px" class="gap flex up small">
-      <time>{{pagecreated}}</time>
-      {%- if pagemodified != pagecreated -%}<span>&ndash;</span><time>{{pagemodified}}</time>{%- endif %}
+    <span>{{annotations.size}} annotation{% if annotations.size > 1 %}s{%- endif -%}</span>
+    <span class="accent">&bull;</span>
+    <span style="--gap:3px" class="gap flex">
+      <span title="Created">{{pagecreated}}</span>
+      {%- if pagemodified != pagecreated -%}<span>&ndash;</span><span title="Modified">{{pagemodified}}</span>{%- endif %}
     </span>
   </p>
   <hr>
-  <section class="flex">
+  <section class="flex ">
     <div class="chapters">
     {%- for chapter in chapters %}
     {%- assign sortedchapteritems = chapter.items | sort: "cfi" %}
-      <ul id="{{chapter.name | slugify: 'latin'}}" data-label="{{chapter.name|replace:'#',''|strip}}">
+      <h2 id="{{chapter.name | slugify: 'latin'}}">{{chapter.name|replace:'#',''|strip}}</h2>
+      <ul>
         {%- for annotation in sortedchapteritems %}
         <li id="{{annotation.id}}" class="bookmark lh-2">
           <q>{{annotation.text}}</q>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -25,12 +25,8 @@
   <meta name="twitter:url" content="{{ site.url | absolute_url }}">
   <meta name="twitter:title" content="{{ page.title | default: site.title }}">
   <meta name="twitter:description" content="{{ page.description | default: site.description }}">
-  <style>
-  {% include root.css %}
-  </style>
-  <style>
-  {% include style.css %}
-  </style>
+  <link rel="stylesheet" href="{{'/assets/minimal.css'|relative_url}}">
+
 </head>
 <body>
 <div class="container">

diff --git a/_layouts/genre.html b/_layouts/genre.html
@@ -5,14 +5,14 @@
 {%-  assign booklist = page.books | sort: "title" %}
 <section>
 <h2>#{{page.tag}}</h2>
-<ul style="--small:.85rem;--gap:.25rem;width:90%" class="lh-3">
+<ul style="--gap:1rem;width:90%" class="lh-3 flex col gap">
   {%- for book in booklist %}
   <li>
-    <div class="lh-1"><a href="{{book.slug}}" class="no-underline">{{book.title}}</a> by {{book.author}}</div>
-    <div class="flex small gap" style="--gap:4px">
-      <i class="heart">{{book.count}}</i>
+    <div class="lh-1"><a href="{{book.slug}}"><strong>{{book.title}}</strong></a> by {{book.author}}</div>
+    <div class="flex small gap center" style="--gap:4px">
+      <span class="accent">{{book.count}}</span>
       <span>&bull;</span>
-      <span class="muted">last read on <time class="fs8 darker">{{book.modified|date: '%b %e %Y'}}</time></span>
+      <span class="muted">last read on <time>{{book.modified|date: '%b %e %Y'}}</time></span>
     </div>
   </li>
   {%- endfor %}

diff --git a/assets/minimal.css b/assets/minimal.css
@@ -0,0 +1,26 @@
+.mark q{background:#ff0}
+.chapters ul[data-label]:before{font-size:1.35rem;content:attr(data-label);margin-top:1.5rem;font-family:times;font-weight:700;margin-left:-1.25rem}
+.chapters ul{display:flex;flex-direction:column;gap:1rem}
+.toc{max-height:min(300px,40vh);position:sticky;top:0;font-size:.9rem;z-index:1;width:20px;max-width:20px}
+.toc a{display:block;text-decoration:none;color:var(--body-color);font-weight:400;white-space:pre;padding:0 4px;line-height:1}
+.toc a:hover{text-decoration:none;color:var(--accent-color)}
+.toc a:hover:before{content:attr(title);position:absolute;right:1.5rem;background:hsl(var(--h),90%,80%);padding:2px 4px;color:hsl(var(--h),40%,20%);z-index:1;font-size:.8rem}
+.flex{display:flex}
+.gap{gap:var(--gap,1rem)}
+.column-reverse{flex-direction:column-reverse}
+.col{flex-direction:column}
+table{line-height:1.3;border-collapse:collapse}
+tr>*{padding-bottom:.5rem}
+td,th{vertical-align:top}
+th date{white-space:pre;font-weight:400;color:#8e8e8e}
+th{border-right:1px dotted var(--body-color);line-height:1}
+th[data-level="1"]{border:0;white-space:pre;transition:all .6s linear;max-width:min-content;text-align:right}
+th[data-level="2"]{text-align:right}
+td[colspan]{padding-left:11%}
+tr{line-height:1.2}
+tr .padded:nth-child(1){padding-right:.75rem}
+tr .padded:nth-child(2){padding-left:.75rem}
+.muted,a.muted{text-decoration:none;color:gray}
+
+q:before{content:""}
+q:after{content:""}
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,6 @@
+---
+---
+
+{% include root.css %}
+{% include style.css %}
+{% include table.css %}
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
   </th>
   <td class="padded">
     <a href="./{{book.tags}}/{{book.slug}}.html"><strong>{{book.title}}</strong></a>
-    <div class="lh-2 small">{{book.author}} &bull; {{book.count}}</div>
+    <div class="lh-2 small">{{book.author}} &bull; <span class="muted">{{book.count}} annotation{% if book.count > 1 %}s{%- endif -%}</span></div>
   </td>
 </tr>
 {%- endfor %}
@@ -36,17 +36,3 @@
 {%- endfor -%}
 </table>
 </section>
-<style>
-table{line-height:1.3;border-collapse:collapse;max-width:80%}
-tr>*{padding-bottom:.5rem;padding-top:.5rem}
-td,th{vertical-align:top}
-th date{white-space:pre;font-weight:400;color:#8e8e8e}
-th{border-right:1px dotted var(--body-color);line-height:1}
-th[data-level="1"]{border:0;white-space:pre;transition:all .6s linear;max-width:min-content;text-align:right}
-th[data-level="2"]{text-align:right}
-td[colspan]{padding-left:11%}
-td[colspan] h2{padding-top:1.5rem}
-tr{line-height:1.2}
-tr .padded:nth-child(1){padding-right:.75rem}
-tr .padded:nth-child(2){padding-left:.75rem}
-</style>