Fixes responsiveness for small screen sizes

src/components/Header.astro

@@ -5,7 +5,7 @@ import Blazestar from './Blazestar.astro';
 
 <header>
 	<nav>
-    <h2><Blazestar /></h2>
+    <h1><Blazestar /></h1>
 		<div class="internal-links">
 			<HeaderLink href="/">Home</HeaderLink>
 			<HeaderLink href="/blog">Blog</HeaderLink>
@@ -39,13 +39,14 @@ import Blazestar from './Blazestar.astro';
 		margin: 0;
     padding: 0;
 	}
-	h2 {
-		margin: 0;
-		font-size: 1em;
+
+	h1 {
+		margin-bottom: 0.5em;
+    font-size: 2em;
 	}
 
-	h2 a,
-	h2 a.active {
+	h1 a,
+	h1 a.active {
 		text-decoration: none;
 	}
 	nav {
@@ -76,4 +77,9 @@ import Blazestar from './Blazestar.astro';
 			display: none;
 		}
 	}
+	@media (max-width: 520px) {
+    nav {
+      flex-direction: column;
+    }
+	}
 </style>

src/components/Sidebar.astro

@@ -5,7 +5,7 @@ import Blazestar from './Blazestar.astro';
 
 <header>
 	<nav>
-    <h2><Blazestar /></h2>
+    <h1><Blazestar /></h1>
 		<div class="internal-links">
 			<SidebarLink href="/">Home</SidebarLink>
 			<SidebarLink href="/blog">Blog</SidebarLink>
@@ -39,13 +39,13 @@ import Blazestar from './Blazestar.astro';
 		padding: 0 1em;
 	}
 
-	h2 {
+	h1 {
 		margin-bottom: 0.5em;
     font-size: 1.5em;
 	}
 
-	h2 a,
-	h2 a.active {
+	h1 a,
+	h1 a.active {
 		text-decoration: none;
 	}
 

src/layouts/RootLayout.astro

@@ -33,14 +33,14 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     </div>
 	</body>
   <style>
-    @media (max-width: 720px) {
+    @media (max-width: 800px) {
       body {
         grid-template-areas: 
           "header"
           "main"
           "footer";
         grid-template-columns: 1fr;
-
+        margin: 1rem 0.5rem;
       }
       .header {
         display: block;
@@ -49,13 +49,14 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: none;
       }
     }
-    @media (min-width: 720px) {
+    @media (min-width: 800px) {
       body {
         grid-template-areas: 
           "header header"
           "sidebar main"
           "footer footer";
         grid-template-columns: 20rem 1fr;
+        margin: 2rem 1rem;
       }
       .header {
         display: none;
@@ -66,7 +67,6 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     }
     body {
       display: grid;
-      margin: 2rem 3rem;
     }
 
     .header {