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

WIP Dark theme

Browse source
This commit is contained in:
Eduardo 2019-09-30 23:28:57 +02:00
parent 371691a642
commit 747302604a
18 changed files with 47 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@
--primary-border-color: #9b9b9b; --primary-border-color: #9b9b9b;
--secondary-border-color: aliceblue; --secondary-border-color: aliceblue;
--article-shadow: 0 4px 60px 0 rgba(0,0,0,.2); --article-shadow: 0 4px 60px 0 rgba(0,0,0,.2);
--transparent-background-color: rgba(255,255,255,0.99);
--foter-background-color: #293951; --foter-background-color: #293951;
} }
@ -17,13 +18,14 @@
--background-color: #111; --background-color: #111;
--primary-foreground-color: #ccc; --primary-foreground-color: #ccc;
--secondary-foreground-color: #fff; --secondary-foreground-color: #fff;
--primary-subtle-color: #04aeee; --primary-subtle-color: #2c2fe6;
--secondary-subtle-color: #141920; --secondary-subtle-color: #141920;
--titles-color: #b4b4b4; --titles-color: #b4b4b4;
--link-color: #2c5de6; --link-color: #2c2fe6;
--primary-border-color: #9b9b9b; --primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f; --secondary-border-color: #0f0f0f;
--article-shadow: 0 4px 0px 10px rgba(0,0,0,.2); --article-shadow: 0 4px 0px 10px rgba(0,0,0,.2);
--transparent-background-color: rgba(0,0,0,0.99);
--foter-background-color: #080808; --foter-background-color: #080808;
} }
} }

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

@ -50,23 +50,27 @@ 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;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: var(--primary-border-color); color: $gray;
} }
::-moz-placeholder { ::-moz-placeholder {
color: var(--primary-border-color); color: $gray;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
color: var(--primary-border-color); color: $gray;
} }
:-moz-placeholder { :-moz-placeholder {
color: var(--primary-border-color); color: $gray;
} }

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);
} }
} }
} }

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') {

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

@ -1,8 +1,8 @@
.m-author { .m-author {
padding: 40px $mobile-space; padding: 40px $mobile-space;
border-color: var(--secondary-subtle-color); 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-left-width: 0;
border-right-width: 0; border-right-width: 0;
border-style: solid; border-style: solid;
@ -67,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/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));

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;

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;

4
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;
@ -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));

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

@ -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;

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

@ -41,6 +41,6 @@
&.primary { &.primary {
color: $white; color: $white;
background-color: $main-color; background-color: var(--primary-subtle-color);
} }
} }

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

@ -52,7 +52,6 @@
height: 32px; height: 32px;
font-size: 0.625rem; font-size: 0.625rem;
z-index: 2; z-index: 2;
background-color: var(--background-color);
@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);
} }
} }
@ -113,7 +112,7 @@
&.in-featured-articles { &.in-featured-articles {
position: absolute; position: absolute;
color: var(--background-color); color: $white;
font-size: 0.875rem; font-size: 0.875rem;
width: 29px; width: 29px;
height: 22px; height: 22px;

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;

22
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 {
@ -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;