From 08a6abb9ef84b2b1ce53b362462f17dd481fc3b7 Mon Sep 17 00:00:00 2001 From: Nicholas Krebs Date: Fri, 28 Jun 2024 15:09:48 +0200 Subject: [PATCH] fix theme variables --- css/minimal.css | 34 ++++++++++++++++++---------------- css/minimal.css.map | 2 +- scss/_navigation.scss | 14 ++++++++------ scss/_overrides.scss | 6 +++--- scss/_sizes.scss | 6 +++--- scss/_table.scss | 14 +++++++------- scss/_theme.scss | 27 +++++++++++++++++---------- 7 files changed, 57 insertions(+), 46 deletions(-) diff --git a/css/minimal.css b/css/minimal.css index 1b5645c..80e8926 100644 --- a/css/minimal.css +++ b/css/minimal.css @@ -1,5 +1,5 @@ .bg-gray { - background-color: #ffffff !important; + background-color: white !important; } section.modular-text { @@ -10,10 +10,10 @@ section.modular-text h2 { } body:not(.header-dark).header-transparent #header:not(.scrolled) a { - color: rgba(255, 255, 255, 0.7019607843) !important; + color: rgba(223, 223, 223, 0.625) !important; } body:not(.header-dark).header-transparent #header:not(.scrolled) a.active { - color: #FFFFFF !important; + color: white !important; } #footer { @@ -44,20 +44,22 @@ body:not(.header-dark).header-transparent #header:not(.scrolled) a.active { margin-top: 0; } -.mobile-menu #toggle span { - background: #ffffff; +body:not(.header-dark) .mobile-menu #toggle:not(.active) span, +#header.scrolled ~ .mobile-menu #toggle:not(.active) span { + background: #3a414e; } -#header.scrolled ~ .mobile-menu #toggle:not(.active) span { - background: #3d3d3d; +body.header-dark .mobile-menu #toggle span, +.mobile-menu #toggle.active span { + background: white; } .mobile-container .mobile-logo .title { - color: #ffffff; + color: white; } .mobile-container .overlay-menu a, .mobile-container .overlay-menu .toggler { padding: 1rem; - color: #ffffff; + color: white; } .mobile-container .overlay-menu .toggler { font-size: 1.5rem; @@ -120,8 +122,8 @@ table { border-spacing: unset; } table th { - background-color: #4063cb; - color: #ffffff; + background-color: #4063CB; + color: white; } table th, table td { padding: 0.2rem 0.5rem; @@ -133,7 +135,7 @@ table td::before { text-transform: uppercase; } table tr:nth-child(even) { - background-color: #dcdcdc; + background-color: rgba(0, 0, 0, 0.25); } table .text-align-center { text-align: center; @@ -145,12 +147,12 @@ table .text-align-left { text-align: left; } -@media screen and (min-width: 601px) { +@media screen and (min-width: 641px) { table td::before { display: none; } } -@media screen and (max-width: 600px) { +@media screen and (max-width: 640px) { .table-responsive table { border: 0; width: 100%; @@ -169,12 +171,12 @@ table .text-align-left { width: 1px; } .table-responsive table tr { - border-bottom: 3px solid #4063cb; + border-bottom: 3px solid white; display: block; margin-bottom: 0.625em; } .table-responsive table td { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid rgba(0, 0, 0, 0.25); display: block; font-size: 0.8em; } diff --git a/css/minimal.css.map b/css/minimal.css.map index b1ce252..183a280 100644 --- a/css/minimal.css.map +++ b/css/minimal.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_overrides.scss","../scss/_header-footer.scss","../scss/_navigation.scss","../scss/_theme.scss","../scss/_hero.scss","../scss/_form.scss","../scss/_table.scss","../scss/_components.scss","../scss/minimal.scss"],"names":[],"mappings":"AACA;EAAW;;;AAGX;EACC;;AAEA;EAAK;;;AAMJ;EACC;;AAEA;EACC;;;ACbJ;EACC;EACA;;AAEA;EAAI;;;ACLJ;AAAA;EACC;;AAEA;AAAA;EAAS;;AAET;AAAA;EAAU;;;AAKZ;EACC;;AAEA;EAAK;;;AAIN;EACC,YChBgB;;;ADmBjB;EACC,YCrBgB;;;AD2Bf;EACC,OC3Bc;;ADgCf;EACC;EACA,OClCc;;ADoCf;EACC;EACA;;;AEvCD;EAAa;;;ACqBd;EAXC;EACA;EACA;;AAYA;EACC;;AAIF;EACC;;AA/BQ;EAmCN;EACA;EACA;EACA,SA/BY;EAgCZ;;;AAIA;EA1BF;EACA,QAVmB;EAWnB,SAZc;;;AAPN;EAiBR;EACA,QAVmB;EAWnB,SAZc;;AAmDZ;EACC;EACA;;;AAQJ;EAzDC;EACA;EACA;EAyDA;EACA,SAhEc;;AAkEd;EAxDA;EACA,QAVmB;EAWnB,SAZc;;;ACThB;EACC;;AAEA;EACC,kBHGW;EGFX;;AAGD;EAAS;;AAET;EACC;EACA;EACA;EACA;;AAGD;EAAqB;;AAErB;EAAqB;;AAErB;EAAoB;;AAEpB;EAAmB;;;AAKpB;EACC;IAAmB;;;AAIpB;EACC;IACC;IACA;;EAEA;IAAU;;EAEV;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAEA;IAAc;;EAGf;IAA0D;;;AChE3D;EACC,kBJYa;;AITd;EACC;;;AAMD;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EAAM;;;ACVP;EAAI;;;AAGJ;EAAO;;;AAEP;EACC;;AAEA;EAAQ;;AAER;EAAQ;;AAER;EAAM;;AAEN;EAAM","file":"minimal.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/_overrides.scss","../scss/_header-footer.scss","../scss/_navigation.scss","../scss/_theme.scss","../scss/_hero.scss","../scss/_form.scss","../scss/_table.scss","../scss/_components.scss","../scss/minimal.scss"],"names":[],"mappings":"AACA;EAAW;;;AAGX;EACC;;AAEA;EAAK;;;AAMJ;EACC;;AAEA;EACC;;;ACbJ;EACC;EACA;;AAEA;EAAI;;;ACLJ;AAAA;EACC;;AAEA;AAAA;EAAS;;AAET;AAAA;EAAU;;;AAKZ;EACC;;AAEA;EAAM;;;AAIP;AAAA;EAEC,YCjBM;;;ADoBP;AAAA;EAEC,YCdsB;;;ADoBrB;EACC,OCrBoB;;AD0BrB;EACC;EACA,OC5BoB;;AD+BrB;EACC;EACA;;;AE5CD;EAAc;;;ACuBf;EAXC;EACA;EACA;;AAYA;EACC;;AAIF;EACC;;AA/BQ;EAmCN;EACA;EACA;EACA,SA/BY;EAgCZ;;;AAIA;EA1BF;EACA,QAVmB;EAWnB,SAZc;;;AAPN;EAiBR;EACA,QAVmB;EAWnB,SAZc;;AAmDZ;EACC;EACA;;;AAQJ;EAzDC;EACA;EACA;EAyDA;EACA,SAhEc;;AAkEd;EAxDA;EACA,QAVmB;EAWnB,SAZc;;;ACThB;EACC;;AAEA;EACC,kBHFc;EGGd,OHOqB;;AGJtB;EAAS;;AAET;EACC;EACA;EACA;EACA;;AAGD;EAAqB,kBHXP;;AGad;EAAqB;;AAErB;EAAoB;;AAEpB;EAAmB;;;AAKpB;EACC;IAAmB;;;AAIpB;EACC;IACC;IACA;;EAEA;IAAU;;EAEV;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAEA;IAAc;;EAGf;IAA0D;;;AChE3D;EACC,kBJca;;AIXd;EACC;;;AAMD;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EAAM;;;ACVP;EAAI;;;AAGJ;EAAO;;;AAEP;EACC;;AAEA;EAAQ;;AAER;EAAQ;;AAER;EAAM;;AAEN;EAAM","file":"minimal.css"} \ No newline at end of file diff --git a/scss/_navigation.scss b/scss/_navigation.scss index a7b85a5..4468b16 100644 --- a/scss/_navigation.scss +++ b/scss/_navigation.scss @@ -18,26 +18,28 @@ } // mobile navigation menu button -.mobile-menu #toggle span { - background: $sec-text-color; +body:not(.header-dark) .mobile-menu #toggle:not(.active) span, +#header.scrolled ~ .mobile-menu #toggle:not(.active) span { + background: $text-color; } -#header.scrolled ~ .mobile-menu #toggle:not(.active) span { - background: $pri-text-color; +body.header-dark .mobile-menu #toggle span, +.mobile-menu #toggle.active span { + background: $text-color-secondary; } // mobile nav .mobile-container { .mobile-logo { .title { - color: $sec-text-color; + color: $text-color-secondary; } } .overlay-menu { a, .toggler { padding: 1rem; - color: $sec-text-color; + color: $text-color-secondary; } .toggler { diff --git a/scss/_overrides.scss b/scss/_overrides.scss index dcd7196..1df7b1b 100644 --- a/scss/_overrides.scss +++ b/scss/_overrides.scss @@ -1,5 +1,5 @@ // spectre overrides -.bg-gray { background-color: $bg-color !important;} +.bg-gray { background-color: $background-color !important;} // grav overrides section.modular-text { @@ -12,10 +12,10 @@ section.modular-text { body { &:not(.header-dark).header-transparent #header:not(.scrolled) { a { - color: #FFFFFFB3 !important; + color: $text-color-secondary-dark !important; &.active { - color: #FFFFFF !important; + color: $text-color-secondary !important; } } } diff --git a/scss/_sizes.scss b/scss/_sizes.scss index b99bea0..b5665e1 100644 --- a/scss/_sizes.scss +++ b/scss/_sizes.scss @@ -1,16 +1,16 @@ // sizes // desktop -@media screen and (min-width: 901px) { +@media screen and (min-width: $responsive-breakpoint-tablet+1) { // ... } // tablet -@media screen and (max-width: 900px) { +@media screen and (max-width: $responsive-breakpoint-tablet) { // ... } // mobile -@media screen and (max-width: 600px) { +@media screen and (max-width: $responsive-breakpoint-mobile) { // ... } diff --git a/scss/_table.scss b/scss/_table.scss index c7ebc85..8a1fc2e 100644 --- a/scss/_table.scss +++ b/scss/_table.scss @@ -3,8 +3,8 @@ table { border-spacing: unset; th { - background-color: $prim-color; - color: #FFFFFF; + background-color: $primary-color; + color: $text-color-secondary; } th, td { padding: 0.2rem 0.5rem; } @@ -16,7 +16,7 @@ table { text-transform: uppercase; } - tr:nth-child(even) { background-color: #DCDCDC; } + tr:nth-child(even) { background-color: $dark-overlay; } .text-align-center { text-align: center; } @@ -27,12 +27,12 @@ table { // desktop -@media screen and (min-width: 601px) { +@media screen and (min-width: $responsive-breakpoint-mobile+1) { table td::before { display: none; } } // mobile -@media screen and (max-width: 600px) { +@media screen and (max-width: $responsive-breakpoint-mobile) { .table-responsive table { border: 0; width: 100%; @@ -51,13 +51,13 @@ table { } tr { - border-bottom: 3px solid $sec-color; + border-bottom: 3px solid $background-color; display: block; margin-bottom: .625em; } td { - border-bottom: 1px solid #DDDDDD; + border-bottom: 1px solid $dark-overlay; display: block; font-size: .8em; diff --git a/scss/_theme.scss b/scss/_theme.scss index 916ad05..1559248 100644 --- a/scss/_theme.scss +++ b/scss/_theme.scss @@ -1,18 +1,25 @@ -// theme variables +@use 'sass:color'; -// colors -$bg-color: #FFFFFF; -$pri-text-color: #3D3D3D; -$sec-text-color: #FFFFFF; -$pri-bg-color: #FFFFFF; -$sec-color: #4063CB; -$prim-color: #4063CB; +// color definitions +$primary-color: #4063CB; +$accent-color: #4063CB; +$grey: #3a414e; +$light-overlay: rgba(255, 255, 255, 0.25); +$dark-overlay: rgba(0, 0, 0, 0.25); // elements -$header-color: #FFFFFF; -$footer-color: #FFFFFF; +$background-color: white; +$text-color: $grey; +$text-color-light: mix($text-color, $light-overlay, 25%); +$text-color-secondary: white; +$text-color-secondary-dark: mix($text-color-secondary, $dark-overlay); // hero image $overlay-dark: #00000033; $overlay-dark-grad-from: #0000004D; $overlay-dark-grad-to: #00000000; + +// sizes +$responsive-breakpoint-mobile: 640px; +$responsive-breakpoint-tablet: 840px; +$responsive-breakpoint-desktop: 1280px;