Major styling improvements

src/App.tsx

@@ -17,12 +17,14 @@ export default function App() {
           <NavbarButton>Login</NavbarButton>
           <NavbarButton>About</NavbarButton>
         </Navbar>
-        <Routes>
+        <div id="page">
-          <Route path="/" exact element={<Home></Home>} />
+          <Routes>
-          <Route path="/home" exact element={<Home></Home>} />
+            <Route path="/" exact element={<Home></Home>} />
-          <Route path="/about" exact element={<About></About>} />
+            <Route path="/home" exact element={<Home></Home>} />
-          <Route path="/login" exact element={<Login></Login>} />
+            <Route path="/about" exact element={<About></About>} />
-        </Routes>
+            <Route path="/login" exact element={<Login></Login>} />
+          </Routes>
+        </div>
       </BrowserRouter>
     </>
   );

src/components/Navbar.tsx

@@ -7,9 +7,7 @@ interface Props {
 export default function Navbar({ children }: Props) {
   return (
     <>
-      <div className="navBar">
+      <div id="navBar">{children}</div>
-	{children}
-      </div>
     </>
   );
 }

src/index.css

@@ -1,20 +1,35 @@
-body {
+html,
+body,
+#root {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  max-width: 100%;
   margin: 0px;
   padding: 0px;
   font-family: "consolas", sans-serif;
   background-color: white;
 
+  --background-image: url(https://source.unsplash.com/random/1920x1080/?blurry);
   --nav-bar-height: 25px;
   --blog-card-width: 18rem;
   --blog-card-height: 20rem;
+  --border-radii: 5px;
+  --blog-card-image-radius: 1px;
+}
+
+h1 {
+  padding: 0px;
+  margin: 0px;
 }
 
 a {
   text-decoration: none;
 }
 
-.navBar {
+#navBar {
-  width: 100%;
   height: var(--nav-bar-height);
   max-height: var(--nav-bar-height);
   max-width: 100%;
@@ -32,7 +47,7 @@ a {
   width: 100%;
   max-height: 100%;
   max-width: 100%;
-  border-radius: 5px;
+  border-radius: var(--border-radii);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -67,7 +82,7 @@ a {
   height: 100%;
   border-style: solid;
   border-width: 5px;
-  border-radius: 10px;
+  border-radius: var(--border-radii);
   border-color: black;
   background-color: white;
 }
@@ -76,7 +91,7 @@ a {
   width: var(--blog-card-width);
   max-width: var(--blog-card-width);
   max-height: var(--blog-card-width);
-  border-radius: 4px;
+  border-radius: var(--blog-card-image-radius);
 }
 
 .blogEntryBody {
@@ -103,3 +118,46 @@ a {
 
 .blogEntryDescription {
 }
+
+#page {
+  max-width: 100%;
+  max-height: 100%;
+  flex-grow: 1;
+  padding: 0px;
+  margin: 0px;
+  background: var(--background-image);
+}
+
+.centeredBoxArea {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  padding: 0px;
+  margin: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#loginBox {
+  padding: 20px;
+  border-radius: var(--border-radii);
+  display: flex;
+  background: white;
+}
+
+#loginBoxContents {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+#aboutBox {
+  padding: 20px;
+  border-radius: var(--border-radii);
+  display: flex;
+  background: white;
+}

src/pages/About.tsx

@@ -2,10 +2,16 @@ import * as React from "react";
 
 export default function About() {
   return (
-    <main>
+    <>
-      <h1>This is an about me.</h1>
+      <div className="centeredBoxArea">
-      <p>Developed by Curt Spark</p>
+        <div id="aboutBox">
-      <a href="https://git.cspark.dev/Blorg">Link to Project Page</a>
+          <div>
-    </main>
+            <h1>This is an about me.</h1>
+            <p>Developed by Curt Spark</p>
+            <a href="https://git.cspark.dev/Blorg">Link to Project Page</a>
+          </div>
+        </div>
+      </div>
+    </>
   );
 }

src/pages/Home.tsx

@@ -22,7 +22,7 @@ export default function Home() {
   ];
 
   return (
-    <main>
+    <>
       <div className="blogEntryGrid">
         {blogEntries.map((item, index) => (
           <BlogEntryCard
@@ -34,6 +34,6 @@ export default function Home() {
           ></BlogEntryCard>
         ))}
       </div>
-    </main>
+    </>
   );
 }

src/pages/Login.tsx

@@ -2,8 +2,15 @@ import * as React from "react";
 
 export default function Login() {
   return (
-    <main>
+    <>
-      <h1>Login Page</h1>
+      <div className="centeredBoxArea">
-    </main>
+        <div id="loginBox">
+          <div id="loginBoxContents">
+            <h1>Login</h1>
+            <input value="Hi"></input>
+          </div>
+        </div>
+      </div>
+    </>
   );
 }