Merge pull request #14 from garritfra/responsive-navbar
Navbar: responsive actions
This commit is contained in:
commit
d2877ddd3e
9 changed files with 82 additions and 37 deletions
2
Gemfile
2
Gemfile
|
@ -7,3 +7,5 @@ source "https://rubygems.org"
|
|||
gem "jekyll", "~> 4.0"
|
||||
gem "jekyll-paginate"
|
||||
gem "jekyll-feed"
|
||||
|
||||
gem "webrick", "~> 1.7"
|
||||
|
|
|
@ -59,6 +59,7 @@ GEM
|
|||
terminal-table (2.0.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
unicode-display_width (1.8.0)
|
||||
webrick (1.7.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
@ -67,6 +68,7 @@ DEPENDENCIES
|
|||
jekyll (~> 4.0)
|
||||
jekyll-feed
|
||||
jekyll-paginate
|
||||
webrick (~> 1.7)
|
||||
|
||||
BUNDLED WITH
|
||||
2.1.2
|
||||
2.3.11
|
||||
|
|
|
@ -43,9 +43,6 @@
|
|||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
margin-top: 12px;
|
||||
right: 90px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
<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 -->
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<a href="{{ site.baseurl }}">
|
||||
<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
|
||||
</a>
|
||||
|
||||
<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">
|
||||
<a href="{{ site.baseurl }}" class="wk">Weekly</a>
|
||||
<a href="/periodicals/" class="pd">Periodical</a>
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
<nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
|
||||
<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>
|
||||
|
||||
<!-- Nav pages -->
|
||||
|
|
|
@ -45,15 +45,33 @@ html, body {
|
|||
@include open(14rem);
|
||||
}
|
||||
|
||||
/* Separator after menu */
|
||||
#nav-list {
|
||||
|
||||
#nav-list:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 5rem;
|
||||
height: 1px;
|
||||
margin: 23px auto;
|
||||
background-color: $background-color;
|
||||
.nav-actions {
|
||||
/* Will turn to flex on mobile */
|
||||
display: none;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
|
||||
.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 */
|
||||
|
|
13
_sass/responsive.scss
Normal file
13
_sass/responsive.scss
Normal file
|
@ -0,0 +1,13 @@
|
|||
@media (max-width: 700px) {
|
||||
#header {
|
||||
.action-container {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-list {
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -3,7 +3,7 @@
|
|||
---
|
||||
|
||||
//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);
|
||||
}
|
||||
|
||||
#header img.logo {
|
||||
margin-left: 122px;
|
||||
}
|
||||
|
||||
#header img.rss-icon {
|
||||
float: right;
|
||||
right: 80px;
|
||||
top: 13px;
|
||||
position: relative;
|
||||
#header .action-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
#header a.rss {
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
10
js/main.js
10
js/main.js
|
@ -4,14 +4,16 @@ var reverse = document.getElementById("nav-menu-left");
|
|||
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');
|
||||
|
||||
if (currentTheme) {
|
||||
document.documentElement.setAttribute('data-theme', currentTheme);
|
||||
|
||||
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) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
toggleSwitches.forEach(s => s.checked = true);
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-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));
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue