mirror of
https://github.com/cupcakearmy/liquet.git
synced 2024-12-22 08:06:24 +00:00
added dark mode option
This commit is contained in:
cupcakearmy
parent
088b298708
commit
5a16a0c40e
@ -14,18 +14,6 @@
|
||||
font-size: 5.5vw;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 40em) {
|
||||
#home #header h1 {
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 40em) {
|
||||
#home #header h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
#home #list-container {
|
||||
}
|
||||
|
||||
@ -38,12 +26,6 @@
|
||||
padding: 0 2em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 40em) {
|
||||
#home #list {
|
||||
width: var(--text-width);
|
||||
}
|
||||
}
|
||||
|
||||
#home #list > .item {
|
||||
padding: .25em 1em;
|
||||
margin: 1.5em 0;
|
||||
@ -81,4 +63,31 @@
|
||||
|
||||
#home #list hr {
|
||||
margin: 0 1.5em;
|
||||
}
|
||||
|
||||
#home #lights img {
|
||||
position: fixed;
|
||||
top: .25em;
|
||||
right: .25em;
|
||||
transition: var(--animation);
|
||||
height: var(--icon-width);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 40em) {
|
||||
#home #list {
|
||||
width: var(--text-width);
|
||||
}
|
||||
|
||||
#home #header h1 {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
#home #header h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#home #lights img{
|
||||
top: .5em;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
@ -2,18 +2,15 @@
|
||||
margin: .25em .25em;
|
||||
vertical-align: middle;
|
||||
transition: var(--animation);
|
||||
height: var(--icon-width);
|
||||
}
|
||||
|
||||
#singular #top img:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
#singular #top #left img {
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
#singular #top #right img {
|
||||
width: 1em;
|
||||
#singular #top img.reduce {
|
||||
height: calc(var(--icon-width) * .8);
|
||||
}
|
||||
|
||||
#singular #main {
|
||||
@ -122,6 +119,10 @@
|
||||
}
|
||||
|
||||
#singular #top img {
|
||||
margin: .25em 1em;
|
||||
margin: .25em .5em;
|
||||
}
|
||||
|
||||
#singular #top{
|
||||
padding: 0 .5em;
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,10 @@ add_theme_support( 'title-tag' );
|
||||
add_theme_support( 'post-thumbnails' );
|
||||
|
||||
add_action( 'wp_enqueue_scripts', function () {
|
||||
// JS
|
||||
wp_enqueue_script( 'liquet-lights', get_template_directory_uri() . '/js/lights.js' );
|
||||
|
||||
// CSS
|
||||
wp_enqueue_style( 'flex', get_template_directory_uri() . '/css/flex.css' );
|
||||
wp_enqueue_style( 'liquet', get_template_directory_uri() . '/style.css' );
|
||||
wp_enqueue_style( 'liquet-home', get_template_directory_uri() . '/css/home.css' );
|
||||
|
||||
@ -7,6 +7,9 @@ get_header();
|
||||
$tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] );
|
||||
?>
|
||||
<div id="home">
|
||||
<a id="lights" href="javascript:void(0);" onclick="window.toggleLights();">
|
||||
<img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
|
||||
</a>
|
||||
<div class="flex container vertical middle" id="list-header">
|
||||
<div id="header">
|
||||
<a href="<?= get_bloginfo( 'wpurl' ); ?>">
|
||||
|
||||
22
liquet/js/lights.js
Normal file
22
liquet/js/lights.js
Normal file
@ -0,0 +1,22 @@
|
||||
;((window) => {
|
||||
const key = 'nicco.io:blog:lights'
|
||||
const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} '
|
||||
const style = window.document.createElement('style')
|
||||
document.head.appendChild(style)
|
||||
|
||||
const on = () => {
|
||||
style.sheet.deleteRule(parseInt(window.localStorage.getItem(key)))
|
||||
window.localStorage.removeItem(key)
|
||||
}
|
||||
|
||||
const off = () => {
|
||||
const i = style.sheet.insertRule(CSS)
|
||||
window.localStorage.setItem(key, i)
|
||||
}
|
||||
|
||||
const isDark = () => window.localStorage.getItem(key) !== null
|
||||
|
||||
if (isDark()) off()
|
||||
|
||||
window.toggleLights = () => isDark() ? on() : off()
|
||||
})(window)
|
||||
@ -28,9 +28,12 @@ $dates = getDates();
|
||||
$saved = get_option( 'website_url' );
|
||||
if ( $saved ) : ?>
|
||||
<a href="<?= $saved; ?>" target="_blank">
|
||||
<img src="<?= get_template_directory_uri() . '/vendor/logos/website.png' ?>" alt="website"/>
|
||||
<img class="reduce" src="<?= get_template_directory_uri() . '/vendor/logos/website.png' ?>" alt="website"/>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<a href="javascript:void(0);" onclick="window.toggleLights();">
|
||||
<img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,6 +21,7 @@ Theme URI: https://github.com/cupcakearmy/liquet
|
||||
--text-width: 35rem;
|
||||
--animation: all 100ms ease;
|
||||
--small-shadow: 0 0.2em 0.5em -0.1em #00000014;
|
||||
--icon-width: 1.5em;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@ -91,31 +92,6 @@ hr {
|
||||
margin-top: -.25em;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 40em) {
|
||||
.tags::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
background: transparent;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.tags::-webkit-scrollbar-thumb {
|
||||
background: var(--clr-dark);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tags > a.tag {
|
||||
margin: .25em;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tags > a.tag {
|
||||
padding: .25em;
|
||||
background: #eee;
|
||||
@ -145,6 +121,34 @@ img.icon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
.spacer {
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 40em) {
|
||||
.tags::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
background: transparent;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.tags::-webkit-scrollbar-thumb {
|
||||
background: var(--clr-dark);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tags > a.tag {
|
||||
margin: .25em;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.gohome {
|
||||
padding: .25em;
|
||||
}
|
||||
}
|
||||
1
liquet/vendor/icons/sun.svg
vendored
Normal file
1
liquet/vendor/icons/sun.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 387c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4v-46.2c0-8.5-6.9-15.4-15.4-15.4zM256 48c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4V63.4c0-8.5-6.9-15.4-15.4-15.4zM125 256c0-8.5-6.9-15.4-15.4-15.4H63.4c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4zM448.6 240.6h-46.2c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4s-6.9-15.4-15.4-15.4zM152.5 344.1c-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5l32.7-32.7c6-6 6-15.8 0-21.8-2.9-2.9-6.8-4.5-10.9-4.5zM359.5 167.9c4.1 0 8-1.6 10.9-4.5l32.7-32.7c2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5zM130.7 108.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-2.9 2.9-4.5 6.8-4.5 10.9 0 4.1 1.6 8 4.5 10.9l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zM370.4 348.6c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-6 6-6 15.8 0 21.8l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zM256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue
Block a user