From 5a16a0c40e867921512d0ed7044e7f7c0b85c3df Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Fri, 2 Aug 2019 16:57:51 +0200 Subject: [PATCH] added dark mode option --- liquet/css/home.css | 45 +++++++++++++++++------------ liquet/css/singular.css | 15 +++++----- liquet/functions.php | 4 +++ liquet/index.php | 3 ++ liquet/js/lights.js | 22 +++++++++++++++ liquet/singular.php | 5 +++- liquet/style.css | 56 ++++++++++++++++++++----------------- liquet/vendor/icons/sun.svg | 1 + 8 files changed, 99 insertions(+), 52 deletions(-) create mode 100644 liquet/js/lights.js create mode 100644 liquet/vendor/icons/sun.svg diff --git a/liquet/css/home.css b/liquet/css/home.css index 17a6dc9..8e1b9b0 100644 --- a/liquet/css/home.css +++ b/liquet/css/home.css @@ -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; + } } \ No newline at end of file diff --git a/liquet/css/singular.css b/liquet/css/singular.css index 9116859..47196f3 100644 --- a/liquet/css/singular.css +++ b/liquet/css/singular.css @@ -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; } } \ No newline at end of file diff --git a/liquet/functions.php b/liquet/functions.php index 15c3527..b9421b1 100644 --- a/liquet/functions.php +++ b/liquet/functions.php @@ -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' ); diff --git a/liquet/index.php b/liquet/index.php index cc138fa..0f31e80 100644 --- a/liquet/index.php +++ b/liquet/index.php @@ -7,6 +7,9 @@ get_header(); $tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] ); ?>
+ + lights +
diff --git a/liquet/style.css b/liquet/style.css index e529897..0299d50 100644 --- a/liquet/style.css +++ b/liquet/style.css @@ -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; + } } \ No newline at end of file diff --git a/liquet/vendor/icons/sun.svg b/liquet/vendor/icons/sun.svg new file mode 100644 index 0000000..a585aff --- /dev/null +++ b/liquet/vendor/icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file