feat(navbar): responsive actions

This commit is contained in:
Garrit Franke 2022-04-11 17:09:33 +02:00
parent d67d258963
commit 9ef1bfd517
No known key found for this signature in database
GPG key ID: 65586C4DDA55EA2C
9 changed files with 82 additions and 37 deletions

View file

@ -7,3 +7,5 @@ source "https://rubygems.org"
gem "jekyll", "~> 4.0" gem "jekyll", "~> 4.0"
gem "jekyll-paginate" gem "jekyll-paginate"
gem "jekyll-feed" gem "jekyll-feed"
gem "webrick", "~> 1.7"

View file

@ -59,6 +59,7 @@ GEM
terminal-table (2.0.0) terminal-table (2.0.0)
unicode-display_width (~> 1.1, >= 1.1.1) unicode-display_width (~> 1.1, >= 1.1.1)
unicode-display_width (1.8.0) unicode-display_width (1.8.0)
webrick (1.7.0)
PLATFORMS PLATFORMS
ruby ruby
@ -67,6 +68,7 @@ DEPENDENCIES
jekyll (~> 4.0) jekyll (~> 4.0)
jekyll-feed jekyll-feed
jekyll-paginate jekyll-paginate
webrick (~> 1.7)
BUNDLED WITH BUNDLED WITH
2.1.2 2.3.11

View file

@ -43,9 +43,6 @@
display: inline-block; display: inline-block;
width: 60px; width: 60px;
height: 34px; height: 34px;
margin-top: 12px;
right: 90px;
float: right;
} }
.switch input { .switch input {

View file

@ -1,17 +1,17 @@
<header id="header"> <header id="header">
<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a> <div class="action-container">
<!-- Dark Mode Button -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
</div>
<!-- Dark Mode Button --> <a href="{{ site.baseurl }}">
<label class="switch"> <img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
<input type="checkbox"> </a>
<span class="slider round"></span>
</label>
<div>
<a href="{{ site.baseurl }}">
<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
</a>
</div>
<div class="revuo-classes"> <div class="revuo-classes">
<a href="{{ site.baseurl }}" class="wk">Weekly</a> <a href="{{ site.baseurl }}" class="wk">Weekly</a>
<a href="/periodicals/" class="pd">Periodical</a> <a href="/periodicals/" class="pd">Periodical</a>

View file

@ -1,5 +1,13 @@
<nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}> <nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
<div id="nav-list"> <div id="nav-list">
<div class="nav-actions">
<!-- Dark Mode Button -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
</div>
<a href="{{ site.baseurl }}">Revuo Weekly</a> <a href="{{ site.baseurl }}">Revuo Weekly</a>
<!-- Nav pages --> <!-- Nav pages -->

View file

@ -45,15 +45,33 @@ html, body {
@include open(14rem); @include open(14rem);
} }
/* Separator after menu */ #nav-list {
#nav-list:after { .nav-actions {
display: block; /* Will turn to flex on mobile */
content: ''; display: none;
width: 5rem; gap: 12px;
height: 1px; justify-content: center;
margin: 23px auto;
background-color: $background-color; .rss {
padding: 0;
.rss-icon {
margin-bottom: 0;
}
}
}
/* Separator after menu */
&:after {
display: block;
content: '';
width: 5rem;
height: 1px;
margin: 23px auto;
background-color: $background-color;
}
} }
/* Icon menu */ /* Icon menu */

13
_sass/responsive.scss Normal file
View file

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

View file

@ -3,7 +3,7 @@
--- ---
//Import //Import
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss"; @import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss", "responsive.scss";
@ -108,17 +108,18 @@ time.by-line {
background-color: var(--menu-color); background-color: var(--menu-color);
} }
#header img.logo { #header .action-container {
margin-left: 122px; align-items: center;
} display: flex;
flex-direction: row;
#header img.rss-icon { gap: 12px;
float: right; height: 36px;
right: 80px; position: absolute;
top: 13px; right: 80px;
position: relative; top: 35px;
} }
#header a.rss { #header a.rss {
display: block; display: block;
padding-bottom: 0;
} }

View file

@ -4,14 +4,16 @@ var reverse = document.getElementById("nav-menu-left");
var icon = normal !== null ? normal : reverse; var icon = normal !== null ? normal : reverse;
const toggleSwitch = document.querySelector('.switch input[type="checkbox"]'); const toggleSwitches = document.querySelectorAll('.switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme'); const currentTheme = localStorage.getItem('theme');
if (currentTheme) { if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme); document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') { if (currentTheme === 'dark') {
toggleSwitch.checked = true; toggleSwitches.forEach(s => s.checked = true);
} else {
toggleSwitches.forEach(s => s.checked = false);
} }
} }
@ -19,13 +21,15 @@ function switchTheme(e) {
if (e.target.checked) { if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark'); document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
toggleSwitches.forEach(s => s.checked = true);
} else { } else {
document.documentElement.setAttribute('data-theme', 'light'); document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); localStorage.setItem('theme', 'light');
toggleSwitches.forEach(s => s.checked = false);
} }
} }
toggleSwitch.addEventListener('change', switchTheme, false); toggleSwitches.forEach((s) => s.addEventListener('change', switchTheme, false));