first commit

src/main.css

@@ -0,0 +1,98 @@
+:root {
+    --accent: darkblue;
+    --accent-secondary: silver;
+    --accent-contrast: white;
+    --accent-complementary: whitesmoke;
+    --light-box-shadow: 1px 1px 1em rgba(0,0,0,0.6);
+    --x-light-box-shadow: 1px 1px 1em rgba(0,0,0,0.3);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+nav {
+     background-color: var(--accent);
+     height: 100%;
+     display: flex;
+     flex-direction: column;
+     gap: 1em;
+     color: var(--accent-contrast);
+     box-shadow: var(--light-box-shadow)
+}
+
+nav h1 {
+    text-align: center;
+}
+
+nav button {
+    display: block;
+    border: none;
+    text-align: start;
+    font-size: large;
+}
+
+nav, main {
+    padding: 1rem;
+}
+
+button {
+    cursor: pointer;
+    border: none;
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+    padding: .4em;
+    transition: .2s;
+}
+
+button:hover {
+    background-color: var(--accent-contrast);
+    color: var(--accent);
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+thead {
+    color: var(--accent);
+}
+
+#logo {
+    width: 80%;
+    margin: 0 auto;
+}
+
+#search {
+    box-shadow: var(--x-light-box-shadow);
+    display: flex;
+    width: 100%;
+    border: thick solid var(--accent);
+    border-radius: 4px;
+}
+
+#search input {
+    flex-grow: 1;
+    border: none;
+    padding: 1em;
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+    transition: .4s;
+}
+
+#search input:focus {
+    outline: none;
+    background-color: var(--accent-contrast);
+    color: var(--accent);
+}