Moved the frontend directory up so that it no longer exists

1 files changed, 248 insertions, 0 deletions

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..bc87160
--- /dev/null
+++ b/index.css
@@ -0,0 +1,248 @@
+/***********************************
+Top level styling
+************************************/
+html {
+	background: #2f3032;
+	background: -webkit-radial-gradient(top, #383A56, #303133);
+	background: -moz-radial-gradient(top, #383A56, #303133);
+	background: radial-gradient(to bottom, #383A56, #303133);
+}
+
+body {
+	background: #2f3032;
+	min-height: calc(100vh - 64px);
+	
+    font-size: 16px;
+    font-family: "Helvetica", sans-serif;
+    line-height: 1.5rem;
+	width: 960px;
+	margin: auto;
+    overflow-x: auto;
+    overflow-y: auto;
+	color: white;
+	margin-top: 32px;
+	margin-bottom: 32px;
+	border-radius: 8px;
+	border: 2px solid #383A56;
+	padding: 32px;
+}
+
+header {
+	border-bottom: 2px solid #383A56;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    font-size: 20px;
+    text-align: center;
+	border-radius: 0px 0px 3px 3px;
+}
+
+header > h1 {
+    margin: 0rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+main {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 1rem;
+    overflow-y: hidden;
+}
+
+/***********************************
+Navbar stylings
+************************************/
+nav {
+    padding-top: 1rem;
+    position: sticky;
+    width: 20%;
+    min-width: 20%;
+    max-width: 20%;
+    margin-right: 5%;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    font-size: 1rem;
+    user-select: none;
+	max-height: calc(100vh - 64px);
+}
+
+.outer-tree {
+    width: 100%;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.outer-tree > li {
+	margin-bottom: 0.25rem;
+}
+
+.outer-tree > li > span {
+    display: block;
+    width: 100%;
+	padding: 0.25rem;
+}
+
+.outer-tree > li > span > i {
+    transform: rotate(0deg);
+    transition: 100ms ease-in-out transform;
+}
+
+.outer-tree li > span > span {
+    padding-left: 1rem;;
+}
+
+.inner-tree {
+	margin-left: 0.5rem;
+    padding-left: 1rem;
+    list-style: none;
+	border-left: 1px solid white;
+}
+
+.inner-tree > li {
+}
+
+.inner-tree > li > label {
+    color: white;
+    font-weight: bold;
+    text-align: center;
+	text-decoration: underline;
+}
+
+.inner-tree > li > a {
+    margin-left: 0.5rem;
+}
+
+nav a {
+	color: white;
+	text-decoration: none;
+    display: inline-block;
+    min-width: 196px;
+}
+
+nav a:hover {
+	opacity: 0.8;
+    cursor: pointer;
+}
+
+.nav-selected {
+    font-weight: bold;
+	color: #ede68a;
+}
+
+/***********************************
+Content styling
+************************************/
+article {
+    min-width: 74%;
+    width: 74%;
+    overflow-y: hidden;
+}
+
+article > h1 {
+	width: 100%;
+	border-bottom: 1px solid #EDE68A;
+	padding-bottom: 0.25rem;
+}
+
+section > p {
+    padding-left: 1rem;
+}
+
+section > h2 {
+	padding-left: 0.25rem;
+	font-size: 18px;
+}
+
+section pre {
+    overflow-x: auto;
+    padding-left: 0.5rem;
+    font-size: 0.9rem;
+	line-height: 1.1rem;
+}
+
+#references a,
+#references a:visited {
+    color: #EDE68A;
+    opacity: 0.8;
+}
+
+#references a:hover {
+    opacity: 1.0;
+}
+
+
+/***********************************
+Code stylings
+************************************/
+.code_keyword {
+    color: blue;
+    font-weight: bold;
+}
+
+.code_constant {
+    font-weight: bold;
+}
+
+.code_str {
+    color: orange;
+}
+
+.code_comment {
+    color: green;
+}
+
+/***********************************
+WebGL container
+************************************/
+.opengl_canvas_container {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 3px;
+}
+
+.opengl_canvas_container .play_button {
+    all: unset;
+    font-size: 2rem;
+    width: 128px;
+    height: 128px;
+    position: absolute;
+    top: calc(50% - 56px);
+    left: calc(50% - 56px);
+    border: 1px solid white;
+    color: white;
+    background-color: transparent;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+	cursor: pointer;
+}
+
+.opengl_canvas_container canvas {
+    border-radius: 3px 3px 0px 0px;
+    border: 1px solid #b0a565;
+}
+
+.opengl_canvas_container .stop_button {
+    all: unset;
+    font-size: 1rem;
+    background-color: red;
+    color: white;
+    position: absolute;
+    width: 128px;
+    height: 2rem;
+    border-radius: 2px;
+    top: 0.5rem;
+    left: 496px;
+    display: none;
+	cursor: pointer;
+}
+
+