Sistemato CSS per funzionare con template

style.css

@@ -13,49 +13,37 @@ body {
     font-kerning: normal;
     font-size: 1.2em;
     font-family: Helvetica, sans-serif;
-    text-align: justify;
-}
-
-@media screen and (min-width: 768px) {
-    body {
-        width: 64vw;
-        margin-left: calc(50vw - 32vw);
-    }
-
-    * {
-        max-width: 100%;
-    }
 }
 
 header {
     margin-bottom: 1em;
     text-align: center;
 }
 
-/*** Fa in modo che tabelle e formule troppo larche siano scrollabili ***/
+/*** Fa in modo che tabelle e formule troppo larghe siano scrollabili ***/
 
-table {
-    overflow: scroll;
-    max-width: 100%;
+.contenuti table {
+    overflow-x: scroll;
+    max-width: 100vw;
 }
 
-table {
+.contenuti, p:has(.katex-display) {
+    overflow-x: auto;
+}
+
+table, .katex-display {
     width: 100%;
     table-layout: fixed;
 }
 
-p:has(.math.display) {
-    overflow-x: auto;
-}
-
 th, td {
     padding: 8px;
     white-space: nowrap;
 }
 
 /*** Stile dell'indice ***/
 
-#TOC {
+.contenuti, #TOC {
     margin: 0 auto;
     max-width: 64em;
 }
@@ -74,171 +62,185 @@ th, td {
     }
 }
 
+/*** In caso ci si trovi su un dispositivo mobile ***/
+
+@media (max-width: 600px) {
+    .contenuti {
+        font-size: 0.9em;
+        padding: 12px;
+    }
+
+    .contenuti h1 {
+        font-size: 1.8em;
+    }
+
+    .contenuti figure > figcaption {
+        max-width: 90%;
+    }
+}
+
 /*** Evitiamo di far finire una cartuccia intera di toner per stampare una pagina ***/
 
 @media print {
     html {
         background-color: white;
     }
 
-    * {
+    .contenuti {
         background-color: transparent;
         color: black;
         font-size: 12pt;
     }
 
-    p, h2, h3 {
+    .contenuti p, .contenuti h2, .contenuti h3 {
         orphans: 3;
         widows: 3;
     }
 
-    h2, h3, h4 {
+    .contenuti h2, .contenuti h3, .contenuti h4 {
         page-break-after: avoid;
     }
 }
 
 /*** Stile dei contenuti ***/
 
-p {
-    margin-top: 1em;
-    margin-bottom: 1em;
+.contenuti p {
+    margin: 1em 0;
 }
 
-img {
+.contenuti img {
     display: block;
     margin-left: auto;
     margin-right: auto;
     max-width: 100%;
     max-height: 50vh;
 }
 
-h1, h2, h3, h4, h5, h6 {
+.contenuti h1, .contenuti h2, .contenuti h3, .contenuti h4, .contenuti h5, .contenuti h6 {
     margin-top: 1.4em;
 }
 
-h5, h6 {
+.contenuti h5, .contenuti h6 {
     font-size: 1em;
     font-style: italic;
 }
 
-h6 {
+.contenuti h6 {
     font-weight: normal;
 }
 
-ol, ul {
+.contenuti ol, .contenuti ul {
     padding-left: 1.7em;
     margin-top: 1em;
 }
 
-li > ol, li > ul {
+.contenuti li > ol, .contenuti li > ul {
     margin-top: 0;
 }
 
-blockquote {
-    margin-top: 1em;
-    margin-bottom: 1em;
+.contenuti blockquote {
+    margin: 1em 0 1em 1.7em;
     padding-left: 1em;
     border-left: 2px solid #e6e6e6;
     color: #606060;
 }
 
-code {
+.contenuti code {
     font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
     font-size: 85%;
     margin: 0;
     hyphens: manual;
 }
 
-pre {
+.contenuti pre {
     margin: 1em 0;
     overflow: auto;
 }
 
-pre code {
+.contenuti pre code {
     padding: 0;
     overflow: visible;
     overflow-wrap: normal;
 }
 
-.sourceCode {
+.contenuti .sourceCode {
     background-color: transparent;
     overflow: visible;
 }
 
-hr {
+.contenuti hr {
     background-color: #1a1a1a;
     border: none;
     height: 1px;
     margin: 1em 0;
 }
 
-table {
-    margin-top: 1em;
-    margin-bottom: 1em;
+.contenuti table {
+    margin: 1em 0;
     border-collapse: collapse;
     width: 100%;
     overflow-x: auto;
     display: block;
     font-variant-numeric: lining-nums tabular-nums;
 }
 
-table caption {
+.contenuti table caption {
     margin-bottom: 0.75em;
 }
 
-tbody {
+.contenuti tbody {
     margin-top: 0.5em;
     border-top: 1px solid #1a1a1a;
     border-bottom: 1px solid #1a1a1a;
 }
 
-th {
+.contenuti th {
     border-top: 1px solid #1a1a1a;
     padding: 0.25em 0.5em 0.25em 0.5em;
 }
 
-td {
+.contenuti td {
     padding: 0.125em 0.5em 0.25em 0.5em;
 }
 
-code {
+.contenuti code {
     white-space: pre-wrap;
 }
 
-span.smallcaps {
+.contenuti span.smallcaps {
     font-variant: small-caps;
 }
 
-div.columns {
+.contenuti div.columns {
     display: flex;
     gap: min(4vw, 1.5em);
 }
 
-div.column {
+.contenuti div.column {
     flex: auto;
     overflow-x: auto;
 }
 
-div.hanging-indent {
+.contenuti div.hanging-indent {
     margin-left: 1.5em;
     text-indent: -1.5em;
 }
 
-ul.task-list {
+.contenuti ul.task-list {
     list-style: none;
 }
 
-ul.task-list li input[type="checkbox"] {
+.contenuti ul.task-list li input[type="checkbox"] {
     width: 0.8em;
     margin: 0 0.8em 0.2em -1.6em;
     vertical-align: middle;
 }
 
-h1 {
+.contenuti h1 {
     border-bottom: 1px solid #1a1a1a;
 }
 
-figure > figcaption {
+.contenuti figure > figcaption {
     font-size: 0.8em;
     font-style: italic;
     text-align: center;
@@ -248,28 +250,27 @@ figure > figcaption {
     margin-right: auto;
 }
 
-figure > figcaption > strong {
+.contenuti figure > figcaption > strong {
     font-style: normal;
     display: block;
 }
 
-dl {
-    margin-top: 1em;
-    margin-bottom: 1em;
+.contenuti dl {
+    margin: 1em 0;
 }
 
-dt {
+.contenuti dt {
     font-weight: bold;
 }
 
-dd {
+.contenuti dd {
     margin-left: 1em;
 }
 
-dd + dt {
+.contenuti dd + dt {
     margin-top: 1em;
 }
 
-dt + dd:last-child {
+.contenuti dt + dd:last-child {
     margin-bottom: 1em;
 }