added more structure, sass, and page routers

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.jsx

@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
-
-export default App

src/components/Footer.jsx

@@ -0,0 +1,8 @@
+
+const Footer = () => (
+  <footer>
+    <p>&copy; ISSP 5</p>
+  </footer>
+);
+
+export default Footer;

src/components/Header.jsx

@@ -0,0 +1,11 @@
+
+const Header = () => {
+  
+    return (
+        <header>
+            <h1><a href="#0">Header</a></h1>
+        </header>
+    );
+}
+
+export default Header;

src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import AppRouter from "./routers/AppRouter";
+import "./scss/styles.scss";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <AppRouter />
+  </StrictMode>
+);

src/pages/PageHome.jsx

@@ -0,0 +1,21 @@
+// Page - Home
+import { useEffect } from 'react';
+
+const PageHome = () => {
+
+    useEffect(()=>{
+        document.title = 'Home';
+    },[]);
+
+    return (
+        <main>
+            <section>
+                <h2>Home Page</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit porro, dolorem, quod facere enim voluptate provident quo labore vero repellat nemo animi ad exercitationem rem quos, possimus libero deleniti laudantium?</p>
+            </section>
+        </main>
+    );
+
+};
+
+export default PageHome;

src/pages/PageNotFound.jsx

@@ -0,0 +1,21 @@
+// Page - Not Found
+import { useEffect } from 'react';
+
+const PageNotFound = () => {
+
+    useEffect(()=>{
+        document.title = 'Page Not Found';
+    },[]);
+
+    return (
+        <main>
+            <section>
+                <h2>404</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit porro, dolorem, quod facere enim voluptate provident quo labore vero repellat nemo animi ad exercitationem rem quos, possimus libero deleniti laudantium?</p>
+            </section>
+        </main>
+    );
+
+};
+
+export default PageNotFound;

src/routers/AppRouter.jsx

@@ -0,0 +1,27 @@
+// AppRouter
+
+// Development Components
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+// Components
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+// Pages
+import PageHome from "../pages/PageHome";
+import PageNotFound from "../pages/PageNotFound";
+
+function AppRouter() {
+  return (
+    <BrowserRouter>
+      <div className="wrapper">
+        <Header />
+        <Routes>
+          <Route path="/" exact element={<PageHome />} />
+          <Route path="*" element={<PageNotFound />} />
+        </Routes>
+        <Footer />
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default AppRouter;

src/scss/base/_main.scss

@@ -0,0 +1,7 @@
+// Main
+
+@use '../base/settings' as *;
+
+main {
+    padding: $section-padding;
+}

src/scss/base/_reset.scss

@@ -0,0 +1,21 @@
+// Resets
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/scss/base/_settings.scss

@@ -0,0 +1,17 @@
+// App Style Settings
+
+@use '../utilities/functions' as *;
+
+// Colors
+$dark: #1c1c1c;
+$light: #fcfcfc;
+$yellow: #f7df1c;
+$grey: #e1e1e1;
+$red: #d75b5b;
+
+// Type
+$bodyFont: 'Roboto', sans-serif;
+$headingFont: 'Alatsi', sans-serif;
+
+// Layout
+$section-padding: em(16) em(20);

src/scss/base/_type.scss

@@ -0,0 +1,20 @@
+// Type
+
+@use 'settings' as *;
+
+body {
+    font-family: $bodyFont;
+    color: $dark;
+}
+
+h1, h2, h3, h4 {
+    font-family: $headingFont;
+}
+
+h1, h2, h3, h4, p {
+    margin-top: 0;
+}
+
+p {
+    line-height: 1.4;
+}

src/scss/components/_body.scss

@@ -0,0 +1,7 @@
+// Body
+
+@use '../base/settings' as *;
+
+body {
+    background-color: $light;
+}

src/scss/components/_footer.scss

@@ -0,0 +1,13 @@
+// Footer
+
+@use "../base/settings" as *;
+@use "../utilities/mixins" as *;
+@use "sass:color";
+
+footer {
+  padding: $section-padding;
+  border-top: 1px dotted color.adjust($grey, $lightness: -20%);
+  p {
+    @include flatten;
+  }
+}

src/scss/components/_header.scss

@@ -0,0 +1,11 @@
+// Header
+
+@use '../base/settings' as *;
+@use '../utilities/mixins' as *;
+
+header {
+    padding: $section-padding;
+    h1 {
+        @include flatten;
+    }
+}

src/scss/styles.scss

@@ -0,0 +1,21 @@
+// Imports
+
+// Resets and base styling
+@use './base/reset';
+@use './base/type';
+@use './base/main';
+
+
+// Components
+@use './components/body';
+@use './components/header';
+@use './components/footer';
+
+//page specific styling
+@use './page//home';
+
+// Utilities
+@use './utilities/utility-classes';
+
+// Google Fonts - Import
+@import url('https://fonts.googleapis.com/css?family=Alatsi|Roboto:400,400i,700,700i&display=swap');

src/scss/utilities/_functions.scss

@@ -0,0 +1,13 @@
+// Functions
+
+// Function to
+// Convert Px to Ems
+@function em($px, $bc: 16) {
+  @return calc($px / $bc) * 1em;
+}
+
+// Function to
+// Convert Px to Rems
+@function rem($px, $bc: 16) {
+  @return calc($px / $bc) * 1rem;
+}

src/scss/utilities/_mixins.scss

@@ -0,0 +1,31 @@
+// Mixins
+
+// Margin center...
+@mixin mc($set-tb: false, $t: 0, $b: 0) {
+    @if($set-tb){
+        margin: {
+            top: $t;
+            bottom: $b;
+            left: auto;
+            right: auto;
+        }
+    }@else {
+        margin: {
+            left: auto;
+            right: auto;
+        }
+    }
+}
+
+@mixin flatten($is-list: false, $is-text: true) {
+    margin: 0;
+    padding: 0;
+    @if($is-list: true){
+        list-style: none;
+    }
+    @if($is-text) {
+        line-height: 1;
+    }
+    
+}
+

src/scss/utilities/_utility-classes.scss

@@ -0,0 +1,15 @@
+// Utility Classes
+
+// Visually hide text
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    border: 0;
+}