Made more reactive styling on main page and template

src/app.html

@@ -20,7 +20,7 @@
 				--purple: #C678DD; 
 				--cyan: #56B6C2;
 
-				--font: Consolas, 'Cascadia Code';
+				--font: Consolas, 'Cascadia Code', Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono';
 
 				background: var(--bg);
 				color: var(--fg);
@@ -29,6 +29,12 @@
 				margin: 2rem;
 			}
 
+			@media (max-width: 800px) {
+				.not-required {
+					display: none;
+				}
+			}
+
 			a {
 				text-decoration: none;				
 				position: relative;

src/main.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getJson } from "$lib/data"  
+    import { getJson } from "$lib/data";
 </script>
 
 <style>
@@ -12,6 +12,7 @@
     
     .flex-container {
         display: flex;
+        align-items: center;
     }
 
     .profile {
@@ -24,42 +25,49 @@
     
     .about {
         padding: 0em 5% 0em 5%;
+        font-size: 125%;
     }
     
-    /* Responsive layout - makes a one column layout instead of a two-column layout */
+
     @media (max-width: 800px) {
         .flex-container {
             align-items: center;
             flex-direction: column;
-        }
-
-        .profile {
-            display: none;
+            padding: 0px;
         }
 
         .about {
-            padding: 0px;
+            font-size: 100%;
         }
     }
 
-    h1 {
+    .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         color: var(--red);
         /*text-decoration: underline 5px solid var(--bg-grad);*/
         border-bottom: 5px solid var(--bg-grad);
+        margin-bottom: 1em;
     }
+
 </style>
 
 <div class="card">
     {#await getJson('/json/me.json')}
         <h1>Loading...</h1>
     {:then info}
-        <h1>{info.name}</h1>
+
+        <div class="card-header">
+            <h1>{info.name}</h1>
+            <h3 class="not-required">{info.job_title}</h3>
+        </div>
 
         <div class="flex-container">
-            <img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
-            <p class="about">{info.about}</p>
+            <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
+            <p class="about">{@html info.about}</p>
         </div>
-    {:catch error}
-        <h1>{error.message}</h1>
+    {:catch}
+        <h1>Unable to load portfolio overview data</h1>
     {/await}
 </div>

src/routes/+layout.svelte

@@ -6,7 +6,14 @@
     .main-container {
         margin-left: 10%;
         margin-right: 10%;
-        padding-top: 3em;
+        padding-top: 2em;
+    }
+
+    @media (max-width: 800px) {
+        .main-container {
+            margin: 0em;
+            padding-top: 1em;
+        }
     }
 
     nav {
@@ -20,15 +27,30 @@
         height: 1.5em;
         border-radius: 4px;
     }
+
+    .fade {
+        -webkit-animation: fadeinout 1s linear forwards;
+        animation: fadeinout 1s linear forwards;
+    }
+
+    @-webkit-keyframes fadeinout {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+    }
+
+    @keyframes fadeinout {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+    }
 </style>
 
 <nav>
     <a href = "/">//Profile</a>
-    <a href = "test">//Repos</a>
-    <a href = "test">//Contact</a>
+    <a href = "/repos">//Repos</a>
+    <a href = "/contact">//Contact</a>
 </nav>
 
-<div class="main-container">
+<div class="main-container fade">
 
     <slot />