From a00c0aab1eb5a7a55bef8ca08115bdd722ab5699 Mon Sep 17 00:00:00 2001 From: Matthew Kosarek Date: Sun, 16 May 2021 19:50:15 -0400 Subject: Moved the frontend directory up so that it no longer exists --- index.css | 248 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 index.css (limited to 'index.css') 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; +} + + -- cgit v1.2.1