Merge pull request #17 from nbelikov/main

Update "Japanese sentences (nb)" template

templates/Japanese sentences (nb)/Production/front.html

@@ -15,14 +15,11 @@
 
 <script>
     function threeDots() {
-        const sent = document.getElementsByClassName("production")[0];
-        if (sent) {
-            for (const hidden of sent.getElementsByTagName("b")) {
+        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 */
     function splitTagDiv() {
         const header = document.querySelector("header");

templates/Japanese sentences (nb)/template.css

@@ -1,5 +1,8 @@
 @charset "utf-8";
 
+@media screen and (min-width: 900px) {
+
+    /* Limit font loading to wide screens to avoid performance hits on mobile. */
     @font-face {
         font-family: "KanjiStrokeOrders";
         src: local("KanjiStrokeOrders"), url("_kso.ttf");
@@ -16,6 +19,11 @@
         font-weight: 600;
     }
 
+    b, strong {
+        font-weight: 600;
+    }
+}
+
 * {
     box-sizing: border-box;
     padding: 0;
@@ -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;
 }
@@ -119,13 +127,6 @@ header > div:not(:last-child) {
 }
 
 /* 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. */
 
@@ -159,6 +163,7 @@ div.ensentence > a.hint {
     padding: 2px 10px;
     margin: 4px 0;
 }
+
 div.ensentence>a.hint:hover {
     color: #111;
     background-color: rgba(0, 0, 0, 0.03);
@@ -279,27 +284,40 @@ footer > a:last-child:after {
 /* 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;
 }
 
@@ -336,12 +354,12 @@ ol {
 /* 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,7 +388,8 @@ ol {
     color: #a33327;
 }
 
-.nightMode .jpsentence b {
+.nightMode .jpsentence b,
+.nightMode .jpsentence strong {
     color: NavajoWhite;
 }