From ef499951626a4c9ee6841f6925e0de8c4b52468d Mon Sep 17 00:00:00 2001
From: Nikolay Belikov <nb@nbelikov.com>
Date: Mon, 18 Apr 2022 22:06:37 +0300
Subject: [PATCH] Update "Japanese sentences (nb)" template

This commit merges changes from the original "Japanese sentences"
template.
---
 .../Production/front.html                     |   9 +-
 .../Japanese sentences (nb)/template.css      | 131 ++++++++++--------
 2 files changed, 78 insertions(+), 62 deletions(-)

diff --git a/templates/Japanese sentences (nb)/Production/front.html b/templates/Japanese sentences (nb)/Production/front.html
index 2d6c78d..06da1e9 100644
--- a/templates/Japanese sentences (nb)/Production/front.html	
+++ b/templates/Japanese sentences (nb)/Production/front.html	
@@ -15,12 +15,9 @@
 
 <script>
     function threeDots() {
-        const sent = document.getElementsByClassName("production")[0];
-        if (sent) {
-            for (const hidden of sent.getElementsByTagName("b")) {
-                hidden.style.visibility = "visible";
-                hidden.innerText = "【" + hidden.innerText.replace(/[^ぁ-んァ-ン]/g, "") + "】";
-            }
+        for (const hidden of document.querySelectorAll(".production b, .production strong")) {
+            hidden.style.visibility = "visible";
+            hidden.innerText = "【" + hidden.innerText.replace(/[^ぁ-んァ-ン]/g, "") + "】";
         }
     }
     /* Splits tags into separate divs */
diff --git a/templates/Japanese sentences (nb)/template.css b/templates/Japanese sentences (nb)/template.css
index df98da0..932ad4c 100644
--- a/templates/Japanese sentences (nb)/template.css	
+++ b/templates/Japanese sentences (nb)/template.css	
@@ -1,19 +1,27 @@
 @charset "utf-8";
 
-@font-face {
-    font-family: "KanjiStrokeOrders";
-    src: local("KanjiStrokeOrders"), url("_kso.ttf");
-}
+@media screen and (min-width: 900px) {
 
-@font-face {
-    font-family: "Yu Mincho";
-    src: local("Yu Mincho"), local("游明朝"), url("_yumin.ttf");
-}
+    /* Limit font loading to wide screens to avoid performance hits on mobile. */
+    @font-face {
+        font-family: "KanjiStrokeOrders";
+        src: local("KanjiStrokeOrders"), url("_kso.ttf");
+    }
 
-@font-face {
-    font-family: "Yu Mincho";
-    src: local("Yu Mincho Demibold"), local("游明朝 Demibold"), url("_yumindb.ttf");
-    font-weight: 600;
+    @font-face {
+        font-family: "Yu Mincho";
+        src: local("Yu Mincho"), local("游明朝"), url("_yumin.ttf");
+    }
+
+    @font-face {
+        font-family: "Yu Mincho";
+        src: local("Yu Mincho Demibold"), local("游明朝 Demibold"), url("_yumindb.ttf");
+        font-weight: 600;
+    }
+
+    b, strong {
+        font-weight: 600;
+    }
 }
 
 * {
@@ -40,6 +48,7 @@
 .card2 .jpsentence ruby rt {
     opacity: 0;
 }
+
 .card2 .jpsentence:hover ruby rt {
     opacity: 1;
 }
@@ -50,6 +59,7 @@
         display: flex;
         justify-content: center;
     }
+
     .wrap {
         width: 800px;
         padding: 0 5px 0;
@@ -58,6 +68,7 @@
         border-right: 1px solid #c9bcbc;
         min-height: 100vh;
     }
+
     .wrap .wrap {
         width: auto;
         padding: 0;
@@ -73,10 +84,6 @@ hr {
     border-top: 1px solid #c9bcbc;
 }
 
-b {
-    font-weight: 600;
-}
-
 /* links */
 a {
     color: #532f2f;
@@ -99,7 +106,8 @@ nokana ruby rt {
     display: none;
 }
 
-notext b {
+notext b,
+notext strong {
     background-color: black;
     color: transparent;
 }
@@ -114,18 +122,11 @@ header .tags {
     border-radius: 0px 0px 3px 3px;
 }
 
-header > div:not(:last-child) {
+header>div:not(:last-child) {
     margin-right: 3px;
 }
 
 /* Space between elements */
-.images {
-    margin-top: 16px;
-}
-
-.images > img {
-    margin-bottom: 16px;
-}
 
 .sent-center {
     display: flex;
@@ -140,7 +141,10 @@ header > div:not(:last-child) {
     font-size: 35px;
 }
 
-.jpsentence b { color: Maroon; }
+.jpsentence b,
+.jpsentence strong {
+    color: Maroon;
+}
 
 /* Hide front side when the back is shown. */
 
@@ -150,7 +154,7 @@ header > div:not(:last-child) {
 
 /* English */
 
-div.ensentence > a.hint {
+div.ensentence>a.hint {
     color: #555;
     font-size: 14px;
     display: block;
@@ -159,7 +163,8 @@ div.ensentence > a.hint {
     padding: 2px 10px;
     margin: 4px 0;
 }
-div.ensentence > a.hint:hover {
+
+div.ensentence>a.hint:hover {
     color: #111;
     background-color: rgba(0, 0, 0, 0.03);
 }
@@ -231,18 +236,18 @@ footer {
     text-align: center;
 }
 
-footer > a {
+footer>a {
     text-decoration: none;
 }
 
-footer > a:after {
+footer>a:after {
     content: "·";
     color: brown;
     display: inline-block;
     width: 6px;
 }
 
-footer > a:last-child:after {
+footer>a:last-child:after {
     content: "";
     width: 0;
 }
@@ -268,38 +273,51 @@ footer > a:last-child:after {
     display: none;
 }
 
-.vocab > .tags {
+.vocab>.tags {
     vertical-align: top;
 }
 
-.notes > .tags {
+.notes>.tags {
     vertical-align: bottom;
 }
 
 /* Images */
 
 .images {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-items: flex-start;
-    align-content: space-between;
-    justify-content: space-evenly;
+    margin: 10px 0;
+    display: grid;
+    justify-items: center;
+    align-items: start;
+    align-content: start;
+    justify-content: space-around;
+    gap: 5px;
+    grid-auto-columns: minmax(100px, 1fr);
+    grid-auto-rows: minmax(100px, auto);
 }
-
-.images > img {
-    max-width: 47%;
+.images br, .images > * {
+    display: none;
+}
+.images img {
+    display: block;
     border-radius: 4px;
     filter: sepia(33%);
-}
-
-.images > img:only-child {
     max-width: 100%;
+    max-height: 95vh;
+}
+.images img:nth-child(3n+1) {
+  grid-column: 1;
+}
+.images img:nth-child(3n+2) {
+  grid-column: 2;
+}
+.images img:nth-child(3n+3) {
+  grid-column: 3;
 }
 
 /* Production cards */
 
-.production b {
+.production b,
+.production strong {
     visibility: hidden;
 }
 
@@ -321,27 +339,27 @@ ol {
 
 /* Fix for Yomichan pitch accents */
 
-.vocab ol > li {
+.vocab ol>li {
     display: inline;
 }
 
-.vocab ol > li:after {
+.vocab ol>li:after {
     content: "・";
 }
 
-.vocab ol > li:last-child:after {
+.vocab ol>li:last-child:after {
     content: "";
 }
 
 /* Night Mode */
 
 .nightMode.card {
-    color: #FFFFFF;
-    background-color: #212121;
+    background-color: #2F2F31;
 }
 
 .nightMode .wrap {
-    background-color: #2F2F31;
+    color: #FFFFFF;
+    background-color: inherit;
 }
 
 .nightMode .tags {
@@ -370,20 +388,21 @@ ol {
     color: #a33327;
 }
 
-.nightMode .jpsentence b {
+.nightMode .jpsentence b,
+.nightMode .jpsentence strong {
     color: NavajoWhite;
 }
 
-.nightMode .images > img {
+.nightMode .images>img {
     filter: sepia(0%);
 }
 
-.nightMode div.ensentence > a.hint {
+.nightMode div.ensentence>a.hint {
     color: #FFFFFF;
     border: 1px solid #FFFFFF;
 }
 
-.nightMode div.ensentence > a.hint:hover {
+.nightMode div.ensentence>a.hint:hover {
     color: gray;
     background-color: rgba(0, 0, 0, 0.20);
 }