WIP Dark mode
This commit is contained in:
parent
92711fa35d
commit
371691a642
|
@ -1,6 +1,6 @@
|
|||
# Liebling
|
||||
|
||||
Liebling is a beautiful and clean Ghost theme that is easy and comfortable to use. **It's free** and you can use it for any kind of content you might have.
|
||||
Liebling is a beautiful and clean Ghost theme that is easy and comfortable to use. **It's free** and you can use it for any kind of content you might have. Now with dark mode 🌓!
|
||||
|
||||
If you use it and you like it, please consider to make a donation to support its development! 🙏🏼
|
||||
|
||||
|
@ -48,6 +48,7 @@ To get the latest version please head over the [releases page](https://github.co
|
|||
|
||||
### Liebling unique features
|
||||
|
||||
* Dark mode
|
||||
* Search
|
||||
* Custom Subscribe page
|
||||
* Custom authors page
|
||||
|
|
|
@ -54,5 +54,5 @@
|
|||
"desktop": "assets/screenshot-desktop.jpg",
|
||||
"mobile": "assets/screenshot-mobile.jpg"
|
||||
},
|
||||
"version": "0.4.1"
|
||||
"version": "0.5.0"
|
||||
}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import cssVars from 'css-vars-ponyfill'
|
||||
import $ from 'jquery'
|
||||
import slick from 'slick-carousel'
|
||||
import tippy from 'tippy.js'
|
||||
|
@ -5,6 +6,8 @@ import AOS from 'aos'
|
|||
import GhostContentAPI from '@tryghost/content-api'
|
||||
import Fuse from 'fuse.js'
|
||||
|
||||
cssVars({})
|
||||
|
||||
$(document).ready(() => {
|
||||
const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he'
|
||||
|
||||
|
|
46
src/package-lock.json
generated
46
src/package-lock.json
generated
|
@ -3531,6 +3531,11 @@
|
|||
"integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
|
||||
"dev": true
|
||||
},
|
||||
"css-vars-ponyfill": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/css-vars-ponyfill/-/css-vars-ponyfill-2.1.2.tgz",
|
||||
"integrity": "sha512-Jfff/j2AGwr+WJaIbxVroTa9sFXy9b0xe5zjWEVQ9aoeCpd0e6iOo4D+d3OoLDTWcHCf2UBTswis/hN6fKEKiA=="
|
||||
},
|
||||
"css-what": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
|
||||
|
@ -5447,8 +5452,7 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
@ -5469,14 +5473,12 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
@ -5491,20 +5493,17 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
@ -5621,8 +5620,7 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
@ -5634,7 +5632,6 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
@ -5649,7 +5646,6 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
@ -5657,14 +5653,12 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
@ -5683,7 +5677,6 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
@ -5764,8 +5757,7 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
@ -5777,7 +5769,6 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
@ -5863,8 +5854,7 @@
|
|||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
@ -5900,7 +5890,6 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
@ -5920,7 +5909,6 @@
|
|||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
@ -5964,14 +5952,12 @@
|
|||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -29,6 +29,7 @@
|
|||
"dependencies": {
|
||||
"@tryghost/content-api": "^1.0.0",
|
||||
"aos": "^2.3.4",
|
||||
"css-vars-ponyfill": "^2.1.2",
|
||||
"fitvids": "^2.0.0",
|
||||
"fuse.js": "^3.4.2",
|
||||
"jquery": "^3.3.1",
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
@import "common/reset";
|
||||
@import "common/mixins";
|
||||
@import "common/colors";
|
||||
@import "common/variables";
|
||||
@import "common/helpers";
|
||||
@import "common/global";
|
||||
|
|
29
src/sass/common/_colors.scss
Normal file
29
src/sass/common/_colors.scss
Normal file
|
@ -0,0 +1,29 @@
|
|||
:root {
|
||||
--background-color: #fff;
|
||||
--primary-foreground-color: #4a4a4a;
|
||||
--secondary-foreground-color: #000;
|
||||
--primary-subtle-color: #04aeee;
|
||||
--secondary-subtle-color: #f4f8fd;
|
||||
--titles-color: #333;
|
||||
--link-color: #293951;
|
||||
--primary-border-color: #9b9b9b;
|
||||
--secondary-border-color: aliceblue;
|
||||
--article-shadow: 0 4px 60px 0 rgba(0,0,0,.2);
|
||||
--foter-background-color: #293951;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #111;
|
||||
--primary-foreground-color: #ccc;
|
||||
--secondary-foreground-color: #fff;
|
||||
--primary-subtle-color: #04aeee;
|
||||
--secondary-subtle-color: #141920;
|
||||
--titles-color: #b4b4b4;
|
||||
--link-color: #2c5de6;
|
||||
--primary-border-color: #9b9b9b;
|
||||
--secondary-border-color: #0f0f0f;
|
||||
--article-shadow: 0 4px 0px 10px rgba(0,0,0,.2);
|
||||
--foter-background-color: #080808;
|
||||
}
|
||||
}
|
|
@ -5,12 +5,12 @@ body {
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
color: $body;
|
||||
color: var(--primary-foreground-color);
|
||||
font-size: 1rem;
|
||||
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
|
||||
font-display: swap;
|
||||
overflow-x: hidden;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
|
@ -56,17 +56,17 @@ fieldset {
|
|||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray;
|
||||
color: var(--primary-border-color);
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray;
|
||||
color: var(--primary-border-color);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray;
|
||||
color: var(--primary-border-color);
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray;
|
||||
color: var(--primary-border-color);
|
||||
}
|
||||
|
|
|
@ -1,8 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
/**
|
||||
* Helpers
|
||||
*/
|
||||
/** Helpers */
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
/** Colors */
|
||||
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$main-color: #04aeee;
|
||||
|
@ -8,7 +9,8 @@ $light-blue: #f4f8fd;
|
|||
$dark-blue: #293951;
|
||||
$gray: #9b9b9b;
|
||||
|
||||
/** Box Model */
|
||||
/** Config */
|
||||
|
||||
$mobile-space: 20px;
|
||||
$mobile-bar-height: 50px;
|
||||
$desktop-bar-height: 64px;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.m-404-subtitle {
|
||||
color: $body;
|
||||
color: var(--primary-foreground-color);
|
||||
letter-spacing: 0.4px;
|
||||
line-height: 1;
|
||||
font-size: 1.250rem;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.m-404-title {
|
||||
color: $body;
|
||||
color: var(--primary-foreground-color);
|
||||
letter-spacing: 3px;
|
||||
line-height: 1;
|
||||
font-size: 9.000rem;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.m-footer {
|
||||
flex-shrink: 0;
|
||||
background-color: $dark-blue;
|
||||
background-color: var(--foter-background-color);
|
||||
}
|
||||
|
||||
.m-footer__content {
|
||||
|
|
|
@ -4,9 +4,9 @@
|
|||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
height: 400px;
|
||||
background-color: $white;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 10px;
|
||||
border: 1px solid aliceblue;
|
||||
border: 1px solid var(--secondary-border-color);
|
||||
z-index: 1;
|
||||
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
|||
@include transform(translateY(-5px));
|
||||
|
||||
&:before {
|
||||
@include bs(0 4px 60px 0 rgba(0,0,0,.2));
|
||||
@include bs(var(--article-shadow));
|
||||
}
|
||||
|
||||
.m-article-card__author {
|
||||
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
.m-article-card__info {
|
||||
background-color: $light-blue;
|
||||
background-color: var(--secondary-subtle-color);
|
||||
}
|
||||
|
||||
.m-article-card__title {
|
||||
|
@ -94,7 +94,7 @@
|
|||
position: relative;
|
||||
height: 200px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background-color: $light-blue;
|
||||
background-color: var(--secondary-subtle-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
@ -191,7 +191,7 @@
|
|||
height: 200px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 10px 10px;
|
||||
background-color: $white;
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include respond-to('medium') {
|
||||
padding-top: 53px;
|
||||
|
@ -214,7 +214,7 @@
|
|||
position: absolute;
|
||||
top: $mobile-space;
|
||||
left: $mobile-space;
|
||||
color: $dark-blue;
|
||||
color: var(--link-color);
|
||||
letter-spacing: 0.2px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
|
@ -240,7 +240,7 @@
|
|||
}
|
||||
|
||||
.m-article-card__title {
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
letter-spacing: 0.4px;
|
||||
line-height: 1.3;
|
||||
font-size: 1.250rem;
|
||||
|
@ -257,7 +257,7 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.5;
|
||||
font-size: 1rem;
|
||||
|
@ -276,7 +276,7 @@
|
|||
.m-article-card__author-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
letter-spacing: 0.2px;
|
||||
font-size: 0.875rem;
|
||||
|
||||
|
@ -308,7 +308,7 @@
|
|||
margin-left: 22px;
|
||||
|
||||
a {
|
||||
color: $body;
|
||||
color: var(--primary-foreground-color);
|
||||
font-size: 0.938rem;
|
||||
|
||||
span {
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
.m-author {
|
||||
padding: 40px $mobile-space;
|
||||
border-color: $light-blue;
|
||||
border-color: var(--secondary-subtle-color);
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
border-style: solid;
|
||||
margin: 0 auto;
|
||||
|
||||
|
@ -17,7 +19,7 @@
|
|||
}
|
||||
|
||||
&.no-subscribers {
|
||||
background-color: $light-blue;
|
||||
background-color: var(--secondary-subtle-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
top: 50%;
|
||||
height: 1px;
|
||||
z-index: 1;
|
||||
background-color: $light-blue;
|
||||
background-color: var(--secondary-subtle-color);
|
||||
}
|
||||
|
||||
.m-load-comments__iframe {
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
&.fixed {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
background-color: $white;
|
||||
background-color: var(--background-color);
|
||||
@include transform(translateY(-100%));
|
||||
@include bs(0 4px 8px rgba(0, 0, 0, 0.05));
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
&.submenu-is-active {
|
||||
background-color: $white;
|
||||
background-color: var(--background-color);
|
||||
|
||||
.m-header__shadow {
|
||||
display: none;
|
||||
|
@ -36,6 +36,6 @@
|
|||
}
|
||||
|
||||
&.with-picture {
|
||||
background-color: $white;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
li {
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
letter-spacing: 0.3px;
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 15px;
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.m-recent-article__title {
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
letter-spacing: 0.2px;
|
||||
line-height: 1.438rem;
|
||||
font-size: 1rem;
|
||||
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
.m-recent-article__date {
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
letter-spacing: 0.15px;
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
padding: 30px 0 20px 0;
|
||||
background-color: $white;
|
||||
border-top: 1px solid aliceblue;
|
||||
background-color: var(--background-color);
|
||||
border-top: 1px solid var(--secondary-border-color);
|
||||
z-index: 5;
|
||||
@include bs(0 60px 60px rgba(0,0,0,0.25));
|
||||
}
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: $dark-blue;
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
min-height: 365px;
|
||||
overflow: hidden;
|
||||
padding: 100px 0 75px;
|
||||
background-color: $light-blue;
|
||||
background-color: var(--secondary-subtle-color);
|
||||
@extend .content-centered;
|
||||
|
||||
@include respond-to('medium') {
|
||||
|
@ -14,7 +14,7 @@
|
|||
|
||||
&.with-picture {
|
||||
color: $white;
|
||||
background-color: darken($body, 25%);
|
||||
background-color: $black;
|
||||
|
||||
@include respond-to('medium') {
|
||||
min-height: 450px;
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
.m-result__title {
|
||||
color: $body;
|
||||
color: var(--primary-foreground-color);
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.4;
|
||||
font-size: 1rem;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.m-subscribe-section {
|
||||
padding: 50px 0;
|
||||
background-color: $light-blue;
|
||||
background-color: var(--secondary-subtle-color);
|
||||
|
||||
@include respond-to('medium') {
|
||||
padding: 80px 0;
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
|
||||
|
||||
&.outlined {
|
||||
border: 1px solid $body;
|
||||
border: 1px solid var(--primary-foreground-color);
|
||||
}
|
||||
|
||||
&.filled,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.m-icon-button {
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
font-size: 1.125rem;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
|
@ -11,11 +11,11 @@
|
|||
|
||||
&.outlined {
|
||||
border-radius: 50%;
|
||||
border: 1px solid $body;
|
||||
border: 1px solid var(--primary-foreground-color);
|
||||
}
|
||||
|
||||
&.filled {
|
||||
background-color: $white;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 50%;
|
||||
@include bs(0 2px 4px rgba(108, 108, 108, 0.2));
|
||||
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
|
||||
|
@ -52,7 +52,7 @@
|
|||
height: 32px;
|
||||
font-size: 0.625rem;
|
||||
z-index: 2;
|
||||
background-color: $white;
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include respond-to('medium') {
|
||||
top: 30px;
|
||||
|
@ -113,7 +113,7 @@
|
|||
|
||||
&.in-featured-articles {
|
||||
position: absolute;
|
||||
color: $white;
|
||||
color: var(--background-color);
|
||||
font-size: 0.875rem;
|
||||
width: 29px;
|
||||
height: 22px;
|
||||
|
@ -175,7 +175,7 @@
|
|||
}
|
||||
|
||||
&.in-share {
|
||||
color: $titles;
|
||||
color: var(--titles-color);
|
||||
font-size: 0.750rem;
|
||||
text-decoration: none;
|
||||
width: 31px;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.m-section-title {
|
||||
color: $body;
|
||||
color: var(--primary-foreground-color);
|
||||
text-align: center;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.3;
|
||||
|
|
|
@ -411,7 +411,7 @@
|
|||
}
|
||||
|
||||
button:not(.m-icon-button) {
|
||||
border: 1px solid $body !important;
|
||||
border: 1px solid var(--primary-foreground-color) !important;
|
||||
@extend .m-button;
|
||||
}
|
||||
|
||||
|
@ -432,7 +432,7 @@
|
|||
|
||||
.kg-bookmark-container {
|
||||
display: flex;
|
||||
color: $body;
|
||||
color: var(--primary-foreground-color);
|
||||
text-decoration: none !important;
|
||||
min-height: 148px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px,
|
||||
|
|
Loading…
Reference in a new issue