Added content, projects and dark mode

public/static/style/base.css

@@ -21,12 +21,23 @@
 	--colour-fg-highlight: #7f0602;
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--colour-bg: #101010;
+		--colour-bg-main: #333;
+		--colour-bg-code: #222;
+		--colour-fg: #ffffff;
+		--colour-fg-highlight: #fc918d;
+	}
+}
+
 body {
 	background-color: var(--colour-bg);
 	margin: 0;
 	display: flex;
 	justify-content: center;
 	min-height: 100vh;
+	color: var(--colour-fg);
 }
 
 body > nav {
@@ -67,14 +78,19 @@ h1, .title {
 }
 
 header {
-	border-bottom: 1px dotted black;
+	border-bottom: 1px dotted var(--colour-fg);
 	padding-top: 0.5em;
 	padding-bottom: 0.5em;
 	margin-bottom: 0.5em;
 }
 
+hr {
+	border: none;
+	border-top: 1px dotted var(--colour-fg);
+}
+
 footer {
-	border-top: 1px dotted black;
+	border-top: 1px dotted var(--colour-fg);
 	padding-top: 0.5em;
 	padding-bottom: 0.5em;
 	margin-top: 0.5em;
@@ -85,6 +101,69 @@ nav ul {
 	list-style: none;
 }
 
+/* PROJECT LIST */
+
+.project-header {
+	display: flex;
+	align-items: center;
+}
+
+.project-header > div {
+	flex: 1 1;
+}
+
+.project-header > .project-icon {
+	margin: 0;
+	margin-right: 0.5em;
+}
+
+.project-icon {
+	width: 4.5em;
+	height: 4.5em;
+	float: left;
+	margin: 0.5em;
+	margin-left: 0;
+}
+
+
+.platforms-technologies {
+	margin: 0.5em 0;
+}
+
+dl.project-platforms-technologies {
+	padding: 0.5em 0;
+	border-top: 1px dotted var(--colour-fg);
+	border-bottom: 1px dotted var(--colour-fg);
+}
+
+.tag {
+	display: inline-block;
+	background-color: var(--colour-bg-code);
+	border-radius: 1em;
+	font-size: 0.75em;
+	padding: 0.5em;
+	margin: 0.25em;
+}
+
+.screenshots {
+	height: 400px;
+	width: auto;
+	overflow-x: auto;
+	overflow-y: hidden;
+	white-space: nowrap;
+}
+
+@media (max-height: 800px) {
+	.screenshots {
+		height: 240px;
+	}
+}
+
+.screenshot {
+	display: inline-block;
+	height: 100%;
+}
+
 /* MARKDOWN */
 
 :not(pre) > code {
@@ -92,9 +171,9 @@ nav ul {
 	padding: 0.2em 0.4em;
 }
 
-div.sourceCode, blockquote {
-	scrollbar-color: var(--colour-fg) var(--colour-bg-code);
-	scrollbar-width: thin;
+div.sourceCode, blockquote, .screenshots {
+	scrollbar-color: var(--colour-fg-highlight) var(--colour-bg-code);
+	/*scrollbar-width: thin;*/
 	background-color: var(--colour-bg-code);
 }
 
@@ -112,6 +191,7 @@ pre, blockquote {
 blockquote footer {
 	text-align: right;
 	font-style: italic;
+	border: none;
 }
 
 figure {

public/static/style/old.css

@@ -34,7 +34,7 @@ pre {
 	background-color: blue;
 }
 
-blockquote {
+blockquote, .screenshots, code{
 	background: #0000ff;
 	border-left: #0000cc 6px solid;
 }