Very initial commit to get going

src/resources/style.css

@@ -0,0 +1,363 @@
+html {
+	font-size: 100%;
+	overflow-y: scroll;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+}
+
+:root {
+	--bg: #f7caca;
+	--fg: #2c2c3b;
+	--link: #FF5975;
+	--link_v: #F8758B;
+	--link_h: #771e2d;
+	--bg_grey: #ebadc1;
+	--dark_grey: #f46c97;
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+	--bg: #302c3b;
+	--fg: #fdf0f0;
+	--link: #ff597d;
+	--link_v: #f87596;
+	--link_h: #f94578;
+	--bg_grey: #2d2531;
+	--dark_grey: #221c25;
+	}
+}
+
+.logo {
+	max-height: 30px
+}
+
+body {
+	color: var(--fg);
+	font-family: 'Open Sans', sans-serif;
+	font-size: 12px;
+	line-height: 1.5em;
+	padding: 1em;
+	margin: auto;
+	max-width: 52em;
+	background: var(--bg);
+}
+
+a {
+	color: var(--link);
+	text-decoration: none;
+}
+
+a:visited {
+	color: var(--link_v);
+}
+
+a:hover {
+	color: var(--link_h);
+	cursor:pointer;
+	background-color: var(--dark_grey);
+}
+
+a:active {
+	color: var(--link_h);
+}
+
+a:focus {
+	outline: thin dotted;
+}
+
+a:hover,
+a:active {
+	outline: 0;
+}
+
+p {
+	margin: 1em 0;
+}
+
+img {
+	max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 600;
+	color: var(--fg);
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	font-weight: bold;
+}
+
+h1 {
+	font-size: 1.5em;
+}
+
+h2 {
+	font-size: 1.2em;
+}
+
+h3 {
+	font-size: 1em;
+}
+
+h4 {
+	font-size: 0.9em;
+}
+
+h5 {
+	font-size: 0.9em;
+}
+
+h6 {
+	font-size: 0.9em;
+}
+
+blockquote {
+	color: var(--fg);
+	margin: 0;
+	padding-left: 3em;
+	border-left: 0.5em var(--dark_grey) solid;
+}
+
+pre,
+code,
+kbd,
+samp {
+	font-family: 'Fira Code', monospace;
+	font-size: 0.98em;
+}
+
+code {
+	white-space: pre;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	background: var(--bg_grey);
+	color: var(--fg);
+	padding: 3px;
+	border-radius: 3px;
+}
+pre > code {
+	display: block;
+	padding: 10px 15px;
+}
+b,
+strong {
+	font-weight: bold;
+}
+
+dfn {
+	font-style: italic;
+}
+
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+ul,
+ol {
+	margin: 1em 0;
+	padding: 0 0 0 2em;
+}
+
+li p:last-child {
+	margin: 0;
+}
+
+dd {
+	margin: 0 0 0 2em;
+}
+
+img {
+	border: 0;
+	-ms-interpolation-mode: bicubic;
+	vertical-align: middle;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+td {
+	vertical-align: top;
+}
+
+@media only screen and (max-width: 768px) {
+	body {
+		font-size: 14px;
+	}
+	.sitename {
+		display: none;
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	body {
+		font-size: 16px;
+	}
+	article {
+		margin: 50px 0;
+	}
+}
+
+@media print {
+	* {
+		background: transparent !important;
+		color: black !important;
+		filter: none !important;
+		-ms-filter: none !important;
+	}
+
+	body {
+		font-size: 12pt;
+		max-width: 100%;
+	}
+
+	a,
+	a:visited {
+		text-decoration: underline;
+	}
+
+	hr {
+		height: 1px;
+		border: 0;
+		border-bottom: 1px solid black;
+	}
+
+	a[href]:after {
+		content: " (" attr(href) ")";
+	}
+
+	abbr[title]:after {
+		content: " (" attr(title) ")";
+	}
+
+	.ir a:after,
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+
+	pre,
+	blockquote {
+		border: 1px solid var(--dark_grey);
+		padding-right: 1em;
+		page-break-inside: avoid;
+	}
+
+	tr,
+	img {
+		page-break-inside: avoid;
+	}
+
+	img {
+		max-width: 100% !important;
+	}
+
+	@page :left {
+		margin: 15mm 20mm 15mm 10mm;
+	}
+
+	@page :right {
+		margin: 15mm 10mm 15mm 20mm;
+	}
+
+	p,
+	h2,
+	h3 {
+		orphans: 3;
+		widows: 3;
+	}
+
+	h2,
+	h3 {
+		page-break-after: avoid;
+	}
+}
+nav {
+	background-color: var(--bg_grey);
+	padding: 5px;
+}
+nav ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	overflow: hidden;
+}
+nav ul li {
+	/* This allow us to arrange list items in a row, without using float */
+	display: inline-block;
+	list-style-type: none;
+}
+/* Create a style for the first level items */
+nav > div > ul > li > a {
+	color: var(--fg) !important;
+	display: block;
+	line-height: 2em;
+	padding: 0.5em 0.5em;
+	text-decoration: none;
+}
+
+nav > div.nav-right > ul > li > a {
+	padding: 0.5em 0.5em;
+}
+
+nav > div > ul > li > a:hover {
+	color: var(--fg) !important;
+}
+.nav-left {
+	float: left;
+}
+
+.nav-left ul li {
+	float: left;
+}
+
+.nav-right ul li {
+	float: right;
+}
+.logo {
+	margin-right: 0.5em
+}
+article img {
+	margin: 1em 0;
+}
+p.date {
+	font-size: 13px;
+	color: var(--fg);
+}
+ul.articles {
+	list-style: none;
+	padding: 0;
+}
+
+ul.articles li {
+	padding-bottom: 10px;
+}
+.content {
+	padding: 0.5em;
+}
+footer {
+	background-color: var(--bg_grey);
+	padding: 5px;
+	font-size: 13px;
+}

src/resources/themechange.js

@@ -0,0 +1,29 @@
+// Get the theme toggle input
+const currentTheme = localStorage.getItem("theme"); // If the current local storage item can be found
+
+if (
+  window.matchMedia &&
+  window.matchMedia("(prefers-color-scheme: dark)").matches &&
+  !localStorage.getItem("theme")
+) {
+  localStorage.setItem("theme", "dark");
+}
+
+// Function that will switch the theme based on the if the theme toggle is checked or not
+function switchTheme() {
+  if (document.documentElement.getAttribute("data-theme") === "dark") {
+    document.documentElement.setAttribute("data-theme", "light");
+    // Set the user's theme preference to dark
+    localStorage.setItem("theme", "light");
+  } else {
+    document.documentElement.setAttribute("data-theme", "dark");
+    // Set the user's theme preference to light
+    localStorage.setItem("theme", "dark");
+  }
+}
+
+// Get the current theme from local storage
+if (currentTheme) {
+  // Set the body data-theme attribute to match the local storage item
+  document.documentElement.setAttribute("data-theme", currentTheme);
+}