layout

src/App.css

@@ -1,40 +1,12 @@
 .App {
   text-align: center;
+  width: 100%;
 }
 
-.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;
+.layout {
+  width: 100%;
   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);
-  }
+  gap: 5px;
 }
 
 /* @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); */
@@ -62,6 +34,7 @@
   font-family: 'Lato', sans-serif;
 }
 
+
 .home,
 .flights,
 .seasons {
@@ -70,6 +43,7 @@
   align-items: center;
   justify-content: center;
   font-size: 3rem;
+  width: 100%;
 }
 
 
@@ -129,10 +103,6 @@ h1,h2,h4,p
 {
     text-align: center;
 }
-.toindex
-{
-    text-align: left;
-}
 
 .flexbox 
 {
@@ -150,20 +120,8 @@ h1,h2,h4,p
     align-items: flex-end;
 }
 
-.header 
-{
-  border: 0px;
-  font-weight: 900;   
-  font-size: 2em;   
-}
-
-.pilot .header 
-{
-    font-weight: bold;
-}
-
 .link 
 {
-    font-size: 80%;
+    font-size: 90%;
 }
 

src/App.tsx

@@ -11,7 +11,7 @@ import Seasons from './pages/Seasons';
 export default function App() 
 {
   return(
-    <>
+    <div className='layout'>
       <Router>
         <Navbar />
         <Routes>
@@ -20,6 +20,6 @@ export default function App()
           <Route path='/seasons' element={<Seasons/>} />
         </Routes>
       </Router>
-    </>
+    </div>
   );
 }

src/components/FlightsTable.tsx

@@ -7,7 +7,7 @@ function Link2Flight(u_key: string, key: string, row: any, data: string | null)
 {
   var val: JSX.Element = <></>;
   const link: string = 'https://de.dhv-xc.de/flight/' + row['IDFlight'];
-  val = <td key={u_key}><a href={link} target="_blank" rel="noopener noreferrer" >{data}</a></td>;
+  val = <td className='link' key={u_key}><a href={link} target="_blank" rel="noopener noreferrer" >{data}</a></td>;
 
   return val;
 }

src/components/Navbar.css

@@ -1,15 +1,14 @@
 .navbar {
   background-color: #ba3a07c2;
-  height: 80px;
-  width: 100px;
+  height: 40px;
+  min-width: 50px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
 
 .menu-bars {
-  margin-left: 2rem;
-  font-size: 2rem;
+  margin-left: 1rem;
   background: none;
 }
 
@@ -62,7 +61,7 @@
 .navbar-toggle {
   background-color: #ba3a07c2;
   width: 100%;
-  height: 80px;
+  height: 40px;
   display: flex;
   justify-content: flex-start;
   align-items: center;

src/components/Navbar.tsx

@@ -15,9 +15,9 @@ export default function Navbar()
   return (
     <>
       <IconContext.Provider value={{ color: '#fff' }}>
-        <div className='navbar'>
+        <div className='navbar' onClick={showSidebar}>
           <Link to='#' className='menu-bars'>
-            <FaIcons.FaBars onClick={showSidebar} />
+            <FaIcons.FaBars />
           </Link>
         </div>
         <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>

src/pages/Home.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Home() {
   return (
-    <div>
+    <div className='home'>
       <h1>HOME</h1>
     </div>
   );