generators/hugo/shortcodes/marginnote: Add footnote hover hints

5 files changed, 15 insertions, 11 deletions

diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
index c02c1a8..6644254 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
@@ -1,5 +1,5 @@
 <label for="{{ .Get `mark` }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner }}">{{ .Get `mark` }}</label>
 <input type="checkbox" id="{{ .Get `mark` }}" class="marginnote-toggle">
 <span class="sans-serif marginnote {{ .Get `set` }}note">
-{{ .Inner }}
+<mark>{{ .Inner }}</mark>
 </span>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
index 80e4015..14461d2 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
@@ -15,5 +15,5 @@ $ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width
     {{ safeHTMLAttr `<?php echo 'height=' . '"' . $height . '"'; ?>` }} />
   </a>
 
-  <span class="sideimage-footer is-block has-text-centered has-text-grey-dark">{{ .Inner }}</span>
+  <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner }}</mark></span>
 </span>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
index 17c8e4a..2fdb881 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
@@ -1,5 +1,5 @@
 <label for="{{ .Get `mark` }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner }}">{{ .Get `mark` }}</label>
 <input type="checkbox" id="{{ .Get `mark` }}" class="sidenote-toggle">
 <span class="sans-serif sidenote {{ .Get `set` }}note">
-{{ .Inner }}
+<mark>{{ .Inner }}</mark>
 </span>
diff --git a/public/css/tdro-dark.css b/public/css/tdro-dark.css
index a9c0658..e190f8c 100644
--- a/public/css/tdro-dark.css
+++ b/public/css/tdro-dark.css
@@ -5,9 +5,10 @@ a { color: #75b2f0; }
 a.navbar-item:hover { color: #fff !important; }
 a:hover img { filter: brightness(100%); }
 img { box-shadow: none; filter: brightness(75%); }
-body, .sans-serif > a, .serif > a, nav#TableOfContents a { color: #cad6e2 }
+body, .sans-serif a, .serif a, nav#TableOfContents a { color: #cad6e2 }
 .article__list li:hover, nav#TableOfContents li:hover { background-color: #003247; }
-.leftnote, .rightnote { color: #a9bdd0; }
+.leftnote, .rightnote, mark { color: #a9bdd0; }
+.sidenote-mark:hover + input + .sidenote mark { background-color: #002e42; color: #fff; }
 .medium-zoom-overlay { background-color: #001f2c; background-color: rgba(0, 31, 44, .9); }
 .navbar-item, .subtitle, .has-text-grey-dark { color: #ddd !important; }
 .navbar__mobile__compact .navbar__active, .navbar-end .navbar__active { color: #75b2f0 !important; }
@@ -16,7 +17,7 @@ body, .sans-serif > a, .serif > a, nav#TableOfContents a { color: #cad6e2 }
 .has-text-primary { color: #a6c9e8 !important; }
 .footer a { color: #bbb; border-bottom: 1px solid #999; }
 .footer { padding: 1.5rem; }
-.navbar { background-color: #001f2c; background-color: rgba(0, 31, 44, 0.95); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25); }
+.navbar { background-color: #001f2c; background-color: rgba(0, 31, 44, 0.95); box-shadow: 0 4px 12px 0 rgba(0, 46, 66, 0.75); }
 .title, .content h1, .content h2, .content h3 { color: #ddd; }
 .button.is-link.is-outlined, .button.is-success.is-outlined { border-color: #cad6e2; color: #cad6e2; border-width: 1px; }
 .input, .textarea { background-color: #002e42; border-color: transparent; color: white; }
diff --git a/public/css/tdro.css b/public/css/tdro.css
index 9a6322a..2ee0ae5 100644
--- a/public/css/tdro.css
+++ b/public/css/tdro.css
@@ -4176,7 +4176,7 @@ a code { color: #0147b7; }
 .front__more { text-transform: uppercase; }
 .front__more svg { vertical-align: bottom; }
 
-.sans-serif > a, .serif > a { color: #222; }
+.sans-serif a, .serif a { color: #222; }
 .is-size-serif { font-size: 1.3em !important; }
 .serif { font-family: Charter, Georgia, 'Book Antiqua', serif; }
 
@@ -4343,9 +4343,7 @@ a code { color: #0147b7; }
 
 .underline,
 .isso-comment > div.text-wrapper > .text a,
-.sans-serif > a, .serif > a {
-  border-bottom: 1px solid #999;
-}
+.sans-serif a, .serif a { border-bottom: 1px solid #999; }
 
 /* focus links */
 
@@ -4396,7 +4394,7 @@ details summary { cursor: pointer;}
 
 nav#TableOfContents li:hover { background-color: #f1f1f1; }
 nav#TableOfContents ul { margin-left: -0.5em; }
-nav#TableOfContents a { display: block; color: #222; padding-left: 0.5rem; font-size: 0.9rem; }
+nav#TableOfContents a { display: block; color: #555; padding-left: 0.5rem; }
 
 /* tufte css */
 
@@ -4448,6 +4446,10 @@ input.sidenote-toggle, input.marginnote-toggle  { display: none; }
   top: -0.5rem;
 }
 
+mark { background-color: transparent; color: unset; }
+
+.sidenote-mark:hover + input + .sidenote mark { background-color: #fefe98; color: #000; }
+
 @media (max-width: 768px) {
 .sidenote-toggle:checked + .sidenote,
 .marginnote-toggle:checked + .marginnote {
@@ -4466,6 +4468,7 @@ label.marginnote-toggle:not(.sidenote-number) { display: inline; }
 .sidenote-mark, .marginnote-mark { border-bottom: 1px dashed #999; }
 .marginnote-mark:after { content: "\0002B"; font-weight: bold; }
 .sideimage { margin: 0 !important; left: 0 !important; width: 100% !important; }
+.sidenote mark { background-color: transparent !important; color: unset !important; }
 }
 
 blockquote .blockquote-footer { font-size: 1.1rem; margin-top: 1.3rem; }