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

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

@ -50,23 +50,27 @@ fieldset {
text-align: left !important;
}
.medium-zoom-overlay {
background-color: var(--background-color) !important;
}
.medium-zoom-overlay,
.medium-zoom-image {
z-index: 5;
}
::-webkit-input-placeholder {
color: var(--primary-border-color);
color: $gray;
}
::-moz-placeholder {
color: var(--primary-border-color);
color: $gray;
}
:-ms-input-placeholder {
color: var(--primary-border-color);
color: $gray;
}
:-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 {
position: relative;
height: 100%;
background-color: $main-color;
background-color: var(--primary-subtle-color);
z-index: 1;
&:hover {
@ -12,7 +12,7 @@
&.no-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%;
height: 45px;
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 respond-to('medium') {

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

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

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

@ -8,7 +8,7 @@
opacity: 0;
overflow-y: auto;
z-index: 2;
background-color: rgba(255,255,255,0.99);
background-color: var(--transparent-background-color);
-webkit-overflow-scrolling: touch;
@include transform(scale(1.2));
@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__time {
color: $dark-blue !important;
color: var(--link-color) !important;
}
.m-heading__meta__tag {
@ -22,6 +22,6 @@
.m-heading__meta__divider {
display: inline-block;
color: $gray;
color: var(--primary-border-color);
margin: 0 10px;
}

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

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

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

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

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

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

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

@ -8,7 +8,7 @@
opacity: 0;
overflow-y: auto;
z-index: 2;
background-color: rgba(255,255,255,0.99);
background-color: var(--transparent-background-color);
-webkit-overflow-scrolling: touch;
@include transform(scale(1.2));
@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 {
color: $titles;
color: var(--titles-color);
letter-spacing: 0.3px;
line-height: 1.3;
font-size: 1.250rem;

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

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

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

@ -41,6 +41,6 @@
&.primary {
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;
font-size: 0.625rem;
z-index: 2;
background-color: var(--background-color);
@include respond-to('medium') {
top: 30px;
@ -86,7 +85,7 @@
position: relative;
&.active {
color: $main-color;
color: var(--primary-subtle-color);
}
}
@ -113,7 +112,7 @@
&.in-featured-articles {
position: absolute;
color: var(--background-color);
color: $white;
font-size: 0.875rem;
width: 29px;
height: 22px;

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

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

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

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

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

@ -16,7 +16,7 @@
h4,
h5,
h6 {
color: $titles;
color: var(--titles-color);
line-height: 1.3;
font-weight: 700;
padding-top: 5px;
@ -99,7 +99,7 @@
}
a {
color: $black;
color: var(--primary-foreground-color);
text-decoration: underline;
}
@ -254,7 +254,7 @@
position: relative;
margin: 30px 0;
border: 0;
border-top: 1px solid darken($light-blue, 5%);
border-top: 1px solid var(--secondary-subtle-color);
@include respond-to('medium') {
margin: 50px 0;
@ -268,14 +268,14 @@
width: 10px;
height: 10px;
border-radius: 50%;
background-color: darken($light-blue, 5%);
@include bs(0 0 0 10px $white);
background-color: var(--secondary-subtle-color);
@include bs(0 0 0 10px var(--background-color));
@include transform(translate(-50%,-50%));
@include respond-to('medium') {
width: 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;
top: 0;
left: 0;
color: darken($light-blue, 10%);
color: var(--primary-foreground-color);
line-height: 1;
font-size: 2.625rem;
@ -318,7 +318,7 @@
}
table {
color: $titles;
color: var(--titles-color);
font-size: 0.875rem;
width: calc(100% + 40px);
margin: 0 -#{$mobile-space} 25px;
@ -355,11 +355,11 @@
code {
display: inline-block;
color: $dark-blue;
color: var(--link-color);
font-size: 0.9rem;
padding: 0 5px;
border-radius: 5px;
background-color: lighten($gray, 35%);
background-color: var(--secondary-subtle-color);
}
pre {
@ -419,7 +419,7 @@
width: 100%;
padding: 0 !important;
margin: 30px auto !important;
background: $white;
background: var(--background-color);
@include respond-to('medium') {
margin: 40px auto !important;