1 files changed, 179 insertions, 77 deletions

diff --git a/assets/index.css b/assets/index.css
index 96e775c..1cfcc15 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -1,37 +1,15 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 :root {
     color-scheme: dark light;
 }
 
-@media screen {
-    body {
-        max-width: min(calc(100vw - 1rem), 58rem);
-        min-height: calc(100vh - 1rem);
-        box-sizing: border-box;
-        margin: 0.5rem auto;
-        display: grid;
-        grid: "head" auto "main" auto "footer" 1fr / auto;
-    }
-    body>header {
-        grid-area: head;
-    }
-     :is(header, footer) {
-        background-color: rgb(139 0 0);
-        font-weight: bold;
-        color: rgb(255 255 255);
-        padding: 1rem;
-    }
-     :is(header, footer) *:any-link {
-        text-decoration: none;
-    }
-    body>footer {
-        align-self: end;
-        grid-area: footer;
-    }
-    body>main {
-        margin: 0.5rem 0;
-        grid-area: main;
-        hyphens: auto;
-    }
+body {
+    text-align: justify;
 }
 
 * :any-link {
@@ -39,87 +17,211 @@
     text-decoration: underline;
 }
 
-* .header-anchor:any-link{
-	text-decoration: inherit;
+* .header-anchor:any-link {
+    text-decoration: inherit;
 }
 
 * .header-anchor:any-link:hover,
 * .header-anchor:any-link:active {
-        font-style: inherit;
+    font-style: inherit;
 }
 
-@media screen {
-    * :any-link:hover,
-    * :any-link:active {
-        font-style: italic;
-    }
+figcaption,
+caption {
+    text-align: center;
+    font-size: 80%;
+    caption-side: bottom
 }
 
-a[href^="mailto:"]::after {
-    content: "📧";
+figure,
+aside,
+table,
+iframe,
+img,
+picture,
+input,
+select,
+textarea {
+    max-width: 90%;
+    width: fit-content;
+    padding: 1rem;
+    margin: auto;
+    text-align: center;
 }
 
-.err {
-    color: rgb(139 0 0);
+figure,
+aside,
+table {
+    border: solid medium;
+    border-collapse: collapse;
+    break-inside: avoid;
 }
 
-aside {
-    width: 40%;
-    padding: 0.5rem;
-    margin-left: 0.5rem;
-    float: right;
-    background-color: rgb(139 0 0);
-    color: rgb(255 255 255);
+picture>img {
+    width: fit-content;
+    padding: 0;
+    margin: 0;
 }
 
-iframe,
-img,
-input,
-select,
-textarea {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%;
+tr,
+td,
+th {
+    margin: 1rem;
+    padding: 1rem;
+    border-collapse: collapse;
+}
+
+tr,
+td,
+th,
+thead {
+    border: solid;
+}
+
+
+code,
+pre {
+    text-align: left;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    hyphens: none;
+    white-space: pre-wrap;
+}
+
+code,
+pre.pad {
+    line-height: 1.5;
+}
+
+pre {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+}
+
+:not(pre)>code {
+    padding: .1em;
+}
+
+a[href^="mailto:"]::after {
+    content: "📧";
 }
 
-:is(iframe, img, input, select, textarea).side {
+.side ,aside {
     max-width: 40%;
-    padding: 0.5rem;
+    margin: 1rem;
     float: right;
 }
 
-@media screen and (max-width: 30rem) {
-     :is(iframe, img, input, select, textarea).side {
-        width: 100%;
+aside {
+    border: solid medium;
+}
+
+@media (max-width: 40rem) {
+    .side, aside {
+        margin: inherit;
+        max-width: 100%;
         float: none;
     }
+
+    nav>a {
+        display: block;
+        margin: auto;
+        text-align: center;
+        padding: 16px;
+    }
+
+    nav>a.navlinks {
+        display: none;
+    }
+
+    nav>a.navlinks.navopen {
+        display: block;
+    }
 }
 
 @media screen {
+
+    * :any-link:hover,
+    * :any-link:active {
+        font-style: italic;
+    }
+
+    body {
+        max-width: min(calc(100dvw - 1rem), 58rem);
+        min-height: calc(100dvh - 1rem);
+        padding: 0.5rem;
+        margin: 0.5rem auto;
+        display: grid;
+        grid: "head" auto "main" auto "footer" 1fr / auto;
+    }
+
+    body>header {
+        grid-area: head;
+    }
+
+    :is(header, footer) {
+        background-color: rgb(139 0 0);
+        font-weight: bold;
+        color: white;
+        padding: 1rem;
+        max-width: inherit;
+    }
+
+    :is(header, footer) *:any-link {
+        text-decoration: none;
+    }
+
+    body>footer {
+        align-self: end;
+        grid-area: footer;
+    }
+
+    body>main {
+        margin: 0.5rem 0;
+        grid-area: main;
+        hyphens: auto;
+        max-width: inherit;
+    }
+
+    thead,
+    th {
+        background: rgb(139 0 0);
+        color: white;
+        border: rgb(139 0 0) solid;
+    }
+
+    aside {
+        background-color: rgb(139 0 0);
+        color: white;
+        border: rgb(229 0 0) solid medium;
+    }
+
     nav>a {
         margin-right: 1rem;
         padding-left: 0;
         padding-right: 0;
     }
-    @media (max-width: 30rem) {
-        nav>a {
-            display: block;
-            margin: auto;
-            text-align: center;
-            padding: 16px;
-        }
-        nav>a.navlinks {
-            display: none;
-        }
-        nav>a.navlinks.navopen {
-            display: block;
-        }
-    }
+
 }
 
+
 @media print {
+
     header,
     footer {
         display: none;
     }
-}
+
+    section,
+    table {
+        orphans: 4;
+        break-inside: auto;
+    }
+
+    tr {
+        break-inside: avoid;
+        break-before: auto;
+    }
+}
\ No newline at end of file