Fix focus styling. Make some notes indexes use YAML variables.

ryan-p-randall · Oct 19, 2023 · af651f0 · af651f0
1 parent 5b49ab8
commit af651f0
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 49 deletions.
diff --git a/_layouts/wikiindex.html b/_layouts/wikiindex.html
@@ -31,7 +31,7 @@ <h2>Notes:</h2>
     {% unless item.path contains "index.html" %}
     <div class="">
         <hr>
-    <a class="" href="{{item.url}}"># {{item.path | replace: folderfilter , ""}}</a></li>
+    <a class="btn" href="{{item.url}}"># {{item.path | replace: folderfilter , ""}}</a></li>
     (last updated {{item.last_modified_at}})
     {{item.content | markdownify}}  
     </div>
@@ -52,7 +52,7 @@ <h2>Notes:</h2>
     {% unless item.path contains "index.html" %}
     <div class="">
         <hr>
-    <a class="" href="{{item.url}}"># {{item.path | replace: folderfilter , ""}}</a></li>
+    <a class="btn" href="{{item.url}}"># {{item.path | replace: folderfilter , ""}}</a></li>
     (last updated {{item.last_modified_at}})
     {{item.excerpt | markdownify}}  
     </div>

diff --git a/_notes/Accessibility/index.html b/_notes/Accessibility/index.html
@@ -3,6 +3,7 @@
 excerpts: true
 folder-title: "Accessibility"
 title: "Accessibility"
+notes-folder-path: "/notes/Accessibility/"
 ---
 {% assign accessibility_notes_pinned = site.notes | where:"accessibility","true" | where:"pinned","true" | sort:
 "path" %}

diff --git a/_notes/Note-taking/index.html b/_notes/Note-taking/index.html
@@ -3,6 +3,7 @@
 excerpts: true
 folder-title: "Note-taking"
 title: "Note taking"
+notes-folder-path: "/notes/Note-taking/"
 ---
 
 <h2>All {{page.title}} folders</h2>
@@ -17,21 +18,39 @@ <h2>All {{page.title}} folders</h2>
 
 {% assign wikifolders = wikifolders | uniq | sort %}
 
+{% comment %}
+
 <div class="wiki-folder-grid">
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Note-taking/Approaches">
-            <div class="btn btn--primary btn--large">Approaches</div>
-        </a>
+        <a class="btn btn--primary btn--large" href="/notes/Note-taking/Approaches">Approaches</a>
     </div>
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Note-taking/Dendron">
-            <div class="btn btn--primary btn--large">Dendron</div>
-        </a>
+        <a class="btn btn--primary btn--large" href="/notes/Note-taking/Dendron">Dendron</a>
+    </div>
+    <div class="wiki-folder-grid-thirds">
+        <a class="btn btn--primary btn--large" href="/notes/Note-taking/Obsidian">Obsidian</a>
     </div>
+<!--
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Note-taking/Obsidian">
-            <div class="btn btn--primary btn--large">Obsidian</div>
+        <a class="" href="/notes/Note-taking/Folder">
+            <div class="btn btn--primary btn--large">Folder</div>
         </a>
+    </div> -->
+</div>
+
+<h2>TESTING</h2>
+
+{% endcomment %}
+
+<div class="wiki-folder-grid">
+    <div class="wiki-folder-grid-thirds">
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}Approaches">Approaches</a>
+    </div>
+    <div class="wiki-folder-grid-thirds">
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}Dendron">Dendron</a>
+    </div>
+    <div class="wiki-folder-grid-thirds">
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}Obsidian">Obsidian</a>
     </div>
 <!--
     <div class="wiki-folder-grid-thirds">

diff --git a/_notes/Reading/index.html b/_notes/Reading/index.html
@@ -3,6 +3,7 @@
 excerpts: true
 folder-title: "Reading"
 title: "Reading"
+notes-folder-path: "/notes/Reading/"
 ---
 <h2>All {{page.title}} folders</h2>
 
@@ -18,14 +19,10 @@ <h2>All {{page.title}} folders</h2>
 
 <div class="wiki-folder-grid">
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Reading/Articles">
-            <div class="btn btn--primary btn--large">Articles</div>
-        </a>
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}Articles">Articles</a>
     </div>
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Reading/Books">
-            <div class="btn btn--primary btn--large">Books</div>
-        </a>
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}Books">Books</a>
     </div>
 </div>
 

diff --git a/_notes/Technology/index.html b/_notes/Technology/index.html
@@ -3,6 +3,7 @@
 excerpts: true
 folder-title: "technology"
 title: "Technology"
+notes-folder-path: "/notes/Technology/"
 ---
 
 <h2>All {{page.title}} folders</h2>
@@ -19,19 +20,14 @@ <h2>All {{page.title}} folders</h2>
 
 <div class="wiki-folder-grid">
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Technology/Jekyll">
-            <div class="btn btn--primary btn--large">Jekyll</div>
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}Jekyll">Jekyll
         </a>
     </div>
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Technology/Social-Media">
-            <div class="btn btn--primary btn--large">Social Media</div>
-        </a>
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}Social-Media">Social Media</a>
     </div>
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/Technology/VS-Code">
-            <div class="btn btn--primary btn--large">VS Code</div>
-        </a>
+        <a class="btn btn--primary btn--large" href="{{page.folder-notes-path}}VS-Code">VS Code</a>
     </div>
 </div>
 

diff --git a/_notes/index.html b/_notes/index.html
@@ -24,8 +24,7 @@ <h2 id="all-folders">All folders</h2>
     {% for folder in wikifolders %}
     {% unless folder contains 'md' or folder contains 'html' %}
     <div class="wiki-folder-grid-thirds">
-        <a class="" href="/notes/{{folder}}/">
-            <div class="btn btn--primary btn--large">{{folder}}</div>
+        <a class="btn btn--primary btn--large" href="/notes/{{folder}}/">{{folder}}
         </a>
     </div>
     {% endunless %}

diff --git a/_sass/minimal-mistakes/_mixins.scss b/_sass/minimal-mistakes/_mixins.scss
@@ -4,10 +4,12 @@
 
 %tab-focus {
   /* Default*/
-  outline: thin dotted $focus-color;
+/* default: outline: thin dotted $focus-color; */
   /* Webkit*/
-  outline: 5px auto $focus-color;
-  outline-offset: -2px;
+/* default: outline: 5px auto $focus-color; */
+    outline: .2rem solid $focus-color;
+    outline-offset: -2px;
+    box-shadow: 0 0 0 .3rem #f0f0f0;
 }
 
 /*

diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
@@ -181,7 +181,7 @@
 
   a {
     display: block;
-    margin: 0 1rem;
+    margin: 1rem; /* default: 0 1rem; */
     color: $masthead-link-color;
     text-decoration: none;
 

diff --git a/_sass/minimal-mistakes/skins/_dark-citrus-sage.scss b/_sass/minimal-mistakes/skins/_dark-citrus-sage.scss
@@ -24,6 +24,7 @@ $audience: mix($background-color, $masthead-link-color, 65%);
 $caption-font-family: sans-serif !default;
 
 .author__urls.social-icons .svg-inline--fa,
+.author__urls.social-icons .svg-inline--fab,
 .page__footer-follow .social-icons .svg-inline--fa {
   color: inherit;
 }
@@ -124,7 +125,7 @@ details {
     padding: .5rem;
 }
 
-summary:hover, summary:focus {
+summary:hover, /* summary:focus */ {
    box-shadow: 0 0 0 0.35rem $masthead-link-color-hover;
 }
 

diff --git a/_sass/minimal-mistakes/skins/_light-citrus-sage.scss b/_sass/minimal-mistakes/skins/_light-citrus-sage.scss
@@ -7,7 +7,8 @@ $background-color: #FAFAFA !default;
 $text-color: #252a34 !default;
 $primary-color: #C24E00 !default; /* orange */
 $masthead-link-color: #007053 !default; /* sage */
-$masthead-link-color-hover: mix(#000, $masthead-link-color, 20%) !default;
+$masthead-link-color-hover: mix(#000, #007053, 20%) !default;
+$navicon-link-color-hover: mix(#111, $background-color, 30%) !default;
 $border-color: mix(#111, $background-color, 20%) !default;
 $code-background-color: mix(#eee, $background-color, 15%) !default;
 $code-background-color-dark: mix(#111, $background-color, 20%) !default;
@@ -16,7 +17,6 @@ $footer-background-color: mix($masthead-link-color, $background-color, 15%) !def
 $link-color: mix($primary-color, $text-color, 80%) !default;
 $link-color-hover: mix(#fff, $link-color, 20%) !default;
 $link-color-visited: mix(#111, $link-color, 20%) !default;
-$navicon-link-color-hover: mix(#111, $background-color, 30%) !default;
 /* My Additional Colors */
 $backlink-background-color: mix(#111, $background-color, 10%) !default;
 $audience: mix($background-color, $masthead-link-color, 65%);
@@ -125,7 +125,7 @@ details {
     padding: .5rem;
 }
 
-summary:hover, summary:focus {
+summary:hover, /* summary:focus */ {
    box-shadow: 0 0 0 0.35rem $masthead-link-color-hover;
 }
 
@@ -184,4 +184,11 @@ progress {
 
 .bigfoot-footnote__button::after {
     color: #C24E00;
-}
+}
+
+.greedy-nav a:focus, div:focus, .search__toggle a:focus, button:focus, .taxonomy__index a:focus, a.back-to-top:focus {
+    outline: .2rem solid; /* 3px; */
+    outline-offset: .2rem; /* -1px; */
+    outline-color: $masthead-link-color;
+    box-shadow: 0 0 0 .3rem #f0f0f0;
+  }
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -12,16 +12,19 @@
 @import "vendor/bigfoot/bigfoot-mixins.scss";
 @import "vendor/bigfoot/bigfoot-popover.scss";
 
+/* see if focus-visible is better here
 a:focus, button:focus, .bigfoot-footnote__button:focus {
   outline: solid 3px;
   outline-offset: 0px;
   outline-color: $masthead-link-color;
 }
+*/
 
 .greedy-nav a:focus, div:focus, .search__toggle a:focus, button:focus, .taxonomy__index a:focus, a.back-to-top:focus {
-  outline: solid 3px;
-  outline-offset: -1px;
+  outline: .2rem solid; /* 3px; */
+  outline-offset: .2rem; /* -1px; */
   outline-color: $masthead-link-color;
+  box-shadow: 0 0 0 .3rem #f0f0f0;
 }
 
 .author__urls a:focus, .page__taxonomy-item:focus, .pagination li a:focus, .pagination--pager:focus, .archive__item a:focus, .toc__menu a:focus, a.btn:focus {
@@ -138,11 +141,22 @@ h2 {
 
 /* make heading link icons visible when focused */
 
-.page__content h1 .header-link:focus-visible,
-.page__content h2 .header-link:focus-visible,
-.page__content h3 .header-link:focus-visible,
-.page__content h4 .header-link:focus-visible,
-.page__content h5 .header-link:focus-visible,
-.page__content h6 .header-link:focus-visible {
+.page__content h1 .header-link:focus,
+.page__content h2 .header-link:focus,
+.page__content h3 .header-link:focus,
+.page__content h4 .header-link:focus,
+.page__content h5 .header-link:focus,
+.page__content h6 .header-link:focus {
     opacity: unset;
+}
+
+/* custom color for focus outline */
+a:focus,
+button:focus,
+.bigfoot-footnote__button:focus,
+summary:focus {
+  outline: .2rem solid #007053;
+/*  outline-offset: .2rem; */
+/*  outline-color:#007053; */
+  box-shadow: 0 0 0 .3rem #f0f0f0;
 }
diff --git a/assets/css/main2.scss b/assets/css/main2.scss
@@ -28,11 +28,22 @@
 
 /* make heading link icons visible when focused */
 
-.page__content h1 .header-link:focus-visible,
-.page__content h2 .header-link:focus-visible,
-.page__content h3 .header-link:focus-visible,
-.page__content h4 .header-link:focus-visible,
-.page__content h5 .header-link:focus-visible,
-.page__content h6 .header-link:focus-visible {
+.page__content h1 .header-link:focus,
+.page__content h2 .header-link:focus,
+.page__content h3 .header-link:focus,
+.page__content h4 .header-link:focus,
+.page__content h5 .header-link:focus,
+.page__content h6 .header-link:focus {
     opacity: unset;
+}
+
+/* custom color for focus outline */
+a:focus,
+button:focus,
+.bigfoot-footnote__button:focus,
+summary:focus {
+  outline: .2rem solid #f0f0f0;
+/*  outline-offset: .2rem; */
+/*  outline-color:#007053; */
+  box-shadow: 0 0 0 .3rem #007053;
 }