1 files changed, 218 insertions, 0 deletions
diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 0000000..be1f030
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,218 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    text-align: justify;
+}
+
+* :any-link {
+    color: inherit;
+    text-decoration: underline;
+}
+
+figcaption,
+caption {
+    text-align: center;
+    font-size: 80%;
+    caption-side: bottom
+}
+
+figure,
+aside,
+table,
+iframe,
+img,
+picture,
+input,
+select,
+textarea {
+    max-width: 90%;
+    width: fit-content;
+    padding: 1rem;
+    margin: auto;
+    text-align: center;
+    height: auto;
+}
+
+figure,
+aside,
+table {
+    border: solid medium;
+    border-collapse: collapse;
+    break-inside: avoid;
+}
+
+picture>img {
+    width: fit-content;
+    padding: 0;
+    margin: 0;
+}
+
+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: "📧";
+}
+
+.side,
+aside {
+    max-width: 40%;
+    margin: 1rem;
+    float: right;
+}
+
+aside {
+    border: solid medium;
+}
+
+@media (max-width: 30rem) {
+
+    .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 print {
+
+    header,
+    footer {
+        display: none;
+    }
+
+    section,
+    table {
+        orphans: 4;
+        break-inside: auto;
+    }
+
+    tr {
+        break-inside: avoid;
+        break-before: auto;
+    }
+}