Initial Commit.main

Yay

7 files changed, 381 insertions, 0 deletions

diff --git a/static/css/chroma-root.css b/static/css/chroma-root.css
new file mode 100644
index 0000000..704ead3
--- /dev/null
+++ b/static/css/chroma-root.css
@@ -0,0 +1,32 @@
+:root{
+	--operator-color: hsl(
+		0,
+		0%,
+		var(--foreground-lightness)
+	);
+	--keyword-color: hsl(
+		180,
+		var(--contrast-saturation),
+		var(--contrast-lightness)
+	);
+	--name-color: hsl(
+		320,
+		var(--contrast-saturation),
+		var(--contrast-lightness)
+	);
+	--literal-color: hsl(
+		120,
+		var(--contrast-saturation),
+		var(--contrast-lightness)
+	);
+	--error-color: hsl(
+		0,
+		var(--contrast-saturation),
+		var(--contrast-lightness)
+	);
+	--comment-color :hsl(
+		0,
+		0%,
+		50%
+	);
+}
\ No newline at end of file
diff --git a/static/css/chroma.css b/static/css/chroma.css
new file mode 100644
index 0000000..a427f70
--- /dev/null
+++ b/static/css/chroma.css
@@ -0,0 +1,90 @@
+@import url('/css/chroma-root.css');
+
+/* Background */ .bg { }
+/* PreWrapper */ .chroma { }
+/* Other */ .chroma .x { color:var(--foreground-accent-color); }
+/* Error */ .chroma .err { color:var(--error-color); }
+/* CodeLine */ .chroma .cl { color:var(--foreground-accent-color); }
+/* Operator */ .chroma .o { color:var(--operator-color) }
+/* OperatorWord */ .chroma .ow { color:var(--operator-color);font-weight:bold }
+/* Punctuation */ .chroma .p { color:var(--operator-color); }
+/* TextWhitespace */ .chroma .w {  }
+/* Generic */ .chroma .g { color:var(--foreground-accent-color); }
+/* GenericDeleted */ .chroma .gd { color:var(--error-color); }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:var(--error-color); }
+/* GenericHeading */ .chroma .gh { color:var(--foreground-accent-color);font-weight:bold }
+/* GenericInserted */ .chroma .gi { color:var(--foreground-accent-color); }
+/* GenericOutput */ .chroma .go { color:var(--foreground-accent-color); }
+/* GenericPrompt */ .chroma .gp { color:var(--foreground-accent-color);font-weight:bold }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:var(--foreground-accent-color);font-weight:bold }
+/* GenericTraceback */ .chroma .gt { color:var(--foreground-accent-color); }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* Keyword */ .chroma .k { color:var(--keyword-color);font-weight:bold }
+/* KeywordConstant */ .chroma .kc { color:var(--keyword-color);font-weight:bold }
+/* KeywordDeclaration */ .chroma .kd { color:var(--keyword-color);font-weight:bold }
+/* KeywordNamespace */ .chroma .kn { color:var(--keyword-color);font-weight:bold }
+/* KeywordPseudo */ .chroma .kp { color:var(--keyword-color) }
+/* KeywordReserved */ .chroma .kr { color:var(--keyword-color);font-weight:bold }
+/* KeywordType */ .chroma .kt { color:var(--keyword-color) }
+/* Name */ .chroma .n { color:var(--name-color) }
+/* NameAttribute */ .chroma .na { color:var(--name-color) }
+/* NameBuiltin */ .chroma .nb { color:var(--name-color) }
+/* NameBuiltinPseudo */ .chroma .bp { color:var(--name-color) }
+/* NameClass */ .chroma .nc { color:var(--name-color);font-weight:bold }
+/* NameConstant */ .chroma .no { color:var(--name-color) }
+/* NameDecorator */ .chroma .nd { color:var(--name-color);font-weight:bold }
+/* NameEntity */ .chroma .ni { color:var(--name-color);font-weight:bold }
+/* NameException */ .chroma .ne { color:var(--name-color) }
+/* NameFunction */ .chroma .nf { color:var(--name-color) }
+/* NameFunctionMagic */ .chroma .fm { color:var(--name-color) }
+/* NameLabel */ .chroma .nl { color:var(--name-color);font-weight:bold }
+/* NameNamespace */ .chroma .nn { color:var(--name-color);font-weight:bold }
+/* NameOther */ .chroma .nx { color:var(--name-color) }
+/* NameProperty */ .chroma .py { color:var(--name-color) }
+/* NameTag */ .chroma .nt { color:var(--name-color);font-weight:bold }
+/* NameVariable */ .chroma .nv { color:var(--name-color) }
+/* NameVariableClass */ .chroma .vc { color:var(--name-color) }
+/* NameVariableGlobal */ .chroma .vg { color:var(--name-color) }
+/* NameVariableInstance */ .chroma .vi { color:var(--name-color) }
+/* NameVariableMagic */ .chroma .vm { color:var(--name-color) }
+/* Literal */ .chroma .l { color:var(--literal-color) }
+/* LiteralDate */ .chroma .ld { color:var(--literal-color) }
+/* LiteralString */ .chroma .s { color:var(--literal-color) }
+/* LiteralStringAffix */ .chroma .sa { color:var(--literal-color) }
+/* LiteralStringBacktick */ .chroma .sb { color:var(--literal-color) }
+/* LiteralStringChar */ .chroma .sc { color:var(--literal-color) }
+/* LiteralStringDelimiter */ .chroma .dl { color:var(--literal-color) }
+/* LiteralStringDoc */ .chroma .sd { color:var(--literal-color);font-style:italic }
+/* LiteralStringDouble */ .chroma .s2 { color:var(--literal-color) }
+/* LiteralStringEscape */ .chroma .se { color:var(--literal-color);font-weight:bold }
+/* LiteralStringHeredoc */ .chroma .sh { color:var(--literal-color) }
+/* LiteralStringInterpol */ .chroma .si { color:var(--literal-color) }
+/* LiteralStringOther */ .chroma .sx { color:var(--literal-color) }
+/* LiteralStringRegex */ .chroma .sr { color:var(--literal-color) }
+/* LiteralStringSingle */ .chroma .s1 { color:var(--literal-color) }
+/* LiteralStringSymbol */ .chroma .ss { color:var(--literal-color) }
+/* LiteralNumber */ .chroma .m { color:var(--literal-color) }
+/* LiteralNumberBin */ .chroma .mb { color:var(--literal-color) }
+/* LiteralNumberFloat */ .chroma .mf { color:var(--literal-color) }
+/* LiteralNumberHex */ .chroma .mh { color:var(--literal-color) }
+/* LiteralNumberInteger */ .chroma .mi { color:var(--literal-color) }
+/* LiteralNumberIntegerLong */ .chroma .il { color:var(--literal-color) }
+/* LiteralNumberOct */ .chroma .mo { color:var(--literal-color) }
+/* Comment */ .chroma .c { color:var(--comment-color);font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:var(--comment-color);font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:var(--comment-color);font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:var(--comment-color);font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:var(--comment-color) }
+/* CommentPreproc */ .chroma .cp { color:var(--comment-color) }
+/* CommentPreprocFile */ .chroma .cpf { color:var(--comment-color) }
+
+/*Line indicators are a whole different animal as they include structural-layout formatting*/
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:#d8d8d8 }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* Line */ .chroma .line { display:flex; }
diff --git a/static/css/dark-mode.js b/static/css/dark-mode.js
new file mode 100644
index 0000000..b038fe4
--- /dev/null
+++ b/static/css/dark-mode.js
@@ -0,0 +1,25 @@
+const toggleTheme = function() {

+	document.documentElement.style.setProperty(this.id, Number(this.checked));

+	localStorage.setItem(this.id, Number(this.checked));

+};

+

+const initInput = function(styleVariable=null) {

+	let initValue = localStorage.getItem(styleVariable);

+	if (initValue) {

+		initValue = Number(initValue);

+		document.documentElement.style.setProperty(styleVariable, initValue);

+	} else {

+		initValue = getComputedStyle(document.body).getPropertyValue(styleVariable);

+		initValue = Number(initValue);

+	};

+

+	const inputObject = document.getElementById(styleVariable);

+	if (inputObject) {

+		if (inputObject.type == 'checkbox') {

+			inputObject.addEventListener('change', toggleTheme);

+			inputObject.checked = initValue

+		};

+	};

+};

+

+initInput('--dark-theme-check');

diff --git a/static/css/main-root.css b/static/css/main-root.css
new file mode 100644
index 0000000..08188b7
--- /dev/null
+++ b/static/css/main-root.css
@@ -0,0 +1,55 @@
+:root{

+	--dark-theme-check: 1;

+	--theme-color-check: 0;

+	--accent-color-check: 0;

+	--theme-hue: 0;

+	--accent-hue: 0;

+	

+	/* Contrast hue - the color for hyperlinks and selection.

+	Default hue is 210, but we want it the +180 opposite hue of theme if there is a theme color.*/

+	--theme-contrast-hue: calc(calc(var(--theme-hue) + 180) * var(--theme-color-check));

+	--default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210));

+	--contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue));

+

+	--foreground-lightness: calc(0% + calc(var(--dark-theme-check) * 90%));

+	--background-lightness: calc(100% - calc(var(--dark-theme-check) * 90%));

+	--contrast-lightness: calc(50% + calc(var(--dark-theme-check) * 0%));

+	

+	/* Accent hue - the color for all other elements beside <p> foreground and the main background.

+	We want to inherit the theme hue if accent color is disabled.*/

+	--theme-accent-hue: calc(var(--theme-hue) * calc(1 - var(--accent-color-check)));

+	--accent-check-hue: calc(var(--accent-hue) * var(--accent-color-check));

+	--applied-accent-hue: calc(var(--theme-accent-hue) + var(--accent-check-hue));

+

+	--accent-saturation: calc(

+		max(var(--accent-color-check), var(--theme-color-check)) * 

+		calc(75% - calc(var(--dark-theme-check) * 20%))

+		);

+	--contrast-saturation: calc(100% - calc(var(--dark-theme-check) * 10%));

+

+	--foreground-theme-color: hsl(

+		var(--theme-hue),

+		calc(var(--theme-color-check) * 75%),

+		var(--foreground-lightness)

+		);

+	--background-theme-color: hsl(

+		var(--theme-hue),

+		calc(var(--theme-color-check) * 25%),

+		var(--background-lightness)

+		);

+	--foreground-accent-color: hsl(

+		var(--applied-accent-hue),

+		var(--accent-saturation),

+		var(--contrast-lightness)

+		);

+	--background-accent-color: hsl(

+		var(--applied-accent-hue),

+		calc(var(--accent-color-check) * 25%),

+		var(--background-lightness)

+		);

+	--contrast-color: hsl(

+		var(--contrast-hue), 

+		var(--contrast-saturation), 

+		var(--contrast-lightness)

+		);

+}

diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..cd32508
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,157 @@
+@import url('/css/main-root.css');

+

+@media (prefers-color-scheme: dark) {

+	:root {

+		--dark-theme-check: 1;

+	}

+}

+

+@media (prefers-color-scheme: light) {

+	:root {

+		--dark-theme-check: 0;

+	}

+}

+

+@media (max-width: 600px) {

+	html {

+		font-size: 1em; 

+	}

+}

+

+@media (min-width: 601px) {

+	html {

+		font-size: 1em; 

+	}

+}

+

+.dark-mode-container {

+	float: right;

+}

+

+::selection {

+	background-color: var(--contrast-color);

+	color: hsl(0, 0%, var(--background-lightness));

+}

+

+body {

+	color: var(--foreground-accent-color);

+	background-color: var(--background-theme-color);

+	transition: 250ms;

+}

+

+p {

+	color: var(--foreground-theme-color);

+	font-size: 1rem;

+}

+

+hr {

+	border-color: var(--foreground-accent-color);

+}

+

+code {

+	color: var(--foreground-accent-color);

+	

+	border-color: var(--foreground-accent-color);

+	border-width: 1px;

+	border-style: solid;

+	padding: 0.1rem 0.2rem;

+	background-color: hsla(0, 0%, 0%, 50%);

+}

+

+pre code {

+	border-style: none;

+	padding: 0;

+	background: none;

+	color: inherit;

+	tab-size: 4;

+}

+

+pre {

+	border-color: var(--foreground-accent-color);

+	border-width: 1px;

+	border-style: solid;

+	padding: 5px;

+	

+	background-color: hsla(0, 0%, 0%, 0%);

+	

+	font-size: 1rem;

+	white-space: pre;

+	overflow-x: auto;

+	max-width: 100%;

+	text-size-adjust: 100%;

+	-ms-text-size-adjust: 100%;

+	-moz-text-size-adjust: 100%;

+	-webkit-text-size-adjust: 100%;

+}

+

+math {

+	color: var(--foreground-accent-color);

+	font-size: 1rem;

+	overflow-x: auto;

+	max-width: 100%;

+	text-size-adjust: 100%;

+	-ms-text-size-adjust: 100%;

+	-moz-text-size-adjust: 100%;

+	-webkit-text-size-adjust: 100%;

+}

+

+math mi {

+	font-style: italic;

+}

+

+nav {

+	clear: both;

+}

+

+nav.nav-footer {

+	color: var(--foreground-accent-color);

+	text-align: center;

+	clear: both;

+}

+

+ul {

+	text-indent: -2rem;

+	font-size: 1.25rem;

+	font-weight: bold;

+}

+

+li {

+	text-indent: 0rem;

+	font-size: 1rem;

+	font-weight: normal;

+}

+

+li.pages-iter-item {

+	--instance-hue: var(--accent-hue);

+	color: hsl(

+		var(--instance-hue),

+		var(--accent-saturation),

+		var(--contrast-lightness)

+		);

+}

+

+li:not(.pages-iter-item) {

+	color: var(--foreground-theme-color);

+}

+

+li:not(.pages-iter-item)::marker {

+	color: var(--foreground-accent-color);

+}

+

+a {

+	color: var(--contrast-color);

+}

+

+a:visited {

+	color: hsl(calc(var(--contrast-hue) + 60), 100%, var(--contrast-lightness))

+}

+

+a:hover {

+	color: hsl(calc(var(--contrast-hue) - 150), 100%, var(--contrast-lightness))

+}

+

+img {

+	float: right;

+	max-width: 50%;

+	width: auto;

+}

diff --git a/static/img/favicon.png b/static/img/favicon.png
new file mode 100644
index 0000000..c5c7df8
--- /dev/null
+++ b/static/img/favicon.png
diff --git a/static/img/favicon.svg b/static/img/favicon.svg
new file mode 100644
index 0000000..7b969eb
--- /dev/null
+++ b/static/img/favicon.svg
@@ -0,0 +1,22 @@
+<svg
+	width='100' height='100' viewbox='0 0 100 100'
+	xmlns='http://www.w3.org/2000/svg'
+	>
+	<style>
+		.H {
+			stroke-width: 10;
+			stroke: hsl(300, 100%, 50%);
+		}
+	</style>
+	
+	<rect 
+		x="0" y="0" 
+		width="100" height="100" 
+		fill="hsl(60, 100%, 0%)"
+		stroke="hsl(180, 100%, 50%)"
+		stroke-width="10"
+		/>
+	<path class='H' d='M25 15, 25 85'/>
+	<path class='H' d='M75 15, 75 85'/>
+	<path class='H' d='M25 50, 75 50'/>
+</svg>