Fix layout responsiveness

Author: Fernando-A-Rocha

articles/introduction/article.yaml

@@ -2,5 +2,4 @@ title: "Introduction"
 content: "article.md"
 author: "multitheftauto"
 date: "January 1, 2025"
-revisions: []
 assets: []

articles/official-guides/getting-started/article.yaml

@@ -2,5 +2,5 @@ title: "Getting Started"
 content: "article.md"
 author: "multitheftauto"
 date: "January 1, 2025"
-revisions: []
+: []
 assets: []

articles/privacy/article.yaml

@@ -2,5 +2,4 @@ title: "Privacy policy"
 content: "article.md"
 author: "multitheftauto"
 date: "January 1, 2025"
-revisions: []
 assets: []

schemas/article.yaml

@@ -7,7 +7,6 @@ required:
   - content
   - author
   - date
-  - revisions
   - assets
 properties:
   title:
@@ -22,25 +21,6 @@ properties:
   date:
     type: "string"
     description: "The date the article was published."
-  revisions:
-    type: "array"
-    description: "A list of revisions made to the article."
-    items:
-      type: "object"
-      required:
-        - date
-        - author
-        - changes
-      properties:
-        date:
-          type: "string"
-          description: "The date the revision was made."
-        author:
-          type: "string"
-          description: "The author of the revision."
-        changes:
-          type: "string"
-          description: "A brief description of the changes made."
   assets:
     type: "array"
     description: "A list of assets used in the article."

web/resources/assets/style.css

@@ -119,8 +119,6 @@ hr {
   float: right;
   font-size: 1.8em;
   padding-top: 2px;
-  position: relative;
-  z-index: 1;
 }
 
 
@@ -150,7 +148,7 @@ header {
   opacity: 0.8;
 }
 #logo-wrapper {
-  height: 64px;
+  height: 52px;
   position: relative;
   padding: 16px;
   margin: 0 auto;
@@ -168,89 +166,79 @@ header {
 }
 
 
-/* Grid container */
-.grid-container {
-  display: grid;
-  grid-template-columns: 1fr 6fr;
-  grid-template-rows: auto;
-  max-width: 100%; /* Prevents the grid container from exceeding the page width */
-  overflow-x: hidden; /* Prevents horizontal scrolling */
-  box-sizing: border-box; /* Ensures padding is included in width calculations */
+.container {
+  display: flex;
 }
 
-/* Main content styles */
-#main-content {
-  padding: 20px;
-  max-width: 100%; /* Limits the width of the inner divs */
-  box-sizing: border-box;
+.sidebar {
+  padding: 1em;
+  border-right: 1px solid #394a60;
+  display: block;
+  width: 150px;
 }
-
-
-/* Sidebar styles */
-
-
-/* Ensure #menu-toggle is hidden on larger screens */
-#menu-toggle {
+.toggle-sidebar {
   display: none;
+  background-color: #333;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  padding: 0.5em;
+  cursor: pointer;
+  font-size: 1.6em;
+  margin-left: auto;
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.content {
+  flex: 1;
+  padding: 1rem;
 }
 
-/* Hide sidebar on smaller screens */
-@media (max-width: 768px) {
-  .grid-container {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    max-width: 100%; /* Prevents the grid container from exceeding the page width */
-    overflow-x: hidden; /* Prevents horizontal scrolling */
-    box-sizing: border-box; /* Ensures padding is included in width calculations */
+/* Media query for smaller screens */
+@media (max-width: 900px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    display: none;
+    background-color: #333;
+    border: none;
+    border: 2px solid #394a60;
+    position: absolute;
+    right: 0;
   }
 
-  .sidebar-left {
-      display: none;
-      position: fixed;
-      left: 0;
-      width: 100%;
-      background: #151b23;
-      overflow-y: auto;
-      z-index: 1000;
+  .sidebar.active {
+    display: block;
   }
 
-  .sidebar-left.open {
-      display: block;
+  .content {
+    padding: 1rem;
   }
 
-  #menu-toggle {
-      display: inline-block;
-      background: none;
-      border: none;
-      font-size: 1.5rem;
-      color: white;
-      cursor: pointer;
-      margin-left: auto;
-      position: absolute;
-      bottom: 20px;
-      right: 20px;
+  .toggle-sidebar {
+    display: block;
   }
 }
 
-.sidebar-left {
-  padding: 20px;
-  border-right: 1px solid #394a60;
-}
-.sidebar-left ul {
+.sidebar ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.sidebar-left ul li {
+.sidebar ul li {
   margin: 5px 0;
 }
-.sidebar-left ul li a {
+.sidebar ul li a {
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 10px;
 }
-.sidebar-left ul li p {
+.sidebar ul li p {
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 0;

web/resources/layout.html

@@ -25,7 +25,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Custom CSS -->
-    <link rel="stylesheet" href="/assets/style.css?v=1.6">
+    <link rel="stylesheet" href="/assets/style.css?v=1.7">
 </head>
 <body>
     <nav id="mta-global-navbar">
@@ -68,15 +68,15 @@
             {% if preview_mode %}
             <div class="preview-badge">Preview</div>
             {% endif %}
-            <!-- Add a menu button for mobile -->
-            <button id="menu-toggle" aria-label="Toggle navigation">
+
+            <button class="toggle-sidebar" aria-label="Toggle navigation">
                 <i class="fa-solid fa-bars"></i>
             </button>
         </div>
     </header>
 
-    <div class="grid-container">
-        <nav class="sidebar-left" id="sidebar">
+    <div class="container">
+        <aside class="sidebar">
           <ul>
             {% for item in navigation %}
                 {% if item.path_html %}
@@ -91,10 +91,10 @@
                 {% endif %}
             {% endfor %}
           </ul>
-        </nav>
-        <div id="main-content">
+        </aside>
+        <main class="content">
           {{ content }}
-        </div>
+        </main>
       </div>
 
     <footer>
@@ -106,13 +106,9 @@
     </footer>
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const menuToggle = document.getElementById('menu-toggle');
-            const sidebar = document.getElementById('sidebar');
-
-            menuToggle.addEventListener('click', () => {
-                sidebar.classList.toggle('open');
-            });
+        document.querySelector('.toggle-sidebar').addEventListener('click', () => {
+            const sidebar = document.querySelector('.sidebar');
+            sidebar.classList.toggle('active');
         });
 
         var copyTexts = {};