new style

styles/style.css

@@ -1,24 +1,24 @@
 :root {
 	--foreground: #1a1a1a;
 	--background: #fdfdfdf0;
-	--border: #c9c9c9;
+	--html-border: #c9c9c9;
 	--html-background: #e3e3e3;
 	--blockquote-text: #606060;
 	--blockquote-border: #e6e6e6;
-	--button-border: #e3e3e3;
-	--button-background: #d0d0d0;
+	--button-primary: #e3e3e3;
+	--button-secondary: #d0d0d0;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
 		--foreground: #fdfdfd;
 		--background: #1a1a1af0;
-		--border: #4c4c4c;
-		--html-background: #303030;
+		--html-border: #4c4c4c;
+		--html-background: #2b2a33;
 		--blockquote-text: #e6e6e6;
 		--blockquote-border: #606060;
-		--button-border: #4c4c4c;
-		--button-background: #404040;
+		--button-primary: #4c4c4c;
+		--button-secondary: #404040;
 	}
 }
 
@@ -32,7 +32,7 @@ html {
 
 body {
 	background-color: var(--background);
-	border: solid 1px var(--border);
+	border: solid 1px var(--html-border);
 	margin: 0 auto;
 	max-width: 48em;
 	padding-left: 50pt;
@@ -58,19 +58,33 @@ body {
 	justify-content: space-between;
 	background: url("images/shark-top-small.png");
 	background-size: contain;
-	border: 4pt ridge var(--border);
+	border: 1pt solid var(--html-border);
 }
 
 #page-header a {
-	padding: 4pt;
 	color: var(--foreground);
-	background-color: var(--button-background);
-	border: 2pt outset var(--button-border);
+	padding: 4pt;
 	text-decoration: none;
 }
 
-#page-header a:active {
-	border: 2pt inset var(--button-border)
+.page-header-button {
+	background: linear-gradient(to bottom, var(--button-primary) 0%, var(--button-secondary) 100%);
+	border: 1pt solid var(--blockquote-border);
+	border-radius: 4pt;
+}
+
+.page-header-button:active {
+	background: linear-gradient(to bottom, var(--button-secondary) 0%, var(--button-primary) 100%);
+}
+
+.rss-button {
+	background: linear-gradient(to bottom, #fb9d3a 0%, #d95c29 100%);
+	border: 1pt solid #f2994f;
+	border-radius: 4pt;
+}
+
+.rss-button:active {
+	background: linear-gradient(to bottom, #d95c29 0%, #fb9d3a 100%);
 }
 
 #articles ul {
@@ -79,24 +93,25 @@ body {
 
 #articles li {
 	list-style: none;
-	display: block;
 }
 
 .articles-header {
+	margin: 8pt 0 4pt 0;
+}
+
+.articles-footer {
+	margin-top: 4pt;
 	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
 	justify-content: space-between;
 }
 
 .articles-title {
-	margin: 8pt 0 4pt 0;
 	font-size: 14pt;
 	font-weight: bold;
 }
 
 .articles-author {
-	margin: 12pt 0 4pt 0;
+	font-style: italic;
 }
 
 .articles-summary {
@@ -104,12 +119,11 @@ body {
 }
 
 .articles-date {
-	margin: 0;
 	text-align: right;
 }
 
 #page-footer {
-	border: 4pt ridge var(--border);
+	border: 1pt solid var(--html-border);
 	background: url("images/shark-top-small.png");
 	background-size: contain;
 	display: flex;
@@ -122,22 +136,6 @@ body {
 	align-items: center;
 }
 
-/*
-#TOC {
-	padding: 24px;
-}
-
-section {
-	display: flex;
-	flex-direction: row;
-}
-
-article {
-	padding: 12px;
-	overflow: auto;
-}
-*/
-
 @media (max-width: 600px) {
 	body {
 		font-size: 0.9em;