mirror of
https://github.com/rottenwheel/revuo-weekly.git
synced 2024-10-01 04:35:37 -04:00
Add dark-theme
This commit is contained in:
parent
5f2a2f2187
commit
4c00b94a36
72
Gemfile.lock
Normal file
72
Gemfile.lock
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
GEM
|
||||||
|
remote: https://rubygems.org/
|
||||||
|
specs:
|
||||||
|
addressable (2.8.0)
|
||||||
|
public_suffix (>= 2.0.2, < 5.0)
|
||||||
|
colorator (1.1.0)
|
||||||
|
concurrent-ruby (1.1.9)
|
||||||
|
em-websocket (0.5.3)
|
||||||
|
eventmachine (>= 0.12.9)
|
||||||
|
http_parser.rb (~> 0)
|
||||||
|
eventmachine (1.2.7)
|
||||||
|
ffi (1.15.5)
|
||||||
|
forwardable-extended (2.6.0)
|
||||||
|
http_parser.rb (0.8.0)
|
||||||
|
i18n (1.10.0)
|
||||||
|
concurrent-ruby (~> 1.0)
|
||||||
|
jekyll (4.2.1)
|
||||||
|
addressable (~> 2.4)
|
||||||
|
colorator (~> 1.0)
|
||||||
|
em-websocket (~> 0.5)
|
||||||
|
i18n (~> 1.0)
|
||||||
|
jekyll-sass-converter (~> 2.0)
|
||||||
|
jekyll-watch (~> 2.0)
|
||||||
|
kramdown (~> 2.3)
|
||||||
|
kramdown-parser-gfm (~> 1.0)
|
||||||
|
liquid (~> 4.0)
|
||||||
|
mercenary (~> 0.4.0)
|
||||||
|
pathutil (~> 0.9)
|
||||||
|
rouge (~> 3.0)
|
||||||
|
safe_yaml (~> 1.0)
|
||||||
|
terminal-table (~> 2.0)
|
||||||
|
jekyll-feed (0.16.0)
|
||||||
|
jekyll (>= 3.7, < 5.0)
|
||||||
|
jekyll-paginate (1.1.0)
|
||||||
|
jekyll-sass-converter (2.1.0)
|
||||||
|
sassc (> 2.0.1, < 3.0)
|
||||||
|
jekyll-watch (2.2.1)
|
||||||
|
listen (~> 3.0)
|
||||||
|
kramdown (2.3.1)
|
||||||
|
rexml
|
||||||
|
kramdown-parser-gfm (1.1.0)
|
||||||
|
kramdown (~> 2.0)
|
||||||
|
liquid (4.0.3)
|
||||||
|
listen (3.7.1)
|
||||||
|
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||||
|
rb-inotify (~> 0.9, >= 0.9.10)
|
||||||
|
mercenary (0.4.0)
|
||||||
|
pathutil (0.16.2)
|
||||||
|
forwardable-extended (~> 2.6)
|
||||||
|
public_suffix (4.0.6)
|
||||||
|
rb-fsevent (0.11.1)
|
||||||
|
rb-inotify (0.10.1)
|
||||||
|
ffi (~> 1.0)
|
||||||
|
rexml (3.2.5)
|
||||||
|
rouge (3.28.0)
|
||||||
|
safe_yaml (1.0.5)
|
||||||
|
sassc (2.4.0)
|
||||||
|
ffi (~> 1.9)
|
||||||
|
terminal-table (2.0.0)
|
||||||
|
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||||
|
unicode-display_width (1.8.0)
|
||||||
|
|
||||||
|
PLATFORMS
|
||||||
|
ruby
|
||||||
|
|
||||||
|
DEPENDENCIES
|
||||||
|
jekyll (~> 4.0)
|
||||||
|
jekyll-feed
|
||||||
|
jekyll-paginate
|
||||||
|
|
||||||
|
BUNDLED WITH
|
||||||
|
2.1.2
|
@ -31,7 +31,7 @@ version: "1.1.0"
|
|||||||
excerpt_separator: <!--more-->
|
excerpt_separator: <!--more-->
|
||||||
|
|
||||||
# Options
|
# Options
|
||||||
custom_header: false
|
custom_header: true
|
||||||
custom_nav_footer: false
|
custom_nav_footer: false
|
||||||
reverse: false
|
reverse: false
|
||||||
|
|
||||||
|
@ -1,5 +1,113 @@
|
|||||||
|
<style>
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: #2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 1px #2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(26px);
|
||||||
|
-ms-transform: translateX(26px);
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rounded sliders */
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin-top: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
height: 50px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<label class="switch">-->
|
||||||
|
<!--<input type="checkbox" checked>-->
|
||||||
|
<!--<span class="slider round"></span>-->
|
||||||
|
<!--</label>-->
|
||||||
<header id="header">
|
<header id="header">
|
||||||
|
|
||||||
<!-- Your custom header here -->
|
<!-- Your custom header here -->
|
||||||
|
<div>
|
||||||
|
<a href="{{ site.baseurl }}">
|
||||||
|
<img 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Add dark mode here-->
|
||||||
|
<div>
|
||||||
|
<table align="center">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img src="{{ "/img/dark-theme-icon2.png" | prepend: site.baseurl | replace: '//', '/' }}" height="50px" width="50px" alt="Dark Theme"-->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" onclick="toggledark(this)">
|
||||||
|
<span class="slider round"></span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Finish dark mode-->
|
||||||
|
|
||||||
</header>
|
</header>
|
@ -18,9 +18,9 @@ html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img {
|
|||||||
|
|
||||||
/*- Base color -*/
|
/*- Base color -*/
|
||||||
|
|
||||||
$main-color: #45494f;
|
$main-color: #999999;
|
||||||
$background-color: #FDFDFD;
|
$background-color: #0F0F0F;
|
||||||
$text-color: #222222;
|
$text-color: #888888;
|
||||||
|
|
||||||
/*- Base settings -*/
|
/*- Base settings -*/
|
||||||
|
|
||||||
@ -50,8 +50,8 @@ a {
|
|||||||
transition: all .3s ease;
|
transition: all .3s ease;
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: #d26e2b;
|
color: #999999;
|
||||||
border-bottom: 2px dotted #d26e2b;
|
border-bottom: 2px dotted #333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
4
assets/css/main.css
Normal file
4
assets/css/main.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
@import "minima";
|
||||||
|
|
@ -4,3 +4,69 @@
|
|||||||
|
|
||||||
//Import
|
//Import
|
||||||
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss";
|
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////
|
||||||
|
//////////// LIGHT THEME ////////////////
|
||||||
|
/////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////
|
||||||
|
|
||||||
|
//html {
|
||||||
|
//background-color: #0f0f0f;
|
||||||
|
////background-color: #f0f0f0;
|
||||||
|
|
||||||
|
//html {
|
||||||
|
//[>background-color: #0f0f0f;<]
|
||||||
|
////background-color: #f0f0f0;
|
||||||
|
//background-color: lightblue;
|
||||||
|
//}
|
||||||
|
|
||||||
|
|
||||||
|
////body {
|
||||||
|
//////background-color: #f0f0f0;
|
||||||
|
////background-color: #0f0f0f;
|
||||||
|
|
||||||
|
//body {
|
||||||
|
//[>background-color: #0f0f0f;<]
|
||||||
|
////background-color: #f0f0f0;
|
||||||
|
//background-color: lightblue;
|
||||||
|
//}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #888888;
|
||||||
|
--secondary-color: #666666;
|
||||||
|
--font-color: #999999;
|
||||||
|
--bg-color: #0f0f0f;
|
||||||
|
--heading-color: #454545;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--primary-color: #666666;
|
||||||
|
--secondary-color: #555555;
|
||||||
|
--font-color: #555555;
|
||||||
|
--bg-color: #f0f0f0;
|
||||||
|
--heading-color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
BIN
img/dark-theme-icon.png
Normal file
BIN
img/dark-theme-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
BIN
img/dark-theme-icon2.png
Normal file
BIN
img/dark-theme-icon2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
37
js/main.js
37
js/main.js
@ -3,6 +3,36 @@ 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 currentTheme = localStorage.getItem('theme');
|
||||||
|
|
||||||
|
if (currentTheme) {
|
||||||
|
document.documentElement.setAttribute('data-theme', currentTheme);
|
||||||
|
|
||||||
|
if (currentTheme === 'dark') {
|
||||||
|
toggleSwitch.checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchTheme(e) {
|
||||||
|
if (e.target.checked) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
else { document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleSwitch.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
|
// Toggle the "menu-open" % "menu-opn-left" classes
|
||||||
function toggle() {
|
function toggle() {
|
||||||
var navRight = document.getElementById("nav");
|
var navRight = document.getElementById("nav");
|
||||||
@ -38,4 +68,11 @@ function menuClick() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//function toggledark(checkbox) {
|
||||||
|
//var elementb = document.body;
|
||||||
|
//var elementh = document.html;
|
||||||
|
//elementh.classList.toggle("dark-theme");
|
||||||
|
//elementb.classList.toggle("dark-theme");
|
||||||
|
//}
|
||||||
|
|
||||||
menuClick();
|
menuClick();
|
Loading…
Reference in New Issue
Block a user