diff --git a/_config.yml b/_config.yml index cc913a1d135e702f31fc0c207c6875ca31f5fd3e..d49ec3a115aad42d55bb048baf14911bc006df71 100644 --- a/_config.yml +++ b/_config.yml @@ -8,6 +8,8 @@ github_url: https://github.com/tabler/tabler debug: false +dark-theme: false + plugins: - jekyll-random - jekyll-tidy diff --git a/pages/_includes/cards/invoice.html b/pages/_includes/cards/invoice.html index 8b6074bca89ab9ef3a87e4654dd62b40c2886d74..86e295bcf088f10d28f8cd6c85712302468704a7 100644 --- a/pages/_includes/cards/invoice.html +++ b/pages/_includes/cards/invoice.html @@ -46,7 +46,7 @@ 1 -

Logo Creation

+

Logo Creation

Logo and business cards design
@@ -58,7 +58,7 @@ 2 -

Online Store Design & Development

+

Online Store Design & Development

Design/Development for all popular modern browsers
@@ -70,7 +70,7 @@ 3 -

App Design

+

App Design

Promotional mobile application
@@ -80,15 +80,15 @@ $3.200,00 - Subtotal + Subtotal $25.000,00 - Vat Rate + Vat Rate 20% - Vat Due + Vat Due $5.000,00 diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html index 687d129d09bf7c28f8df96d639e602b04255872d..87de7e28655b2354d370e73b6b8d44878a8fa915 100644 --- a/pages/_layouts/base.html +++ b/pages/_layouts/base.html @@ -31,7 +31,9 @@ - + +{% assign dark-theme = page.dark-theme | default: site.dark-theme %} + {{ content }} diff --git a/scss/_dark.scss b/scss/_dark.scss index f4140c0fc8706614b30c690eaf3dcdb303046cb2..c761c0c04c8c617044d8871acc8ffa3ff95eec01 100644 --- a/scss/_dark.scss +++ b/scss/_dark.scss @@ -1,30 +1,37 @@ // stylelint-disable declaration-no-important -@mixin dark-mode { +$dark-body-bg: #222935; +$dark-body-color: #afbdd1; +$dark-border-color: rgba($border-color, .01); +@mixin dark-mode { &, .modal-content, - .dropdown-menu { - color: #afbdd1; - background: $dark; - } - - .dropdown-menu-arrow::after { - border-bottom-color: $dark; + .dropdown-menu, + .example-bg { + color: $dark-body-color; + background: $dark-body-bg; } .card, - .header, .sidebar, - .sidenav, - .topnav, - .navbar, - .form-control, - .form-select, - .form-switch .form-check-input, - .selectgroup-button { + .topbar { color: inherit; - background: rgba(0, 0, 0, .1); + background: rgba($white, .02); + border-color: $dark-border-color; + } + + .progress, + .form-control-light { + background: $dark-border-color; + } + + .example, + .card-footer, + .card-header, + .table th, .markdown table th, .table td, .markdown table td, + .dropdown-menu { + border-color: $dark-border-color; } .text-body { @@ -32,16 +39,22 @@ } .avatar-list-stacked .avatar { - box-shadow: 0 0 0 2px #2b3648; + box-shadow: 0 0 0 2px #222226; } .navbar-brand-logo { filter: brightness(0) invert(1); } + + .form-fieldset { + border-color: transparent; + } } -body.theme-dark { - @include dark-mode; +@media not print { + body.theme-dark { + @include dark-mode; + } } @media (prefers-color-scheme: dark) { diff --git a/scss/_variables.scss b/scss/_variables.scss index 4e81091ed588908a63e0fc1c6f5f0821c47f7d60..197e01a1c5283bf98dc91cbc4adbfa0918ca6aaf 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -217,7 +217,7 @@ $btn-font-weight: $font-weight-bold !default; $btn-border-radius: 3px !default; //cards -$card-border-color: $border-color !default; +$card-border-color: $border-color-alpha !default; $card-border-radius: $border-radius !default; $card-cap-bg: $min-black !default; @@ -250,8 +250,7 @@ $loader-size: 2.5rem !default; //navbar $navbar-bg: $white !default; $navbar-height: 3.5rem !default; -$navbar-border-color: $border-color !default; -$navbar-border-color: $border-color !default; +$navbar-border-color: $border-color-alpha !default; //nav $nav-link-padding-y: 1rem !default; diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss index a318a4111bb2575a12bdaf3c7f61e4f2b011acc8..080c0f347f0dbc8498be1d44ac9355beb34beb88 100644 --- a/scss/layout/_page.scss +++ b/scss/layout/_page.scss @@ -18,5 +18,5 @@ font-size: $h2-font-size; font-weight: 400; line-height: 1; - color: $body-color; + color: inherit; } diff --git a/scss/mixins/_functions.scss b/scss/mixins/_functions.scss index 0269884a563aa04aa91ccc1a40438e877a744d24..342f9e7e49c65837ccf79dd6807e27cbce8ff35f 100644 --- a/scss/mixins/_functions.scss +++ b/scss/mixins/_functions.scss @@ -1,7 +1,3 @@ -@function px2rem($px) { - @return ($px / 16px) * 1rem; -} - @function alpha-attribute($color, $background) { $percent: alpha($color) * 100%; $opaque: opacify($color, 1); @@ -10,14 +6,9 @@ } @function theme-color-lighter($color) { - @return alpha-attribute(rgba($color, .2), #fff); + @return rgba($color, .2); } -@function theme-color-lightest($color) { - @return mix($color, #fff, 10%); -} - - @function str-replace($string, $search, $replace: "") { $index: str-index($string, $search); diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss index 666791ab586bd8b23d4ea8984d74c5ff831727b9..fe99f648e4e8d4c5b2ce1caa27928f3d43aa2098 100644 --- a/scss/ui/_forms.scss +++ b/scss/ui/_forms.scss @@ -37,7 +37,7 @@ textarea { .form-fieldset { padding: 1rem; margin-bottom: 1rem; - background: $gray-100; + background: $min-black; border: 1px solid $border-color; border-radius: $border-radius; } @@ -58,7 +58,7 @@ Form help display: inline-block; width: 1rem; height: 1rem; - font-size: px2rem(12px); + font-size: $h5-font-size; line-height: 1rem; color: $text-muted; text-align: center; diff --git a/scss/ui/_highlight.scss b/scss/ui/_highlight.scss index b9ff09e1c9f625e3aa6319448bc17443e1ff25b0..401765835242ac8304940c0c17f753121ee87fdb 100644 --- a/scss/ui/_highlight.scss +++ b/scss/ui/_highlight.scss @@ -2,7 +2,7 @@ max-height: 40rem; margin: 1rem 0 2rem; overflow: auto; - font-size: px2rem(15px); + font-size: $font-size-base; background: #fcfcfc; border: 1px solid $border-color; border-radius: 3px; diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss index eba4cb39c6b8ce1c8cac84fdea99b8cea4a69285..87116428c4ee3b89204d41a5997f6daaf85491ec 100644 --- a/scss/ui/_icons.scss +++ b/scss/ui/_icons.scss @@ -18,11 +18,11 @@ } .icon-md { - font-size: px2rem(24px); + font-size: 1.5rem; } .icon-lg { - font-size: px2rem(32px); + font-size: 2rem; } diff --git a/scss/ui/_pagination.scss b/scss/ui/_pagination.scss index 3d71f2fc0ca2b08518cdb422c27e5c9b1bb6f115..7d7a1379e31a5211acd3326b1817233144e2b3f0 100644 --- a/scss/ui/_pagination.scss +++ b/scss/ui/_pagination.scss @@ -3,7 +3,7 @@ } .page-link { - min-width: px2rem(26px); + min-width: 1.5rem; border-radius: $border-radius; &:hover { diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss index d78b4013596769df09f4ad867a3c211603671e98..cb12130965f19d428f739433a641324f5014c7b7 100644 --- a/scss/ui/_typo.scss +++ b/scss/ui/_typo.scss @@ -27,6 +27,7 @@ h6, } strong, +.strong, b { font-weight: $font-weight-bold; } diff --git a/scss/ui/forms/_form-imagecheck.scss b/scss/ui/forms/_form-imagecheck.scss index 5e190ab5404426b4f86c999d9d606cad6d2a6225..5eef76b9b33a4ebdc15476cc529987077162e748 100644 --- a/scss/ui/forms/_form-imagecheck.scss +++ b/scss/ui/forms/_form-imagecheck.scss @@ -18,7 +18,7 @@ Image check display: flex; margin: 0; user-select: none; - border: 1px solid $border-color; + border: 1px solid $border-color-alpha; border-radius: 3px; .imagecheck-input:focus ~ & { @@ -27,7 +27,7 @@ Image check } .imagecheck-input:checked ~ & { - border-color: $border-color; + border-color: $border-color-alpha; } &::before { diff --git a/scss/vendor/_sparkline.scss b/scss/vendor/_sparkline.scss index 54b97a997e88cdd3fc4e19a752794ce9bfe0e6b4..e51c76658016d689b71185758f1f31aedcd117ad 100644 --- a/scss/vendor/_sparkline.scss +++ b/scss/vendor/_sparkline.scss @@ -22,7 +22,7 @@ display: flex; align-items: center; justify-content: center; - font-size: px2rem(11px); + font-size: $h6-font-size; .icon { width: 1rem;