AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA…

…AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
4194304 · Dec 18, 2023 · cc5ebf8 · cc5ebf8
1 parent ffed55f
commit cc5ebf8
Show file tree

Hide file tree

Showing 11 changed files with 581 additions and 410 deletions.
diff --git a/css/header.css b/css/header.css
@@ -0,0 +1,116 @@
+header.headitem
+    {
+        display:contents
+    }
+nav.headitem
+    {
+        position:sticky;
+        top:0;
+        display:grid;
+        align-items:center;
+        column-gap:2ch;
+        padding:1ch 2ch;
+        background:var(--md-sys-color-surface-container-high);
+        min-height:5svh;
+        grid-template-areas:"brand links .";
+        grid-template-columns:auto auto 1fr
+    }
+nav.headitem .headitem
+    {
+        color:var(--md-sys-color-on-surface)
+    }
+nav.headitem a.headitem
+    {
+        text-decoration:none
+    }
+nav.headitem a.headitem:hover,nav.headitem a.headitem:focus,nav.headitem a.headitem:focus-within,nav.headitem a.headitem:focus-visible
+    {
+        color:var(--md-sys-color-on-surface-variant)
+    }
+nav.headitem :scope .brand
+    {   
+        grid-area:brand;
+    }
+nav.headitem :scope .menu
+    {
+        grid-area:menu
+    }
+nav.headitem :scope .links
+{
+    grid-area:links;
+}
+.brand.headitem.headitem
+    {
+        font-weight:bolder;
+        font-size:1.4rem;
+        grid-area:brand
+    }
+md-outlined-icon-button.headitem.headitem
+    {
+        display:none;
+        justify-self:end;
+        grid-area:menu
+    }
+.links.headitem.headitem
+{
+    list-style-type:none;
+    display:flex;
+    padding:0;
+    column-gap:4ch;
+    grid-area:links
+}
+.links.headitem li.headitem
+{
+    display:contents
+}
+@media (max-width: 800px)
+{
+    nav.headitem.headitem
+    {
+        grid-template-areas:"brand menu" "links links";
+        grid-template-columns:1fr auto;
+        grid-template-rows:auto min-content
+    }
+    md-outlined-icon-button.headitem.headitem
+    {
+        display:revert-layer
+    }
+    .links.headitem.headitem
+    {
+        flex-direction:column;
+        row-gap:2ch;
+    }.links.headitem.headitem:not(.shown)
+    {
+        display:none;
+    }
+}
+@media (min-width: 801px)
+{
+    .links.headitem.headitem:not(.shown)
+    {
+        display:flex;
+    }
+}
+main.headitem.headitem
+{
+    padding:2ch;
+}
+code
+{
+    background:var(--md-sys-color-surface-container-highest);
+    color:var(--md-sys-color-on-surface);
+    padding:0 .25ch;
+}
+body
+{
+    background:var(--md-sys-color-surface-container);
+    color:var(--md-sys-color-on-surface);
+}
+a
+{
+    color:var(--md-sys-color-primary)
+}
+:where(ul,ol,li)
+{
+    padding:revert
+}
diff --git a/css/misc.css b/css/misc.css
@@ -0,0 +1,35 @@
+/* This stylesheet is for miscellaneous things that I couldn't find a place for.
+Items may have inaccurate names that don't reflect what they do. 
+For everything except for centeredtext and justifytext, they didn't make any visible changes, so I made up a few names.
+Hopefully this clears things up! */
+h2.indexmargins.indexmargins
+{
+    margin-top:1rem
+}
+
+h3.indexmargins+p.indexmargins
+{
+    margin-block-end:0
+} 
+
+p.centeredtext
+{
+    text-align:center;
+    max-inline-size:revert
+}
+
+h3.justifytext:after
+
+{
+    display:inline;content:":"
+}
+p.justifytext
+
+{
+    text-align:justify
+} 
+
+.note,ul
+{
+    padding-left:5ch
+}
diff --git a/css/mobile.css b/css/mobile.css
@@ -0,0 +1,67 @@
+/* THIS IS ONLY FOR THE MOBILE MENUBAR */
+/* You'll find the normal CSS in header.css. */
+@media (max-width: 800px)
+{
+    .menuicon
+    {
+        display:block;
+    }
+}
+@media (min-width: 800px)
+{
+    .menuicon
+    {
+        display:none;
+    }
+}
+.menuicon
+{
+    border:1px solid #828D94;
+    border-radius:50%;
+    padding-left:11px;
+    padding-top:3px;
+    padding-bottom:3px;
+    padding-right:3px;
+    max-width:40px;
+    max-height:40px;
+}
+.menuicon1
+{
+    filter:invert(90%);
+    position:relative;
+    right:4px;
+    top:4px;
+}
+#closemenu
+{
+    position:relative;
+    top:-28px;
+    display:none;
+}
+#openmenu
+{
+    position:relative;
+    top:0px;
+}
+@keyframes menuanim {
+    0% {
+      background-color:rgba(255, 255, 255, 0.2);
+    }
+    100% {
+        background-color:transparent;
+    }
+  }
+#menuicon
+{
+    border-radius:50%;
+    max-width:40px;
+    max-height:40px;
+}
+#menuicon:active
+{
+    animation: none;
+}
+#menuicon:focus
+{
+    animation: menuanim 1s ease-in-out backwards;
+}
diff --git a/css/theme.css b/css/theme.css
@@ -1,4 +1,5 @@
-/* https://material-web.dev */
+/* Coloration for various things. */
+/* Please don't mess with this unless you want to recolor the entire website. */
 :root,
 :host {
     --md-sys-color-background: #101417;
@@ -38,70 +39,4 @@
     --md-sys-color-on-error: #690005;
     --md-sys-color-error-container: #93000a;
     --md-sys-color-on-error-container: #ffdad6;
-}
-/* Hiding extra CSS in here for the menu so the menu is universal */
-@media (max-width: 800px)
-{
-    .menuicon
-    {
-        display:block;
-    }
-}
-@media (min-width: 800px)
-{
-    .menuicon
-    {
-        display:none;
-    }
-}
-.menuicon
-{
-    border:1px solid #828D94;
-    border-radius:50%;
-    padding-left:11px;
-    padding-top:3px;
-    padding-bottom:3px;
-    padding-right:3px;
-    max-width:40px;
-    max-height:40px;
-}
-.menuicon1
-{
-    filter:invert(90%);
-    position:relative;
-    right:4px;
-    top:4px;
-}
-#closemenu
-{
-    position:relative;
-    top:-28px;
-    display:none;
-}
-#openmenu
-{
-    position:relative;
-    top:0px;
-}
-@keyframes menuanim {
-    0% {
-      background-color:rgba(255, 255, 255, 0.2);
-    }
-    100% {
-        background-color:transparent;
-    }
-  }
-#menuicon
-{
-    border-radius:50%;
-    max-width:40px;
-    max-height:40px;
-}
-#menuicon:active
-{
-    animation: none;
-}
-#menuicon:focus
-{
-    animation: menuanim 1s ease-in-out backwards;
 }