WTF am I doing atp

1 files changed, 256 insertions, 0 deletions

diff --git a/static.bak/style.css b/static.bak/style.css
new file mode 100644
index 0000000..04e07d6
--- /dev/null
+++ b/static.bak/style.css
@@ -0,0 +1,256 @@
+
+
+:root {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+	--colour: #000000;
+	--secondary-colour: #202020;
+
+	--primary-background: #fafafa;
+	--secondary-background: #dadada;
+	--tertiary-background: #bbbbbb;
+
+	--background-inverted: #101010;
+	--colour-inverted: #cacaca;
+
+	--link-colour: #3344dd;
+	--link-colour-visited: #804180;
+
+	--link-colour-secondary: #202FBC; /* link colours for on secondary bg */
+	--link-colour-visited-secondary: #885588;
+
+	--brand-colour: #ff8100;
+	--brand-bg: #b15900;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--colour: #fafafa;
+		--secondary-colour: #acacac;
+
+		--primary-background: #202020;
+		--secondary-background: #404040;
+		--tertiary-background: #5f5f5f;
+
+		--background-inverted: #fafafa;
+		--colour-inverted: #000000;
+
+		--link-colour: #2491FF;
+		--link-colour-visited: #9875FF;
+
+		--link-colour-secondary: #61B0FF;
+		--link-colour-visited-secondary: #B87AB8;
+	}
+}
+
+:root {
+	background-color: var(--primary-background);
+	color: var(--colour);
+}
+
+body {
+    margin: 0px;
+}
+main {
+	margin: 5px;
+}
+
+a {
+	color: var(--link-colour);
+}
+a:visited {
+	color: var(--link-colour-visited);
+}
+
+nav ul {
+	list-style-type: none;
+	margin: 0px;
+	padding: 0px;
+	li {
+		float: left;
+	}
+	a:hover {
+		background-color: var(--brand-bg);
+		color: #fcfcfc;
+	}
+}
+
+header {
+	.title {
+		background-color: var(--brand-colour);
+		color: #000000;
+	}
+
+	background-color: var(--tertiary-background);
+	margin-bottom: 20px;
+
+	.second {
+		background-color: var(--secondary-background);
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+		padding: 2px;
+	}
+	.pathskip {
+		position: absolute;
+		display: inline-block;
+		line-height: 1;
+		transform: translateY(1rem);
+	}
+	.pathskip:not(:focus) {
+		transform: translateY(-4rem);
+	}
+}
+
+footer {
+	.footer-main {
+		padding: 2px;
+		background-color: var(--secondary-background);
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+
+ 	margin-top: 40px;
+}
+
+
+.dirlist {
+	.dirlist-header {
+		border-bottom: 1px solid;
+		background-color: var(--tertiary-background);
+	}
+	.dirlist-listing:nth-child(2n) {
+		background-color: var(--primary-background)
+	}
+	.dirlist-listing:nth-child(2n+1) {
+		background-color: var(--secondary-background);
+
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+}
+
+.error-heading {
+	color: #ff2020;
+}
+
+.mediaplayer {
+	display: grid;
+	height: 100%;
+	img, video {
+		max-width: 100%;
+		max-height: 70vh;
+		margin: auto;
+		object-fit: contain;
+	}
+
+	audio {
+		width:90vw;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.media-below {
+		margin: auto;
+		margin-top: 30px;
+		margin-bottom: 0px;
+	}
+
+	#meta {
+		tr, td, th {
+			border: 1px solid var(--colour);
+		}
+		th {
+			border-width: 2px;
+		}
+	}
+}
+
+
+.line {
+	width: 100%;
+	border-bottom: 2px solid var(--colour);
+	margin-top: 5px;
+	margin-bottom: 5px;
+	content: "";
+}
+
+.textviewer {
+	.highlighted {
+		margin: auto;
+		width: calc( 100% - 20px);
+		height: calc( 75vh );
+		overflow: scroll;
+		padding: 5px;
+	}
+	/*.precontent {
+	}*/
+}
+
+.nobullets {
+	list-style: none;
+}
+
+.markdown {
+	.toc ul li a {
+		display: block;
+	}
+	.toc ul {
+		padding-left: 5px;
+		list-style: none;
+	}
+	.toc ul li ul {
+		padding-left: 20px;
+		border-left: 1px solid var(--colour);
+	}
+	.tocparent {
+		background: var(--secondary-background);
+
+		width: 19%;
+		position: fixed;
+
+		overflow: auto;
+
+		height: 100%;
+		margin: 0px;
+
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+	.main {
+		width: 80%;
+		margin-left: calc(19% + 1%); /* first percentage is same value as .tocparent width */
+	}
+
+	.hidden:not(:focus) { /*TODO: make it actually hide properly, https://www.makethingsaccessible.com/guides/creating-a-skip-to-content-link/ */
+		transform: translateY(-2rem);
+	}
+
+	@media (max-width: 1100px) {
+		.main {
+			width: 70%;
+			margin-left: calc(29% + 1%);
+		}
+		.tocparent {
+			width: 29%;
+		}
+	}
+	@media (max-width: 940px) {
+		.tocparent {
+			width: 100%;
+			position:unset;
+			display:block;
+		}
+		.toc ul li a {
+			display: inline; /* to stop accidentally opening links when tapping in "empty" area*/
+		}
+		.main {
+			width:100%;
+			margin-left: unset;
+		}
+		.hidden:not(:focus) {
+			transform: unset;
+		}
+	}
+}
+
+