First

public/static/style/base.css

@@ -0,0 +1,268 @@
+@media (max-width: 850px) {
+	body {
+		flex-wrap: wrap;
+	}
+
+	body > main {
+		box-sizing: border-box;
+		min-width: 100%;
+	}
+
+	body > section.header-navigation, body > footer {
+		width: 100%;
+		flex-grow: 1 !important;
+	}
+
+	.hide-small {
+		display: none;
+	}
+
+	.hide-big {
+		display: block !important;
+	}
+}
+
+.hide-big {
+	display: none;
+}
+
+:root {
+	font-family: "sans-serif";
+	--colour-bg: #f0f0f0;
+	--colour-bg-main: #ddd;
+	--colour-bg-code: #ccc;
+	--colour-fg: #000000;
+	--colour-fg-highlight: #7f0602;
+	--colour-fg-lineno: #111;
+	--colour-fg-code-number: #06027f;
+	--colour-fg-code-string: #027f06;
+	--colour-fg-code-fun: #7b7f02;
+	--colour-fg-code-com: #027b7f;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--colour-bg: #101010;
+		--colour-bg-main: #333;
+		--colour-bg-code: #222;
+		--colour-fg: #ffffff;
+		--colour-fg-highlight: #fc918d;
+		--colour-fg-lineno: #ccc;
+		--colour-fg-code-number: #918dfc;
+		--colour-fg-code-string: #8dfc91;
+		--colour-fg-code-fun: #f8fc8d;
+		--colour-fg-code-com: #8df8fc;
+	}
+}
+
+body {
+	background-color: #f0f0f0;
+	background-color: var(--colour-bg);
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	min-height: 100vh;
+	color: #000000;
+	color: var(--colour-fg);
+}
+
+body > section.header-navigation {
+	flex: 0 0 200px;
+	padding: 2em;
+}
+
+body > footer {
+	flex: 0 0 200px;
+	padding: 2em;
+	border: none;
+}
+
+body > section.header-navigation > header {
+	text-align: center;
+}
+
+
+body > section.header-navigation > header > img {
+	width: 100%;
+	max-width: 160px;
+}
+
+body > main {
+	flex: 1 1;
+	padding: 2em;
+	/* width: 600px; */
+	border-left: #7f0602 dotted 1px;
+	border-right: #7f0602 dotted 1px;
+	border-left: var(--colour-fg-highlight) dotted 1px;
+	border-right: var(--colour-fg-highlight) dotted 1px;
+	max-width: 600px;
+	background-color: #ddd;
+	background-color: var(--colour-bg-main);
+}
+
+h1, .title {
+	 margin: 0;
+	/* font-size: 2em; */
+}
+
+.subtitle {
+	margin: 0;
+	font-size: 1rem;
+	font-weight: normal;
+	font-style: italic;
+}
+
+header {
+	border-bottom: 1px dotted #000000;
+	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 #000000;
+	border-top: 1px dotted var(--colour-fg);
+}
+
+footer {
+	border-top: 1px dotted #000000;
+	border-top: 1px dotted var(--colour-fg);
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	margin-top: 0.5em;
+}
+
+nav ul {
+	padding: 0em;
+	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 #000000;
+	border-top: 1px dotted var(--colour-fg);
+	border-bottom: 1px dotted #000000;
+	border-bottom: 1px dotted var(--colour-fg);
+}
+
+.tag {
+	display: inline-block;
+	background-color: #ccc;
+	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 {
+	background-color: #ccc;
+	background-color: var(--colour-bg-code);
+	padding: 0.2em 0.4em;
+}
+
+article :not(figure) > img {
+	float: right;
+}
+
+div.sourceCode, blockquote, .screenshots {
+	scrollbar-color: var(--colour-fg-highlight) var(--colour-bg-code);
+	/*scrollbar-width: thin;*/
+	background-color: #ccc;
+	background-color: var(--colour-bg-code);
+}
+
+pre.sourceCode {
+}
+
+pre, blockquote {
+	border-left: 1px solid #7f0602;
+	border-left: 1px solid var(--colour-fg-highlight);
+	padding-left: 1em;
+	padding-right: 1em;
+	margin-left: 1em;
+	margin-right: 1em;
+	clear: both;
+}
+
+blockquote footer {
+	text-align: right;
+	font-style: italic;
+	border: none;
+}
+
+figure {
+	background-color: var(--colour-bg-code);
+	margin: 0;
+	text-align: center;
+}
+
+figure > img {
+	max-width: 100%;
+}
+
+figure > figcaption {
+	padding: 0.5em;
+}
+
+a {
+	color: var(--colour-fg-highlight);
+	text-decoration: underline dotted;
+}
+
+a:hover {
+	color: var(--colour-fg);
+	text-decoration: underline solid;
+}

public/static/style/highlight.css

@@ -0,0 +1,62 @@
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
+code.sourceCode > span { color: inherit; text-decoration: inherit; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+}
+pre.numberSource code
+{ counter-reset: source-line 0; }
+pre.numberSource code > span
+{ position: relative; left: -4em; counter-increment: source-line; }
+pre.numberSource code > span > a:first-child::before
+{ content: counter(source-line);
+position: relative; left: -1em; text-align: right; vertical-align: baseline;
+border: none; display: inline-block;
+-webkit-touch-callout: none; -webkit-user-select: none;
+-khtml-user-select: none; -moz-user-select: none;
+-ms-user-select: none; user-select: none;
+padding: 0 4px; width: 4em;
+color: var(--colour-fg-lineno);
+}
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
+div.sourceCode
+{   }
+@media screen {
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+}
+code span.al { color: #ff0000; font-weight: bold; } /* Alert */
+code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { color: var(--colour-fg); font-style: italic; } /* Attribute */
+code span.bn { color: #40a070; } /* BaseN */
+code span.bu { } /* BuiltIn */
+code span.cf { color: var(--colour-fg-highlight); font-weight: bold; } /* ControlFlow */
+code span.ch { color: #4070a0; } /* Char */
+code span.cn { color: #880000; } /* Constant */
+code span.co { color: var(--colour-fg-code-com); font-style: italic; } /* Comment */
+code span.cv { color: var(--colour-fg-code-com); font-weight: bold; font-style: italic; } /* CommentVar */
+code span.do { color: var(--colour-fg-code-com); font-style: italic; } /* Documentation */
+code span.dt { color: var(--colour-fg-highlight); } /* DataType */
+code span.dv { color: var(--colour-fg-code-number); } /* DecVal */
+code span.er { color: #ff0000; font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: var(--colour-fg-code-number); } /* Float */
+code span.fu { color: var(--colour-fg-code-fun); } /* Function */
+code span.im { } /* Import */
+code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: var(--colour-fg-highlight); font-weight: bold; } /* Keyword */
+code span.op { color: var(--colour-fg); } /* Operator */
+code span.ot { color: var(--colour-fg); } /* Other */
+code span.pp { color: #bc7a00; } /* Preprocessor */
+code span.sc { color: var(--colour-fg-highlight); } /* SpecialChar */
+code span.ss { color: #bb6688; } /* SpecialString */
+code span.st { color: var(--colour-fg-code-string); } /* String */
+code span.va { color: #19177c; } /* Variable */
+code span.vs { color: #4070a0; } /* VerbatimString */
+code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */

public/static/style/mobile.css

@@ -0,0 +1,3 @@
+body {
+	background: red;
+} 

public/static/style/old.css

@@ -0,0 +1,45 @@
+body {
+	background-image: url(old/chip.jpg);
+	cursor: url(old/cursor.gif), auto;
+	justify-content: flex-start;
+}
+
+a:hover {
+	cursor: url(old/cursor-over.gif), auto;
+}
+
+body > nav {
+	background-color: yellow;
+}
+
+body > nav ul {
+	padding-left: 2em;
+	list-style-image: url(old/bullet.gif);
+}
+
+body > main {
+	background-color: black;
+	color: white;
+	border-image: url(old/skull-border.gif) 33% / 2em round;
+	/*border-left-width: 10px !important;
+	border-right-width: 10px !important;*/
+}
+
+.title {
+	width: 100%;
+	background-color: green;
+}
+
+pre {
+	background-color: blue;
+}
+
+blockquote, .screenshots, code{
+	background: #0000ff;
+	border-left: #0000cc 6px solid;
+}
+
+a {
+	color: blue;
+	text-decoration: underline;
+}

public/static/style/prism.css

@@ -0,0 +1,195 @@
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+c+cpp+d+java+json&plugins=line-numbers */
+/*
+ Solarized Color Schemes originally by Ethan Schoonover
+ http://ethanschoonover.com/solarized
+
+ Ported for PrismJS by Hector Matos
+ Website: https://krakendev.io
+ Twitter Handle: https://twitter.com/allonsykraken)
+*/
+
+/*
+SOLARIZED HEX
+--------- -------
+base03    #002b36
+base02    #073642
+base01    #586e75
+base00    #657b83
+base0     #839496
+base1     #93a1a1
+base2     #eee8d5
+base3     #fdf6e3
+yellow    #b58900
+orange    #cb4b16
+red       #dc322f
+magenta   #d33682
+violet    #6c71c4
+blue      #268bd2
+cyan      #2aa198
+green     #859900
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #657b83; /* base00 */
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	background: #073642; /* base02 */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	background: #073642; /* base02 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background-color: #fdf6e3; /* base3 */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #93a1a1; /* base1 */
+}
+
+.token.punctuation {
+	color: #586e75; /* base01 */
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #268bd2; /* blue */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.url,
+.token.inserted {
+	color: #2aa198; /* cyan */
+}
+
+.token.entity {
+	color: #657b83; /* base00 */
+	background: #eee8d5; /* base2 */
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #859900; /* green */
+}
+
+.token.function,
+.token.class-name {
+	color: #b58900; /* yellow */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #cb4b16; /* orange */
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+