remove dependency on JS for menu and theme toggle
This commit is contained in:
recanman
parent
706171b42e
commit
ffa3d1aacf
9 changed files with 111 additions and 122 deletions
|
|
@ -1,12 +1,4 @@
|
||||||
<header id="header">
|
<header id="header">
|
||||||
<div class="action-container action-container--left">
|
|
||||||
<!-- Dark Mode Button -->
|
|
||||||
<label class="switch">
|
|
||||||
<input type="checkbox">
|
|
||||||
<span class="slider round"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="{{ site.baseurl }}">
|
<a href="{{ site.baseurl }}">
|
||||||
<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
|
<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
4
_includes/menu-toggle.html
Normal file
4
_includes/menu-toggle.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<input class="nojs-toggle" id="menu-toggle" type="checkbox" name="menu-toggle">
|
||||||
|
<label {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %} for="menu-toggle" class="menu-toggle">
|
||||||
|
<div id="menu"></div>
|
||||||
|
</label>
|
||||||
|
|
@ -1,11 +1,6 @@
|
||||||
<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">
|
<div class="nav-actions">
|
||||||
<!-- Dark Mode Button -->
|
|
||||||
<label class="switch">
|
|
||||||
<input type="checkbox">
|
|
||||||
<span class="slider round"></span>
|
|
||||||
</label>
|
|
||||||
<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="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>
|
<a class="icon" href="/atom.xml" target="_blank"><img src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
5
_includes/theme-switcher.html
Normal file
5
_includes/theme-switcher.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Unfortunately, targeting the parent is not a thing in CSS. This is a workaround. -->
|
||||||
|
<input class="nojs-toggle" id="theme-switcher" type="checkbox" name="theme-switcher">
|
||||||
|
<label class="switch" for="theme-switcher" id="main-theme-switcher">
|
||||||
|
<span class="slider round"></span>
|
||||||
|
</label>
|
||||||
|
|
@ -4,15 +4,13 @@
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
{% include theme-switcher.html %}
|
||||||
|
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
|
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
|
{% include menu-toggle.html %}
|
||||||
{% include menu.html %}
|
{% include menu.html %}
|
||||||
|
|
||||||
<!-- Icon menu -->
|
|
||||||
<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
|
|
||||||
<div id="menu"></div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
{% if site.custom_header == true %}
|
{% if site.custom_header == true %}
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,14 @@
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
{% include theme-switcher.html %}
|
||||||
|
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
<div id="periodical">
|
<div id="periodical">
|
||||||
|
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
|
{% include menu-toggle.html %}
|
||||||
{% include menu.html %}
|
{% include menu.html %}
|
||||||
|
|
||||||
<!-- Icon menu -->
|
|
||||||
<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
|
|
||||||
<div id="menu"></div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
{% if site.custom_header == true %}
|
{% if site.custom_header == true %}
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,15 @@
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
{% include theme-switcher.html %}
|
||||||
|
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
<div id="weekly">
|
<div id="weekly">
|
||||||
|
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
|
{% include menu-toggle.html %}
|
||||||
{% include menu.html %}
|
{% include menu.html %}
|
||||||
|
|
||||||
<!-- Icon menu -->
|
|
||||||
<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
|
|
||||||
<div id="menu"></div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
{% if site.custom_header == true %}
|
{% if site.custom_header == true %}
|
||||||
{% include header-custom.html %}
|
{% include header-custom.html %}
|
||||||
|
|
|
||||||
101
css/main.scss
101
css/main.scss
|
|
@ -53,17 +53,31 @@
|
||||||
--menu-color: #e1e1e1;
|
--menu-color: #e1e1e1;
|
||||||
--license-color: #666666;
|
--license-color: #666666;
|
||||||
}
|
}
|
||||||
// Was entered incorrectly.. Dark = Light
|
|
||||||
[data-theme="dark"] {
|
.nojs-toggle {
|
||||||
--primary-color: #666666;
|
display: none;
|
||||||
--secondary-color: #555555;
|
}
|
||||||
--font-color: #555555;
|
|
||||||
--link-color: #444444;
|
// BEGIN theme switcher
|
||||||
--bg-color: #f0f0f0;
|
#main-theme-switcher {
|
||||||
--heading-color: #666666;
|
left: 25px;
|
||||||
--block-bg-color: #d7d7d7;
|
top: 35px;
|
||||||
--block-bg-color-secondary: #c0c0c0;
|
z-index: 999;
|
||||||
--block-bg-color-heading: #a5a5a5;
|
display: block !important;
|
||||||
|
position: absolute !important;
|
||||||
|
transition: all .3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-switcher:checked ~ * {
|
||||||
|
--primary-color: #666666;
|
||||||
|
--secondary-color: #555555;
|
||||||
|
--font-color: #555555;
|
||||||
|
--link-color: #444444;
|
||||||
|
--bg-color: #f0f0f0;
|
||||||
|
--heading-color: #666666;
|
||||||
|
--block-bg-color: #d7d7d7;
|
||||||
|
--block-bg-color-secondary: #c0c0c0;
|
||||||
|
--block-bg-color-heading: #a5a5a5;
|
||||||
--table-color: #000000;
|
--table-color: #000000;
|
||||||
--head-nav-bg-color: transparent;
|
--head-nav-bg-color: transparent;
|
||||||
--head-nav-text-color: #d56f2a;
|
--head-nav-text-color: #d56f2a;
|
||||||
|
|
@ -71,14 +85,67 @@
|
||||||
--license-color: #666666;
|
--license-color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
#theme-switcher:checked ~ .switch .slider {
|
||||||
background-color: var(--bg-color);
|
background-color: #d56f2a;
|
||||||
color: var(--font-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
#theme-switcher:checked ~ .switch .slider::before {
|
||||||
background-color: var(--bg-color);
|
-webkit-transform: translateX(26px);
|
||||||
color: var(--font-color);
|
-moz-transform: translateX(26px);
|
||||||
|
-ms-transform: translateX(26px);
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
#main-theme-switcher {
|
||||||
|
top: 19px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// END theme switcher
|
||||||
|
|
||||||
|
// BEGIN menu toggle
|
||||||
|
#menu-toggle:checked ~ #nav {
|
||||||
|
-webkit-transform: translateX(-14rem);
|
||||||
|
-moz-transform: translateX(-14rem);
|
||||||
|
-ms-transform: translateX(-14rem);
|
||||||
|
transform: translateX(-14rem);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-toggle:checked ~ .menu-toggle #menu {
|
||||||
|
background: none;
|
||||||
|
transition: all 0.1s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-toggle:checked ~ .menu-toggle #menu::before {
|
||||||
|
top: 0;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-moz-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
background-color: #0F0F0F;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-toggle:checked ~ .menu-toggle #menu::after {
|
||||||
|
top: -4px;
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
-moz-transform: rotate(45deg);
|
||||||
|
-ms-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
background-color: #0F0F0F;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 940px) {
|
||||||
|
#menu-toggle:checked ~ #nav {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// END menu toggle
|
||||||
|
|
||||||
|
#wrap {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--font-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
|
||||||
86
js/main.js
86
js/main.js
|
|
@ -1,82 +1,14 @@
|
||||||
var normal = document.getElementById("nav-menu");
|
// Saves themes in-between pages to LocalStorage.
|
||||||
var reverse = document.getElementById("nav-menu-left");
|
const themeSwitcher = document.getElementById('theme-switcher');
|
||||||
|
|
||||||
var icon = normal !== null ? normal : reverse;
|
const setTheme = e => localStorage.setItem('theme', e.target.checked ? 'dark' : 'light');
|
||||||
|
const checkTheme = () => themeSwitcher.checked = localStorage.getItem('theme') === 'dark';
|
||||||
|
|
||||||
const toggleSwitches = document.querySelectorAll('.switch input[type="checkbox"]');
|
|
||||||
const currentTheme = localStorage.getItem('theme');
|
|
||||||
|
|
||||||
if (currentTheme) {
|
|
||||||
document.documentElement.setAttribute('data-theme', currentTheme);
|
|
||||||
|
|
||||||
if (currentTheme === 'dark') {
|
|
||||||
toggleSwitches.forEach(s => s.checked = true);
|
|
||||||
} else {
|
|
||||||
toggleSwitches.forEach(s => s.checked = false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleSwitches.forEach((s) => s.addEventListener('change', switchTheme, false));
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//const currentTheme = localStorage.getItem("theme");
|
|
||||||
//const btn = document.querySelector("switch");
|
|
||||||
//const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
|
|
||||||
|
|
||||||
// Toggle the "menu-open" % "menu-opn-left" classes
|
|
||||||
function toggle() {
|
|
||||||
var navRight = document.getElementById("nav");
|
|
||||||
var navLeft = document.getElementById("nav-left");
|
|
||||||
var nav = navRight !== null ? navRight : navLeft;
|
|
||||||
|
|
||||||
var button = document.getElementById("menu");
|
|
||||||
var site = document.getElementById("wrap");
|
|
||||||
|
|
||||||
if (nav.className == "menu-open" || nav.className == "menu-open-left") {
|
|
||||||
nav.className = "";
|
|
||||||
button.className = "";
|
|
||||||
site.className = "";
|
|
||||||
} else if (reverse !== null) {
|
|
||||||
nav.className += "menu-open-left";
|
|
||||||
button.className += "btn-close";
|
|
||||||
site.className += "fixed";
|
|
||||||
} else {
|
|
||||||
nav.className += "menu-open";
|
|
||||||
button.className += "btn-close";
|
|
||||||
site.className += "fixed";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ensures backward compatibility with IE old versions
|
// Ensures backward compatibility with IE old versions
|
||||||
function menuClick() {
|
if (document.addEventListener) {
|
||||||
if (document.addEventListener && icon !== null) {
|
themeSwitcher.addEventListener('click', setTheme);
|
||||||
icon.addEventListener('click', toggle);
|
} else if (document.attachEvent) {
|
||||||
} else if (document.attachEvent && icon !== null) {
|
themeSwitcher.attachEvent('onclick', setTheme);
|
||||||
icon.attachEvent('onclick', toggle);
|
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//function toggledark(checkbox) {
|
checkTheme()
|
||||||
//var elementb = document.body;
|
|
||||||
//var elementh = document.html;
|
|
||||||
//elementh.classList.toggle("dark-theme");
|
|
||||||
//elementb.classList.toggle("dark-theme");
|
|
||||||
//}
|
|
||||||
|
|
||||||
menuClick();
|
|
||||||
Loading…
Reference in a new issue