Git-Mirrors/revuo-weekly
1
0
Fork 0
mirror of https://github.com/rottenwheel/revuo-weekly.git synced 2024-10-01 04:35:37 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

remove dependency on JS for menu and theme toggle

Browse Source
This commit is contained in:
recanman 2023-10-15 16:40:48 -07:00
parent 706171b42e
commit ffa3d1aacf
9 changed files with 111 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/header-custom.html
View File

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

5
_includes/menu.html
View File

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

8
_layouts/default.html
View File

@ -4,16 +4,14 @@
{% 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 %}
{% include header-custom.html %} {% include header-custom.html %}

8
_layouts/revuo-period.html
View File

@ -4,17 +4,15 @@
{% 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 %}
{% include header-custom.html %} {% include header-custom.html %}

8
_layouts/revuo-weekly.html
View File

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

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

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