refactor: navigation and other stuff

client/src/css/app.css

@@ -6,14 +6,13 @@
   --clr-light-gray: #ddd;
   --clr-dark-gray: #aaa;
   --clr-darker-gray: #555;
-  --ff-primary: Roboto;
 }
 
 
 /* General styling */
 
 body {
-  font-family: var(--ff-primary);
+  font-family: "Roboto", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -98,6 +97,7 @@ em {
   flex-direction: column;
 }
 
+/* TODO: remove */
 .app-bar {
   flex: 0;
   background: var(--clr-primary);
@@ -142,7 +142,7 @@ em {
 	margin:0 1.5em 1.5em 1.5em;
 }
 
-.privacy-policy {
+.modal-wrapper {
   z-index: 10;
 }
 
@@ -151,3 +151,18 @@ em {
   margin-bottom: 3rem;
   border-color: var(--vscode-breadcrumb-foreground);
 }
+
+/* TODO: should not be #root */
+#root code {
+  font-family: "JuliaMono", monospace;
+}
+
+@font-face {
+  font-family: 'JuliaMono';
+  src: local('JuliaMono'), url('/fonts/JuliaMono-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: local('Roboto'), url('/fonts/Roboto-Regular.ttf') format('truetype');
+}

client/src/css/landing_page.css

@@ -9,10 +9,6 @@ html {
   font-size: 16px;
 }
 
-body {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
 a {
   text-decoration: none;
 }
@@ -165,12 +161,12 @@ header {
   font-style: italic;
 }
 
-header nav {
+/* header nav {
   display: flex;
   justify-content: flex-end;
   padding: 8px;
   background-color: rgba(0, 133, 162, .7);
-}
+} */
 
 footer {
   background-color: rgba(0, 133, 162, 1);

client/src/css/navigation.css

@@ -0,0 +1,77 @@
+
+nav {
+  flex: 0;
+  background: var(--clr-primary);
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.1em;
+  filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
+  z-index: 2;
+}
+
+.nav-content {
+  flex: 1;
+  display: flex;
+}
+
+.nav-content > div {
+  /* border: 1px solid red; */
+  text-align: center;
+}
+
+.nav-title-left, .nav-title-right {
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.nav-title-middle {
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+
+.nav-title {
+  color: white;
+  font-weight: 500;
+  font-size: 1.3rem;
+  display: inline-block;
+  margin: 0;
+  /* margin: 0 1em; */
+}
+
+/* fix to make toggle buttons work */
+.svg-inline--fa {
+  width: 1em;
+}
+
+/* TODO */
+.nav-button:not(.btn-inverted) {
+  font-size: 1.3rem;
+}
+
+.dropdown {
+  z-index: 10;
+}
+
+.dropdown {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 0;
+  top: 100%;
+  background-color: #fff;
+  z-index: 5;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: -.1rem .3rem .3rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.dropdown .svg-inline--fa {
+  width: 1.8rem;
+}