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
This commit is contained in:
HardenedSteel 2024-06-08 01:33:22 +03:00
parent 7cb7fc7b02
commit b2da0a9288
No known key found for this signature in database
GPG Key ID: 0EAF39EDDC2F3265
7 changed files with 40 additions and 25 deletions

View File

@ -1,9 +1,15 @@
<nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
<div id="nav-list">
<div id="nav-actions-container" class="nav-actions">
<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 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>
<!-- Nav pages -->

View File

@ -52,12 +52,20 @@ body {
#nav-list {
.nav-actions {
/* Will turn to flex on mobile */
display: none;
.nav-actions-static {
position: absolute;
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 {

View File

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

View File

@ -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;
@ -177,4 +190,4 @@ p.by-line-post {
display: block;
padding-bottom: 0;
}
}
}

BIN
img/nostr-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 841 B

BIN
img/xcom-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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);