Hover ruby

content/japanese-notes/giving-reasons.md

@@ -9,7 +9,7 @@
 Don't worry, apples are fine but I don't like them as much as this note makes
 out.
 
-## {ja:から}
+### {ja:から}
 
 When there is one reason for something, you can use {ja:から}.
 
@@ -19,14 +19,14 @@ When there is one reason for something, you can use {ja:から}.
 
 For adjectives, {ja:から} takes the adjective in a plain tense. That is,
 
-### {ja:^形,けい,容,よう,詞,し^}
+#### {ja:^形,けい,容,よう,詞,し^}
 
 Use the plain or plain past forms.
 
 - {ja:リンゴがお==いしいから==、よく^食,た^べます。}
 - I often eat apples ==because== they're ==tasty==.
 
-### {ja:^形,けい,容,よう,動,どう,詞,し^} and nouns
+#### {ja:^形,けい,容,よう,動,どう,詞,し^} and nouns
 
 Use the {ja:だ} or {ja:だった} to couple the adjective or noun to {ja:から} in
 the plain or past form respectively.
@@ -35,7 +35,7 @@ the plain or past form respectively.
 - I ==like== apples, ==so== I eat them often.
 - I eat apples a lot ==because== I ==like== them.
 
-### Verbs
+#### Verbs
 
 Use verbs in the plain or plain past form. (It would feel more natural to me to
 use {ja:^多,おお^かった} here, but the following is for demonstration.).
@@ -48,15 +48,15 @@ use {ja:^多,おお^かった} here, but the following is for demonstration.).
 {ja:ので} feels more polite than {ja:から}. {ja:ので} works like {ja:から} for
 {ja:^形,けい,容,よう,詞,し^} and verbs.
 
-### {ja:^形,けい,容,よう,動,どう,詞,し^} and nouns
+#### {ja:^形,けい,容,よう,動,どう,詞,し^} and nouns
 
 Couple the adjective or noun with a {ja:な}.
 
 - {ja:リンゴが^好,す^き==なので==、よく^食,た^べます。}
 - I ==like== apples, ==so== I eat them often.
 - I eat apples a lot ==because== I ==like== them.
 
-## {ja:し}
+### {ja:し}
 
 When there's more than one reason, {ja:し} can be used to give a complete or
 incomplete set of reasons. It couples to adjectives, nouns, and verbs in the

src/css/main.css

@@ -152,13 +152,30 @@ h4 {
   margin: 2rem 0 1em 0;
 }
 
+h4 {
+  font-size: 1.25rem;
+  margin: 1.5em 0 0.5em 0;
+}
+
+:is(h2, h3, h4):has(ruby) {
+  line-height: 2em;
+}
+
 p,
 dd,
 summary {
   margin: 1rem 0;
   line-height: 1.5em;
 }
 
+:is(p, dd, summary):has(ruby) {
+  line-height: 2em;
+}
+
+article ul:has(ruby) {
+  line-height: 2em;
+}
+
 header {
   margin: 1rem 0;
 }
@@ -416,6 +433,14 @@ body:has(.furigana-position option[value="under"]:checked) mark:has(ruby) {
   padding-bottom: 0.7em;
 }
 
+body:has(.furigana-position option[value="hover"]:checked) :not(mark):has(ruby):not(:hover) :is(rt, rp) {
+  display: none;
+}
+
+body:has(.furigana-position option[value="hover"]:checked) mark:has(ruby) {
+  padding-top: 0.7em;
+}
+
 body:has(.furigana-position option[value="off"]:checked) :is(rt, rp) {
   display: none;
 }

src/templates/partials/blog-entry-header.html.handlebars

@@ -12,6 +12,7 @@
   <p><span lang="ja">ふりがな</span>: <select class="furigana-position">
     <option value="over">over</option>
     <option value="under">under</option>
+    <option value="hover">hover</option>
     <option value="off">off</option>
   </select></p>
   {{/hasRuby}}