1 files changed, 363 insertions, 0 deletions
diff --git a/static/citrine.css b/static/citrine.css
new file mode 100644
index 0000000..62c70e3
--- /dev/null
+++ b/static/citrine.css
@@ -0,0 +1,363 @@
+/*
+ * citrine.css 
+ * 
+ * Copyright © 2023 citrons
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ *
+ */
+
+
+body {
+	background-color: #002681;
+
+	margin-top: 20px;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 50px;
+	padding-left: 20px;
+	padding-right: 20px;
+	max-width: 80ch;
+
+	overflow-wrap: break-word;
+	min-width: 750px;
+	color: #FEF;
+	font-family: serif;
+}
+
+#page-grid {
+	display: grid;
+	grid-template-areas:
+		"header-left header-right"
+		"content content";
+	grid-template-columns: var(--navbar-width) auto;
+}
+
+@media not all and (min-width: 800px) {
+	body {
+		min-width: 35ch;
+		font-size: large;
+	}
+
+	#page-grid {
+		grid-template-areas:
+			"header-left header-right"
+			"navbar navbar"
+			"content content";
+	}
+
+	.help {
+		width: 45px !important;
+	}
+
+	.header-icons {
+		margin-top: 8px !important;
+	}
+
+	.header {
+		width: 270px;
+	}
+
+	.site-nav {
+		margin-right: 0 !important;
+		padding: 0px !important;
+		margin-top: 10px;
+		display: flex;
+	}
+	
+	.site-nav a {
+		border-bottom: none !important;
+		border-top: none !important;
+		padding-top: 10px !important;
+		padding-bottom: 10px !important;
+		padding-left: 2px !important;
+		padding-right: 2px !important;
+		font-size: 12pt !important;
+		flex-basis: 100%;
+	}
+
+	.site-nav a:not(:last-of-type) {
+		border-right: 3px groove #7c67c3;
+	}
+
+	.dyk {
+		float: none !important;
+		margin-left: auto !important;
+		margin-right: auto !important;
+		max-width: 500px !important;
+	}
+}
+
+a {
+	color: lightblue;
+}
+
+a:visited {
+	color: lightgrey;
+}
+
+.site-header {
+	grid-area: header-left;
+	margin-left: -20px;
+	font-size: 30px;
+	white-space: nowrap;
+	font-family: sans-serif;
+	user-select: none;
+}
+
+.header-icons {
+	grid-area: header-right;
+	display: flex;
+	justify-content: flex-end;
+	margin-left: auto;
+}
+
+.help {
+	display: block;
+	margin-right: 5px;
+	margin-top: 8px;
+	width: 62px;
+}
+
+button, input[type="submit"] {
+	padding: 10px;
+	border: 0;
+	color: black;
+	font-size: 12pt;
+	font-weight: normal;
+	border-radius: 10px;
+	background: linear-gradient(to bottom, #cbbeff 0px, #a286ff 30px);
+}
+
+button:hover, input[type="submit"]:hover {
+	background: #cbbeff;
+}
+
+button:active, input[type="submit"]:active {
+	background: #a286ff;
+}
+
+input[type="text"], input[type="email"], input[type="password"], input[type="time"] {
+	border: 1px solid black;
+	padding: 8px;
+	margin-right: 10px;
+	border-radius: 5px;
+	font-size: 12pt;
+}
+
+input[type="text"], input[type="email"], input[type="password"] {
+	width: 300px;
+}
+
+input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="time"]:focus {
+	box-shadow: inset 0 0 3px black;
+}
+
+.content {
+	grid-area: content;
+}
+
+main {
+	min-height: 320px;
+	display: flow-root;
+}
+
+.navbar {
+	grid-area: navbar;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: sans-serif;
+	font-weight: bold;
+}
+
+h1.article, h2.article {
+	margin-bottom: -10px;
+	padding-bottom: 20px;
+	background-image: url("/static/shadow.png");
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+.dyk {
+	float: right;
+	background-color: white;
+	color: black;
+	margin-left: 20px;
+	margin-right: 20px;
+	margin-bottom: 30px;
+	max-width: 320px;
+	padding: 10px;
+	box-shadow: 10px 10px 0px #ffdd9b;
+}
+
+.dyk h2 {
+	font-size: medium;
+}
+
+.quote {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 700px;
+	clear: both;
+}
+
+.quote blockquote {
+	background-color: white;
+	color: black;
+	border-radius: 20px;
+	margin: 0;
+	margin-bottom: 30px;
+	padding-left: 15px;
+	padding-right: 15px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	position: relative;
+	box-shadow: 8px 8px 0px pink;
+	text-align: center;
+}
+
+.quote.attrib blockquote::after {
+	content: "";
+	position: absolute;
+	width: 20px;
+	height: 32px;
+	background-image: url("/static/bubble-tail.svg");
+	bottom: -32px;
+	right: 40px;
+	margin-left: -20px;
+}
+
+.quote.attrib figcaption {
+	font-style: italic;
+	min-width: 100px;
+	margin-left: auto;
+	margin-right: 15px;
+	margin-top: 34px;
+	margin-bottom: 0;
+	width: max-content;
+	text-align: center;
+}
+
+.site-footer {
+	text-align: center;
+	color: grey;
+	font-family: sans-serif;
+	font-size: smaller;
+	min-width: 100%;
+	clear: both;
+	padding-top: 20px;
+}
+
+.code-block {
+	white-space: pre-wrap;
+}
+
+.redaction {
+	background-color: lightgrey;
+}
+
+.redaction > span {
+	visibility: hidden;
+}
+
+.redaction::after {
+	clip-path: inset(100%);
+	clip: rect(1px, 1px, 1px, 1px);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+	content: "[REDACTED]";
+}
+
+.error-image {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.box, .login-box {
+	background-color: white;
+	color: black;
+	margin-left: 20px;
+	margin-right: 20px;
+	margin-bottom: 30px;
+	margin-top: 20px;
+	padding: 10px;
+	padding-top: 3px;
+	box-shadow: 10px 10px 0px #9782de;
+}
+
+.box {
+	margin-left: auto;
+	margin-right: auto;
+	width: fit-content;
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.login-box {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.login-form, .register-form {
+	flex-basis: 350px;
+}
+
+.field > label {
+	font-family: sans-serif;
+	display: block;
+	font-size: smaller;
+	font-weight: bold;
+}
+
+.field > .checkbox-label {
+	font-weight: normal;
+	font-size: 11pt;
+	display: inline;
+}
+
+.errmsg {
+	background-color: #ffdce2;
+	color: #cb0000;
+	border: 1px solid red;
+	border-radius: 5px;
+	padding: 5px;
+	margin-bottom: 5px;
+	width: 300px;
+	font-size: 10pt;
+}
+
+.errmsg > p {
+	margin: 0;
+}
+
+.connect-form {
+	width: fit-content;
+	margin-left: auto;
+}
+
+.the-graph {
+	width: 100%;
+	object-fit: contain;
+}