fix: css issues

eldarsadykov · Feb 6, 2025 · 667ca40 · 667ca40
1 parent 4be7bee
commit 667ca40
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 83 deletions.
diff --git a/docs/chapters/bezirksgericht.html b/docs/chapters/bezirksgericht.html
@@ -12,7 +12,7 @@ <h1>Bezirksgericht</h1>
       <article id="bezirksgericht-1">
         <h2 class="inline-title">Bezirksgericht 1.</h2>
         <p>(Blick aus der Zelle eines konkreten Lyrikers):</p>
-        <article id="grid-scroller">
+        <article class="grid-scroller">
           <article id="grid-container">
             <div class="grid underlay">
               <div class="und-so-schoene">und so schöne</div>
@@ -1111,66 +1111,65 @@ <h2 class="inline-title">Bezirksgericht 1.</h2>
       <article id="bezirksgericht-2">
         <h2 class="inline-title">Bezirksgericht 2.</h2>
         <p>Der eingegitterte Atomforscher, der hier sicherer aufbewahrt ist als in den Verliesen des zuständigen Geheimdienstes, da ihn hier unter Streunern und Ehestörern niemand vermutet, hat es längst aufgegeben, sich ins Birken- und Weidengrün und unter die <a class="arrow" href="eichhoernchen.html">Eichhörnchen</a> hinauszusehnen. Heute macht er sich einen guten Tag durch die Errechnung der Häufigkeit von Datumstriaden mit gleichen Anfangsbuchstaben. Er kommt auf 23 unter 365 Tagen, und zwar:</p>
-        <article id="grid-scroller">
+        <article class="grid-scroller">
           <div id="grid"> 
-            <div class="text" id="cell-1">Dienstag<br/>Donnerstag
+            <div class="text cell-1">Dienstag<br/>Donnerstag
             </div>
-            <div class="text" id="cell-2">
-               Freitag</div>
-            <div class="text" id="cell-3">Samstag<br/>Sonntag
+            <div class="text cell-2">Freitag</div>
+            <div class="text cell-3">Samstag<br/>Sonntag
             </div>
-            <div class="text" id="cell-4">dritter<br/>dreizehnter<br/>dreiundzwanzigster<br/>dreißigster
+            <div class="text cell-4">dritter<br/>dreizehnter<br/>dreiundzwanzigster<br/>dreißigster
             </div>
-            <div class="text" id="cell-5">fünfter<br/>fünfzehnter<br/>fünfundzwanzigster
+            <div class="text cell-5">fünfter<br/>fünfzehnter<br/>fünfundzwanzigster
             </div>
-            <div class="text" id="cell-6">sechster<br/>siebenter<br/>sechzehnter<br/>siebzehnter<br/>sechsundzwanzigster<br/>siebenundzwanzigster
+            <div class="text cell-6">sechster<br/>siebenter<br/>sechzehnter<br/>siebzehnter<br/>sechsundzwanzigster<br/>siebenundzwanzigster
             </div>
-            <div class="text" id="cell-7">Dezember </div>
-            <div class="text" id="cell-8">Febraur </div>
-            <div class="text" id="cell-9">September </div>
-            <div class="equal" id="cell-1">=</div>
-            <div class="equal" id="cell-2">=</div>
-            <div class="equal" id="cell-3">=</div>
-            <div class="number" id="cell-1">8</div>
-            <div class="number" id="cell-2">3</div>
-            <div class="number" id="cell-3">12</div>
-            <div class="number" id="cell-4">23</div>
-            <div class="curly" id="cell-1">
+            <div class="text cell-7">Dezember</div>
+            <div class="text cell-8">Febraur</div>
+            <div class="text cell-9">September</div>
+            <div class="equal cell-1">=</div>
+            <div class="equal cell-2">=</div>
+            <div class="equal cell-3">=</div>
+            <div class="number cell-1">8</div>
+            <div class="number cell-2">3</div>
+            <div class="number cell-3">12</div>
+            <div class="number cell-4">23</div>
+            <div class="curly cell-1">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 30.1 200.0" width="2em" height="100%">
                 <path class="curly-path right" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -50.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 51.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 51.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -50.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>
             </div>
-            <div class="curly" id="cell-2">
+            <div class="curly cell-2">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 30.1 200.0" width="2em" height="100%">
                 <path class="curly-path right" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -50.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 51.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 51.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -50.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>
             </div>
-            <div class="curly" id="cell-3">
+            <div class="curly cell-3">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 -100 30.1 400.0" width="2em" height="100%">
                 <path class="curly-path left" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -150.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 151.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 151.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -150.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>
             </div>
-            <div class="curly" id="cell-4">
+            <div class="curly cell-4">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 -50 30.1 300.0" width="2em" height="100%">
                 <path class="curly-path left" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -100.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 101.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 101.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -100.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>
             </div>
-            <div class="curly" id="cell-5">
+            <div class="curly cell-5">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 -200 30.1 600.0" width="2em" height="100%">
                 <path class="curly-path left" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -250.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 251.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 251.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -250.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>
             </div>
-            <div class="curly" id="cell-6">
+            <div class="curly cell-6">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 -100 30.1 400.0" width="2em" height="100%">
                 <path class="curly-path right" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -150.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 151.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 151.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -150.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>
             </div>
-            <div class="curly" id="cell-7">
+            <div class="curly cell-7">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 -50 30.1 300.0" width="2em" height="100%">
                 <path class="curly-path right" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -100.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 101.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 101.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -100.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>
             </div>
-            <div class="curly" id="cell-8">
+            <div class="curly cell-8">
               <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 -200 30.1 600.0" width="2em" height="100%">
                 <path class="curly-path right" d="M 0 99.065 c 4.898 -0.596 8.98 -4.881 10.102 -10.392 c 0.408 -2.449 0.816 -7.653 0.816 -11.53 v -250.9190 c 0 -3.061 0.204 -6.836 0.613 -9.489 c 0.816 -5.511 1.938 -8.47 4.693 -11.021 c 3.062 -3.061 6.837 -4.694 13.572 -5.714 l 0.306 1.837 c -4.694 1.53 -6.735 2.857 -8.265 5.408 c -2.041 3.367 -2.959 8.673 -2.959 17.143 v 251.4280 c 0 15 -3.776 21.633 -13.776 24.184 c 10 2.551 13.776 9.184 13.776 24.184 v 251.4280 c 0 8.47 0.918 13.776 2.959 17.143 c 1.53 2.551 3.571 3.878 8.265 5.408 l -0.306 1.837 c -6.735 -1.02 -10.51 -2.653 -13.572 -5.714 c -2.755 -2.551 -3.877 -5.51 -4.693 -11.021 c -0.409 -2.653 -0.613 -6.428 -0.613 -9.489 v -250.9190 c 0 -3.877 -0.408 -9.081 -0.816 -11.53 c -1.122 -5.511 -5.204 -9.796 -10.102 -10.409 Z"></path>
               </svg>

diff --git a/docs/styles/style.css b/docs/styles/style.css
@@ -27,7 +27,7 @@ html {
 }
 
 body {
-  font-family: var(--sans-serif-font-family);
+  font-family: var(--sans-serif-font-family), serif;
   line-height: var(--line-height);
   margin: 0 20px;
   color: var(--body-font-color);
@@ -102,7 +102,7 @@ hr {
 }
 
 h1 {
-  font-family: var(--sans-serif-font-family);
+  font-family: var(--sans-serif-font-family), serif;
   border-bottom: solid 1px;
   border-top: solid 1px;
   font-weight: bold;
@@ -206,7 +206,7 @@ sub {
 
 h2.inline-title {
   font-size: var(--body-font-size);
-  font-family: var(--sans-serif-font-family);
+  font-family: var(--sans-serif-font-family), serif;
   display: inline;
   font-weight: bold;
   /* + .poetry {
@@ -221,7 +221,7 @@ h2.inline-title {
 /* Page-specific styles. */
 
 #navigation {
-  font-family: var(--sans-serif-font-family);
+  font-family: var(--sans-serif-font-family), serif;
   hyphens: none;
   margin: 20px 0;
   padding: 20px 0;
@@ -241,7 +241,7 @@ h2.inline-title {
 
   & ol {
     list-style-position: inside;
-    padding-inline-start: 0px;
+    padding-inline-start: 0;
   }
 }
 
@@ -303,7 +303,7 @@ h2.inline-title {
     align-content: center;
   }
 
-  & #grid-scroller {
+  & .grid-scroller {
     line-height: 1.3;
     overflow-x: auto;
     margin: 0.5lh 0;
@@ -374,7 +374,7 @@ h2.inline-title {
 }
 
 #bezirksgericht-2 {
-  & #grid-scroller {
+  & .grid-scroller {
     margin: 0.5lh 0;
     overflow-x: auto;
     + p {
@@ -392,39 +392,39 @@ h2.inline-title {
   }
 
   .text {
-    &#cell-1 {
+    &.cell-1 {
       grid-area: 1 / 1 / span 4 / span 1;
     }
 
-    &#cell-2 {
+    &.cell-2 {
       grid-area: 6 / 1 / span 3 / span 1;
     }
 
-    &#cell-3 {
+    &.cell-3 {
       grid-area: 10 / 1 / span 6 / span 1;
     }
 
-    &#cell-4 {
+    &.cell-4 {
       grid-area: 1 / 4 / span 4 / span 1;
     }
 
-    &#cell-5 {
+    &.cell-5 {
       grid-area: 6 / 4 / span 3 / span 1;
     }
 
-    &#cell-6 {
+    &.cell-6 {
       grid-area: 10 / 4 / span 6 / span 1;
     }
 
-    &#cell-7 {
+    &.cell-7 {
       grid-area: 1 / 6 / span 4 / span 1;
     }
 
-    &#cell-8 {
+    &.cell-8 {
       grid-area: 6 / 6 / span 3 / span 1;
     }
 
-    &#cell-9 {
+    &.cell-9 {
       grid-area: 10 / 6 / span 6 / span 1;
     }
   }
@@ -439,35 +439,35 @@ h2.inline-title {
       }
     }
 
-    &#cell-1 {
+    &.cell-1 {
       grid-area: 1 / 2 / span 2 / span 1;
     }
 
-    &#cell-2 {
+    &.cell-2 {
       grid-area: 10 / 2 / span 2 / span 1;
     }
 
-    &#cell-3 {
+    &.cell-3 {
       grid-area: 1 / 3 / span 4 / span 1;
     }
 
-    &#cell-4 {
+    &.cell-4 {
       grid-area: 6 / 3 / span 3 / span 1;
     }
 
-    &#cell-5 {
+    &.cell-5 {
       grid-area: 10 / 3 / span 6 / span 1;
     }
 
-    &#cell-6 {
+    &.cell-6 {
       grid-area: 1 / 5 / span 4 / span 1;
     }
 
-    &#cell-7 {
+    &.cell-7 {
       grid-area: 6 / 5 / span 3 / span 1;
     }
 
-    &#cell-8 {
+    &.cell-8 {
       grid-area: 10 / 5 / span 6 / span 1;
     }
   }
@@ -480,15 +480,15 @@ h2.inline-title {
       min-width: 2em;
     }
 
-    &#cell-2 {
+    &.cell-2 {
       grid-area: 6 / 8 / span 3 / span 1;
     }
 
-    &#cell-3 {
+    &.cell-3 {
       grid-area: 10 / 8 / span 6 / span 1;
     }
 
-    &#cell-4 {
+    &.cell-4 {
       width: fit-content;
       border-top: 1px solid;
       grid-area: 16 / 8 / span 6 / span 1;
@@ -499,15 +499,15 @@ h2.inline-title {
     margin: auto;
     min-width: 2em;
     text-align: right;
-    &#cell-1 {
+    &.cell-1 {
       grid-area: 1 / 7 / span 4 / span 1;
     }
 
-    &#cell-2 {
+    &.cell-2 {
       grid-area: 6 / 7 / span 3 / span 1;
     }
 
-    &#cell-3 {
+    &.cell-3 {
       grid-area: 10 / 7 / span 6 / span 1;
     }
   }

diff --git a/views/chapters/bezirksgericht.pug b/views/chapters/bezirksgericht.pug
@@ -37,7 +37,7 @@ block main
     h2.inline-title Bezirksgericht 1.
     p
       | (Blick aus der Zelle eines konkreten Lyrikers):
-    article#grid-scroller
+    article.grid-scroller
       article#grid-container
         .grid.underlay
           .und-so-schoene und so schöne
@@ -78,45 +78,45 @@ block main
       | Der eingegitterte Atomforscher, der hier sicherer aufbewahrt ist als in den Verliesen des zuständigen Geheimdienstes, da ihn hier unter Streunern und Ehestörern niemand vermutet, hat es längst aufgegeben, sich ins Birken- und Weidengrün und unter die 
       a.arrow(href="eichhoernchen.html") Eichhörnchen
       |  hinauszusehnen. Heute macht er sich einen guten Tag durch die Errechnung der Häufigkeit von Datumstriaden mit gleichen Anfangsbuchstaben. Er kommt auf 23 unter 365 Tagen, und zwar:
-    article#grid-scroller
+    article.grid-scroller
       #grid 
-        .text#cell-1
+        .text.cell-1
           +lineBreaks(['Dienstag', 'Donnerstag'])
-        .text#cell-2 
+        .text.cell-2
           | Freitag
-        .text#cell-3
+        .text.cell-3
           +lineBreaks(['Samstag', 'Sonntag'])
-        .text#cell-4
+        .text.cell-4
           +lineBreaks(['dritter', 'dreizehnter', 'dreiundzwanzigster', 'dreißigster'])
-        .text#cell-5
+        .text.cell-5
           +lineBreaks(['fünfter', 'fünfzehnter', 'fünfundzwanzigster'])
-        .text#cell-6
+        .text.cell-6
           +lineBreaks(['sechster', 'siebenter', 'sechzehnter', 'siebzehnter', 'sechsundzwanzigster', 'siebenundzwanzigster'])
-        .text#cell-7 Dezember 
-        .text#cell-8 Febraur 
-        .text#cell-9 September 
-        .equal#cell-1 =
-        .equal#cell-2 =
-        .equal#cell-3 =
-        .number#cell-1 8
-        .number#cell-2 3
-        .number#cell-3 12
-        .number#cell-4 23
-        .curly#cell-1
+        .text.cell-7 Dezember
+        .text.cell-8 Febraur
+        .text.cell-9 September
+        .equal.cell-1 =
+        .equal.cell-2 =
+        .equal.cell-3 =
+        .number.cell-1 8
+        .number.cell-2 3
+        .number.cell-3 12
+        .number.cell-4 23
+        .curly.cell-1
           +curly("right", 2)
-        .curly#cell-2
+        .curly.cell-2
           +curly("right", 2)
-        .curly#cell-3
+        .curly.cell-3
           +curly("left", 4)
-        .curly#cell-4
+        .curly.cell-4
           +curly("left", 3)
-        .curly#cell-5
+        .curly.cell-5
           +curly("left", 6)
-        .curly#cell-6
+        .curly.cell-6
           +curly("right", 4)
-        .curly#cell-7
+        .curly.cell-7
           +curly("right", 3)
-        .curly#cell-8
+        .curly.cell-8
           +curly("right", 6)
     p
       | Nun zieht er sein Logarithmenbuch, d. h. seines mußte er gegen ein unverdächtiges der nahegelegenen Mädchenschule eintauschen, und findet nach Subtraktion der Mantissen von 23 und 365 einen Häufigkeitssatz von 6.30%, also ungefähr den von Vorkommen »höherer Intelligenz« (IQ > 125) in den USA. Damit ist das Problem aber eigentlich erschöpft, und es hat von dem