From 486a29101bd3f19462394a41a2a9383861923121 Mon Sep 17 00:00:00 2001 From: "U. I. I. Derbashi" <32719218+uderbashi@users.noreply.github.com> Date: Sat, 19 Nov 2022 00:44:38 +0300 Subject: [PATCH 1/4] extracted all the colours to colour palette css to have better control --- assets/fresh/core.scss | 1 + assets/fresh/partials/_buttons.scss | 48 ++++++------- assets/fresh/partials/_cards.scss | 10 +-- assets/fresh/partials/_colorpalette.scss | 33 +++++++++ assets/fresh/partials/_colors.scss | 91 +++++++++++++++++------- assets/fresh/partials/_dropdowns.scss | 6 +- assets/fresh/partials/_footer.scss | 12 ++-- assets/fresh/partials/_forms.scss | 14 +++- assets/fresh/partials/_hero.scss | 4 +- assets/fresh/partials/_navbar.scss | 24 ++++--- assets/fresh/partials/_sections.scss | 25 ++++--- assets/fresh/partials/_sidebar.scss | 25 ++++--- assets/fresh/partials/_testimonials.scss | 10 +-- assets/fresh/partials/_utils.scss | 8 +-- layouts/partials/section2.html | 2 +- layouts/partials/section4.html | 2 +- 16 files changed, 207 insertions(+), 108 deletions(-) create mode 100644 assets/fresh/partials/_colorpalette.scss diff --git a/assets/fresh/core.scss b/assets/fresh/core.scss index 258aca3e..35bad0ad 100644 --- a/assets/fresh/core.scss +++ b/assets/fresh/core.scss @@ -3,6 +3,7 @@ Main SCSS file / Fresh ========================================================================== */ //Imports +@import 'partials/colorpalette'; @import 'partials/colors'; @import 'partials/navbar'; @import 'partials/dropdowns'; diff --git a/assets/fresh/partials/_buttons.scss b/assets/fresh/partials/_buttons.scss index bb4f3e08..7beb56a6 100644 --- a/assets/fresh/partials/_buttons.scss +++ b/assets/fresh/partials/_buttons.scss @@ -38,70 +38,70 @@ Classes to change the feel of bulma buttons .button { &.primary-btn { outline: none; - border-color: $primary; - background-color: $primary; - color: $white; + border-color: $button-primary-color; + background-color: $button-primary-color; + color: $button-primary-text; transition: all 0.5s; &:hover { - color: $white; + color: $button-primary-text; } &.raised:hover { box-shadow: 0 14px 26px -12px rgba(79, 193, 234, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(79, 193, 234, 0.2) !important; opacity: 0.8; } &.btn-outlined { - border-color: $primary; - color: $primary; + border-color: $button-primary-color; + color: $button-primary-color; background-color: transparent; &:hover { - color: $white; - background-color: $primary; + color: $button-primary-text; + background-color: $button-primary-color; } } } &.secondary-btn { outline: none; - border-color: $secondary; - background-color: $secondary; - color: $white; + border-color: $button-secondary-color; + background-color: $button-secondary-color; + color: $button-secondary-text; transition: all 0.5s; &:hover { - color: $white; + color: $button-secondary-text; } &.raised:hover { box-shadow: 0 14px 26px -12px rgba(243, 146, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(243, 146, 0, 0.2) !important; opacity: 0.8; } &.btn-outlined { - border-color: $secondary; - color: $secondary; + border-color: $button-secondary-color; + color: $button-secondary-color; background-color: transparent; &:hover { - color: $white; - background-color: $secondary; + color: $button-secondary-text; + background-color: $button-secondary-color; } } } &.button.accent-btn { outline: none; - border-color: $accent; - background-color: $accent; - color: $white; + border-color: $button-accent-color; + background-color: $button-accent-color; + color: $button-accent-text; transition: all 0.5s; &:hover { - color: $white; + color: $button-accent-text; } &.raised:hover { box-shadow: 0 14px 26px -12px rgba(104, 187, 136, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(104, 187, 136, 0.2) !important; opacity: 0.8; } &.btn-outlined { - border-color: $accent; - color: $accent; + border-color: $button-accent-color; + color: $button-accent-color; background-color: transparent; &:hover { - color: $white; - background-color: $accent; + color: $button-accent-text; + background-color: $button-accent-color; } } } diff --git a/assets/fresh/partials/_cards.scss b/assets/fresh/partials/_cards.scss index 57242a13..64a01943 100644 --- a/assets/fresh/partials/_cards.scss +++ b/assets/fresh/partials/_cards.scss @@ -8,7 +8,7 @@ Cards and Card content styles .feature-card { width: 300px; height: 320px; - background-color: #fff; + background-color: $card-feature-background; border-radius: 3px; margin: 0 auto; .card-title h4 { @@ -16,7 +16,7 @@ Cards and Card content styles padding-top: 25px; font-size: 1.2rem; font-weight: 600; - color: $blue-grey; + color: $card-feature-header; } .card-icon img { height: 120px; @@ -25,18 +25,20 @@ Cards and Card content styles .card-text { padding: 0 40px; p { - color: $muted-grey; + color: $card-feature-text; } } .card-action { margin-top: 10px; } &.is-bordered { - border: 1px solid $fade-grey; + border: 1px solid $card-feature-border; } } // Flex Card +// probably irrelevant since I couldn't find the html where this is used +// I am keeping it either way, just to make sure soemthing else is not messed .flex-card { position: relative; background-color: #fff; diff --git a/assets/fresh/partials/_colorpalette.scss b/assets/fresh/partials/_colorpalette.scss new file mode 100644 index 00000000..06363a88 --- /dev/null +++ b/assets/fresh/partials/_colorpalette.scss @@ -0,0 +1,33 @@ +/* ========================================================================== +Color definitions to be used for the differnt elements +========================================================================== */ + +$white: #fff; +$smoke-white: #fcfcfc; +$grey-white: #f2f2f2; + +$primary: #F39200; +$secondary: #4FC1EA; +$accent: #00efb7; + +$fade-grey: #ededed; +$light-grey: #EFF4F7; +$title-grey: #A9ABAC; +$blue-grey: #444F60; +$muted-grey: #999; +$light-blue-grey: #98a9c3; +$medium-grey: #66676b; +$basaltic-grey: #878787; +$purple: #7F00FF; +$mint: #11FFBD; +$bloody: #FC354C; +$pinky: #ff00cc; +$frost: #004e92; +$placeholder: #cecece; +$dark-grey: #344258; +$border-grey: #ccc; +$section-grey: #fbfbfb; + +$text-grey: #4a4a4a; +$text-dark: #333; +$header-grey: #363636; \ No newline at end of file diff --git a/assets/fresh/partials/_colors.scss b/assets/fresh/partials/_colors.scss index c4797ba8..7caaa063 100644 --- a/assets/fresh/partials/_colors.scss +++ b/assets/fresh/partials/_colors.scss @@ -1,30 +1,67 @@ /* ========================================================================== -Color variables +Color variables for edited elements ========================================================================== */ +// buttons +$button-primary-color: $secondary; +$button-primary-text: $white; -$white: #fff; -$smoke-white: #fcfcfc; -$grey-white: #f2f2f2; - -$primary: #4FC1EA; -$secondary: #F39200; -$accent: #00efb7; - -$fade-grey: #ededed; -$light-grey: #EFF4F7; -$title-grey: #A9ABAC; -$blue-grey: #444F60; -$muted-grey: #999; -$light-blue-grey: #98a9c3; -$medium-grey: #66676b; -$basaltic-grey: #878787; -$purple: #7F00FF; -$mint: #11FFBD; -$bloody: #FC354C; -$pinky: #ff00cc; -$frost: #004e92; -$placeholder: #cecece; -$dark-grey: #344258; -$border-grey: #ccc; -$muted-grey: #999; -$section-grey: #fbfbfb; \ No newline at end of file +$button-secondary-color: $primary; +$button-secondary-text: $white; + +$button-accent-color: $accent; +$button-accent-text: $white; + +// cards +$card-feature-background: $white; +$card-feature-header: $blue-grey; +$card-feature-text: $muted-grey; +$card-feature-border: $fade-grey; + +// footer +$footer-background: $blue-grey; +$footer-titles: $white; +$footer-links: $light-blue-grey; +$footer-logos: $primary; +$footer-hover: $smoke-white; + +// forms +$form-text-color: $basaltic-grey; +$form-text-background: $white; +$form-text-boarder: $light-grey; + +// hero & sections +$hero-background-color: $white; +$sections-light-background: $light-grey; +$sections-feature-background: $section-grey; +$sections-alt-background: $primary; + +$sections-title-color: $header-grey; +$sections-subtitle-color: $muted-grey; +$sections-ibtitle-color: $blue-grey; +$sections-ibsubtitle-color: $title-grey; + +$sections-divider-color: $primary; + +// navbar +$navbar-background-color: $white; +$navbar-text-color: $muted-grey; +$navbar-highlight-color: $primary; + +// sidebar +$sidebar-hamburger-color: $primary; +$sidebar-background-color: $dark-grey; +$sidebar-text-color: $white; +$sidebar-x-color: $white; +$sidebar-highlight-color: $primary; + +// testimonials +$testimonials-background-color: $smoke-white; +$testimonials-text-color: $text-dark; +$testimonials-name-color: $blue-grey; +$testimonials-position-color: $white; + +// utils +$utils-preloader-color: $white; +$util-backtop-color: $medium-grey; +$util-backtop-hover-color: $primary; +$util-backtop-arrow-color: $white; \ No newline at end of file diff --git a/assets/fresh/partials/_dropdowns.scss b/assets/fresh/partials/_dropdowns.scss index 2bc73e30..b6ac1a25 100644 --- a/assets/fresh/partials/_dropdowns.scss +++ b/assets/fresh/partials/_dropdowns.scss @@ -2,7 +2,9 @@ Dropdown styles ========================================================================== */ -// Hover Dropdowns +// Hover Dropdowns +// probably irrelevant since I couldn't find the html where nav-item or is-drop are used +// I am keeping it either way, just to make sure soemthing else is not messed div.nav-item.is-drop a { padding-right: 7px; } @@ -11,7 +13,7 @@ div.nav-item.is-drop:hover .dropContain .dropOut { opacity: 1; } -div.nav-item.is-drop:hover, div.nav-item.is-drop:hover a, { +div.nav-item.is-drop:hover, div.nav-item.is-drop:hover a { border-bottom: 1px solid transparent !important; color: $secondary; } diff --git a/assets/fresh/partials/_footer.scss b/assets/fresh/partials/_footer.scss index 74ced3f1..f03accb9 100644 --- a/assets/fresh/partials/_footer.scss +++ b/assets/fresh/partials/_footer.scss @@ -3,8 +3,8 @@ Fresh Footer ========================================================================== */ footer.footer-dark { - background: $blue-grey; - color: $white; + background: $footer-background; + color: $footer-titles; .columns { margin-top: 35px; } @@ -25,19 +25,19 @@ footer.footer-dark { line-height: 40px; font-size: 1.1rem; a { - color: $light-blue-grey; + color: $footer-links; font-weight: 400; transition: all 0.5s; } :hover { - color: $smoke-white; + color: $footer-hover; } } .level-item .icon { - color: $secondary; + color: $footer-logos; transition: all 0.5s; :hover { - color: $smoke-white; + color: $footer-hover; } } } diff --git a/assets/fresh/partials/_forms.scss b/assets/fresh/partials/_forms.scss index 1403650a..65f205eb 100644 --- a/assets/fresh/partials/_forms.scss +++ b/assets/fresh/partials/_forms.scss @@ -3,10 +3,11 @@ Inputs styles ========================================================================== */ input.input { - color: $basaltic-grey; + color: $form-text-color; box-shadow: none !important; transition: all 0.8s; padding-bottom: 3px; + background-color: $form-text-background; &.is-small { padding-bottom: 2px; padding-left: 10px; @@ -18,7 +19,7 @@ input.input { padding-bottom: 7px; } &:focus, &:active { - border-color: $light-grey; + border-color: $form-text-boarder; } &.rounded { border-radius: 100px; @@ -49,6 +50,15 @@ input.input { } } +textarea.textarea { + color: $form-text-color; + background-color: $form-text-background; + + &:focus, &:active { + border-color: $form-text-boarder; + } +} + .form-footer { width: 100%; } \ No newline at end of file diff --git a/assets/fresh/partials/_hero.scss b/assets/fresh/partials/_hero.scss index b527aedf..aeb7acab 100644 --- a/assets/fresh/partials/_hero.scss +++ b/assets/fresh/partials/_hero.scss @@ -3,6 +3,7 @@ Hero styles ========================================================================== */ .hero-body { + background-color: $hero-background-color; padding-top: 6rem; padding-bottom: 6rem; .title, .subtitle { @@ -10,12 +11,13 @@ Hero styles } .title { &.is-bold { + color: $sections-title-color; font-weight: 700; } } .subtitle { &.is-muted { - color: $muted-grey; + color: $sections-subtitle-color; } } } diff --git a/assets/fresh/partials/_navbar.scss b/assets/fresh/partials/_navbar.scss index bf269dbf..33bd0c11 100644 --- a/assets/fresh/partials/_navbar.scss +++ b/assets/fresh/partials/_navbar.scss @@ -8,6 +8,7 @@ Navbar min-height: 3.8rem; transition: all .3s; z-index: 99; + background-color: $navbar-background-color; .container { min-height: 4rem; } @@ -38,38 +39,41 @@ Navbar } //Navbar items .navbar-item { - color: $muted-grey; + background-color: $navbar-background-color; + color: $navbar-text-color; &.is-secondary { &:hover { - color: $secondary !important; + background-color: $navbar-background-color; + color: $navbar-highlight-color !important; } } &.has-dropdown { padding: 10px 0; .navbar-link { - color: $muted-grey; + color: $navbar-text-color; &:after { top: 55%; height: 0.5em; width: 0.5em; border-width: 2px; - border-color: $muted-grey; + border-color: $navbar-text-color; } } .navbar-dropdown { top: 3.4rem; min-width: 220px; margin-top: 4px; - border-top-color: $secondary; + border-top-color: $navbar-highlight-color; .navbar-item { padding: 10px 20px; } } &:hover { .navbar-link { - color: $secondary; + background-color: $navbar-background-color; + color: $navbar-highlight-color; &:after { - border-color: $secondary; + border-color: $navbar-highlight-color; } } } @@ -88,12 +92,12 @@ Navbar left: 0; width: 100%; min-height: 4rem !important; - background: $white; + background: $navbar-background-color; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12); a { - color: $blue-grey; + color: $navbar-text-color; &:hover { - color: $primary; + color: $navbar-highlight-color; } } } diff --git a/assets/fresh/partials/_sections.scss b/assets/fresh/partials/_sections.scss index 75808ebc..56787b87 100644 --- a/assets/fresh/partials/_sections.scss +++ b/assets/fresh/partials/_sections.scss @@ -5,13 +5,13 @@ Section Styles //Sections .section { &.section-light-grey { - background-color: $light-grey; + background-color: $sections-light-background; } &.section-feature-grey { - background-color: $section-grey; + background-color: $sections-feature-background; } - &.section-secondary { - background-color: $secondary; + &.section-alt { + background-color: $sections-alt-background; } &.section-half { height: 75vh !important; @@ -20,9 +20,12 @@ Section Styles font-family: 'Open Sans', sans-serif; } + .title { + color: $sections-title-color; + } .subtitle { &.is-muted { - color: $muted-grey; + color: $sections-subtitle-color; } } } @@ -33,11 +36,13 @@ Section Styles margin: 0 auto; .title, .subtitle { font-family: 'Open Sans', sans-serif; - + } + .title { + color: $sections-title-color; } .subtitle { &.is-muted { - color: $muted-grey; + color: $sections-subtitle-color; } } } @@ -46,7 +51,7 @@ Section Styles .divider { height: 3px; border-radius: 50px; - background: $secondary; + background: $sections-divider-color; width: 60px; &.is-centered { margin: 0 auto; @@ -72,12 +77,12 @@ img.pushed-image { display: block; } .icon-box-title { - color: $blue-grey; + color: $sections-ibtitle-color; font-size: 1.2rem; font-weight: 600; } .icon-box-text { - color: $title-grey; + color: $sections-ibsubtitle-color; font-size: 1rem; font-weight: 400; } diff --git a/assets/fresh/partials/_sidebar.scss b/assets/fresh/partials/_sidebar.scss index 2b0b48d6..dbca8415 100644 --- a/assets/fresh/partials/_sidebar.scss +++ b/assets/fresh/partials/_sidebar.scss @@ -19,7 +19,7 @@ Sidebar Styles transform: scale(0.07); transform-origin: 0 0; path { - stroke: $secondary; + stroke: $sidebar-hamburger-color; stroke-width: 40px; stroke-linecap: round; stroke-linejoin: round; @@ -69,7 +69,7 @@ Sidebar Styles //Sidebar .sidebar { - background: $dark-grey; + background: $sidebar-background-color; width: 280px; height: 100%; position: fixed; @@ -87,7 +87,7 @@ Sidebar Styles display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid lighten($dark-grey, 5%); + border-bottom: 1px solid lighten($sidebar-background-color, 5%); padding: 0 20px; img { height: 32px; @@ -97,12 +97,12 @@ Sidebar Styles height: 24px; } svg { - stroke: $white; + stroke: $sidebar-x-color; transform: rotate(0); transition: all .3s; cursor: pointer; &:hover { - stroke: $secondary; + stroke: $sidebar-highlight-color; transform: rotate(180deg); } } @@ -121,17 +121,20 @@ Sidebar Styles padding: 20px 25px; display: block; text-decoration: none; - color: $white; + color: $sidebar-text-color; &:hover { padding: 20px 25px; display: block; text-decoration: none; - color: $white; + color: $sidebar-highlight-color; + } + &:hover span { + color: $sidebar-highlight-color; } } a span { margin-right: 20px; - color: $white; + color: $sidebar-text-color; } &.have-children { ul { @@ -144,7 +147,7 @@ Sidebar Styles border-bottom: 1px solid darken($dark-grey, 2%); font-size: .8rem; &:hover { - color: $primary; + color: $sidebar-highlight-color; padding-left: 62px; } } @@ -154,7 +157,7 @@ Sidebar Styles top: 27px; right: 30px; content: "\f054"; - color: $white; + color: $sidebar-text-color; transition: all .5s; font-weight: 200 !important; font-size: .8rem; @@ -166,7 +169,7 @@ Sidebar Styles position: relative; } li.have-children.active > a, li.have-children.active > a span, li.have-children.active > a span:after { - color: $secondary; + color: $sidebar-highlight-color; } li.active.have-children span::after { -moz-transform: rotate(90deg); diff --git a/assets/fresh/partials/_testimonials.scss b/assets/fresh/partials/_testimonials.scss index b5eeb7e8..6b6aac62 100644 --- a/assets/fresh/partials/_testimonials.scss +++ b/assets/fresh/partials/_testimonials.scss @@ -9,7 +9,7 @@ Testimonials Styles min-width: 220px; max-width: 310px; width: 100%; - color: #333; + color: $testimonials-text-color; text-align: left; box-shadow: none !important; * { @@ -32,7 +32,7 @@ Testimonials Styles display: block; border-radius: 8px; position: relative; - background-color: $smoke-white; + background-color: $testimonials-background-color; padding: 30px 50px 65px 50px; font-size: 1.2rem; font-weight: 500; @@ -62,7 +62,7 @@ Testimonials Styles height: 80px; display: block; text-align: left; - color: $white; + color: $testimonials-position-color; padding: 0 35px; position: relative; z-index: 0; @@ -78,11 +78,11 @@ Testimonials Styles margin: 0; font-weight: 600; font-size: 1.2rem; - color: $blue-grey; + color: $testimonials-name-color; } span { font-size: 0.8em; - color: $white; + color: $testimonials-position-color; top: 50%; } } diff --git a/assets/fresh/partials/_utils.scss b/assets/fresh/partials/_utils.scss index 8a0ca57a..f32f4e33 100644 --- a/assets/fresh/partials/_utils.scss +++ b/assets/fresh/partials/_utils.scss @@ -16,7 +16,7 @@ button { left: 0; right: 0; bottom: 0; - background-color: $white; + background-color: $utils-preloader-color; z-index: 99; } @@ -61,7 +61,7 @@ button { #backtotop.visible a:hover { outline: none; opacity: 0.9; - background: $secondary; + background: $util-backtop-hover-color; } #backtotop a { @@ -71,7 +71,7 @@ button { display: block; width: 46px; height: 46px; - background-color: $medium-grey; + background-color: $util-backtop-color; opacity: 1; transition: all 0.3s; border-radius: 50%; @@ -81,7 +81,7 @@ button { body #backtotop a { outline: none; - color: #fff; + color: $util-backtop-arrow-color; } #backtotop a:after { diff --git a/layouts/partials/section2.html b/layouts/partials/section2.html index 3bc7160a..0f3025f5 100644 --- a/layouts/partials/section2.html +++ b/layouts/partials/section2.html @@ -2,7 +2,7 @@ {{- $title := index $section2 "title" }} {{- $subtitle := index $section2 "subtitle" }} {{- $features := index $section2 "features" }} -
+
diff --git a/layouts/partials/section4.html b/layouts/partials/section4.html index 3ba05a55..5494d403 100644 --- a/layouts/partials/section4.html +++ b/layouts/partials/section4.html @@ -2,7 +2,7 @@ {{- $title := index $section4 "title" }} {{- $subtitle := index $section4 "subtitle" }} {{- $clients := index $section4 "clients" }} -
+
From 9b566ea2b1d39fd0a0e24b3cf4f20a56afbaee74 Mon Sep 17 00:00:00 2001 From: "U. I. I. Derbashi" <32719218+uderbashi@users.noreply.github.com> Date: Wed, 23 Nov 2022 11:37:36 +0300 Subject: [PATCH 2/4] added some missing variables --- assets/fresh/partials/_forms.scss | 10 ++-------- assets/fresh/partials/_sidebar.scss | 4 ++-- assets/fresh/partials/_utils.scss | 8 ++++---- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/assets/fresh/partials/_forms.scss b/assets/fresh/partials/_forms.scss index 65f205eb..6e032c63 100644 --- a/assets/fresh/partials/_forms.scss +++ b/assets/fresh/partials/_forms.scss @@ -19,7 +19,7 @@ input.input { padding-bottom: 7px; } &:focus, &:active { - border-color: $form-text-boarder; + border-color: $form-text-border; } &.rounded { border-radius: 100px; @@ -42,12 +42,6 @@ input.input { color: $accent; } } - &.is-bloody-focus:focus { - border-color: $bloody; - ~ span.icon i { - color: $bloody; - } - } } textarea.textarea { @@ -55,7 +49,7 @@ textarea.textarea { background-color: $form-text-background; &:focus, &:active { - border-color: $form-text-boarder; + border-color: $form-text-border; } } diff --git a/assets/fresh/partials/_sidebar.scss b/assets/fresh/partials/_sidebar.scss index dbca8415..e63da32b 100644 --- a/assets/fresh/partials/_sidebar.scss +++ b/assets/fresh/partials/_sidebar.scss @@ -142,9 +142,9 @@ Sidebar Styles } li { a { - background-color: darken($dark-grey, 5%); + background-color: darken($sidebar-background-color, 5%); padding-left: 62px; - border-bottom: 1px solid darken($dark-grey, 2%); + border-bottom: 1px solid darken($sidebar-background-color, 2%); font-size: .8rem; &:hover { color: $sidebar-highlight-color; diff --git a/assets/fresh/partials/_utils.scss b/assets/fresh/partials/_utils.scss index f32f4e33..f6844412 100644 --- a/assets/fresh/partials/_utils.scss +++ b/assets/fresh/partials/_utils.scss @@ -163,14 +163,14 @@ body #backtotop a { //Input placeholders ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: $placeholder; + color: $util-placeholder-color; } ::-moz-placeholder { /* Firefox 19+ */ - color: $placeholder; + color: $util-placeholder-color; } :-ms-input-placeholder { /* IE 10+ */ - color: $placeholder; + color: $util-placeholder-color; } :-moz-placeholder { /* Firefox 18- */ - color: $placeholder; + color: $util-placeholder-color; } \ No newline at end of file From d6042c57567183d7266e8bd2bdec57026c2e90ff Mon Sep 17 00:00:00 2001 From: "U. I. I. Derbashi" <32719218+uderbashi@users.noreply.github.com> Date: Wed, 23 Nov 2022 11:38:27 +0300 Subject: [PATCH 3/4] completely parametarised the colours (did not completely preserve original) --- assets/fresh/partials/_cards.scss | 88 ++++++------ assets/fresh/partials/_colorpalette.scss | 35 ++--- assets/fresh/partials/_colors.scss | 67 ++++----- assets/fresh/partials/_dropdowns.scss | 166 +++++++++++------------ 4 files changed, 169 insertions(+), 187 deletions(-) diff --git a/assets/fresh/partials/_cards.scss b/assets/fresh/partials/_cards.scss index 64a01943..f5e38f7e 100644 --- a/assets/fresh/partials/_cards.scss +++ b/assets/fresh/partials/_cards.scss @@ -39,48 +39,48 @@ Cards and Card content styles // Flex Card // probably irrelevant since I couldn't find the html where this is used // I am keeping it either way, just to make sure soemthing else is not messed -.flex-card { - position: relative; - background-color: #fff; - border: 0; - border-radius: 0.1875rem; - display: inline-block; - position: relative; - overflow: hidden; - width: 100%; - margin-bottom: 20px; - &.raised { - box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); - } - .tabs { - padding: 15px 0.7rem; - } - .navtab-content { - min-height: 190px; - p { - padding: 0 0.8rem 20px; - } - } - .navigation-tabs { - &.outlined-pills .tabs.tabs-header { - &.primary { - background-color: $primary; - } - &.secondary { - background-color: $secondary; - } - &.accent { - background-color: $accent; - } - ul li a { - color: $grey-white; - } - ul li.is-active a { - color: $white; - border: 1px solid $white; - border-bottom-color: $white !important; - } - } - } +// .flex-card { +// position: relative; +// background-color: #fff; +// border: 0; +// border-radius: 0.1875rem; +// display: inline-block; +// position: relative; +// overflow: hidden; +// width: 100%; +// margin-bottom: 20px; +// &.raised { +// box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); +// } +// .tabs { +// padding: 15px 0.7rem; +// } +// .navtab-content { +// min-height: 190px; +// p { +// padding: 0 0.8rem 20px; +// } +// } +// .navigation-tabs { +// &.outlined-pills .tabs.tabs-header { +// &.primary { +// background-color: $primary; +// } +// &.secondary { +// background-color: $secondary; +// } +// &.accent { +// background-color: $accent; +// } +// ul li a { +// color: $grey-white; +// } +// ul li.is-active a { +// color: $white; +// border: 1px solid $white; +// border-bottom-color: $white !important; +// } +// } +// } -} \ No newline at end of file +// } \ No newline at end of file diff --git a/assets/fresh/partials/_colorpalette.scss b/assets/fresh/partials/_colorpalette.scss index 06363a88..0d9ca81e 100644 --- a/assets/fresh/partials/_colorpalette.scss +++ b/assets/fresh/partials/_colorpalette.scss @@ -1,33 +1,14 @@ /* ========================================================================== Color definitions to be used for the differnt elements ========================================================================== */ - -$white: #fff; -$smoke-white: #fcfcfc; -$grey-white: #f2f2f2; - $primary: #F39200; $secondary: #4FC1EA; $accent: #00efb7; - -$fade-grey: #ededed; -$light-grey: #EFF4F7; -$title-grey: #A9ABAC; -$blue-grey: #444F60; -$muted-grey: #999; -$light-blue-grey: #98a9c3; -$medium-grey: #66676b; -$basaltic-grey: #878787; -$purple: #7F00FF; -$mint: #11FFBD; -$bloody: #FC354C; -$pinky: #ff00cc; -$frost: #004e92; -$placeholder: #cecece; -$dark-grey: #344258; -$border-grey: #ccc; -$section-grey: #fbfbfb; - -$text-grey: #4a4a4a; -$text-dark: #333; -$header-grey: #363636; \ No newline at end of file +$background: #fff; +$navbar: #fff; +$title: #444F60; +$subtitle: darken(adjust-hue($background, 200), 33); +$light-title: lighten($title, 35); +$border: darken($background, 7.1); +$header: darken($background, 79); +$subheader: darken($background, 40); \ No newline at end of file diff --git a/assets/fresh/partials/_colors.scss b/assets/fresh/partials/_colors.scss index 7caaa063..b43acf68 100644 --- a/assets/fresh/partials/_colors.scss +++ b/assets/fresh/partials/_colors.scss @@ -3,65 +3,66 @@ Color variables for edited elements ========================================================================== */ // buttons $button-primary-color: $secondary; -$button-primary-text: $white; +$button-primary-text: $background; $button-secondary-color: $primary; -$button-secondary-text: $white; +$button-secondary-text: $background; $button-accent-color: $accent; -$button-accent-text: $white; +$button-accent-text: $background; // cards -$card-feature-background: $white; -$card-feature-header: $blue-grey; -$card-feature-text: $muted-grey; -$card-feature-border: $fade-grey; +$card-feature-background: $background; +$card-feature-header: $title; +$card-feature-text: $subtitle; +$card-feature-border: $border; // footer -$footer-background: $blue-grey; -$footer-titles: $white; -$footer-links: $light-blue-grey; +$footer-background: $title; +$footer-titles: $background; +$footer-links: $light-title; $footer-logos: $primary; -$footer-hover: $smoke-white; +$footer-hover: $background; // forms -$form-text-color: $basaltic-grey; -$form-text-background: $white; -$form-text-boarder: $light-grey; +$form-text-color: $subtitle; +$form-text-background: $background; +$form-text-border: $border; // hero & sections -$hero-background-color: $white; -$sections-light-background: $light-grey; -$sections-feature-background: $section-grey; +$hero-background-color: $background; +$sections-light-background: $border; +$sections-feature-background: $background; $sections-alt-background: $primary; -$sections-title-color: $header-grey; -$sections-subtitle-color: $muted-grey; -$sections-ibtitle-color: $blue-grey; -$sections-ibsubtitle-color: $title-grey; +$sections-title-color: $header; +$sections-subtitle-color: $subheader; +$sections-ibtitle-color: $title; +$sections-ibsubtitle-color: $subtitle; $sections-divider-color: $primary; // navbar -$navbar-background-color: $white; -$navbar-text-color: $muted-grey; +$navbar-background-color: $navbar; +$navbar-text-color: $subheader; $navbar-highlight-color: $primary; // sidebar $sidebar-hamburger-color: $primary; -$sidebar-background-color: $dark-grey; -$sidebar-text-color: $white; -$sidebar-x-color: $white; +$sidebar-background-color: $title; +$sidebar-text-color: $background; +$sidebar-x-color: $background; $sidebar-highlight-color: $primary; // testimonials -$testimonials-background-color: $smoke-white; -$testimonials-text-color: $text-dark; -$testimonials-name-color: $blue-grey; -$testimonials-position-color: $white; +$testimonials-background-color: $background; +$testimonials-text-color: $header; +$testimonials-name-color: $title; +$testimonials-position-color: $background; // utils -$utils-preloader-color: $white; -$util-backtop-color: $medium-grey; +$utils-preloader-color: $background; +$util-backtop-color: $subtitle; $util-backtop-hover-color: $primary; -$util-backtop-arrow-color: $white; \ No newline at end of file +$util-backtop-arrow-color: $background; +$util-placeholder-color: $light-title; \ No newline at end of file diff --git a/assets/fresh/partials/_dropdowns.scss b/assets/fresh/partials/_dropdowns.scss index b6ac1a25..088178e3 100644 --- a/assets/fresh/partials/_dropdowns.scss +++ b/assets/fresh/partials/_dropdowns.scss @@ -5,91 +5,91 @@ Dropdown styles // Hover Dropdowns // probably irrelevant since I couldn't find the html where nav-item or is-drop are used // I am keeping it either way, just to make sure soemthing else is not messed -div.nav-item.is-drop a { - padding-right: 7px; -} +// div.nav-item.is-drop a { +// padding-right: 7px; +// } -div.nav-item.is-drop:hover .dropContain .dropOut { - opacity: 1; -} +// div.nav-item.is-drop:hover .dropContain .dropOut { +// opacity: 1; +// } -div.nav-item.is-drop:hover, div.nav-item.is-drop:hover a { - border-bottom: 1px solid transparent !important; - color: $secondary; -} +// div.nav-item.is-drop:hover, div.nav-item.is-drop:hover a { +// border-bottom: 1px solid transparent !important; +// color: $secondary; +// } -div.nav-item.is-drop:hover .dropContain { - top: 65px; - animation: fadeInUp 0.27s ease-out; -} +// div.nav-item.is-drop:hover .dropContain { +// top: 65px; +// animation: fadeInUp 0.27s ease-out; +// } -span.drop-caret { - position: relative; - top: 5px; -} +// span.drop-caret { +// position: relative; +// top: 5px; +// } -div.nav-item.is-drop { - position: relative; - .dropContain { - width: 220px; - position: absolute; - z-index: 3; - left: 50%; - margin-left: -110px; /* half of width */ - top: -400px; - .dropOut { - width: 220px; - background: $white; - float: left; - position: relative; - margin-top: 15px; - opacity: 0; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); - -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); - box-shadow: 0 1px 6px rgba(0,0,0,.15); - -webkit-transition: all .5s ease-out; - -moz-transition: all .5s ease-out; - -ms-transition: all .5s ease-out; - -o-transition: all .5s ease-out; - transition: all .5s ease-out; - } - .dropOut .triangle { - width: 0; - height: 0; - position: absolute; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid $white; - top: -8px; - left: 50%; - margin-left: -8px; - } - .dropOut ul li { - text-align: left; - float: left; - width: 200px; - padding: 12px 0 10px 15px; - margin: 0px 10px; - color: #777; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-transition: background .1s ease-out; - -moz-transition: background .1s ease-out; - -ms-transition: background .1s ease-out; - -o-transition: background .1s ease-out; - transition: background .1s ease-out; - &:hover { - background: $light-grey; - cursor: pointer; - } - } - .dropOut ul { - float: left; - padding: 10px 0; - } - } -} \ No newline at end of file +// div.nav-item.is-drop { +// position: relative; +// .dropContain { +// width: 220px; +// position: absolute; +// z-index: 3; +// left: 50%; +// margin-left: -110px; /* half of width */ +// top: -400px; +// .dropOut { +// width: 220px; +// background: $white; +// float: left; +// position: relative; +// margin-top: 15px; +// opacity: 0; +// -webkit-border-radius: 4px; +// -moz-border-radius: 4px; +// border-radius: 4px; +// -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); +// -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); +// box-shadow: 0 1px 6px rgba(0,0,0,.15); +// -webkit-transition: all .5s ease-out; +// -moz-transition: all .5s ease-out; +// -ms-transition: all .5s ease-out; +// -o-transition: all .5s ease-out; +// transition: all .5s ease-out; +// } +// .dropOut .triangle { +// width: 0; +// height: 0; +// position: absolute; +// border-left: 8px solid transparent; +// border-right: 8px solid transparent; +// border-bottom: 8px solid $white; +// top: -8px; +// left: 50%; +// margin-left: -8px; +// } +// .dropOut ul li { +// text-align: left; +// float: left; +// width: 200px; +// padding: 12px 0 10px 15px; +// margin: 0px 10px; +// color: #777; +// -webkit-border-radius: 4px; +// -moz-border-radius: 4px; +// border-radius: 4px; +// -webkit-transition: background .1s ease-out; +// -moz-transition: background .1s ease-out; +// -ms-transition: background .1s ease-out; +// -o-transition: background .1s ease-out; +// transition: background .1s ease-out; +// &:hover { +// background: $light-grey; +// cursor: pointer; +// } +// } +// .dropOut ul { +// float: left; +// padding: 10px 0; +// } +// } +// } \ No newline at end of file From 35d7ae33516c9499128fc4a4bacddba5d13d6b1b Mon Sep 17 00:00:00 2001 From: "U. I. I. Derbashi" <32719218+uderbashi@users.noreply.github.com> Date: Tue, 29 Nov 2022 15:08:37 +0300 Subject: [PATCH 4/4] added a small fix in navbar colours --- assets/fresh/partials/_navbar.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/fresh/partials/_navbar.scss b/assets/fresh/partials/_navbar.scss index 33bd0c11..30b019f3 100644 --- a/assets/fresh/partials/_navbar.scss +++ b/assets/fresh/partials/_navbar.scss @@ -63,6 +63,7 @@ Navbar top: 3.4rem; min-width: 220px; margin-top: 4px; + background-color: $navbar-background-color; border-top-color: $navbar-highlight-color; .navbar-item { padding: 10px 20px; @@ -109,7 +110,7 @@ Navbar top: 0; left: 0; width: 100%; - background: $white; + background: $navbar-background-color; transform: translateY(-100%); z-index: 100; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);