improve mobile CSS Heavillyyy

website/assets/style.css

@@ -14,26 +14,25 @@ body {
   grid-template-areas:
     "one   two"
     "one    four"
-    "three   blog"
+    "three   blog";
-    "three blog";
   grid-gap: 5px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: 1fr 1fr;
-  height: 98vh;
+  grid-template-rows: repeat(25vh, 6);
 }
 @media only screen and (max-width: 600px) {
   .order {
     grid-template-areas:
       "one  "
+      "four "
       "two  "
       "blog "
-      "blog ";
+      "blog "
+      "three";
     grid-template-columns: 1fr;
   }
-  .three, .four {
-    display: none !important;
-  }
   body {
     scrollbar-width: auto !important;
+
   }
 }
 .emoji {

website/scripts/blog.tsx

@@ -72,7 +72,7 @@ class Main extends Component {
     }
 
     return <>
-        <h1> blog </h1>
+        <h1>blog & comments</h1>
         {() => {
           if (blogPosts) return this.list(blogPosts)
           else return <h3>Loading...</h3>

website/scripts/blog_page.tsx

@@ -27,7 +27,7 @@ export class BlogPage extends Component {
     history.replaceState({}, "", location.pathname+"?md=" + this.metadata.filename);
 
     return <>
-      <h1> sophie's blog </h1>
+      <h1>blog & comments</h1>
       <a style="font-size:xx-large;" onClick={() => {
         pageOpen[1](undefined);
         history.replaceState({}, "", location.pathname+"?md=");