rottenwheel/revuo-weekly
1
0
Fork 0
mirror of https://github.com/rottenwheel/revuo-weekly.git synced 2024-11-16 17:17:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(navbar): responsive actions

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gemfile
View file

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

4
Gemfile.lock
View file

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

3
_includes/head.html
View file

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

24
_includes/header-custom.html
View file

@ -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>
<div>
<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 class="revuo-classes">
<a href="{{ site.baseurl }}" class="wk">Weekly</a>
<a href="/periodicals/" class="pd">Periodical</a>

8
_includes/menu.html
View file

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

34
_sass/layout.scss
View file

@ -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
View file

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

21
css/main.scss
View file

@ -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
View file

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