WTF am I doing atp

1 files changed, 303 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..76bb853
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,303 @@
+
+
+:root {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+	--colour: #000000;
+	--secondary-colour: #acacac;
+
+	--primary-background: #fafafa;
+	--secondary-background: #404040;
+	--tertiary-background: #5f5f5f;
+
+	--background-inverted: #101010;
+	--colour-inverted: #cacaca;
+
+	--link-colour: #D17300;
+	--link-colour-visited: #D17300;
+
+	--link-colour-secondary: #FF962E;
+	--link-colour-visited-secondary: #FF962E;
+
+	--brand-colour: #ff8100;
+	--brand-bg: #b15900;
+}
+
+:root {
+	background-color: #000000;
+	color: var(--colour);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--colour: #fafafa;
+
+		--primary-background: #202020;
+
+		--background-inverted: #fafafa;
+		--colour-inverted: #000000;
+
+		--link-colour: #ff8100;
+		--link-colour-visited: #ff8100;
+
+		background-color: var(--primary-background);
+	}
+}
+
+body {
+    margin: 0px;
+	 padding: 0px;
+}
+
+.main-layout {
+	margin: 5px;
+	display: flex;
+
+	nav, .filler {
+		width: 20%
+	}
+	main {
+		width: 60%;
+		max-width: 1000px;
+	}
+	.toc ul {
+		padding-left: 25px;
+	}
+	.toc {
+		padding-right: 5px;
+	}
+
+}
+@media (min-width: 780px) {
+	.main-layout nav details summary { display: none; }
+}
+@media (max-width: 1150px) {
+.main-layout {
+	.filler { width: 0px; display: none; }
+	main { width: 80%; }
+}
+}
+@media (max-width: 780px) {
+.main-layout{
+	display: block;
+
+	main {
+		width: 100%;
+	}
+
+	nav {
+		background-color: var(--secondary-background);
+		width: unset;
+		details {
+			padding-top: 10px;
+			padding-bottom: 10px;
+		}
+	}
+}}
+
+
+a {
+	color: var(--link-colour);
+}
+a:visited {
+	color: var(--link-colour-visited);
+}
+
+header {
+	margin-top: 0px;
+
+	.title {
+		background-color: var(--tertiary-background);
+		color: var(--secondary-colour);
+		height: 35px;
+		margin: 7px;
+		border: 2px solid #F86F00;
+		border-radius: 6px;
+
+		img {
+			max-height: 90%;
+			/* -webkit-filter: drop-shadow(1px 1px 1px #222); */
+			/* filter: drop-shadow(1px 1px 1px #222); */
+		}
+	}
+
+	.title > div {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+	.title > div > * {
+		margin-left: 5px;
+		margin-right: 5px;
+	}
+	.title .left {
+		float: left;
+	}
+	.title .right {
+		float: right;
+	}
+
+	.second {
+		background-color: var(--secondary-background);
+		color: var(--secondary-colour);
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+		/* padding: 2px; */
+		padding-left: 10px;
+		padding-right: 10px;
+		border-bottom: 1px solid var(--brand-colour);
+		border-top: 1px solid var(--brand-colour);
+
+		ul {
+			padding: 0;
+			margin: 0;
+			overflow: hidden;
+			list-style-type: none;
+		}
+		ul li {
+			display: block;
+			float: left;
+		}
+
+		ul li a {
+			padding: 2px;
+			text-decoration: none;
+		}
+		ul li:after {
+			content: "|";
+			padding-left: 4px;
+			padding-right: 4px;
+		}
+		ul li:last-child:after {
+			content:""
+		}
+
+		ul li a:hover {
+			background-color: var(--brand-bg);
+			color: #000000;
+		}
+	}
+	.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(--brand-colour);
+	margin-top: 5px;
+	margin-bottom: 5px;
+	content: "";
+}
+
+.highlighted {
+	margin: auto;
+	width: calc( 100% - 20px);
+	height: calc( 75vh );
+	overflow: scroll;
+	padding: 5px;
+}
+/*.precontent {
+}*/
+
+
+.nobullets {
+	list-style: none;
+}
+
+main {
+	ul {
+		padding-left: 25px;
+	}
+}
+@media (prefers-color-scheme: light) {
+	.main-layout {
+		background-color: var(--primary-background);
+	}
+}
+
+code {
+	border: 1px solid var(--brand-colour);
+	border-radius: 5px;
+	padding-left: 2px;
+	padding-right: 2px;
+	@media (prefers-color-scheme: light) {
+		color: var(--colour-inverted);
+		background-color: var(--background-inverted);
+	}
+}
+
+.orange {
+	color: var(--brand-colour);
+}