update burger menu for social acc.s

move responsive.scss to main.scss to fix different acting @media

add social media account links to burger menu for; x.com and nitter

update CSS formating

_includes/menu.html

@@ -1,8 +1,14 @@
 <nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
 	<div id="nav-list">
-		<div id="nav-actions-container" class="nav-actions">
+    <div class="nav-actions">
+		  <div id="nav-actions-flex-container" class="nav-actions-flex">
 			  <a class="icon" href="https://revuo-xmr.com/support/" target="_blank"><img src="/img/donate.png" alt="Donate" title="Donate" /></a>
 			  <a class="icon" href="/atom.xml" target="_blank"><img src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
+		  </div>
+		  <div id="nav-actions-static-container" class="nav-actions-static">
+			  <a class="icon" href="https://primal.net/p/npub1tn8spk9zhxrctg2qym3gj8r7eq2wk6z3phrl8304wc54vt9qam4qvzw6jx" target="_blank"><img src="/img/nostr-icon.png" alt="Nostr" title="Nostr" /></a>
+			  <a class="icon" href="https://xcancel.com/revuoxmr" target="_blank"><img src="/img/xcom-icon.png" alt="x.com" title="x.com" /></a>
+		  </div>
     </div>
 		<a href="{{ site.baseurl }}">Revuo Weekly</a>
 

_sass/layout.scss

@@ -52,12 +52,20 @@ body {
 
 #nav-list {
 
-  .nav-actions {
+  .nav-actions-static {
-    /* Will turn to flex on mobile */
+    position: absolute;
-    display: none;
+    right: 1px;
+    left: 1px;
+    bottom: 1%;
+  }
+
+  .nav-actions-static,
+  .nav-actions-flex {
     gap: 12px;
     justify-content: center;
     align-items: center;
+    /* only *-flex will be overritten if the screen is small */
+    display: flex;
 
     .icon {
       padding: 0;
@@ -68,7 +76,6 @@ body {
     }
   }
 
-
   /* Separator after menu */
   &:after {
     display: block;
@@ -80,6 +87,8 @@ body {
   }
 }
 
+
+
 /* Icon menu */
 
 #nav-menu {

_sass/responsive.scss

@@ -1,13 +0,0 @@
-@media (max-width: 700px) {
-  #header {
-    .action-container {
-      display: none !important;
-    }
-  }
-
-  #nav-list {
-    .nav-actions {
-      display: flex;
-    }
-  }
-}

css/main.scss

@@ -3,7 +3,7 @@
 ---
 
 //Import
-@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss", "responsive.scss";
+@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss";
 
 // Default Style (Dark)
 :root {
@@ -110,6 +110,19 @@
   #menu-toggle:checked~#nav {
     width: 30%;
   }
+
+  /* Sets burger menu for small screens */
+  #header {
+    .action-container {
+      display: flex !important;
+    }
+  }
+
+  #nav-list {
+    .nav-actions-flex {
+      display: none !important;
+    }
+  }
 }
 
 // END menu toggle
@@ -163,7 +176,7 @@ p.by-line-post {
   }
 
   align-items: center;
-  display: flex;
+  display: none;
   flex-direction: row;
   gap: 12px;
   height: 36px;

js/main.js

@@ -20,7 +20,7 @@ checkTheme()
 // Make the theme switcher in the hamburger menu on mobile devices work.
 if (document.body.clientWidth < 940) {
 	const themeSwitcherLabel = document.getElementById('main-theme-switcher');
-	const navActionsContainer = document.getElementById('nav-actions-container');
+	const navActionsContainer = document.getElementById('nav-actions-flex-container');
 
 	// Move the theme switcher to inside the hamburger menu.
 	navActionsContainer.appendChild(themeSwitcher);