migrate: Fix CSS for site-search; Set aria-current in site-nav (#75)

nfreear · Mar 28, 2023 · 90c4806 · 90c4806
1 parent 77bb9a5
commit 90c4806
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 45 deletions.
diff --git a/_app/tag-filters.plugin.js b/_app/tag-filters.plugin.js
@@ -8,7 +8,7 @@
 
 module.exports = (eleventyConfig) => {
   /**
-   * "myTags" custom collection.
+   * The "myTags" custom collection.
    */
   eleventyConfig.addCollection('myTags', (collectionApi) => {
     const POSTS = collectionApi.getFilteredByTag('posts');
@@ -19,17 +19,17 @@ module.exports = (eleventyConfig) => {
 
   /** Filters.
    */
-  eleventyConfig.addFilter('getAllTags', (collection) => getAllTags(collection));
+  // Was: eleventyConfig.addFilter('getAllTags', (collection) => getAllTags(collection));
 
-  eleventyConfig.addFilter('filterTagList', (tags) => filterTagList(tags));
+  // eleventyConfig.addFilter('filterTagList', (tags) => filterTagList(tags));
 
   eleventyConfig.addFilter('sortGetTags', (collection) => {
     return sortTags(filterTagList(getAllTags(collection)));
   });
 
   eleventyConfig.addFilter('fontSizeVar', (count) => {
     count = parseInt(count);
-    return `--tc-log:${Math.log(count + 1)};--tc-log10:${Math.log10(count + 1)};`;
+    return `--tc-log:${Math.log(count + 1)};--tc-log10:${Math.log10(count + 1)};`; // --tc-n:${count};
     // return `--tc-font-size:${Math.log10(count + 1)}rem;`;
   });
 };

diff --git a/_components/site-nav.webc b/_components/site-nav.webc
@@ -10,14 +10,18 @@
        * @see _data/nav.js
        */
 
-      siteNav(tag);
+      const { log } = this.helpers;
 
-      function siteNav(tag) {
+      // log('>> Nav:', page);
+
+      siteNav(tag, page.url);
+
+      function siteNav(tag, currentUrl) {
         const TAG = tag || 'main';
         const PATH = nav.pathPrefix || '/';
         const PAGES = [];
 
-        // console.debug('Nav:', nav);
+        // log('Nav:', currentUrl, nav);
 
         nav[TAG].forEach((path) => {
           const found = collections.all.find(page => page.inputPath === path);
@@ -26,8 +30,8 @@
           }
         });
 
-        return PAGES.map((page) =>`<li class="nav-item">
-            <a href="${PATH + page.url}">${page.data.title}</a>
+        return PAGES.map((entry) =>`<li class="nav-item">
+            <a href="${PATH + entry.url}" ${currentUrl == entry.url ? 'aria-current="page"' : ''}>${entry.data.title}</a>
           </li>`)
           .join('');
       }

diff --git a/_components/site-search.webc b/_components/site-search.webc
@@ -0,0 +1,60 @@
+
+<my-search
+  webc:keep
+  :cx="site.googSearchId"
+>
+  <site-busy-spinner webc:nokeep>
+    <p id="x-cse-loading"> Loading search … (Javascript) </p>
+  </site-busy-spinner>
+</my-search>
+
+<p webc:if="!site.enableJavascript">
+  [Site search & Javascript disabled.]
+</p>
+
+
+<style webc:keep>
+  /* Site search CSS overrides - must appear after "body"! */
+
+  .gsc-control-cse,
+  .gsc-control-cse *,
+  .gsc-webResult.gsc-result,
+  .gsc-webResult.gsc-result:hover,
+  .gs-webResult.gs-result a.gs-title:link,
+  .gs-webResult .gs-per-result-labels .gs-label,
+  .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet {
+    background-color: transparent;
+    /* border-color: rgba(127,127,127, .8); */
+    border-color: var(--color-gray-90);
+    color: var(--text-color);
+    line-height: 1.8;
+  }
+
+  .gsc-search-button-v2 {
+    border-width: 3px;
+    padding: .9rem 1.6rem;
+  }
+  .gsc-search-button-v2 svg {
+    height: 1.4rem;
+    width: 1.4rem;
+  }
+
+  .gs-webResult.gs-result a.gs-title:link {
+    color: var(--text-color-link);
+    text-decoration: underline;
+  }
+
+  .gs-webResult.gs-result a.gs-title:focus,
+  .gs-webResult.gs-result a.gs-title:hover {
+    text-decoration-thickness: 6px;
+  }
+
+  .gsc-adBlock {
+    display: none;
+  }
+
+  label {
+    display: inline-block;
+    margin-bottom: .3rem;
+  }
+</style>
diff --git a/_components/skip-link.webc b/_components/skip-link.webc
@@ -30,7 +30,7 @@
   background: var(--skip-link-bg, lightyellow);
   border: 2px solid darkorange;
   border-radius: .25rem;
-  color: var(--skip-link-color, teal);
+  color: var(--skip-link-color, #101e22); /* Was: teal */
   font-size: 1.1rem;
   height: auto;
   width: auto;

diff --git a/_components/tag-list.webc b/_components/tag-list.webc
@@ -21,17 +21,17 @@
 
 <style>
   .tag-cloud {
-    --tc-multi: 2.4;
+    /* --tc-multi: 2.4;
 
-    X-display: inline-flex;
+    display: inline-flex; */
     list-style: none;
     margin: 2rem 0;
     padding: 0;
   }
   .tag-cloud > * {
     display: inline-block;
-    X-flex: auto;
-    X-flex-wrap: true;
+    /* flex: auto;
+    flex-wrap: true; */
     line-height: 1.2;
     margin-right: .5rem;
     padding: 0;
@@ -43,8 +43,18 @@
     font-size: .9rem;
   }
   .tag-cloud u {
-    X-font-size: calc(var(--tc-multi, 1) * var(--tc-font-size));
     font-size: calc(1.1rem * var(--tc-log));
-    X-font-size: calc(2.3rem * var(--tc-log10));
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+  }
+  .tag-cloud :focus u,
+  .tag-cloud :hover u {
+    text-decoration-thickness: var(--focus-line-width);
+  }
+  .tc-log10 u {
+    font-size: calc(2.3rem * var(--tc-log10));
+  }
+  .tc-multi u {
+    font-size: calc(var(--tc-multi, 1) * var(--tc-font-size));
   }
 </style>
diff --git a/_pages/404.md b/_pages/404.md
@@ -1,8 +1,7 @@
 ---
-layout: default
+# layout: default
 permalink: /404.html
 title: Page Not Found
-x-nav-class: sr-only
 
 # https://help.github.com/en/articles/creating-a-custom-404-page-for-your-github-pages-site
 # https://css-tricks.com/thispagedoesntexist

diff --git a/_pages/search.html b/_pages/search.html
@@ -2,26 +2,14 @@
 layout: default
 title: Search
 permalink: /search/
-x-nav-class: sr-only
 x-created:   2015-10-21
 ---
 
 <div role="search">
 
   <h1 class="page-heading"><label for="gsc-i-id1">Search</label></h1>
 
-  <my-search
-    webc:keep
-    :cx="site.googSearchId"
-  >
-    <site-busy-spinner webc:nokeep>
-      <p id="x-cse-loading"> Loading search … (Javascript) </p>
-    </site-busy-spinner>
-  </my-search>
-
-  <p webc:if="!site.enableJavascript">
-    [Site search & Javascript disabled.]
-  </p>
+  <site-search webc:nokeep></site-search>
 
   <script webc:nokeep>
   (function (document, L) {
@@ -38,14 +26,4 @@ <h1 class="page-heading"><label for="gsc-i-id1">Search</label></h1>
   })(window.document, window.location);
   </script>
 
-  <!-- <gcse:search>
-    <form>
-      <p id="x-cse-loading"> Loading search … (Javascript) </p>
-      <site-busy-spinner webc:nokeep></site-busy-spinner>
-    </form>
-  </gcse:search> -->
-
-
-  <p id="plugin"></p>
-
 </div>
diff --git a/css/style.css b/css/style.css
@@ -5,6 +5,7 @@
 :root {
 	--font-family: -apple-system, system-ui, sans-serif;
 	--font-family-monospace: Consolas, Monaco, 'Courier New', Courier, monospace;
+	--focus-line-width: 5px;
 }
 
 /* Theme colors */
@@ -27,7 +28,7 @@
 	:root {
 		--color-gray-20: #e0e0e0;
 		--color-gray-50: #C0C0C0;
-		--color-gray-90: #dbd9d9; /* #dad8d8; */
+		--color-gray-90: #dbd9d9; /* Was: #dad8d8; */
 
 		/* --text-color is assigned to --color-gray-_ above */
 		--text-color-link: #5ccdf0; /* Was: #1493fb; */
@@ -40,7 +41,13 @@
 
 * {
 	outline-offset: .3rem;
-	text-underline-offset: .2rem;
+	text-underline-offset: .25rem;
+}
+
+:hover,
+:focus {
+	text-decoration-thickness: var(--focus-line-width);
+	transition: all .5s;
 }
 
 html,
@@ -86,7 +93,7 @@ my-feed {
 
 p,
 li {
-	line-height: 1.5;
+	line-height: 1.6;
 }
 
 my-feed::part(a) {
@@ -190,11 +197,18 @@ header {
 	display: inline-block;
 	margin-right: 1em;
 }
-.nav-item a[href]:not(:hover) {
+.nav-item a[href],
+.X-nav-item a[href]:not(:hover) {
 	text-decoration: none;
 }
+
+.nav a:hover,
+.nav a:focus,
 .nav a[href][aria-current="page"] {
+	outline-offset: .6rem;
 	text-decoration: underline;
+	text-decoration-thickness: var(--focus-line-width);
+	text-underline-offset: .3rem;
 }
 
 .post-list li {