florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Optimize dark theme (#431)

Browse Source 
* Optimize dark theme

* Fix-up

* Minor fixes

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
This commit is contained in:
Edsuns 2021-10-31 04:59:04 +08:00 committed by GitHub
parent 1c52125635
commit fe3339d05b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
_sass/_base.scss
View File

@ -8,6 +8,10 @@ p, h1, h2, h3, h4, h5, h6, em, div, li, span, strong {
color: var(--global-text-color); color: var(--global-text-color);
} }
hr {
border-top: 1px solid var(--global-divider-color);
}
a, table.table a { a, table.table a {
color: var(--global-theme-color); color: var(--global-theme-color);
&:hover { &:hover {
@ -91,18 +95,22 @@ blockquote {
.navbar { .navbar {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid $grey-color-light; border-bottom: 1px solid var(--global-divider-color);
background-color: var(--global-bg-color); background-color: var(--global-bg-color);
opacity: 0.95; opacity: 0.95;
} }
.navbar .dropdown-menu { .navbar .dropdown-menu {
background-color: var(--global-bg-color); background-color: var(--global-bg-color);
border: 1px solid var(--global-divider-color);
a:not(.active) { a:not(.active) {
color: var(--global-text-color); color: var(--global-text-color);
} }
a:hover { a:hover {
color: var(--global-hover-color); color: var(--global-hover-color);
} }
.dropdown-divider {
border-top: 1px solid var(--global-divider-color) !important;
}
} }
.dropdown-item { .dropdown-item {
color: var(--global-text-color); color: var(--global-text-color);
@ -242,7 +250,7 @@ footer.fixed-bottom {
} }
footer.sticky-bottom { footer.sticky-bottom {
border-top: 1px solid $grey-color-light; border-top: 1px solid var(--global-divider-color);
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
font-size: 0.9rem; font-size: 0.9rem;
@ -252,7 +260,7 @@ footer.sticky-bottom {
// Blog // Blog
.header-bar { .header-bar {
border-bottom: 1px solid $grey-color-light; border-bottom: 1px solid var(--global-divider-color);
text-align: center; text-align: center;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 5rem; padding-bottom: 5rem;
@ -267,7 +275,7 @@ footer.sticky-bottom {
margin-bottom: 40px; margin-bottom: 40px;
padding: 0; padding: 0;
li { li {
border-bottom: 1px solid $grey-color-light; border-bottom: 1px solid var(--global-divider-color);
list-style: none; list-style: none;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
@ -358,8 +366,8 @@ footer.sticky-bottom {
} }
h2.category { h2.category {
color: $grey-color-light; color: var(--global-divider-color);
border-bottom: 1px solid $grey-color-light; border-bottom: 1px solid var(--global-divider-color);
padding-top: 0.5rem; padding-top: 0.5rem;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -386,8 +394,8 @@ footer.sticky-bottom {
} }
} }
h2.year { h2.year {
color: $grey-color-light; color: var(--global-divider-color);
border-top: 1px solid $grey-color-light; border-top: 1px solid var(--global-divider-color);
padding-top: 1rem; padding-top: 1rem;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: -2rem; margin-bottom: -2rem;

2
_sass/_themes.scss
View File

@ -13,6 +13,7 @@
--global-footer-text-color: #{$grey-color-light}; --global-footer-text-color: #{$grey-color-light};
--global-footer-link-color: #{$white-color}; --global-footer-link-color: #{$white-color};
--global-distill-app-color: #{$grey-color}; --global-distill-app-color: #{$grey-color};
--global-divider-color: rgba(0,0,0,.1);
.fa-sun { .fa-sun {
display : none; display : none;
@ -35,6 +36,7 @@ html[data-theme='dark'] {
--global-footer-text-color: #{$grey-color-dark}; --global-footer-text-color: #{$grey-color-dark};
--global-footer-link-color: #{$black-color}; --global-footer-link-color: #{$black-color};
--global-distill-app-color: #{$grey-color-light}; --global-distill-app-color: #{$grey-color-light};
--global-divider-color: #424246;
.fa-sun { .fa-sun {
padding-left: 10px; padding-left: 10px;

3
_sass/_variables.scss
View File

@ -25,7 +25,7 @@ $yellow-color: #efcc00 !default;
$grey-color: #828282 !default; $grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%); $grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%); $grey-color-dark: #1C1C1D;
$white-color: #ffffff !default; $white-color: #ffffff !default;
$black-color: #000000 !default; $black-color: #000000 !default;
@ -35,4 +35,3 @@ $black-color: #000000 !default;
$code-bg-color-light: rgba($purple-color, 0.05); $code-bg-color-light: rgba($purple-color, 0.05);
$code-bg-color-dark: #2c3237 !default; $code-bg-color-dark: #2c3237 !default;