Skip to content

Commit

Permalink
Fix focus styling. Make some notes indexes use YAML variables.
Browse files Browse the repository at this point in the history
  • Loading branch information
ryan-p-randall committed Oct 19, 2023
1 parent 5b49ab8 commit af651f0
Show file tree
Hide file tree
Showing 12 changed files with 96 additions and 49 deletions.
4 changes: 2 additions & 2 deletions _layouts/wikiindex.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions _notes/Accessibility/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
Expand Down
35 changes: 27 additions & 8 deletions _notes/Note-taking/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
9 changes: 3 additions & 6 deletions _notes/Reading/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
excerpts: true
folder-title: "Reading"
title: "Reading"
notes-folder-path: "/notes/Reading/"
---
<h2>All {{page.title}} folders</h2>

Expand All @@ -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>

Expand Down
12 changes: 4 additions & 8 deletions _notes/Technology/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
excerpts: true
folder-title: "technology"
title: "Technology"
notes-folder-path: "/notes/Technology/"
---

<h2>All {{page.title}} folders</h2>
Expand All @@ -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>

Expand Down
3 changes: 1 addition & 2 deletions _notes/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
8 changes: 5 additions & 3 deletions _sass/minimal-mistakes/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

/*
Expand Down
2 changes: 1 addition & 1 deletion _sass/minimal-mistakes/_navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@

a {
display: block;
margin: 0 1rem;
margin: 1rem; /* default: 0 1rem; */
color: $masthead-link-color;
text-decoration: none;

Expand Down
3 changes: 2 additions & 1 deletion _sass/minimal-mistakes/skins/_dark-citrus-sage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand Down
15 changes: 11 additions & 4 deletions _sass/minimal-mistakes/skins/_light-citrus-sage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%);
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
30 changes: 22 additions & 8 deletions assets/css/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
23 changes: 17 additions & 6 deletions assets/css/main2.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit af651f0

Please sign in to comment.