Styling Improvements (#62)

* centered content on wider screens

* full screen minimum

* better small styling for tiles

Author: rexgreenway

src/index.css

@@ -25,6 +25,9 @@
 }
 
 body {
+    margin:0;
+    padding:0;    
+    
     background-color:  var(--background);
 
     font-family: 'Bebas Neue', monospace;
@@ -36,7 +39,10 @@ body {
 }
 
 #root {
-    margin: 20px 10% 20px 10%
+    /* Center the root element */
+    margin: 0 auto; 
+    /* Keeps content centered on wider screens */
+    max-width: min(90vw, 80em);
 }
 
 p, h1, h2, h3, h4, h5 {

src/pages/links/Links.module.css

@@ -19,8 +19,6 @@
 
   text-decoration: none;
   color: var(--text);
-
-  padding-right: 40px;
 
   display: flex;
   justify-content: flex-end;
@@ -36,11 +34,19 @@
   gap: 20px;
 
   align-items: center;
+
+  margin-right: 8%;
 }
 
 
 @media only screen and (max-width: 600px) {
   .Subtitle {
     display: none;
   }
+}
+
+@media only screen and (max-width: 380px) {
+  .Tile {
+    font-size: small;
+  }
 }

src/router/App.module.css

@@ -1,8 +1,16 @@
 
 .Layout {
+    /* Minimum Height is always full screen */
+    padding: 20px 0;
+    min-height: 100vh;
+    box-sizing: border-box;
+
     display: flex;
     flex-direction: column;
     gap: 20px;
+
+    /* Justify content to take up full height */
+    justify-content: space-between;
 }
 
 .Spinner {

src/router/App.tsx

@@ -41,16 +41,16 @@ const App = ({ homeTitle = "home", theme, simple }: AppProps) => {
 
   if (simple) {
     return (
-      <div className={styles.LayoutSimple}>
+      <div id="layoutSimple" className={styles.Layout}>
         <SimpleHeader />
         <Outlet />
         <Footer />
       </div>
     );
   } else {
     return (
-      <div className={styles.Layout}>
-        <div>
+      <div id="layout" className={styles.Layout}>
+        <div id="headerWithLine">
           <Header
             homeTitle={homeTitle}
             navLinks={subRoute}
@@ -63,7 +63,7 @@ const App = ({ homeTitle = "home", theme, simple }: AppProps) => {
         ) : (
           <Outlet />
         )}
-        <div>
+        <div id="footerWithLine">
           <HorizontalLine />
           <Footer />
         </div>