new style

styles/style.css

@@ -1,26 +1,26 @@
 :root {
-	--foreground: #1a1a1a;
-	--background: #fdfdfdc4;
-	--html-border: #c9c9c9;
-	--html-background: #1d5087;
-	--body-background: linear-gradient(to bottom, #5ab9de, #1d5087);
-	--blockquote-text: #606060;
-	--blockquote-border: #e6e6e6;
-	--button-primary: #e3e3e3;
-	--button-secondary: #d0d0d0;
+	--foreground: #586e75;
+	--background: #fdf6e3;
+	--html-border: #eee8d5;
+	--html-background: #268bd2;
+	--body-background: linear-gradient(to bottom, #2aa198, #268bd2);
+	--blockquote-text: #657b83;
+	--blockquote-border: #eee8d5;
+	--button-primary: #fdf6e3;
+	--button-secondary: #eee8d5;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--foreground: #fdfdfd;
-		--background: #1a1a1ac4;
-		--html-border: #4c4c4c;
-		--html-background: #391d87;
-		--body-background: linear-gradient(to bottom, #5a6fde, #391d87);
-		--blockquote-text: #e6e6e6;
-		--blockquote-border: #606060;
-		--button-primary: #4c4c4c;
-		--button-secondary: #404040;
+		--foreground: #93a1a1;
+		--background: #002b36;
+		--html-border: #073642;
+		--html-background: #6c71c4;
+		--body-background: linear-gradient(to bottom, #268bd2, #6c71c4);
+		--blockquote-text: #839496;
+		--blockquote-border: #073642;
+		--button-primary: #073642;
+		--button-secondary: #002b36;
 	}
 }
 
@@ -35,24 +35,27 @@ html {
 body {
 	margin: 0;
 	background: var(--body-background);
-	z-index: 0;
 }
 
-#page {
+main {
 	position: relative;
-	background-color: var(--background);
-	border: solid 1pt var(--html-border);
-	margin: 0 auto;
+	z-index: 2;
 	max-width: 48em;
+	
+	margin: 0 auto;
 	padding-left: 50pt;
 	padding-right: 50pt;
 	padding-top: 50pt;
 	padding-bottom: 50pt;
+	
 	hyphens: auto;
 	overflow-wrap: break-word;
 	text-rendering: optimizeLegibility;
 	font-kerning: normal;
-	z-index: 2;
+	
+	background-color: var(--background);
+	border-left: solid 3pt var(--html-border);
+	border-right: solid 3pt var(--html-border);
 }
 
 #tv-screen {
@@ -63,12 +66,18 @@ body {
 }
 
 #page-header {
-	padding: 4pt;
+	position: relative;
+	z-index: 2;
 	display: flex;
 	justify-content: space-between;
+	max-width: 60em;
+
+	margin: 0 auto;
+	padding: 4pt;
+
 	background: url("images/shark-top-small.png");
 	background-size: contain;
-	border: 1pt solid var(--html-border);
+	border: solid 3pt var(--html-border);
 }
 
 #page-header a {
@@ -88,6 +97,7 @@ body {
 }
 
 .rss-button {
+	color: #fdf6e3 !important;
 	background: linear-gradient(to bottom, #fb9d3a 0%, #d95c29 100%);
 	border: 1pt solid #f2994f;
 	border-radius: 4pt;
@@ -107,12 +117,13 @@ body {
 
 .articles-header {
 	margin: 8pt 0 4pt 0;
+	text-align: left;
 }
 
 .articles-footer {
-	margin-top: 4pt;
 	display: flex;
 	justify-content: space-between;
+	margin-top: 4pt;
 }
 
 .articles-title {
@@ -133,22 +144,27 @@ body {
 }
 
 #page-footer {
-	padding: 4pt;
-	border: 1pt solid var(--html-border);
-	background: url("images/shark-top-small.png");
-	background-size: contain;
+	position: relative;
+	z-index: 2;
 	display: flex;
 	justify-content: center;
+	max-width: 60em;
+
+	margin: 0 auto;
+	padding: 4pt;
+	
+	background: url("images/shark-top-small.png");
+	background-size: contain;
+	border: solid 3pt var(--html-border);
 }
 
-#page-footer div {
+#page-footer nav {
 	display: flex;
-	flex-direction: row;
 	align-items: center;
 }
 
 @media (max-width: 600px) {
-	#page {
+	main {
 		font-size: 0.9em;
 		padding: 12pt;
 	}