Adjustments to Splash and Documents layouts and styles

src/layouts/Document.astro

@@ -21,7 +21,7 @@ import "@styles/prism.css"
 <Head/>
 <Header/>
 <div class="page">
-    <div class="content">
+    <article>
         <Sidebar/>
         <div class="document">
             <h1>{frontmatter.Title}</h1>
@@ -44,7 +44,7 @@ import "@styles/prism.css"
                     null
            } -->
         </div>
-    </div>
+    </article>
     <div class="footer">
         <div class="footer-start">
             <p>© {SiteSettings.OrgName}. All right reserved.</p>

src/layouts/Splash.astro

@@ -20,8 +20,8 @@ import "@styles/feelback.css";
 <Head/>
 <Header/>
 <div class="page">
-    <div class="content">
-        <div class="splash">
+    <div class="content" data-pagefind-body>
+        <article class="splash">
             <div class="splash-content">
                 <h1>{frontmatter.Title}</h1>
                 <p>{frontmatter.Description}</p>
@@ -31,7 +31,7 @@ import "@styles/feelback.css";
                 </div>
             </div>
             <img src={frontmatter.Banner}/>
-        </div>
+        </article>
         <div class="document">
             <slot/>
         </div>
@@ -53,4 +53,5 @@ import "@styles/feelback.css";
             }
         </div>
     </div>
-</div>
+</div>
+</html>

src/styles/index.scss

@@ -1,6 +1,7 @@
 body {
     max-width: 1200px;
     margin: auto;
+    padding: 0px 24px;
     font-family: Arial, Helvetica, sans-serif;
     background: #0a0a0a;
     color: white;
@@ -44,7 +45,8 @@ blockquote {
 
 header {
     background: #161616;
-    width: 100%;
+    width: calc(100% - 48px);
+    padding: 0px 24px;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -55,7 +57,12 @@ header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        .end {
+        .header-start {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .header-end {
             display: flex;
             gap: 12px;
             a {
@@ -71,7 +78,7 @@ header {
 .page {
     position: relative;
     min-height: 100vh;
-    .content {
+    article {
         padding-top: 90px;
         display: flex;
         flex-direction: row;
@@ -124,3 +131,25 @@ header {
         }
     }
 }
+
+@media screen and (max-width: 775px){
+    .content {
+        flex-direction: column !important;
+    }
+}
+@media screen and (max-width: 650px){
+    .header-content {
+        flex-direction: column;
+        padding-bottom: 24px;
+    }
+    .page .content {
+        padding-top: 114px !important;
+    }
+    .footer {
+        flex-direction: column !important;
+        align-items: center;
+        * {
+            margin: 0px;
+        }
+    }
+}

src/styles/splash.scss

@@ -4,6 +4,9 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    img {
+        width: 100%;
+    }
     .splash-action {
         display: flex;
         gap: 6px;
@@ -21,4 +24,12 @@
             }
         }
     }
+}
+@media screen and (max-width: 775px){
+    .splash {
+        padding: 64px 0px;
+        img {
+            display: none !important;
+        }
+    }
 }