Update Font & Styles

Author: pegvin

public/css/styles.css

@@ -1,27 +1,27 @@
 @font-face {
-	font-family: 'Liberation Mono';
-	src: url('/fonts/liberation-mono/LiberationMono.woff2') format('woff2'), url('/fonts/liberation-mono/LiberationMono.woff') format('woff');
+	font-family: "Liberation Sans";
+	src: url("/fonts/liberation-sans/LiberationSans-Regular.woff2") format("woff2"), url("/fonts/liberation-sans/LiberationSans-Regular.woff") format("woff");
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap
 }
 @font-face {
-	font-family: 'Liberation Mono';
-	src: url('/fonts/liberation-mono/LiberationMono-Italic.woff2') format('woff2'), url('/fonts/liberation-mono/LiberationMono-Italic.woff') format('woff');
+	font-family: "Liberation Sans";
+	src: url("/fonts/liberation-sans/LiberationSans-Italic.woff2") format("woff2"), url("/fonts/liberation-sans/LiberationSans-Italic.woff") format("woff");
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap
 }
 @font-face {
-	font-family: 'Liberation Mono';
-	src: url('/fonts/liberation-mono/LiberationMono-Bold.woff2') format('woff2'), url('/fonts/liberation-mono/LiberationMono-Bold.woff') format('woff');
+	font-family: "Liberation Sans";
+	src: url("/fonts/liberation-sans/LiberationSans-Bold.woff2") format("woff2"), url("/fonts/liberation-sans/LiberationSans-Bold.woff") format("woff");
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap
 }
 @font-face {
-	font-family: 'Liberation Mono';
-	src: url('/fonts/liberation-mono/LiberationMono-BoldItalic.woff2') format('woff2'), url('/fonts/liberation-mono/LiberationMono-BoldItalic.woff') format('woff');
+	font-family: "Liberation Sans";
+	src: url("/fonts/liberation-sans/LiberationSans-BoldItalic.woff2") format("woff2"), url("/fonts/liberation-sans/LiberationSans-BoldItalic.woff") format("woff");
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap
@@ -38,18 +38,32 @@
 }
 
 :root {
-	font-size: 110%;
-	letter-spacing: -0.5px;
+	font-size: 105%;
+	letter-spacing: -0.25px;
 	line-height: 1.3;
-	font-family: "Liberation Mono", monospace;
+	font-family: "Liberation Sans", serif;
 	tab-size: 2;
+
+	--fg: #000;
+	--bg: #F8F8F0;
+	--link-fg: #00B;
+	--hr: #000;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--fg: #FFF;
+		--bg: #111;
+		--link-fg: #56A8FF;
+		--hr: #FFF;
+	}
 }
 
 body {
-	color: #000;
-	background: #FFF;
-	margin: 1rem auto 3rem auto;
-	padding: 0 0.75rem;
+	color: var(--fg);
+	background: var(--bg);
+	margin: 1rem auto;
+	padding: 0;
 	max-width: 600px;
 }
 
@@ -89,19 +103,39 @@ li p {
 	margin: 0 !important;
 }
 
-a, a:visited {
-	color: #00B;
-	text-decoration-color: #00B !important;
+a:not(button a), a:visited:not(button a) {
+	color: var(--link-fg);
+	text-decoration-color: var(--link-fg) !important;
 	line-height: 1.5 !important;
 	text-decoration: underline;
 	text-underline-offset: 0.17rem;
 }
-a:hover {
+a:hover:not(button a) {
+	text-decoration: none;
+}
+
+button {
+	border: none;
+	outline: none;
+	cursor: pointer;
+	color: #FFF;
+	background: linear-gradient(#0062CB, #004085);
+	border-radius: 0.15rem;
+	padding: 0;
+}
+button:hover {
+	background: linear-gradient(#42d100, #309800);
+}
+
+button a {
+	color: inherit;
 	text-decoration: none;
+	display: block;
+	padding: 0.25rem 0.3rem;
 }
 
 hr {
-	border-top: 1px solid #000;
+	border-top: 1px solid var(--hr);
 }
 
 img {
@@ -125,14 +159,19 @@ pre code {
 	padding: 0 !important;
 }
 code:not(pre code) {
-	color: #000 !important;
+	color: var(--fg) !important;
 	font-weight: bold;
 }
 
-body > nav > a:not(:first-of-type) {
+body > nav {
+	margin-bottom: 1rem;
+}
+body > nav > button:not(:first-of-type) {
 	margin-left: 1ch;
 }
-
+body > header > h1 {
+	margin-top: 0;
+}
 body > header > div > time {
 	display: inline;
 	font-size: 0.9rem;

public/fonts/liberation-sans/LiberationSans-Bold.woff

@@ -6,4 +6,4 @@ last_modified_at
 
 csprite (Pronounced see-sprite) is a free & easy to use pixel art editor.
 
-![csprite-preview](/media/csprite-preview.png)
+<img src="/media/csprite-preview.png" style="border: 1px solid #333;" />