Make CSS a little less messy

public/css/master.css

@@ -1,4 +1,4 @@
-/*@import "colorschemes/catppuccin-macchiato.css";*/
+/* ── Global Elements ─────────────────────────────────────────────────────────────── */
 
 body {
     font-family: sans-serif;
@@ -17,23 +17,7 @@ hr {
     border-bottom: none;
 }
 
-div.page {
+h1, h2, h3 {
-    min-width: 780px;
-    max-width: 800px;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    margin: auto;
-}
-
-h1.inline {
-    margin-top: 0;
-    clear: none;
-    display: inline;
-}
-
-h1,
-h2,
-h3 {
     margin-top: 0;
     clear: left;
 }
@@ -43,86 +27,12 @@ img {
     max-width: 100%;
 }
 
-img.right {
-    float: right;
-    margin-left: 0.5em;
-}
-
-table.form td {
-    border: none;
-}
-
-/* -------------------------------------------------------------------------- */
-
-div.code-block {
-    background-color: var(--background);
-    border: 2px solid var(--foreground);
-    padding: 10px;
-    display: inline-block;
-    text-align: left;
-    max-width: 90%;
-    min-width: 400px;
-    margin: 10px;
-}
-
-div.code-block hr {
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
-div.code-block h1 {
-    margin: 0;
-    font-family: monospace;
-}
-
-div.code-block h1 small {
-    color: var(--foreground);
-    font-size: 12px;
-}
-
-div.code-block pre hr {
-    margin-bottom: 5px;
-}
-
-div.code-block pre code {
-    background-color: var(--background);
-}
-
 pre {
     display: inline;
     max-width: 95%;
     overflow: auto;
 }
 
-.header a {
-    text-decoration: none;
-}
-
-.theme-selector {
-    text-align: right;
-    vertical-align: middle;
-}
-
-.nav-wrapper {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 0;
-    grid-row-gap: 0;
-}
-
-.nav-wrapper div:nth-child(2) {
-    text-align: right;
-}
-
-.theme-selector label {
-    font-weight: bold;
-}
-
-.theme-selector label::after {
-    content: ': ';
-}
-
 nav {
     margin-bottom: 0.3em;
     text-align: left;
@@ -141,12 +51,8 @@ nav h1 {
     margin: 10px 10px 10px 0;
 }
 
-div.date {
+video {
-    text-align: center;
+    max-width: 100%;
-}
-
-div.note {
-    font-style: italic;
 }
 
 table {
@@ -154,34 +60,6 @@ table {
     border-color: var(--foreground);
 }
 
-table.weather th {
-    font-weight: normal;
-}
-
-table.weather td {
-    font-weight: bold;
-    text-align: right;
-}
-
-div.rss {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-}
-
-div.archived {
-    margin-top: 0.5em;
-}
-
-div.archived span.date {
-    font-style: italic;
-    margin-right: 0.2em;
-}
-
-video {
-    max-width: 100%;
-}
-
 table td {
     border: 1px solid var(--foreground);
 }
@@ -191,6 +69,174 @@ td {
     vertical-align: top;
 }
 
+h1 { font-size: 150%; }
+
+h2 { font-size: 130%; }
+
+h3 { font-size: 115%; }
+
+a {
+    color: var(--links);
+    text-decoration: underline dotted;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+caption h1,
+caption h2 {
+    margin: 0;
+}
+
+caption {
+    text-align: left;
+}
+
+button {
+    background-color: var(--background);
+    border: var(--foreground) solid 1px;
+}
+
+button:hover {
+    color: var(--background);
+    background-color: var(--foreground);
+}
+
+/* ── Common Styles ───────────────────────────────────────────────────────────────── */
+
+div.page {
+    /*min-width: 1000px;*/
+    /*max-width: 1100px;*/
+    width: 1000px;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    margin: auto;
+}
+
+h1.inline {
+    margin-top: 0;
+    clear: none;
+    display: inline;
+}
+
+img.right {
+    float: right;
+    margin-left: 0.5em;
+}
+
+table.form td {
+    border: none;
+}
+
+img.pixel {
+    image-rendering: pixelated;
+}
+
+td.diagonal-line {
+    background: linear-gradient(to right bottom, var(--background) 0%,var(--background) 49.9%,var(--foreground) 50%,var(--foreground) 51%,var(--background) 51.1%,var(--background) 100%);
+}
+
+.info-section {
+    margin-top: 20px;
+}
+
+.info-section ul,
+ul.quick-specs {
+    list-style-position: inside;
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+.info-section ul li:before {
+    content: "◆ ";
+}
+
+.info-section h2 {
+    margin: 0;
+}
+
+.info-section p {
+    margin: 0;
+}
+
+table.info-table tr td {
+    border: none;
+    padding-right: 5px;
+}
+
+table.info-table {
+    width: 100%;
+}
+
+table.info-table tr td h1,
+table.info-table tr td h2,
+table.info-table tr td small {
+    margin: 0;
+}
+
+table.info-table tr td small {
+    margin-bottom: 5px;
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────────────────── */
+
+.footer p {
+    vertical-align: middle;
+    margin: 0;
+    line-height: 1.2;
+}
+
+.footer button,
+.footer select{
+    padding: 5px 10px;
+}
+
+label[for="scheme-selector"] {
+    font-weight: bold;
+}
+
+#scheme-selector {
+    border: var(--foreground) solid 1px;
+    background-color: var(--background-secondary);
+    color: var(--foreground)
+}
+
+div.footer {
+    text-align: center;
+    margin-bottom: 5px;
+}
+
+div.footer a.button {
+    text-decoration: none;
+}
+
+
+/* ── Navbar ──────────────────────────────────────────────────────────────────────── */
+
+a:hover img.navbar-icon {
+    opacity: 80%;
+}
+
+.nav-wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+}
+
+.nav-wrapper div:nth-child(2) {
+    text-align: right;
+}
+
+/* ── Header ──────────────────────────────────────────────────────────────────────── */
+
+.header a {
+    text-decoration: none;
+}
+
 .header .title {
     color: var(--foreground);
 }
@@ -202,20 +248,7 @@ .header {
     text-align: center;
 }
 
-h1 {
+/* ── Computers ───────────────────────────────────────────────────────────────────── */
-    font-size: 150%;
-}
-h1 {
-    font-size: 150%;
-}
-
-h2 {
-    font-size: 130%;
-}
-
-h3 {
-    font-size: 115%;
-}
 
 table.computers {
     width: 100%;
@@ -251,30 +284,7 @@ table.computers th {
     padding: 5px;
 }
 
-
+/* ── Forms ───────────────────────────────────────────────────────────────────────── */
-
-img.pixel {
-    image-rendering: pixelated;
-}
-
-div.footer {
-    text-align: center;
-    margin-bottom: 5px;
-}
-
-div.footer a.button {
-    text-decoration: none;
-}
-
-table.commits tr td {
-    border: none;
-    padding-right: 5px;
-}
-
-a {
-    color: var(--links);
-    text-decoration: underline dotted;
-}
 
 table.form tr td {
     border: none;
@@ -289,16 +299,9 @@ table.form tr td span.text-danger {
     color: var(--warning);
 }
 
-input.file {
-    border: 0 !important;
-}
-
 table.form tr td textarea,
 table.form tr td input,
-table.form tr td button,
+table.form tr td button {
-button,
-form.import input::file-selector-button,
-form.import button {
     background-color: var(--background);
     border: var(--foreground) solid 1px;
 }
@@ -307,21 +310,22 @@ table.form label {
     margin: 5px 0;
 }
 
-form.import button,
-form.import input::file-selector-button,
 table.form tr td button {
     color: var(--foreground);
     background-color: var(--background-secondary);
 }
 
-form.import button:hover,
-button:hover,
-form.import input::file-selector-button:hover,
 table.form tr td button:hover {
     color: var(--background);
     background-color: var(--foreground);
 }
 
+table.form tbody tr td textarea {
+    width: 210px;
+}
+
+/* ── Guestbook ───────────────────────────────────────────────────────────────────── */
+
 table.gb-entry-form-container {
     width: 100%;
 }
@@ -336,10 +340,6 @@ table.gb-entry-form-container tr td ul {
     margin: 0;
 }
 
-table.form tbody tr td textarea {
-    width: 210px;
-}
-
 table.gb-entry tr td {
     border: solid var(--foreground) 1px;
     width: 500px;
@@ -360,153 +360,23 @@ table.gb-entry address {
     font-size: 0.8pc;
 }
 
-table.gb-admin {
+.guestbook-message {
-    margin-bottom: 5px;
+    text-wrap: normal;
-    width: 500px;
-    border: var(--foreground) solid;
-}
-
-table.gb-admin tr td {
-    border-right: none;
-    border-bottom: none;
-    vertical-align: top;
-    padding: 5px;
-}
-
-table.gb-admin tr td.gb-del {
-    border-left: none;
-    vertical-align: top;
-    padding: 5px;
-    width: 32px;
-}
-
-table.gb-admin tr td.gb-message {
-    border-top: none;
-    vertical-align: top;
-    padding: 5px;
-}
-
-table.info-table tr td {
-    border: none;
-    padding-right: 5px;
-}
-
-table.info-table {
     width: 100%;
 }
 
-table.info-table tr td h1,
+
-table.info-table tr td h2,
+/* ── Calculators ─────────────────────────────────────────────────────────────────── */
-table.info-table tr td small {
+
-    margin: 0;
+.calculator-spec-table td {
+    padding: 5px 10px 5px 5px;
 }
 
-caption h1,
+.calculator-spec-table tr td:first-child {
-caption h2 {
-    margin: 0;
-}
-
-caption {
-    text-align: left;
-}
-
-table.info-table tr td small {
-    margin-bottom: 5px;
-}
-.me img {
-    float: right;
-    margin: 5px;
-}
-
-.me p {
-    text-align: justify;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-.spec {
-    padding-left: 20px;
-}
-
-.spec-title {
-    font-weight: bold;
-}
-
-.project-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(0, 1fr);
-    grid-column-gap: 0;
-    grid-row-gap: 0;
-    height: 100%;
-}
-
-.project-grid div {
-    padding: 5px;
-}
-
-.project-section-title,
-.project-grid div h1,
-.project-grid div p {
-    margin: 5px 0;
-}
-
-.project-section-title {
-    margin-top: 20px;
-    padding-bottom: 5px;
-    border-bottom: 1px solid var(--foreground);
-}
-
-.project-grid div h1 {
-    margin-top: 10px;
-}
-
-.project-grid div a {
-    text-decoration: underline dotted;
-    padding: 2px 2px 0 2px;
-    margin: 0;
-    font-size: 10pt;
-}
-
-.project-grid .project-links a {
-    color: var(--links);
-    border: 1px solid var(--foreground);
-    border-left: none;
-}
-
-.project-grid .project-links a:first-child {
-    border: 1px solid var(--foreground);
-}
-
-.project-grid .project-links a:hover {
-    background-color: var(--foreground);
-    color: var(--background);
-}
-
-.error-box {
-    width: 500px;
-    border: 5px solid var(--warning-box-border);
-    background-color: var(--warning-box-bg);
-    padding: 5px;
-}
-.error-box a,
-.error-box p {
-    margin: 0;
-    color: var(--foreground)
-}
-
-label[for="scheme-selector"] {
-    font-weight: bold;
-}
-
-#scheme-selector {
-    border: var(--foreground) solid 1px;
     background-color: var(--background-secondary);
-    color: var(--foreground)
 }
 
+/* ── Music ───────────────────────────────────────────────────────────────────────── */
 
 .music-top10 td,
 .music-top10 th {
@@ -553,32 +423,11 @@ .current-track h2 {
     margin: 0;
 }
 
-.info-section {
+/* ── Misc ────────────────────────────────────────────────────────────────────────── */
-    margin-top: 20px;
-}
 
-.info-section ul {
+.red-banner {
-    list-style-position: inside;
+    border: 3px solid var(--foreground);
-    list-style-type: none;
+    background-color: var(--background-secondary);
-    padding-left: 0;
-    margin: 0;
-}
-
-.info-section ul li:before {
-    content: "◆ ";
-}
-
-.info-section h2 {
-    margin: 0;
-}
-
-.info-section p {
-    margin: 0;
-}
-
-.contact-section {
-    display: grid;
-    grid-template-rows: 1fr 1fr;
 }
 
 .banner {
@@ -599,86 +448,14 @@ .banner div:nth-child(2) {
     text-align: right;
 }
 
-.red-banner {
+.error-box {
-    border: 3px solid var(--foreground);
+    width: 500px;
-    background-color: var(--background-secondary);
+    border: 5px solid var(--warning-box-border);
-}
+    background-color: var(--warning-box-bg);
-
-.info-admin td,
-.info-admin th {
-    border: 1px solid var(--foreground);
     padding: 5px;
 }
-
+.error-box a,
-.info-admin th {
+.error-box p {
-    background-color: var(--background-secondary);
-}
-
-.info-admin th.blank {
-    border: none;
-    background-color: var(--background);
-}
-
-.info-admin button {
-    border: 1px solid var(--foreground);
-    background-color: var(--background);
-    color: var(--foreground);
-}
-
-.info-admin button:hover {
-    background-color: var(--foreground);
-    color: var(--background);
-}
-
-.info-admin button:active {
-    background-color: var(--background-secondary);
-    color: var(--foreground);
-}
-
-.info-admin-section h2 {
-    margin-bottom: 5px;
-}
-
-.fullwidth {
-    width: 100%;
-}
-
-.fullwidth td:last-child {
-    width: 0;
-}
-
-.guestbook-message {
-    text-wrap: normal;
-    width: 100%;
-}
-
-td.diagonal-line {
-    background: linear-gradient(to right bottom, var(--background) 0%,var(--background) 49.9%,var(--foreground) 50%,var(--foreground) 51%,var(--background) 51.1%,var(--background) 100%);
-}
-
-form.import h2 {
-    margin: 10px 0 5px 0;
-}
-
-.calculator-spec-table td {
-    padding: 5px 10px 5px 5px;
-}
-
-.calculator-spec-table tr td:first-child {
-    background-color: var(--background-secondary);
-}
-
-a:hover img.navbar-icon {
-    opacity: 80%;
-}
-
-.footer p {
-    vertical-align: middle;
     margin: 0;
-    line-height: 1.2;
+    color: var(--foreground)
-}
-
-.footer button,
-.footer select{
-    padding: 5px 10px;
 }