diff --git a/resources/colors.less b/resources/colors.less
index 64b723d..2268480 100644
--- a/resources/colors.less
+++ b/resources/colors.less
@@ -9,9 +9,9 @@
     --blue-2: oklch(0.92 0.04 270);
     --blue-3: oklch(0.79 0.11 270);
     --blue-4: oklch(0.71 0.16 270);
-    --blue-5: oklch(0.62 0.14 270);
-    --blue-6: oklch(0.41 0.1 270);
-    --blue-7: oklch(0.3 0.07 270);
+    --blue-5: oklch(0.5 0.14 270);
+    --blue-6: oklch(0.3 0.1 270);
+    --blue-7: oklch(0.15 0.07 270);
     --gold-1: oklch(96.098% 0.02042 91.593);
     --gold-2: oklch(0.92 0.04 90);
     --gold-3: oklch(0.79 0.11 90);
@@ -36,9 +36,9 @@
     --blue-6: oklch(0.92 0.04 270);
     --blue-5: oklch(0.79 0.11 270);
     --blue-4: oklch(0.71 0.16 270);
-    --blue-3: oklch(0.62 0.14 270);
-    --blue-2: oklch(0.41 0.1 270);
-    --blue-1: oklch(0.3 0.07 270);
+    --blue-3: oklch(0.5 0.14 270);
+    --blue-2: oklch(0.3 0.1 270);
+    --blue-1: oklch(0.15 0.07 270);
     --pink-7: oklch(0.97 0.02 330);
     --pink-6: oklch(0.92 0.04 330);
     --pink-5: oklch(0.8 0.11 330);
diff --git a/resources/parts/-portableinfobox.less b/resources/parts/-portableinfobox.less
deleted file mode 100644
index beea6e5..0000000
--- a/resources/parts/-portableinfobox.less
+++ /dev/null
@@ -1,141 +0,0 @@
-.portable-infobox {
-    --pi-item-spacing: calc(var(--space));
-    margin-left: calc(var(--space) * 2);
-    font-family: 'Shippori Mincho', serif;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 0 1 0;
-//     background: conic-gradient(from 42deg at 12em -24em, var(--gold-3) 30%, var(--gold-1) 40%, var(--gold-3) 50%) padding-box;
-}
-
-.portable-infobox > * {
-    width: 100%;
-    box-sizing: border-box;
-}
-
-// .pi-title.pi-title, .pi-header.pi-header {
-//     border-bottom: 2px solid;
-//     border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
-//     font-family: 'Libre Caslon';
-//     line-height: 1em;
-//     padding-bottom: .5em;
-//     color: var(--gold-7);
-// }
-
-// @media (prefers-color-scheme: dark) {
-
-//     .portable-infobox {
-//         background: conic-gradient(from 42deg at 12em -24em, var(--gold-4) 30%, var(--gold-2) 40%, var(--gold-4) 50%) padding-box;
-//     }
-
-//     .pi-title.pi-title, .pi-header.pi-header {
-//         border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
-//     }
-// }
-
-// .pi-font, .pi-secondary-font {
-//     color: var(--8);
-// }
-
-// .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
-//     background: var(--0) border-box;
-// }
-
-// @media (prefers-color-scheme: dark) {
-//     .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
-//         background: #666666 border-box;
-//     }
-// }
-
-// .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
-//     border: none;
-// }
-
-.portable-infobox .pi-media {
-    border: 1px solid var(--gold-5);
-    padding-top: var(--pi-item-spacing);
-    // background: repeating-conic-gradient(
-    //     var(--0) 0% 25%,
-    //     transparent 0 50%)
-    //     50% / 20px 20px;
-    background: black;
-    // width: fit-content;
-    margin-bottom: var(--pi-item-spacing);
-}
-
-.portable-infobox .pi-title, .portable-infobox .pi-header {
-    padding: 0;
-    padding-bottom: var(--pi-item-spacing);
-    // display: flex;
-    width: fit-content;
-    // text-wrap: nowrap;
-    gap: calc(var(--pi-item-spacing) / 2);
-    flex-shrink: 0;
-}
-
-.portable-infobox .pi-title::before,
-.portable-infobox .pi-title::after,
-.portable-infobox .pi-header::before,
-.portable-infobox .pi-header::after {
-    display: block;
-    background-size: 100% 1px;
-    background-repeat: no-repeat;
-    background-position-y: 50%;
-    content: ' ';
-    min-width: calc(var(--pi-item-spacing) * 2);
-}
-
-.portable-infobox .pi-title::before,
-.portable-infobox .pi-header:not(caption)::before {
-    background-image: linear-gradient(90deg, transparent, var(--gold-1));
-}
-
-.portable-infobox .pi-title::after,
-.portable-infobox .pi-header:not(caption)::after {
-    background-image: linear-gradient(270deg, transparent, var(--gold-1));
-}
-
-.pi-media * {
-    width: fit-content;
-}
-
-.pi-caption {
-    color: var(--gold-1);
-}
-
-.pi-collapse.pi-collapse h2.pi-header.pi-header {
-    padding-right: var(--pi-item-spacing);
-}
-
-.pi-header.pi-header, .pi-title.pi-title {
-    text-align: center;
-    // background: var(--gold-3);
-    // color: var(--gold-7);
-}
-
-.pi-data-label {
-    // text-align: right;
-}
-
-@media (min-width: 1201px) {
-    .portable-infobox {
-        margin-right: calc(var(--space) * 20 * -1);
-    }
-}
-
-@media (min-width: 1200px) {
-
-}
-
-@media (max-width: 720px) {
-    .portable-infobox {
-        // background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%);
-        margin-right: var(--space);
-        margin-left: var(--space);
-    }
-
-    .pi-title:first-child {
-        display: none;
-    }
-}
\ No newline at end of file
diff --git a/resources/parts/images.less b/resources/parts/images.less
index a015da3..8195ed3 100644
--- a/resources/parts/images.less
+++ b/resources/parts/images.less
@@ -1,18 +1,7 @@
-.mw-halign-right {
-    float: right;
-    margin-left: var(--space);
-}
+// This file handles image layout and their containing boxes.
 
-.mw-halign-left {
-    float: left;
-    margin-right: var(--space);
-}
-
-.mw-halign-none, .mw-halign-center {
-    margin: auto;
-}
-
-.info-image, .mw-default-size {
+.info-image,
+.mw-default-size {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -23,56 +12,75 @@
     padding-right: calc(var(--space));
     padding-top: calc(var(--space));
 
+    margin-bottom: var(--space);
+
     border: 3px solid;
     border-image: linear-gradient(90deg, var(--gold-3), transparent 30%, transparent 70%, var(--gold-3)) 30;
 
-    background-clip: padding-box;
     background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--gold-2) 50% 75%);
+    @media (prefers-color-scheme: dark) {
+        background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--blue-2) 50% 75%);
+    }
+
+    background-clip: padding-box;
     background-size: 18px 18px;
     background-position: 50% 100%;
     box-sizing: border-box;
-    @media (prefers-color-scheme: dark) {
-        background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--0) 50% 75%);
-    }
-    margin-bottom: var(--space);
 }
 
-.info-image figcaption, .mw-default-size figcaption {
+.info-image figcaption,
+.mw-default-size figcaption {
     text-align: center;
     font-style: italic;
     padding-bottom: var(--space);
     font-family: 'Shippori Mincho';
+
     @media (prefers-color-scheme: dark) {
         color: var(--gold-1);
     }
 }
 
-.info-image img, .mw-default-size img {
+.info-image img,
+.mw-default-size img {
     max-width: 100%;
     height: auto;
 }
 
+.mw-halign-right {
+    float: right;
+    margin-left: var(--space);
+}
+
+.mw-halign-left {
+    float: left;
+    margin-right: var(--space);
+}
+
+.mw-halign-none,
+.mw-halign-center {
+    margin: auto;
+}
+
 
 @media (min-width: 1201px) {
 
 }
 
 @media (max-width: 1200px) {
-    .mw-default-size, .info-image {
+    .mw-default-size,
+    .info-image {
         max-width: 360px;
     }
 }
 
 @media (max-width: 720px) {
 
-    .mw-default-size, .info-image {
+    .mw-default-size,
+    .info-image {
         max-width: unset;
         width: auto;
         float: unset;
         margin-right: 0;
     }
 
-    .info-image img, .mw-default-size img {
-
-    }
 }
\ No newline at end of file
diff --git a/resources/parts/infobox.less b/resources/parts/infobox.less
index 8b2fd55..4c8eaa9 100644
--- a/resources/parts/infobox.less
+++ b/resources/parts/infobox.less
@@ -1,3 +1,5 @@
+// This file handles infobox alignment, layout and styling. 
+
 .info-wrapper {
     float: right;
     max-width: 360px;
@@ -13,11 +15,13 @@
     margin-top: calc(var(--space) / 2 * -1);
 
     padding-bottom: var(--space);
-    border-bottom: 2px solid var(--gold-4);
+    border-bottom: 2px solid var(--gold-3);
 
 }
 
-.info-title, .info-image, .info-datablock {
+.info-title,
+.info-image,
+.info-datablock {
     grid-column: 1 / 4;
 }
 
@@ -34,7 +38,9 @@ dt.infobox {
     line-height: 1em;
 }
 
-dt.infobox.info-title, dd.infobox.info-data, dt.infobox.info-label {
+dt.infobox.info-title,
+dd.infobox.info-data,
+dt.infobox.info-label {
     margin: unset;
 }
 
@@ -53,11 +59,12 @@ dt.infobox.info-label {
     font-size: 1.5em;
 }
 
-.info-title, .info-label {
+.info-title,
+.info-label {
+    color: var(--gold-7);
     @media (prefers-color-scheme: dark) {
         color: var(--gold-2);
     }
-    color: var(--gold-7);
 }
 
 .info-title {
@@ -79,32 +86,27 @@ dt.infobox.info-label {
 }
 
 .info-title::after {
-    background-image: linear-gradient(90deg, transparent, var(--gold-4));
+    background-image: linear-gradient(90deg, transparent, var(--gold-3));
 }
 
 .info-title::before {
-    background-image: linear-gradient(270deg, transparent, var(--gold-4));
+    background-image: linear-gradient(270deg, transparent, var(--gold-3));
 }
 
-        // border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
-        // border: 2px solid transparent;
-
-
-
 @media (min-width: 1201px) {
+
     .info-wrapper {
         margin-right: calc(var(--space) * 18 * -1);
-
     }
+
 }
 
 @media (max-width: 1200px) {
-    .info-wrapper {
 
-    }
 }
 
 @media (max-width: 720px) {
+
     .info-wrapper {
         float: unset;
         width: auto;
@@ -116,4 +118,5 @@ dt.infobox.info-label {
     .info-title:first-child {
         display: none;
     }
+
 }
\ No newline at end of file
diff --git a/resources/parts/page-body.less b/resources/parts/page-body.less
index 7fcd5d7..f9e857c 100644
--- a/resources/parts/page-body.less
+++ b/resources/parts/page-body.less
@@ -1,25 +1,34 @@
+// This file handles the various elements in a Mediawiki generated page that do not belong to a discrete component. May need to be split into multiple files if it becomes too unwieldy.
+
 #page {
     grid-row: title / bottomstart;
-    @media (prefers-color-scheme: dark) {
-        color: var(--gold-1);
-    }
     line-height: calc(var(--space) * 3);
     margin-left: var(--space);
     margin-right: var(--space);
-    text-wrap: pretty;
+
+    @media (prefers-color-scheme: dark) {
+        color: var(--gold-1);
+    }
 }
 
+// Link styling.
+
 a:link {
     color: var(--blue-6);
 }
-a.new, p a.new:visited {
-    color: red;
+
+a.new,
+p a.new:visited {
+    color: #ff0000;
     text-decoration: underline wavy;
 }
+
 a:not(.new):visited {
     color: var(--pink-6);
 }
-a:hover , a:visited:hover {
+
+a:hover,
+a:visited:hover {
     color: var(--blue-4);
 }
 
@@ -35,6 +44,55 @@ a:hover , a:visited:hover {
     }
 }
 
+// Heading elements.
+
+.mw-heading {
+    margin-top: calc(var(--space) * 2);
+    position: relative;
+    display: flex;
+    margin-bottom: calc(var(--space) * 2);
+}
+
+.mw-heading h2{
+    margin-left: calc(var(--space) * 2);
+    margin-bottom: calc(var(--space) / 2);
+    font-family: 'Libre Caslon', serif;
+    font-weight: normal;
+}
+
+.mw-heading2 {
+    border-bottom: 1px solid;
+    margin-bottom: calc(var(--space));
+    margin-top: calc(var(--space) * 6);
+    border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-7) 6%, transparent 90%) 30;
+    @media (prefers-color-scheme: dark) {
+        border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-1) 6%, transparent 90%) 30;
+    }
+}
+
+.mw-heading3 {
+    margin-top: calc(var(--space) * 4);
+    gap: var(--space);
+}
+
+.mw-heading h3 {
+
+    font-family: 'Libre Caslon', serif;
+    font-weight: normal;
+}
+
+.mw-heading h4 {
+    margin-bottom: 0;
+    margin-top: var(--space);
+}
+
+.mw-heading3 .mw-editsection,
+.mw-heading4 .mw-editsection {
+    display: none;
+}
+
+// Styles the collapsible section toggles.
+
 .mw-collapsible-toggle .mw-collapsible-text.mw-collapsible-text {
     color: var(--8);
     text-decoration: underline;
@@ -45,18 +103,21 @@ a:hover , a:visited:hover {
     text-decoration: underline;
 }
 
-.mw-collapsible-toggle-default::before, .mw-collapsible-toggle-default::after {
+.mw-collapsible-toggle-default::before,
+.mw-collapsible-toggle-default::after {
     display: none;
 }
 
 
+
 #pagebody-header {
     grid-row: toc;
 }
 
-.pagebody p, .pagebody dl, .pagebody ul {
+.pagebody p,
+.pagebody dl,
+.pagebody ul {
     margin-bottom: calc(var(--space) * 2);
-    // margin-left: calc(var(--space) * 2);
 }
 
 .pagebody ol li {
@@ -90,63 +151,12 @@ pre {
     text-wrap: wrap;
 }
 
-.mw-heading {
-    margin-top: calc(var(--space) * 2);
-    position: relative;
-    display: flex;
-    margin-bottom: calc(var(--space) * 1.5);
-}
-
-.mw-heading h2{
-    margin-left: calc(var(--space) * 1);
-    margin-bottom: calc(var(--space) / 2);
-    font-family: 'Libre Caslon', serif;
-    font-weight: normal;
-}
-
-.mw-heading2 {
-    border-bottom: 1px solid;
-    margin-bottom: calc(var(--space));
-    margin-top: calc(var(--space) * 6);
-    border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-7) 6%, transparent 90%) 30;
-    @media (prefers-color-scheme: dark) {
-        border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-1) 6%, transparent 90%) 30;
-    }
-}
-
-.mw-heading3 {
-    margin-top: calc(var(--space) * 4);
-    gap: var(--space);
-}
-
-.mw-heading h3 {
-    // margin-left: calc(var(--space) * 1);
-    font-family: 'Libre Caslon', serif;
-    font-weight: normal;
-}
-
-// .mw-heading3::before {
-//     content: '▬';
-//     font-size: var(--space);
-// }
-
-.mw-heading h4 {
-    margin-left: calc(var(--space) * 2);
-    margin-bottom: 0;
-    margin-top: var(--space);
-    // font-weight: normal;
-    // font-family: 'Libre Caslon';
-}
-
-.mw-heading3 .mw-editsection, .mw-heading4 .mw-editsection {
-    display: none;
-}
-
 .mw-editsection-bracket {
     display: none;
 }
 
-.mw-editsection.mw-editsection a:link, .mw-editsection.mw-editsection a:visited {
+.mw-editsection.mw-editsection a:link,
+.mw-editsection.mw-editsection a:visited {
     color: var(--blue-7);
 }
 
@@ -159,6 +169,7 @@ pre {
 }
 
 @media (min-width: 1201px) {
+
     #page {
         margin-top: calc(var(--space) * 6);
         grid-column: pagestart / pageend ;
@@ -181,6 +192,7 @@ pre {
 }
 
 @media (max-width: 1200px) {
+
     #page {
         grid-column: 1;
 
@@ -194,16 +206,6 @@ pre {
         grid-row: 2;
     }
 
-    #mw-content-text p {
-        // margin-left: var(--space);
-        // margin-right: var(--space);
-    }
-
-    .mw-heading {
-        // margin-left: var(--space);
-        // margin-right: var(--space);
-    }
-
     .mw-heading > .mw-editsection {
         position: absolute;
         right: 0;
diff --git a/resources/parts/page-header.less b/resources/parts/page-header.less
index 813dd83..c52b56e 100644
--- a/resources/parts/page-header.less
+++ b/resources/parts/page-header.less
@@ -1,3 +1,5 @@
+// This file handles the page header, which pretty much means everything above the lower border of the title.
+
 #page-header {
     display: flex;
     align-items: end;
@@ -12,10 +14,6 @@
     line-height: 2.4em;
 }
 
-#page-title-background {
-
-}
-
 #page-header-views {
     margin-bottom: calc(var(--space) / 2);
     display: flex;
@@ -23,11 +21,14 @@
     text-wrap: nowrap;
 }
 
-#page-header-views > * > a:link, #page-header-views#page-header-views a:visited {
+#page-header-views > * > a:link,
+#page-header-views#page-header-views a:visited {
+    // The double id selector is to beat base Mediawiki specificity.
     color: var(--8);
 }
 
-#page-header-views > * > a:link:hover, #page-header-views#page-header-views a:visited:hover {
+#page-header-views > * > a:link:hover,
+#page-header-views#page-header-views a:visited:hover {
     color: var(--blue-5);
 }
 
@@ -50,19 +51,12 @@
     color: var(--blue-5);
 }
 
-
 #firstHeading {
     margin-bottom: .2em;
     color: var(--8);
-}
-
-@media (prefers-color-scheme: dark) {
-    #firstHeading {
+    @media (prefers-color-scheme: dark) {
         text-shadow: 0 0 6px var(--0);
     }
-}
-
-#firstHeading {
     font-family: 'Libre Caslon', serif;
     text-wrap: balance;
 }
diff --git a/resources/parts/page-toc.less b/resources/parts/page-toc.less
index a0505a2..cedc00a 100644
--- a/resources/parts/page-toc.less
+++ b/resources/parts/page-toc.less
@@ -1,14 +1,11 @@
-.tocnumber, .toctitle {
+// This styles the Table of Contents under the page heading. It does not style the smaller ToC in the navigation sidebar, that is handled by 'site-nav.less'
+
+.tocnumber,
+.toctitle {
     display: none;
 }
 
 #toc {
-    // margin-top: calc(var(--space) * 2);
-    // margin-bottom: calc(var(--space) * 2);
-
-    // background-image: linear-gradient(100deg, transparent 0%, #ecf2ff 20%, #ecf2ff 80%, transparent);
-    // box-shadow: inset 0 0 12px 12px white;
-    // margin-top: calc(var(--space) * 2);
     margin-bottom: calc(var(--space) * 2);
     line-height: calc(var(--space) * 3);
 
@@ -31,12 +28,14 @@
     flex-basis: 6em;
 }
 
-.toclevel-1 > a:link, .toclevel-1 > a:visited {
+.toclevel-1 > a:link,
+.toclevel-1 > a:visited {
     font-size: 1.2em;
     color: var(--8);
 }
 
-.toclevel-2 > a:link, .toclevel-2 > a:visited {
+.toclevel-2 > a:link,
+.toclevel-2 > a:visited {
     color: var(--blue-6);
 }
 
@@ -46,7 +45,8 @@
     }
 }
 
-.toclevel-1 ul, .toclevel-1 {
+.toclevel-1 ul,
+.toclevel-1 {
     display: flex;
     flex-direction: column;
     gap: calc(var(--space) / 2);
@@ -62,7 +62,8 @@ a:has(> .toctext):hover {
     color: var(--blue-4);
 }
 
-#mw-content-text:has(> .mw-parser-output > #pagebody-header), .mw-parser-output:has(> #pagebody-header) {
+#mw-content-text:has(> .mw-parser-output > #pagebody-header),
+.mw-parser-output:has(> #pagebody-header) {
     display: grid;
     grid-template-rows: subgrid;
     grid-template-columns: subgrid;
@@ -86,7 +87,7 @@ a:has(> .toctext):hover {
     }
 
     #toc {
-            line-height: calc(var(--space) * 2.5);
+        line-height: calc(var(--space) * 2.5);
     }
 
 }
\ No newline at end of file
diff --git a/resources/parts/site-footer.less b/resources/parts/site-footer.less
index 0ccb4f5..56b6e78 100644
--- a/resources/parts/site-footer.less
+++ b/resources/parts/site-footer.less
@@ -1,3 +1,5 @@
+// This file styles the footer at the bottom of the page.
+
 #site-footer {
     grid-row: bottomstart;
     display: flex;
@@ -33,9 +35,6 @@
 @media (min-width: 1201px) {
     #site-footer {
         grid-column: pagestart / pageend;
-
-        // border-left: 1px solid var(--blue-7);
-        // border-right: 1px solid var(--blue-7);
         border-top-right-radius: var(--space);
         border-top-left-radius: var(--space);
     }
@@ -56,7 +55,6 @@
 
 @media (max-width: 720px) {
     #site-footer {
-
         padding-bottom: calc(var(--space) * 6);
     }
 
diff --git a/resources/parts/site-header.less b/resources/parts/site-header.less
index 879d295..0c1eb21 100644
--- a/resources/parts/site-header.less
+++ b/resources/parts/site-header.less
@@ -1,11 +1,15 @@
+// This styles the header at the top of the page, which includes the site's icon, search bar, and user menu. Some elements are styled in 'site-menus.less', however.
+
 #site-header {
     display: grid;
 }
 
+// Icon and wordmark.
+
 #site-header-marks {
     display: flex;
     height: 100%;
-    width: 100%;
+    width: fit-content;
     justify-content: start;
     position: relative;
     gap: var(--space);
@@ -14,6 +18,7 @@
 #site-header-marks a {
     display: flex;
     height: 100%;
+    width: 100%;
     // Note that the wordmark's underline is drawn here, and is not a part of the SVG file.
     border-bottom: 3px solid var(--8);
     box-sizing: border-box;
@@ -27,20 +32,21 @@
 }
 
 #site-header-icon {
-    display: none;
     position: absolute;
     width: 100%;
     z-index: -6;
-    filter: opacity(0.5);
     max-height: 18em;
     top: 3.6em;
 }
 
+// Search bar.
+
 .searchButton {
     position: absolute;
     right: var(--space);
     top: 50%;
     transform: translate(0, -50%);
+
     background: none;
     cursor: pointer;
     padding: var(--space);
@@ -57,6 +63,7 @@
     position: absolute;
     top: calc(var(--space) * 1.5);
     right: var(--space);
+
     color: var(--0);
     @media (prefers-color-scheme: dark) {
         color: var(--8);
@@ -64,11 +71,39 @@
 }
 
 #site-header-search-bar {
+    color: var(--0);
+    @media (prefers-color-scheme: dark) {
+        color: var(--8);
+    }
     padding: var(--space);
     height: 100%;
+    width: 100%;
     font-size: calc(var(--space) * 2);
     border-bottom: 3px solid var(--8);
-    width: 100%;
+}
+
+#site-header-search-bar:hover {
+    box-shadow: inset 0 0 6px 1px var(--blue-6), 0 0 3px .1px var(--blue-7);
+    border-top: 2px solid var(--blue-6);
+}
+
+#site-header-search-bar:focus {
+    color: var(--8);
+    outline: 3px solid var(--blue-6);
+    background-color: var(--0);
+    background-image: linear-gradient(90deg, var(--0), var(--blue-1) 80%);
+    border-top: 2px solid var(--blue-7);
+    box-shadow: none;
+    @media (prefers-color-scheme: dark) {
+        color: var(--0);
+        outline: 3px solid var(--blue-4);
+        background-color: var(--8);
+        background-image: none;
+    }
+}
+
+#site-header-search-bar:focus:hover {
+    box-shadow: inset 0 0 6px 1px var(--blue-5);
 }
 
 #site-header-search-bar::placeholder {
@@ -84,27 +119,8 @@
     color: var(--blue-4);
 }
 
-#site-header-search-bar:hover {
-    box-shadow: inset 0 0 6px 1px var(--blue-6), 0 0 3px .1px var(--blue-7);
-    border-top: 2px solid var(--blue-6);
-}
 
-#site-header-search-bar:focus {
-    outline: 3px solid var(--blue-6);
-    background-color: var(--0);
-    background-image: linear-gradient(90deg, var(--0), var(--blue-1) 80%);
-    border-top: 2px solid var(--blue-7);
-    box-shadow: none;
-    @media (prefers-color-scheme: dark) {
-        outline: 3px solid var(--blue-4);
-        background-color: var(--8);
-        background-image: none;
-    }
-}
-
-#site-header-search-bar:focus:hover {
-    box-shadow: inset 0 0 6px 1px var(--blue-5);
-}
+// User menu.
 
 .site-header-user {
     position: relative;
@@ -140,8 +156,11 @@
     color: var(--blue-7);
 }
 
+// Color scheme toggle button.
+
 .color-scheme-toggle {
     display: none;
+    // Currently hidden due to its dubious usability.
     padding: var(--space);
     width: calc(var(--space) * 3);
     text-align: center;
@@ -179,7 +198,8 @@
         grid-row: 1;
     }
 
-    #site-header-search, #site-header-search-bar {
+    #site-header-search,
+    #site-header-search-bar {
         grid-column: pagestart / menugap;
         width: 100%;
         position: relative;
@@ -242,7 +262,8 @@
 
     #site-header-icon {
         position: unset;
-        width: fit-content;
+        width: unset;
     }
 
-}
\ No newline at end of file
+}
+
diff --git a/resources/parts/dropmenu.less b/resources/parts/site-menus.less
similarity index 54%
rename from resources/parts/dropmenu.less
rename to resources/parts/site-menus.less
index e8b1a3c..7c9d42e 100644
--- a/resources/parts/dropmenu.less
+++ b/resources/parts/site-menus.less
@@ -1,15 +1,31 @@
-#site-header-search-bar, .site-nav-menu {
+// Handles the unified rules for the search and nav menus, as well as the footer, user options and page options.
+
+#site-header-search-bar,
+.site-nav-menu {
     border-radius: calc(var(--space) / 2);
     background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%);
     box-shadow: inset 0 0 3px .5px var(--blue-3), 0 0 3px .1px var(--blue-7);
     border-top: 2px solid var(--blue-3);
+
+    @media (prefers-color-scheme: dark) {
+        background: linear-gradient(120deg, var(--blue-3), var(--blue-2) 80%);
+        border-top: 2px solid var(--blue-4);
+    }
 }
 
-.site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
+.site-header-user button,
+#site-header-user-links,
+#page-header-options-links,
+#site-footer {
     background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
+
+    @media (prefers-color-scheme: dark) {
+        background-image: linear-gradient(240deg, var(--blue-2), var(--blue-3));
+    }
 }
 
-#site-header-user-links, #page-header-options-links {
+#site-header-user-links,
+#page-header-options-links {
     display: none;
     position: absolute;
     margin-top: calc(var(--space) / 2);
@@ -17,27 +33,15 @@
     z-index: 12;
     right: 0;
     border: 2px solid var(--blue-3);
-}
 
-@media (prefers-color-scheme: dark) {
-    
-    #site-header-search-bar, .site-nav-menu {
-    border-radius: calc(var(--space) / 2);
-    background: linear-gradient(120deg, var(--blue-3), var(--blue-2) 80%);
-    border-top: 2px solid var(--blue-4);
-    }
-
-    .site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
-        background-image: linear-gradient(240deg, var(--blue-2), var(--blue-3));
-    }
-
-    #site-header-user-links, #page-header-options-links {
+    @media (prefers-color-scheme: dark) {
         box-shadow: 0 0 3px 1px var(--blue-1);
         border: 2px solid var(--blue-2);
     }
 }
 
-.site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
+.site-header-user:focus-within #site-header-user-links,
+#page-header-options:focus-within #page-header-options-links {
     display: flex;
 }
 
@@ -49,7 +53,8 @@
     width: max-content;
 }
 
-.drop-link-list a:link, .drop-link-list a:visited  {
+.drop-link-list a:link,
+.drop-link-list a:visited  {
     color: var(--blue-7);
     text-shadow: 0 0 3px var(--blue-1);
 }
\ No newline at end of file
diff --git a/resources/parts/site-nav.less b/resources/parts/site-nav.less
index 319e018..440fb8c 100644
--- a/resources/parts/site-nav.less
+++ b/resources/parts/site-nav.less
@@ -12,7 +12,9 @@
     padding-top: calc(var(--space) - 2px);
 }
 
-.site-nav-menu-links .mw-list-item a:link, .site-nav-menu-links .mw-list-item a:visited, .site-nav-menu button{
+.site-nav-menu-links .mw-list-item a:link,
+.site-nav-menu-links .mw-list-item a:visited,
+.site-nav-menu button{
     text-shadow: 0 0 2px var(--8);
     font-weight: bold;
     font-size: .9em;
@@ -96,7 +98,8 @@
         display: none;
     }
 
-    .site-nav-menu-links > li:not(#site-nav-toc-title):hover::before, .site-nav-menu-links > li:not(#site-nav-toc-title):has(a:focus)::before {
+    .site-nav-menu-links > li:not(#site-nav-toc-title):hover::before,
+    .site-nav-menu-links > li:not(#site-nav-toc-title):has(a:focus)::before {
         background-image: url(assets/cursor-right.svg);
         background-size: contain;
         background-repeat: no-repeat;
@@ -187,22 +190,10 @@
         scroll-snap-type: x mandatory;
     }
 
-    // .site-nav-menu:last-of-type {
-    //     margin-left: calc(var(--space) * 3);
-    // }
-
-    // .site-nav-menu:first-of-type {
-    //     margin-right: calc(var(--space) * 3);
-    // }
-
     .site-nav-menu {
         width: calc(100vw - 2.4em);
         flex-shrink: 0;
         scroll-snap-align: center;
     }
 
-    // #site-nav-wrapper > div::before {
-    //     content: '';
-    //     padding: 1px;
-    // }
 }
\ No newline at end of file
diff --git a/resources/parts/sitenotice.less b/resources/parts/sitenotice.less
index 38f066b..983f225 100644
--- a/resources/parts/sitenotice.less
+++ b/resources/parts/sitenotice.less
@@ -1,5 +1,6 @@
+// This file handles the site notice element.
+
 #localNotice {
-    // width: max-content;
     box-shadow: inset 0 0 6px 6px var(--gold-2);
     background-image: linear-gradient(90deg, var(--gold-1), var(--gold-2) 90%);
     border: 2px solid var(--gold-3);
@@ -27,7 +28,8 @@
 }
 
 @media (min-width: 1201px) {
-    .mw-dismissable-notice, #localNotice {
+    .mw-dismissable-notice,
+    #localNotice {
         grid-row: sitenotice;
         grid-column: pagestart / pageend;
         margin-top: var(--space);
@@ -57,16 +59,8 @@
         bottom: calc(var(--space) * 1);
     }
 
-    // @media (prefers-color-scheme: dark){
-    //     .mw-dismissable-notice-close {
-    //         color: var(--8);
-    //     }
-    // }
-
 }
 
-
-
 @media (max-width: 720px) {
 
 }
\ No newline at end of file
diff --git a/resources/parts/specialpage.less b/resources/parts/specialpage.less
index 4ce04e8..4cd739b 100644
--- a/resources/parts/specialpage.less
+++ b/resources/parts/specialpage.less
@@ -1,3 +1,5 @@
+// This handles any administrative or editing-related pages, such as the edit page.
+
 .mw-changeslist-legend {
     float: none;
     margin-right: var(--space);
@@ -33,7 +35,8 @@ fieldset {
     margin-bottom: calc(var(--space) * 2);
 }
 
-.mw-number-text, .mw-number-text.mw-number-text span {
+.mw-number-text,
+.mw-number-text.mw-number-text span {
     color: var(--8);
 }
 
diff --git a/resources/parts/versions.less b/resources/parts/versions.less
index c96f3a8..708f729 100644
--- a/resources/parts/versions.less
+++ b/resources/parts/versions.less
@@ -1,3 +1,5 @@
+// This file handles the 'version' element, currently using the indicators feature.
+
 #page-title-versions {
     display: flex;
     flex-wrap: wrap;
@@ -59,6 +61,16 @@
     display: none;
 }
 
+#mw-indicator-mw-helplink#mw-indicator-mw-helplink {
+    display: none;
+}
+
+#mw-indicator-mw-helplink + .mw-helplink.mw-helplink {
+    display: none;
+}
+
+// There needs to be at least one of these for each version present on a given page.
+
 body:has(#mw-indicator-1:checked) .vdiff-1 {
     display: inline;
 }
diff --git a/resources/skin.less b/resources/skin.less
index 5f8357f..5dd990b 100644
--- a/resources/skin.less
+++ b/resources/skin.less
@@ -1,3 +1,5 @@
+// This is the base .less file for the Crystal skin. Different components are split up into their own parts/ files, for ease of editing. CSS rules in here should only be for site wide elements.
+
 @import 'unset.less';
 @import 'colors.less';
 
@@ -9,7 +11,7 @@
 @import 'parts/page-toc.less';
 @import 'parts/infobox.less';
 @import 'parts/sitenotice.less';
-@import 'parts/dropmenu.less';
+@import 'parts/site-menus.less';
 @import 'parts/specialpage.less';
 @import 'parts/table.less';
 @import 'parts/images.less';
@@ -25,11 +27,7 @@
     src: url('assets/fonts/ShipporiMincho-Regular.ttf');
 }
 
-
-#grid {
-    margin-bottom: 0;
-    min-height: 100vh;
-}
+// The site layout breakpoints are below: >1201px, <1200px and <700px.
 
 @media (min-width: 1201px) {
 
@@ -77,7 +75,6 @@
             [pagebody] 1fr
             [bottomstart] auto
         ;
-        // padding: var(--space);
         padding-bottom: 0;
     }
 }
@@ -89,27 +86,27 @@
 :root {
     --sidebar-width: 12em;
     --space: .6em;
-    --pi-width: 24em;
+}
+
+#grid {
+    margin-bottom: 0;
+    min-height: 100vh;
 }
 
 body {
     margin: 0;
     background-color: var(--0);
     background:
-        linear-gradient(100deg, transparent 70%, var(--blue-2)),
-        radial-gradient(circle farthest-corner at 100% 100%, var(--0) 80%, var(--blue-2) 100%)
+        linear-gradient(100deg, transparent 70%, var(--blue-1)),
+        radial-gradient(circle farthest-corner at 160% 100%, var(--0) 90%, var(--blue-1) 120%)
     ;
     background-attachment: fixed, local;
-    // color: var(--8);
-}
 
-@media (prefers-color-scheme: dark) {
-    body {
+    @media (prefers-color-scheme: dark) {
         background:
-            linear-gradient(95deg, transparent 70%, var(--0) 140%),
+            linear-gradient(95deg, transparent 70% , var(--0) 140%),
             radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%)
         ;
-        background-attachment: fixed, local;
     }
 }
 
@@ -121,14 +118,6 @@ button {
     cursor: pointer;
 }
 
-fieldset {
-    margin-top: calc(var(--space) * 3);
-}
-
-.mw-list-item.selected {
-    display: none;
-}
-
 #t-print, #t-upload {
     display: none;
 }
@@ -137,97 +126,17 @@ fieldset {
     z-index: 60;
 }
 
-.mwe-popups-extract a:link, .mwe-popups-extract a:visited {
+// Stuff under here belongs to specific components, but has not been sorted into a /parts file yet.
+
+.mwe-popups-extract a:link,
+.mwe-popups-extract a:visited {
     color: black;
 }
 
-// border-image: linear-gradient(90deg, transparent 5%, var(--gold-7) 30%, var(--gold-7) 70%, transparent 95%) 30;
-// @media (prefers-color-scheme: dark) {
-//     border-image: linear-gradient(90deg, transparent 5%, var(--gold-3) 30%, var(--gold-3) 70%, transparent 95%) 30; 
-// }
+fieldset {
+    margin-top: calc(var(--space) * 3);
+}
 
-    // border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
-// border-bottom: 2px solid;
-// border-left: 2px solid;
-    // border-left: 2px solid;
-
-// border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
-// border-image: linear-gradient(90deg, transparent 5%, var(--gold-7) 40%, var(--gold-7) 60%, transparent 95%) 30;
-// @media (prefers-color-scheme: dark) {
-//     border-image: linear-gradient(90deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 30; 
-// }
-
-// .site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
-//     font-size: 1em;
-//     overflow: clip;
-//     text-overflow: ellipsis;
-
-//     background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
-//     // border-radius: calc(var(--space) / 2 );
-//     // box-shadow: inset 0 0 3px 3px var(--blue-1);
-//     color: var(--blue-7);
-//     gap: calc(var(--space) * 2);
-// }
-
-// #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
-//     padding: calc(var(--space));
-// }
-
-// #site-header-user-links {
-//     position: absolute;
-//     margin-top: calc(var(--space) / 2);
-//     display: none;
-//     z-index: 12;
-//     // border-top: 3px solid var(--blue-6);
-//     border-width: 3px 0 0 0;
-//     box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1);
-//     right: 0;
-// }
-
-// #site-header-user-links ul {
-//     display: flex; 
-//     flex-direction: column;
-//     width: max-content;
-//     gap: var(--space);
-// }
-
-
-
-
-    // background:
-    //     linear-gradient(300deg, #9fb7ff 0% 40%, #ffffff 40% 100%),
-    //     linear-gradient(330deg, #9fb7ff 0% 80%, #ffffff 80% 100%),
-    //     linear-gradient(30deg, #9fb7ff 0% 50%, #ffffff 50% 100%),
-    //     radial-gradient(circle farthest-corner at 50% 50%, #ecf2ff 0%, #dae4ff 93%);
-    // background-blend-mode: color-burn;
-    
-    // display: flex;
-    // flex-direction: column-reverse;
-    // align-items: center;
-    // 
-    // padding: 3em;
-    // // border-color: blue;
-    // justify-content: center;
-    // background: var(--blue-5);
-    // color: var(--gold-1);
-    // text-shadow: 0 0 2px var(--black);
-// background:
-//     conic-gradient(from 251deg at 100% 0%, #000000 0% 30%, #667fda 51%, #000000 100% 30%),
-//     linear-gradient(to top, #ffffff 0% 0%, #333333 20%, #060606 40%, #060606 60%, #333333 80%, #ffffff 100% 0%),
-//     linear-gradient(to right, #ffffff 0% 0%, #151515 10%, #060606 50%, #151515 90%, #ffffff 100% 0%),
-//     radial-gradient(circle farthest-corner at 50% 50%, var(--blue-6) 60%, var(--blue-5) 91%, #000000 100% 0%);
-//     background-blend-mode: color-dodge;
-
-
-
-//     border-style: solid;
-//     border-image: linear-gradient(150deg, var(--blue-5), white 30%) 1;
-//     background-image: linear-gradient(150deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
-// }
-
-
-// #page-menu:focus-within {
-//     border-style: solid;
-//     border-image: linear-gradient(102deg, var(--blue-5),white 30%) 1;
-//     background-image: linear-gradient(102deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
-// }
+.mw-list-item.selected {
+    display: none;
+}
\ No newline at end of file
diff --git a/templates/page-header.mustache b/templates/page-header.mustache
index 65d73bb..8d18419 100644
--- a/templates/page-header.mustache
+++ b/templates/page-header.mustache
@@ -18,6 +18,7 @@
     <div id="page-header-links">
 
         <ul id="page-header-views">
+
             {{#data-portlets}}
                 {{#data-associated-pages}}
                     {{{html-items}}}
@@ -25,28 +26,36 @@
                 {{{data-views.array-items.0.html-item}}}
                 {{{data-views.array-items.1.html-item}}}
             {{/data-portlets}}
+
         </ul>
 
         <div id="page-header-options">
             <button>Options</button>
             <div id="page-header-options-links">
+
                 <ul class="drop-link-list">
+
                     {{#data-portlets.data-actions}}
                             {{{html-items}}}
                     {{/data-portlets.data-actions}}
+
                     {{! This replaces the normal 'Print' list item, which is hidden from 'array-portlets-rest' with CSS. }}
                     <li id="page-action-print" class="mw-list-item">
                         <a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">Print</a> {{! This link's content is a placeholder, replaced with a system message via Javascript.}}
                     </li>
                 </ul>
+
                 <ul class="drop-link-list">
+
                     {{#data-portlets.data-views.array-items.2}}
                         {{{html-item}}}
                     {{/data-portlets.data-views.array-items.2}}
                     {{#data-portlets-sidebar.array-portlets-rest.2}}
                         {{{html-items}}}
                     {{/data-portlets-sidebar.array-portlets-rest.2}}
+
                 </ul>
+                
             </div>
         </div>
 
diff --git a/templates/site-footer.mustache b/templates/site-footer.mustache
index 652737d..ca208f4 100644
--- a/templates/site-footer.mustache
+++ b/templates/site-footer.mustache
@@ -1,27 +1,27 @@
-    {{! This footer has a few project links and icons, as well as the 'last edit' system message when in touch layout.}}
-    
-    <footer id="site-footer">
+{{! This footer has a few project links and icons, as well as the 'last edit' system message when in touch layout.}}
 
-        <div>
-            {{#data-footer.data-info.array-items.0}}
-                <p id="site-lastedit" class="layout-touch">{{{html}}}</p>
-            {{/data-footer.data-info.array-items.0}}
+<footer id="site-footer">
+
+    <div>
+        {{#data-footer.data-info.array-items.0}}
+            <p id="site-lastedit" class="layout-touch">{{{html}}}</p>
+        {{/data-footer.data-info.array-items.0}}
+    </div>
+
+    <div id="footerblock">
+
+        <div class="footer-links">
+            {{#data-footer.data-icons.array-items}}
+                {{{html}}}
+            {{/data-footer.data-icons.array-items}}
         </div>
 
-        <div id="footerblock">
-
-            <div class="footer-links">
-                {{#data-footer.data-icons.array-items}}
-                    {{{html}}}
-                {{/data-footer.data-icons.array-items}}
-            </div>
-
-            <div class="footer-links">
-                {{#data-footer.data-places.array-items}}
-                    {{{html}}}
-                {{/data-footer.data-places.array-items}}
-            </div>
-
+        <div class="footer-links">
+            {{#data-footer.data-places.array-items}}
+                {{{html}}}
+            {{/data-footer.data-places.array-items}}
         </div>
 
-    </footer>
\ No newline at end of file
+    </div>
+
+</footer>
\ No newline at end of file
diff --git a/templates/site-header.mustache b/templates/site-header.mustache
index 1fed098..6150a18 100644
--- a/templates/site-header.mustache
+++ b/templates/site-header.mustache
@@ -60,9 +60,9 @@
         </style>
     </noscript>
 
+    {{! These buttons are for a possible on-site color scheme toggle, currently hidden with CSS. }}
     <button id="toggle-to-light" class="color-scheme-toggle">☀️</button>
     <button id="toggle-to-dark" class="color-scheme-toggle">🌙</button>
 
-
 </header>
 
diff --git a/templates/site-nav.mustache b/templates/site-nav.mustache
index 3450737..5171619 100644
--- a/templates/site-nav.mustache
+++ b/templates/site-nav.mustache
@@ -16,7 +16,7 @@
                 </nav>
             {{/data-portlets-first}}
 
-            {{! The Tools menu generated below is hidden with CSS, as its functions are moved to Page and User Options.}}
+            {{! The Tools menu generated as part of the templating section below is hidden with CSS, as its functions are moved to Page and User Options.}}
 
             {{#array-portlets-rest}}
                 <div class="site-nav-menu nav-external">
@@ -32,23 +32,28 @@
         {{/data-portlets-sidebar}}
 
         {{#data-toc}}
-        <nav id="site-nav-toc" class="site-nav-menu site-nav-sticky">
-            <button>Contents</button>
-            <ul class="site-nav-menu-links">
-                <li id="site-nav-toc-title" class="mw-list-item">
-                    <a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop"> {{! This removes the empty # from the browser URL.}}
+            <nav id="site-nav-toc" class="site-nav-menu site-nav-sticky">
+                <button>Contents</button>
+
+                <ul class="site-nav-menu-links">
+
+                    <li id="site-nav-toc-title" class="mw-list-item">
+                        <a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop"> {{! This removes the empty # from the browser URL when the back-to-top button is clicked.}}
                             {{{html-title}}}
-                    </a>
-                </li>
-                {{#array-sections}}
-                    <li class="mw-list-item">
-                        <a href="#{{{linkAnchor}}}" class="site-nav-toc-level nav-toclevel-{{{toclevel}}}">
-                            {{{line}}}
                         </a>
                     </li>
-                {{/array-sections}}
-            </ul>
-        </nav>
+
+                    {{#array-sections}}
+                        <li class="mw-list-item">
+                            <a href="#{{{linkAnchor}}}" class="site-nav-toc-level nav-toclevel-{{{toclevel}}}">
+                                {{{line}}}
+                            </a>
+                        </li>
+                    {{/array-sections}}
+
+                </ul>
+
+            </nav>
         {{/data-toc}}
 
         {{#data-footer.data-info.array-items.0}}
@@ -57,6 +62,5 @@
             </p>
         {{/data-footer.data-info.array-items.0}}
 
-
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/skin.mustache b/templates/skin.mustache
index 43db58e..5afd73e 100644
--- a/templates/skin.mustache
+++ b/templates/skin.mustache
@@ -1,3 +1,5 @@
+{{! This is the base page for Crystal, a Final Fantasy fansite Mediawiki skin. If you're editing this, you should probably know the basics off how Mustache templating works.}}
+
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
 
 <div id="grid" class="mw-parser-output">