Yeha im done for today

antonkoetzler.github.io/src/app/componnets/App.tsx

@@ -0,0 +1,14 @@
+import '../css/App.css';
+import AppBar from './AppBar';
+import AppBody from './AppBody';
+
+const App = () => {
+  return (
+    <div id='app'>
+      <AppBar />
+      <AppBody />
+    </div>
+  );
+}
+
+export default App;

antonkoetzler.github.io/src/app/componnets/AppBar.tsx

@@ -0,0 +1,11 @@
+import '../css/AppBar.css';
+
+const AppBar = () => {
+  return (
+    <header id='appBar'>
+      Start
+    </header>
+  );
+};
+
+export default AppBar;

antonkoetzler.github.io/src/app/componnets/AppBody.tsx

@@ -0,0 +1,10 @@
+import '../css/AppBody.css';
+
+const AppBody = () => {
+  return (
+    <article id='appBody'>
+    </article>
+  );
+};
+
+export default AppBody;

antonkoetzler.github.io/src/app/css/App.css

@@ -0,0 +1,8 @@
+#app {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: var(--primary-dark-mode-color);
+  display: flex;
+  flex-direction: column;
+}

antonkoetzler.github.io/src/app/css/AppBar.css

@@ -0,0 +1,3 @@
+#appBar {
+  background: pink;
+}

antonkoetzler.github.io/src/app/css/AppBody.css

@@ -0,0 +1,5 @@
+#appBody {
+  flex: 1;
+  background: lightgreen;
+  opacity: 0.3;
+}

antonkoetzler.github.io/src/app/css/index.css

@@ -0,0 +1,41 @@
+:root {
+  --primary-dark-mode-color: #181818;
+  --primary-light-mode-color: #EDE6D6;
+}
+
+/* Regular font. */
+@font-face {
+  font-family: 'Iosevka';
+  src: url('../../assets/fonts/Iosevka-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Italic font. */
+@font-face {
+  font-family: 'Iosevka';
+  src: url('../../assets/fonts/Iosevka-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+/* Bold font. */
+@font-face {
+  font-family: 'Iosevka';
+  src: url('../../assets/fonts/Iosevka-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+body {
+  /* Disable default HTML margin. */
+  margin: 0;
+
+  /* Default font and font color. */
+  font-family: 'Iosevka';
+  color: var(--primary-light-mode-color);
+
+  /* Smooth text. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

antonkoetzler.github.io/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './css/index.css';
-import App from './app/App';
+import './app/css/index.css';
+import App from './app/componnets/App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(

antonkoetzler.github.io/src/tests/App.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import App from '../app/App';
+import App from '../app/componnets/App';
 
 test('renders learn react link', () => {
   render(<App />);