Initial commit

1 files changed, 184 insertions, 0 deletions

diff --git a/grapher/style.css b/grapher/style.css
new file mode 100644
index 0000000..793d213
--- /dev/null
+++ b/grapher/style.css
@@ -0,0 +1,184 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
+
+body, .chipbox *, iframe {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+html {
+	--foreforeground: #3788ae;
+	--foreground: #082f41;
+	--background: #03141c;
+	color: white;
+	background: var(--background);
+	/*padding: 1cm;*/
+	font-size: 12pt;
+	font-family: 'Raleway', sans-serif;
+	height: 100%;
+}
+
+body {
+	height: 100vh;
+	width: 100vw;
+	overflow: hidden;
+
+	display: grid;
+	grid-template-areas: 
+	"searcher graph";
+	grid-column-gap: 0;
+	grid-row-gap: 0;
+}
+
+iframe#searcher {
+	height: 100vh;
+	width: 13cm;
+
+	margin: 0;
+	grid-area: searcher;
+	position: relative;
+}
+
+div#graph {
+	--graphOffsetX: 0;
+	--graphOffsetY: 0;
+	grid-area: graph;
+	width: calc(100vw - 13cm);
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAA3SURBVDhPY2RgYPgPxBQDZhEZMM0EJqkIRg2kHIwaSDkYNZByMGog5YARWNJSpcSGASq7kIEBAL94Aos8Ra5sAAAAAElFTkSuQmCC");
+	background-repeat: repeat;
+	background-position-x: calc(var(--graphOffsetX) * 1px);
+	background-position-y: calc(var(--graphOffsetY) * 1px);
+}
+
+#searchbox:not([open]) + div#graph {
+	width:100vw !important;
+}
+
+#searchbox:not([open]) > summary::marker {
+	content: ">>>";
+}
+#searchbox[open] > summary::marker {
+	content: "<<<";
+}
+
+#searchbox[open] > summary {
+	left: 13cm;
+}
+
+#searchbox > summary::marker {
+	position: absolute;
+}
+
+#searchbox > summary {
+	position: absolute;
+	z-index: 99999;
+	top: 50%;
+	bottom: 50%;
+	padding-left: 1mm;
+	height: calc(1rem + 1mm);
+	border: 1mm solid var(--foreground);
+	border-right: 2mm solid var(--foreground);
+	background: var(--foreground);
+	border-top-right-radius: 2mm;
+	border-bottom-right-radius: 2mm;
+}
+
+#searchbox {
+	border-right: 2mm var(--foreground) solid;
+	z-index: 999999;
+}
+
+div.chipbox {
+	--chipOffsetX: 0;
+	--chipOffsetY: 0;
+	position: absolute;
+	user-select: none;
+  transform: translate(
+		calc((var(--graphOffsetX) + var(--chipOffsetX)) * 1px),
+		calc((var(--graphOffsetY) + var(--chipOffsetY)) * 1px));
+}
+
+div.chipbox > div#selected {
+	padding: -1mm;
+	border: 1mm white solid;
+}
+
+div.chipbox > div#selected + .ui {
+	display: unset;
+}
+div.chipbox > div:not(#selected) + .ui {
+	display: none;
+}
+
+canvas {
+	position:fixed;
+	top:0;
+	bottom:0;
+	left:0;
+	right:0;
+	z-index: 100;
+
+	pointer-events: none;
+}
+
+#helpbox > summary {
+	height: 1.5cm;
+	width: 1.5cm;
+	display: flex;
+	background: #0000;
+	border: #fff7 solid 0.9mm;
+	color: #fff7;
+	border-radius: 1.5cm;
+	padding: 0;
+	font-size: 1.5cm;
+	align-items: center;
+	justify-content: center;
+	float: left;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	user-select: none;
+}
+#helpbox[open] > summary {
+	margin-bottom: 0;
+	background: #fff7;
+	border: #0000 solid 0.9mm;
+	color: #fff;
+}
+
+#helpbox {
+	position: fixed;
+	bottom: 2rem;
+	right: 2rem;
+	background: #0000;
+	border-radius: 0;
+}
+
+#helpbox > div {
+	background: var(--foreground);
+	border-radius: 0.5cm;
+	height: 60vh;
+	width: 10cm;
+	overflow-x: auto;
+	padding: 1rem;
+	position: relative;
+	bottom: 2cm;
+	box-shadow: black 1mm 1mm 3mm
+}
+
+
+hr {
+	border: 0.5mm solid var(--foreforeground);
+	background: var(--foreforeground);
+	width: 100%;
+	height: 0%;
+	
+}
+
+kbd {
+  background: white;
+  color: black;
+  padding: 0.5mm;
+  border-radius: 1mm;
+  box-shadow: inset black -0.25mm -0.25mm 1mm;
+}