diff options
Diffstat (limited to 'front')
| -rw-r--r-- | front/src/App.css | 42 | ||||
| -rw-r--r-- | front/src/App.tsx | 11 | ||||
| -rw-r--r-- | front/src/Emelents/Elements.css | 56 | ||||
| -rw-r--r-- | front/src/Emelents/Sidebar.tsx | 13 | ||||
| -rw-r--r-- | front/src/Emelents/Topbar.tsx | 12 | ||||
| -rw-r--r-- | front/src/Fonts.css | 7 | ||||
| -rw-r--r-- | front/src/index.css | 17 |
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 { |