yann/liebling
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Support dark mode

Browse source
This commit is contained in:
Eduardo 2019-10-05 23:01:45 +02:00
parent 18a7f8db63 c73678c4f0
commit 13869264d7
41 changed files with 149 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -1,6 +1,6 @@
# Liebling # 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! 🙏🏼 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 ### Liebling unique features
* Dark mode
* Search * Search
* Custom Subscribe page * Custom Subscribe page
* Custom authors page * Custom authors page

2
package.json
View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg", "desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg" "mobile": "assets/screenshot-mobile.jpg"
}, },
"version": "0.4.4" "version": "0.5.0"
} }

2
page-authors.hbs
View file

@ -38,7 +38,9 @@ into the {body} of the default.hbs template --}}
</div> </div>
<div class="m-article-card__info"> <div class="m-article-card__info">
<a href="{{url}}" class="m-article-card__info-link"> <a href="{{url}}" class="m-article-card__info-link">
{{#if bio}}
<p class="m-article-card__excerpt">{{bio}}</p> <p class="m-article-card__excerpt">{{bio}}</p>
{{/if}}
</a> </a>
<div class="m-article-card__author-stats"> <div class="m-article-card__author-stats">
<span> <span>

2
post.hbs
View file

@ -49,7 +49,7 @@ into the {body} of the default.hbs template --}}
<button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top"> <button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top">
<span class="icon-arrow-top"></span> <span class="icon-arrow-top"></span>
<svg> <svg>
<circle class="progress-ring__circle js-progress" stroke="#04aeee" fill="transparent" r="0" /> <circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
</svg> </svg>
</button> </button>
</div> </div>

3
src/js/app.js
View file

@ -1,9 +1,12 @@
import cssVars from 'css-vars-ponyfill'
import $ from 'jquery' import $ from 'jquery'
import slick from 'slick-carousel' import slick from 'slick-carousel'
import tippy from 'tippy.js' import tippy from 'tippy.js'
import AOS from 'aos' import AOS from 'aos'
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
cssVars({})
$(document).ready(() => { $(document).ready(() => {
const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he' const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he'

5
src/package-lock.json generated
View file

@ -3454,6 +3454,11 @@
"integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=", "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
"dev": true "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": { "css-what": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",

1
src/package.json
View file

@ -28,6 +28,7 @@
}, },
"dependencies": { "dependencies": {
"aos": "^2.3.4", "aos": "^2.3.4",
"css-vars-ponyfill": "^2.1.2",
"fitvids": "^2.0.0", "fitvids": "^2.0.0",
"fuse.js": "^3.4.2", "fuse.js": "^3.4.2",
"jquery": "^3.3.1", "jquery": "^3.3.1",

1
src/sass/app.scss
View file

@ -3,6 +3,7 @@
@import "common/reset"; @import "common/reset";
@import "common/mixins"; @import "common/mixins";
@import "common/variables"; @import "common/variables";
@import "common/themes";
@import "common/helpers"; @import "common/helpers";
@import "common/global"; @import "common/global";
@import "common/icons"; @import "common/icons";

8
src/sass/common/_global.scss
View file

@ -5,12 +5,12 @@ body {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
color: $body; color: var(--primary-foreground-color);
font-size: 1rem; font-size: 1rem;
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-display: swap; font-display: swap;
overflow-x: hidden; overflow-x: hidden;
background-color: white; background-color: var(--background-color);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -50,6 +50,10 @@ fieldset {
text-align: left !important; text-align: left !important;
} }
.medium-zoom-overlay {
background-color: var(--background-color) !important;
}
.medium-zoom-overlay, .medium-zoom-overlay,
.medium-zoom-image { .medium-zoom-image {
z-index: 5; z-index: 5;

6
src/sass/common/_helpers.scss
View file

@ -1,8 +1,4 @@
@charset "UTF-8"; /** Helpers */
/**
* Helpers
*/
.hide { .hide {
display: none; display: none;

39
src/sass/common/_themes.scss Normal file
View file

@ -0,0 +1,39 @@
: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-normal: 0 10px 10px rgba(0,0,0,0.08);
--article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
--transparent-background-color: rgba(255,255,255,0.99);
--foter-background-color: #293951;
--submenu-shadow-color-opacity: 0.25;
--button-shadow-color-normal: rgba(108, 108, 108, 0.2);
--button-shadow-color-hover: rgba(108, 108, 108, 0.3);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111;
--primary-foreground-color: #ccc;
--secondary-foreground-color: #fff;
--primary-subtle-color: #2c2fe6;
--secondary-subtle-color: #141920;
--titles-color: #b4b4b4;
--link-color: #2c2fe6;
--primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f;
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
--article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
--transparent-background-color: rgba(0,0,0,0.99);
--foter-background-color: #080808;
--submenu-shadow-color-opacity: 0.55;
--button-shadow-color-normal: rgba(10, 10, 10, 0.5);
--button-shadow-color-hover: rgba(10, 10, 10, 0.5);
}
}

8
src/sass/common/_variables.scss
View file

@ -1,14 +1,12 @@
/** Colors */ /** Colors */
$white: #fff; $white: #fff;
$black: #000; $black: #000;
$main-color: #04aeee;
$titles: #333; $titles: #333;
$body: #4a4a4a;
$light-blue: #f4f8fd;
$dark-blue: #293951;
$gray: #9b9b9b; $gray: #9b9b9b;
/** Box Model */ /** Config */
$mobile-space: 20px; $mobile-space: 20px;
$mobile-bar-height: 50px; $mobile-bar-height: 50px;
$desktop-bar-height: 64px; $desktop-bar-height: 64px;

2
src/sass/components/404/_subtitle.scss
View file

@ -1,5 +1,5 @@
.m-404-subtitle { .m-404-subtitle {
color: $body; color: var(--primary-foreground-color);
letter-spacing: 0.4px; letter-spacing: 0.4px;
line-height: 1; line-height: 1;
font-size: 1.250rem; font-size: 1.250rem;

2
src/sass/components/404/_title.scss
View file

@ -1,5 +1,5 @@
.m-404-title { .m-404-title {
color: $body; color: var(--primary-foreground-color);
letter-spacing: 3px; letter-spacing: 3px;
line-height: 1; line-height: 1;
font-size: 9.000rem; font-size: 9.000rem;

2
src/sass/components/_footer.scss
View file

@ -1,6 +1,6 @@
.m-footer { .m-footer {
flex-shrink: 0; flex-shrink: 0;
background-color: $dark-blue; background-color: var(--foter-background-color);
} }
.m-footer__content { .m-footer__content {

33
src/sass/components/articles/_article-card.scss
View file

@ -4,9 +4,9 @@
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
height: 400px; height: 400px;
background-color: $white; background-color: var(--background-color);
border-radius: 10px; border-radius: 10px;
border: 1px solid aliceblue; border: 1px solid var(--secondary-border-color);
z-index: 1; z-index: 1;
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
@ -14,7 +14,7 @@
@include transform(translateY(-5px)); @include transform(translateY(-5px));
&:before { &:before {
@include bs(0 4px 60px 0 rgba(0,0,0,.2)); @include bs(var(--article-shadow-hover));
} }
.m-article-card__author { .m-article-card__author {
@ -43,7 +43,7 @@
} }
.m-article-card__info { .m-article-card__info {
background-color: $light-blue; background-color: var(--secondary-subtle-color);
} }
.m-article-card__title { .m-article-card__title {
@ -85,7 +85,7 @@
bottom: 0; bottom: 0;
left: 10px; left: 10px;
border-radius: 10px; border-radius: 10px;
@include bs(0 10px 10px rgba(0,0,0,0.08)); @include bs(var(--article-shadow-normal));
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
} }
} }
@ -94,7 +94,7 @@
position: relative; position: relative;
height: 200px; height: 200px;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
background-color: $light-blue; background-color: var(--secondary-subtle-color);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -191,7 +191,7 @@
height: 200px; height: 200px;
overflow: hidden; overflow: hidden;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
background-color: $white; background-color: var(--background-color);
@include respond-to('medium') { @include respond-to('medium') {
padding-top: 53px; padding-top: 53px;
@ -214,7 +214,7 @@
position: absolute; position: absolute;
top: $mobile-space; top: $mobile-space;
left: $mobile-space; left: $mobile-space;
color: $dark-blue; color: var(--link-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
@ -240,7 +240,7 @@
} }
.m-article-card__title { .m-article-card__title {
color: $titles; color: var(--titles-color);
letter-spacing: 0.4px; letter-spacing: 0.4px;
line-height: 1.3; line-height: 1.3;
font-size: 1.250rem; font-size: 1.250rem;
@ -257,26 +257,17 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
color: $titles; color: var(--titles-color);
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.5; line-height: 1.5;
font-size: 1rem; font-size: 1rem;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
} }
.m-article-card__timestamp, .m-article-card__timestamp,
.m-article-card__author-stats { .m-article-card__author-stats {
display: flex; display: flex;
align-items: center; align-items: center;
color: $titles; color: var(--titles-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
font-size: 0.875rem; font-size: 0.875rem;
@ -308,7 +299,7 @@
margin-left: 22px; margin-left: 22px;
a { a {
color: $body; color: var(--primary-foreground-color);
font-size: 0.938rem; font-size: 0.938rem;
span { span {

4
src/sass/components/articles/_featured-article.scss
View file

@ -1,7 +1,7 @@
.m-featured-article { .m-featured-article {
position: relative; position: relative;
height: 100%; height: 100%;
background-color: $main-color; background-color: var(--primary-subtle-color);
z-index: 1; z-index: 1;
&:hover { &:hover {
@ -12,7 +12,7 @@
&.no-picture { &.no-picture {
.m-featured-article__picture { .m-featured-article__picture {
background-color: $dark-blue; background-color: var(--link-color);
} }
} }
} }

4
src/sass/components/articles/_featured-slider.scss
View file

@ -11,7 +11,7 @@
} }
&:before { &:before {
@include bs(0 4px 60px 0 rgba(0,0,0,.2)); @include bs(var(--article-shadow-hover));
} }
} }
@ -36,7 +36,7 @@
bottom: 0; bottom: 0;
left: 10px; left: 10px;
border-radius: 10px; border-radius: 10px;
@include bs(0 10px 10px rgba(0,0,0,0.08)); @include bs(var(--article-shadow-normal));
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
} }
} }

2
src/sass/components/articles/_share.scss
View file

@ -5,7 +5,7 @@
width: 100%; width: 100%;
height: 45px; height: 45px;
z-index: 3; z-index: 3;
background-color: rgba(255,255,255,0.98); background-color: var(--transparent-background-color);
@include bs(0 -4px 10px rgba(0,0,0,0.1)); @include bs(0 -4px 10px rgba(0,0,0,0.1));
@include respond-to('medium') { @include respond-to('medium') {

12
src/sass/components/author/_author.scss
View file

@ -1,8 +1,10 @@
.m-author { .m-author {
padding: 40px $mobile-space; padding: 40px $mobile-space;
border-color: $light-blue; border-color: var(--secondary-subtle-color);
border-top-width: 2px; border-top-width: 1px;
border-bottom-width: 2px; border-bottom-width: 1px;
border-left-width: 0;
border-right-width: 0;
border-style: solid; border-style: solid;
margin: 0 auto; margin: 0 auto;
@ -17,7 +19,7 @@
} }
&.no-subscribers { &.no-subscribers {
background-color: $light-blue; background-color: var(--secondary-subtle-color);
} }
} }
@ -65,7 +67,7 @@
} }
.m-author__name { .m-author__name {
color: $dark-blue; color: var(--link-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1.3; line-height: 1.3;
font-size: 1.125rem; font-size: 1.125rem;

2
src/sass/components/comments/_load-comments.scss
View file

@ -15,7 +15,7 @@
top: 50%; top: 50%;
height: 1px; height: 1px;
z-index: 1; z-index: 1;
background-color: $light-blue; background-color: var(--secondary-subtle-color);
} }
.m-load-comments__iframe { .m-load-comments__iframe {

6
src/sass/components/header/_header.scss
View file

@ -12,7 +12,7 @@
&.fixed { &.fixed {
position: fixed; position: fixed;
opacity: 0; opacity: 0;
background-color: $white; background-color: var(--background-color);
@include transform(translateY(-100%)); @include transform(translateY(-100%));
@include bs(0 4px 8px rgba(0, 0, 0, 0.05)); @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)); @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
@ -28,7 +28,7 @@
} }
&.submenu-is-active { &.submenu-is-active {
background-color: $white; background-color: var(--background-color);
.m-header__shadow { .m-header__shadow {
display: none; display: none;
@ -36,6 +36,6 @@
} }
&.with-picture { &.with-picture {
background-color: $white; background-color: var(--background-color);
} }
} }

2
src/sass/components/header/_menu.scss
View file

@ -8,7 +8,7 @@
opacity: 0; opacity: 0;
overflow-y: auto; overflow-y: auto;
z-index: 2; z-index: 2;
background-color: rgba(255,255,255,0.99); background-color: var(--transparent-background-color);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@include transform(scale(1.2)); @include transform(scale(1.2));
@include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)); @include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));

2
src/sass/components/header/_nav.scss
View file

@ -23,7 +23,7 @@
} }
li { li {
color: $titles; color: var(--titles-color);
letter-spacing: 0.3px; letter-spacing: 0.3px;
font-size: 1.125rem; font-size: 1.125rem;
margin-bottom: 15px; margin-bottom: 15px;

6
src/sass/components/header/_recent-article.scss
View file

@ -35,7 +35,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-color: $light-blue; background-color: var(--secondary-subtle-color);
-webkit-backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
backface-visibility: visible !important; backface-visibility: visible !important;
@include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1)); @include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1));
@ -47,7 +47,7 @@
} }
.m-recent-article__title { .m-recent-article__title {
color: $titles; color: var(--titles-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1.438rem; line-height: 1.438rem;
font-size: 1rem; font-size: 1rem;
@ -61,7 +61,7 @@
} }
.m-recent-article__date { .m-recent-article__date {
color: $titles; color: var(--titles-color);
letter-spacing: 0.15px; letter-spacing: 0.15px;
font-size: 0.813rem; font-size: 0.813rem;
} }

6
src/sass/components/header/_submenu.scss
View file

@ -8,10 +8,10 @@
left: 0; left: 0;
width: 100%; width: 100%;
padding: 30px 0 20px 0; padding: 30px 0 20px 0;
background-color: $white; background-color: var(--background-color);
border-top: 1px solid aliceblue; border-top: 1px solid var(--secondary-border-color);
z-index: 5; z-index: 5;
@include bs(0 60px 60px rgba(0,0,0,0.25)); @include bs(0 60px 60px rgba(0,0,0,var(--submenu-shadow-color-opacity)));
} }
@include respond-to('extra-large') { @include respond-to('extra-large') {

2
src/sass/components/header/_tags.scss
View file

@ -15,7 +15,7 @@
} }
a { a {
color: $dark-blue; color: var(--link-color);
} }
} }
} }

4
src/sass/components/heading/_meta.scss
View file

@ -13,7 +13,7 @@
.m-heading__meta__tag, .m-heading__meta__tag,
.m-heading__meta__time { .m-heading__meta__time {
color: $dark-blue !important; color: var(--link-color) !important;
} }
.m-heading__meta__tag { .m-heading__meta__tag {
@ -22,6 +22,6 @@
.m-heading__meta__divider { .m-heading__meta__divider {
display: inline-block; display: inline-block;
color: $gray; color: var(--primary-border-color);
margin: 0 10px; margin: 0 10px;
} }

2
src/sass/components/heading/_title.scss
View file

@ -1,5 +1,5 @@
.m-heading__title { .m-heading__title {
color: $titles; color: var(--titles-color);
letter-spacing: 0.4px; letter-spacing: 0.4px;
line-height: 1.3; line-height: 1.3;
font-size: 1.750rem; font-size: 1.750rem;

4
src/sass/components/hero/_hero.scss
View file

@ -4,7 +4,7 @@
min-height: 365px; min-height: 365px;
overflow: hidden; overflow: hidden;
padding: 100px 0 75px; padding: 100px 0 75px;
background-color: $light-blue; background-color: var(--secondary-subtle-color);
@extend .content-centered; @extend .content-centered;
@include respond-to('medium') { @include respond-to('medium') {
@ -14,7 +14,7 @@
&.with-picture { &.with-picture {
color: $white; color: $white;
background-color: darken($body, 25%); background-color: $black;
@include respond-to('medium') { @include respond-to('medium') {
min-height: 450px; min-height: 450px;

2
src/sass/components/hero/_title.scss
View file

@ -1,5 +1,5 @@
.m-hero-title { .m-hero-title {
color: $titles; color: var(--titles-color);
letter-spacing: 0.4px; letter-spacing: 0.4px;
line-height: 1.3; line-height: 1.3;
font-size: 1.750rem; font-size: 1.750rem;

6
src/sass/components/search/_result.scss
View file

@ -1,5 +1,5 @@
.m-result { .m-result {
border-bottom: 1px solid lighten($gray, 30%); border-bottom: 1px solid var(--primary-border-color);
&.last { &.last {
border-bottom: 0; border-bottom: 0;
@ -18,7 +18,7 @@
} }
.m-result__title { .m-result__title {
color: $body; color: var(--primary-foreground-color);
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.4; line-height: 1.4;
font-size: 1rem; font-size: 1rem;
@ -37,7 +37,7 @@
} }
.m-result__date { .m-result__date {
color: $titles; color: var(--titles-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
font-size: 0.813rem; font-size: 0.813rem;

2
src/sass/components/search/_search.scss
View file

@ -8,7 +8,7 @@
opacity: 0; opacity: 0;
overflow-y: auto; overflow-y: auto;
z-index: 2; z-index: 2;
background-color: rgba(255,255,255,0.99); background-color: var(--transparent-background-color);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@include transform(scale(1.2)); @include transform(scale(1.2));
@include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)); @include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));

4
src/sass/components/subscribe/_subscribe-section.scss
View file

@ -1,6 +1,6 @@
.m-subscribe-section { .m-subscribe-section {
padding: 50px 0; padding: 50px 0;
background-color: $light-blue; background-color: var(--secondary-subtle-color);
@include respond-to('medium') { @include respond-to('medium') {
padding: 80px 0; padding: 80px 0;
@ -38,7 +38,7 @@
} }
.m-subscribe-section__title { .m-subscribe-section__title {
color: $titles; color: var(--titles-color);
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.3; line-height: 1.3;
font-size: 1.250rem; font-size: 1.250rem;

2
src/sass/components/ui/_back.scss
View file

@ -4,7 +4,7 @@
position: absolute; position: absolute;
top: $mobile-space; top: $mobile-space;
left: $mobile-space; left: $mobile-space;
color: $titles; color: var(--titles-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;

9
src/sass/components/ui/_button.scss
View file

@ -16,16 +16,17 @@
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
&.outlined { &.outlined {
border: 1px solid $body; color: var(--titles-color);
border: 1px solid var(--primary-foreground-color);
} }
&.filled, &.filled,
&.primary { &.primary {
@include bs(0 2px 4px rgba(108, 108, 108, 0.2)); @include bs(0 2px 4px var(--button-shadow-color-normal));
&:hover { &:hover {
@include transform(translateY(-2px)); @include transform(translateY(-2px));
@include bs(0 4px 8px rgba(108, 108, 108, 0.3)); @include bs(0 4px 8px var(--button-shadow-color-hover));
} }
} }
@ -41,6 +42,6 @@
&.primary { &.primary {
color: $white; color: $white;
background-color: $main-color; background-color: var(--primary-subtle-color);
} }
} }

16
src/sass/components/ui/_icon-button.scss
View file

@ -1,5 +1,5 @@
.m-icon-button { .m-icon-button {
color: $titles; color: var(--titles-color);
font-size: 1.125rem; font-size: 1.125rem;
border: 0; border: 0;
outline: 0; outline: 0;
@ -11,17 +11,17 @@
&.outlined { &.outlined {
border-radius: 50%; border-radius: 50%;
border: 1px solid $body; border: 1px solid var(--primary-foreground-color);
} }
&.filled { &.filled {
background-color: $white; background-color: var(--background-color);
border-radius: 50%; border-radius: 50%;
@include bs(0 2px 4px rgba(108, 108, 108, 0.2)); @include bs(0 2px 4px var(--button-shadow-color-normal));
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
&:hover { &:hover {
@include bs(0 4px 8px rgba(108, 108, 108, 0.3)); @include bs(0 4px 8px var(--button-shadow-color-hover));
} }
} }
@ -52,7 +52,6 @@
height: 32px; height: 32px;
font-size: 0.625rem; font-size: 0.625rem;
z-index: 2; z-index: 2;
background-color: $white;
@include respond-to('medium') { @include respond-to('medium') {
top: 30px; top: 30px;
@ -86,7 +85,7 @@
position: relative; position: relative;
&.active { &.active {
color: $main-color; color: var(--primary-subtle-color);
} }
} }
@ -175,7 +174,7 @@
} }
&.in-share { &.in-share {
color: $titles; color: var(--titles-color);
font-size: 0.750rem; font-size: 0.750rem;
text-decoration: none; text-decoration: none;
width: 31px; width: 31px;
@ -208,6 +207,7 @@
opacity: 0; opacity: 0;
circle { circle {
stroke: var(--primary-subtle-color);
transform-origin: 50% 50%; transform-origin: 50% 50%;
@include transform(rotate(-90deg)); @include transform(rotate(-90deg));
@include transition(stroke-dashoffset 0.2s); @include transition(stroke-dashoffset 0.2s);

5
src/sass/components/ui/_input.scss
View file

@ -1,13 +1,14 @@
.m-input { .m-input {
color: var(--primary-foreground-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1.3; line-height: 1.3;
font-size: 1rem; font-size: 1rem;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
padding: 11px 15px; padding: 11px 15px;
border: 1px solid $gray; border: 1px solid var(--primary-border-color);
outline: 0; outline: 0;
background-color: $white; background-color: var(--background-color);
@extend .no-appearance; @extend .no-appearance;
&.in-search { &.in-search {

2
src/sass/components/ui/_pagination.scss
View file

@ -7,7 +7,7 @@
.m-pagination__text { .m-pagination__text {
display: inline-block; display: inline-block;
color: $titles; color: var(--titles-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
text-align: center; text-align: center;
font-size: 0.875rem; font-size: 0.875rem;

2
src/sass/components/ui/_section-title.scss
View file

@ -1,5 +1,5 @@
.m-section-title { .m-section-title {
color: $body; color: var(--primary-foreground-color);
text-align: center; text-align: center;
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.3; line-height: 1.3;

26
src/sass/layouts/_post-content.scss
View file

@ -16,7 +16,7 @@
h4, h4,
h5, h5,
h6 { h6 {
color: $titles; color: var(--titles-color);
line-height: 1.3; line-height: 1.3;
font-weight: 700; font-weight: 700;
padding-top: 5px; padding-top: 5px;
@ -99,7 +99,7 @@
} }
a { a {
color: $black; color: var(--primary-foreground-color);
text-decoration: underline; text-decoration: underline;
} }
@ -254,7 +254,7 @@
position: relative; position: relative;
margin: 30px 0; margin: 30px 0;
border: 0; border: 0;
border-top: 1px solid darken($light-blue, 5%); border-top: 1px solid var(--secondary-subtle-color);
@include respond-to('medium') { @include respond-to('medium') {
margin: 50px 0; margin: 50px 0;
@ -268,14 +268,14 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background-color: darken($light-blue, 5%); background-color: var(--secondary-subtle-color);
@include bs(0 0 0 10px $white); @include bs(0 0 0 10px var(--background-color));
@include transform(translate(-50%,-50%)); @include transform(translate(-50%,-50%));
@include respond-to('medium') { @include respond-to('medium') {
width: 12px; width: 12px;
height: 12px; height: 12px;
@include bs(0 0 0 20px $white); @include bs(0 0 0 20px var(--background-color));
} }
} }
} }
@ -303,7 +303,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
color: darken($light-blue, 10%); color: var(--primary-foreground-color);
line-height: 1; line-height: 1;
font-size: 2.625rem; font-size: 2.625rem;
@ -318,7 +318,7 @@
} }
table { table {
color: $titles; color: var(--titles-color);
font-size: 0.875rem; font-size: 0.875rem;
width: calc(100% + 40px); width: calc(100% + 40px);
margin: 0 -#{$mobile-space} 25px; margin: 0 -#{$mobile-space} 25px;
@ -355,11 +355,11 @@
code { code {
display: inline-block; display: inline-block;
color: $dark-blue; color: var(--link-color);
font-size: 0.9rem; font-size: 0.9rem;
padding: 0 5px; padding: 0 5px;
border-radius: 5px; border-radius: 5px;
background-color: lighten($gray, 35%); background-color: var(--secondary-subtle-color);
} }
pre { pre {
@ -411,7 +411,7 @@
} }
button:not(.m-icon-button) { button:not(.m-icon-button) {
border: 1px solid $body !important; border: 1px solid var(--primary-foreground-color) !important;
@extend .m-button; @extend .m-button;
} }
@ -419,7 +419,7 @@
width: 100%; width: 100%;
padding: 0 !important; padding: 0 !important;
margin: 30px auto !important; margin: 30px auto !important;
background: $white; background: var(--background-color);
@include respond-to('medium') { @include respond-to('medium') {
margin: 40px auto !important; margin: 40px auto !important;
@ -432,7 +432,7 @@
.kg-bookmark-container { .kg-bookmark-container {
display: flex; display: flex;
color: $body; color: var(--primary-foreground-color);
text-decoration: none !important; text-decoration: none !important;
min-height: 148px; min-height: 148px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px, box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px,