7 files changed, 115 insertions, 43 deletions
diff --git a/front/src/App.css b/front/src/App.css
index 74b5e05..a971f8e 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -1,38 +1,10 @@
-.App {
-  text-align: center;
+.AppContents {
+    display: flex;
+    flex-direction: row;
+    background-color: var(--colorscheme-white);
+    padding: 25px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.App > div {
+    padding: 10px;
 }
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 47cc1ed..0759d38 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -1,8 +1,10 @@
 import './App.css';
+import './Fonts.css';
 import Sidebar from './Emelents/Sidebar';
 import { createBrowserRouter, RouterProvider } from 'react-router';
 import IndexElement from './Emelents/IndexElement';
 import ClassesList from './Emelents/ClassList';
+import Topbar from './Emelents/Topbar';
 
 const router = createBrowserRouter([
     {
@@ -17,9 +19,12 @@ const router = createBrowserRouter([
 
 function App() {
     return (
-        <div>
-            <Sidebar />
-            <RouterProvider router={router} />
+        <div className='App'>
+            <Topbar />
+            <div className='AppContents'>
+                <Sidebar />
+                <RouterProvider router={router} />
+            </div>
         </div>
     );
 }
diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
new file mode 100644
index 0000000..8a50296
--- /dev/null
+++ b/front/src/Emelents/Elements.css
@@ -0,0 +1,56 @@
+.Sidebar {
+    --width: 300px;
+    height: 100%;
+    min-width: var(--width);
+    max-width: var(--width);
+    min-height: 1000px;
+    background-color: var(--colorscheme-white);
+    border: 2px solid var(--colorscheme-gray);
+    color: var(--colorscheme-gray);
+
+
+    background: var(--colorscheme-white);
+    background-image: radial-gradient(var(--colorscheme-gray) 1px, transparent 0);
+    background-size: 4px 4px;
+}
+
+.Topbar {
+    text-transform: uppercase;
+    display: flex;
+    flex-direction: column;
+}
+
+.Topbar > h1 {
+    margin-bottom: 0px;
+}
+
+.TopbarContents {
+    border-top: 2px solid var(--colorscheme-black);
+    display: flex;
+}
+
+.TopbarContents > h2 {
+    --width: 280px;
+    min-width: var(--width);
+    max-width: var(--width);
+    min-height: 30px;
+    padding: 5px;
+    margin-top: 0px;
+    background-color: var(--colorscheme-black);
+    color: var(--colorscheme-white);
+    text-align: center;
+}
+
+.SidebarContents {
+    --width: 260px;
+    min-width: var(--width);
+    max-width: var(--width);
+    background-color: var(--colorscheme-white);
+    color: var(--colorscheme-gray);
+    margin: 20px;
+}
+
+.SidebarContents > h1 {
+    color: var(--colorscheme-gray);
+    text-align: center;
+}
diff --git a/front/src/Emelents/Sidebar.tsx b/front/src/Emelents/Sidebar.tsx
index c5a4a9c..b138de6 100644
--- a/front/src/Emelents/Sidebar.tsx
+++ b/front/src/Emelents/Sidebar.tsx
@@ -1,12 +1,15 @@
+import './Elements.css';
+
 function Sidebar() {
     return (
         <nav className='Sidebar'>
-            <h1> Test </h1>
-            <ul>
-            <li> <a href="/classes"> Class list </a> </li>
-            </ul>
+            <div className='SidebarContents'>
+                <h1> Contents </h1>
+                <ul>
+                </ul>
+            </div>
         </nav>
-    )
+    );
 }
 
 export default Sidebar;
diff --git a/front/src/Emelents/Topbar.tsx b/front/src/Emelents/Topbar.tsx
new file mode 100644
index 0000000..6c4ef74
--- /dev/null
+++ b/front/src/Emelents/Topbar.tsx
@@ -0,0 +1,12 @@
+function Topbar() {
+    return (
+        <div className="Topbar">
+            <h1> View from the edge </h1>
+            <div className="TopbarContents">
+                <h2> Lifepath </h2>
+            </div>
+        </div>
+    );
+}
+
+export default Topbar;
diff --git a/front/src/Fonts.css b/front/src/Fonts.css
new file mode 100644
index 0000000..59716aa
--- /dev/null
+++ b/front/src/Fonts.css
@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');
+
+h1, h2 {
+    font-family: "Rubik Dirt", system-ui;
+    font-weight: 400;
+    font-style: normal;
+}
diff --git a/front/src/index.css b/front/src/index.css
index dfdc4ba..4e7932e 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -1,3 +1,14 @@
+:root {
+    --colorscheme-black: #050A0E;
+    --colorscheme-blue: #00F0FF;
+    --colorscheme-white: #FAFAFA;
+    --colorscheme-gray: #3C3C3C;
+}
+
+* {
+    color: var(--colorscheme-black);
+}
+
 body {
     padding: 0;
     margin: 0;
@@ -8,6 +19,12 @@ body {
     -moz-osx-font-smoothing: grayscale;
     position: absolute;
     top: 0px;
+    min-height: 100%;
+    min-width: 100%;
+}
+
+body > #root > div {
+    height: 1000px;
 }
 
 code {