Design Refresh

public/css/master.css

@@ -141,16 +141,16 @@ a:hover {
 }
 
 div.page-container {
-    width: 800px;
+    width: 950px;
     margin: 5px auto;
-}
-
-div.page-container > div {
     background-color: var(--background);
     filter: var(--shadow);
     padding: 10px;
     border: var(--border);
-    margin-bottom: 20px;
+}
+
+div.page-container > hr {
+    padding: 3px 0;
 }
 
 div.page-container > div:last-child {
@@ -166,6 +166,10 @@ header {
     align-items: center;
 }
 
+header div:nth-child(2) {
+    padding-left: 14px;
+}
+
 header img {
     image-rendering: pixelated;
 }
@@ -190,20 +194,28 @@ main>div::after {
     clear: both;
 }
 
-div#footer {
+footer,
+div.footer-footer div {
+    text-align: center;
+}
+
+div.footer-footer {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr;
     grid-column-gap: 0;
     grid-row-gap: 0;
-    align-items: center;
 }
 
-div#footer div:last-child {
+div.footer-footer div:first-child {
+    text-align: left;
+}
+
+div.footer-footer div:last-child {
     text-align: right;
 }
 
-div#footer div:last-child img {
+footer img {
     image-rendering: pixelated;
     margin: 0;
     padding: 0;
@@ -240,9 +252,9 @@ div.wah img {
 }
 
 /** Guestbook **/
-table.form input,
-table.form textarea,
-table.form button {
+form input,
+form textarea,
+form button {
     background-color: var(--background);
     border: var(--border);
     filter: var(--shadow-small);
@@ -272,10 +284,19 @@ div.gb-entry {
     border: var(--border);
     filter: var(--shadow-small);
     background-color: var(--background);
-    width: 75%;
     padding: 10px;
 }
 
+div.gb-entry form {
+    display: inline;
+}
+
+div.gb-entry-flagged {
+    border-color: red;
+    filter: drop-shadow(3px 3px hsla(0, 100%, 50%, 0.4));
+}
+
+
 /** Music **/
 table.music-top10 {
     border: var(--border);

public/css/minimal.css

@@ -1,13 +1,13 @@
 html { color-scheme: light; }
-body { color: #2a271c; background-color: #f2efbd; font-family: serif; }
+body { color: #1d232b; background-color: #bfd5f2; font-family: serif; }
 h1, h2, h4, ul, p { margin: 0; }
 h1 { font-weight: normal; }
 h4 { margin-bottom: 5px; }
 ul { padding: 5px 30px; }
-a { color: hsl(183, 93%, 27%); text-decoration: underline dotted; }
-a:hover { color: hsl(183, 93%, 15%); text-decoration: underline solid; }
+a { color: #293647; text-decoration: underline dotted; }
+a:hover { color: #1c2531; text-decoration: underline solid; }
 code { font-family: monospace; }
 code.addr { font-size: 24px; }
-table { border: #f27405 2px solid; background-color: #f2efbd; filter: drop-shadow(3px 3px hsla(11, 96%, 43%, 0.4)); }
-img { border: #f27405 2px solid; filter: drop-shadow(3px 3px hsla(11, 96%, 43%, 0.4)); }
-hr { border: none; border-bottom: 2px solid #f27405; }
+table { border: #056bf0 2px solid; background-color: #bfd5f2; filter: drop-shadow(3px 3px hsla(214, 96%, 43%, 0.4)); }
+img { border: #056bf0 2px solid; filter: drop-shadow(3px 3px hsla(214, 96%, 43%, 0.4)); }
+hr { border: none; border-bottom: 2px solid #056bf0; }