sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Update light theme & add sticky navbar

Browse source
This commit is contained in:
Sonny Bakker 2021-03-06 17:20:22 +01:00
parent 4d0613df2e
commit 6db7d6c3f5
5 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/newsreader/scss/components/navbar/_navbar.scss
View file

@ -3,10 +3,14 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 0 5px 0;
padding: 10px 0; padding: 10px 0;
width: 100%; width: 100%;
position: sticky;
top: 0;
background-color: var(--lightest-accent-color);
ol { ol {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -28,5 +32,7 @@
&__item:last-child { &__item:last-child {
margin: 0 10px 0 auto; margin: 0 10px 0 auto;
border-right: 2px solid var(--lighter-accent-color);
} }
} }

2
src/newsreader/scss/components/post/_post.scss
View file

@ -51,7 +51,7 @@
background-color: var(--lightest-accent-color) !important; background-color: var(--lightest-accent-color) !important;
& a { & a {
color: $black; color: var(--font-color);
} }
} }

4
src/newsreader/scss/components/posts-info/_posts-info.scss
View file

@ -10,8 +10,8 @@
} }
& .badge { & .badge {
& a { & .link {
color: $black; color: var(--font-color);
} }
} }
} }

2
src/newsreader/scss/components/sidebar/_sidebar.scss
View file

@ -5,7 +5,7 @@
align-self: start; align-self: start;
position: sticky; position: sticky;
top: 5%; top: 50px;
width: 20%; width: 20%;

14
src/newsreader/scss/partials/_colors.scss
View file

@ -25,18 +25,18 @@ $focus-blue: darken($azureish-white, +10%);
$checkbox-blue: rgba(34, 170, 253, 1); $checkbox-blue: rgba(34, 170, 253, 1);
// White theme // White theme
$background-color: $white; $background-color: rgba(255, 249, 176, 1);
$font-color: rgba(83, 87, 91, 1); $font-color: rgba(83, 87, 91, 1);
$link-color: darken($azureish-white, 30%); $link-color: rgba(45, 142, 202, 1);
$read-color: darken($gainsboro, 10%); $read-color: darken($gainsboro, 10%);
$confirm-button-font-color: rgba(255, 255, 255, 1); $confirm-button-font-color: rgba(255, 255, 255, 1);
$accent-color: $gainsboro; $accent-color: rgba(255, 171, 115, 1);
$lighter-accent-color: $gainsboro; $lighter-accent-color: rgba(255, 211, 132, 1);
$lightest-accent-color: $orange; $lightest-accent-color: rgba(255, 174, 192, 1);
$confirm-color: rgba(89, 181, 128, 1); $confirm-color: rgba(117, 207, 184, 1);
$danger-color: rgba(237, 118, 105, 1); $danger-color: rgba(237, 118, 105, 1);
$warning-color: rgba(255, 218, 119, 1); $warning-color: rgba(255, 218, 119, 1);
$info-color: rgba(162, 213, 242, 1); $info-color: rgba(162, 213, 242, 1);
@ -51,7 +51,7 @@ $dark-confirm-button-font-color: $dark-font-color;
$dark-accent-color: rgba(19, 59, 92, 1); $dark-accent-color: rgba(19, 59, 92, 1);
$dark-lighter-accent-color: rgba(30, 95, 116, 1); $dark-lighter-accent-color: rgba(30, 95, 116, 1);
$dark-lightest-accent-color: rgba(252, 218, 183, 1); $dark-lightest-accent-color: rgba(88, 61, 114, 1);
$dark-confirm-color: rgba(0, 121, 101, 1); $dark-confirm-color: rgba(0, 121, 101, 1);
$dark-danger-color: rgba(175, 45, 45, 1); $dark-danger-color: rgba(175, 45, 45, 1);