Progress update: syncing current setup

public/css/style.css

@@ -0,0 +1,117 @@
+:root {
+  --navbar-height: 96px;
+  --footer-height: 24px;
+
+  /* Unused - just for reference */
+  --teal: 162, 223, 203;
+  --black: 25, 23, 30;
+  --brown: 81, 73, 65;
+  --tan: 158, 144, 112;
+  --lightblue: 147, 225, 242;
+
+  --background-color: white;
+  --header-color: rgb(var(--lightblue));
+  --footer-color: rgba(var(--teal));
+}
+
+html, body {
+  height: 100vh;
+  width: 100vw;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+html, body, p, h1, h2, h3, h4, h5, h6 {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  display: grid;
+  grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height);
+  background-color: var(--background-color);
+}
+
+header {
+  background-color: var(--header-color);
+}
+
+footer {
+  background-color: var(--footer-color);
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-logo > img {
+  width: 64px;
+  height: 64px;
+}
+
+.nav-logo > p {
+  color: red;
+}
+.nav-logo > p > span {
+  color: blue;
+}
+
+.nav-title {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.nav-title > ul {
+  list-style: none;
+  margin: 0.5rem 0;
+  padding: 0;
+}
+.nav-title > ul > li {
+  display: inline;
+  float: left;
+}
+.nav-title > ul > li > a {
+  padding: 0 1rem;
+}
+
+/* -xs */
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+/* -sm */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+/* -md */
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+/* -lg */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+/* -xl */
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1320px;
+  }
+}