From d463715d2bbb41de0c3ab6b5e79290bae2e436d0 Mon Sep 17 00:00:00 2001 From: smoke-ck <2056sanya9snake@gmail.com> Date: Fri, 22 Mar 2024 13:28:36 +0200 Subject: [PATCH 01/99] Add dark theme styles --- .../services_development_consultation.html | 2 +- _sass/about.scss | 6 ++-- _sass/accordion.scss | 7 +++-- _sass/buttons.scss | 12 ++++---- _sass/development.scss | 2 +- _sass/expertise.scss | 13 +++++---- _sass/index.scss | 11 +++++-- _sass/mob_dev_services.scss | 6 ++-- _sass/navbar.scss | 10 +++---- _sass/project_dev_services.scss | 4 +-- _sass/ror_dev_services.scss | 16 ++++------ _sass/services.scss | 2 +- _sass/staff_augmentation_services.scss | 6 ++-- _sass/variables.scss | 29 +++++++++++++++++-- _sass/web_dev_services.scss | 7 ++--- about.html | 6 ++-- assets/css/main.scss | 5 ++-- expertise.html | 6 ++-- index.html | 4 +-- services.html | 6 ++-- services/dedicated-teams-cooperation.html | 16 +++++----- services/mobile-app-development.html | 8 ++--- services/project-development-cooperation.html | 6 ++-- services/ruby-on-rails-development.html | 12 ++++---- services/web-development.html | 6 ++-- 25 files changed, 116 insertions(+), 92 deletions(-) diff --git a/_includes/services_development_consultation.html b/_includes/services_development_consultation.html index 7a7e3e9b..c229935b 100644 --- a/_includes/services_development_consultation.html +++ b/_includes/services_development_consultation.html @@ -6,7 +6,7 @@ -
+
{% include solutions_subpages_carousel.html %} {{ site.data.services.approaches.button }} diff --git a/_sass/about.scss b/_sass/about.scss index 25c41fc0..17f9be6e 100644 --- a/_sass/about.scss +++ b/_sass/about.scss @@ -26,7 +26,6 @@ &__vision { &-description { margin-bottom: 3em; - color: $black; text-align: justify; } } @@ -93,7 +92,7 @@ height: 60%; right: 0; top: 40%; - background-color: rgba(252, 252, 252, 0.7); + background-color: var(--rgba-white); backdrop-filter: blur(1.5px); } @@ -163,7 +162,6 @@ &__testimonials { background: center/cover no-repeat url('/assets/images/about/about-bg.webp'); padding: 150px 0 80px 0; - &-title { margin-bottom: 5vh; } } @@ -224,7 +222,7 @@ &__item-image { align-items: center; - background-color: $white; + background-color: var(--white); border: 6px solid $pie-chart-border; border-radius: 50%; display: flex; diff --git a/_sass/accordion.scss b/_sass/accordion.scss index e7371b16..be308a08 100644 --- a/_sass/accordion.scss +++ b/_sass/accordion.scss @@ -2,7 +2,7 @@ &__item { position: sticky; margin-bottom: 3em; - background-color: $white; + background-color: var(--white); border-radius: 1em; box-shadow: $main-shadow; user-select: none; @@ -68,7 +68,10 @@ text-align: justify; transition: max-height .4s ease-out; - p { padding: 1em 1.5em 1.5em; } + p { + color: var(--black); + padding: 1em 1.5em 1.5em; + } } diff --git a/_sass/buttons.scss b/_sass/buttons.scss index c4fa4be2..da7a6267 100644 --- a/_sass/buttons.scss +++ b/_sass/buttons.scss @@ -12,7 +12,7 @@ border-radius: 56px; box-sizing: border-box; box-shadow: $main-shadow; - color: $dark_black; + color: var(--black); font-family: 'Cera-Medium'; font-size: 16px; letter-spacing: 0.5em; @@ -31,7 +31,7 @@ width: 100%; height: 100%; box-shadow: $violet-hover-shadow; - background: linear-gradient($white, $white) padding-box, + background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, $main-violet, $purple-heart) border-box; opacity: 0; -webkit-transition: all .3s ease-in-out; @@ -40,9 +40,7 @@ } &:hover::after { opacity: 1; } - - &:visited { color: $dark_black; } - + &:visited { color: var(--black); } &:active { box-shadow: $active-shadow; } } @@ -56,14 +54,14 @@ .button { height: 100px; max-width: 500px; - color: $white; + color: var(--white); font-weight: 700; line-height: 150%; letter-spacing: 10px; padding: 22px; margin-top: 0; - &:hover { color: $black_sea; } + &:hover { color: var(--black); } } } diff --git a/_sass/development.scss b/_sass/development.scss index 58922e86..38012fde 100644 --- a/_sass/development.scss +++ b/_sass/development.scss @@ -36,7 +36,7 @@ } &__cards { - background: radial-gradient(circle, rgba($buzok, 1) 0%, rgba($white, 1) 60%); + background: radial-gradient(circle, rgba($buzok, 1) 0%, rgba(var(--rgba-white)) 60%); box-shadow: inset -6px 12px 15px -7px $moon_raker; .header-2, diff --git a/_sass/expertise.scss b/_sass/expertise.scss index 3708520e..12837253 100644 --- a/_sass/expertise.scss +++ b/_sass/expertise.scss @@ -22,14 +22,11 @@ &__technologies { background: center/cover no-repeat url('/assets/images/expertise/technologies-bg.webp'); box-shadow: 0px 0px 20px -3px grey;; - .header-3 { font-size: 1.3em; } - .header-2 { margin-top: 1vh; } - img { margin: 5vh 0; } - .description { margin-bottom: 3vh; } + .header-2, .header-3, .description { color: $dark_black; } } &__industries { @@ -41,7 +38,10 @@ &__main, &__solutions, &__testimonials { - .header-2 { max-width: 100%; } + .header-2 { + color: $dark_black; + max-width: 100%; + } } &__solutions .header-2 { @@ -80,7 +80,7 @@ margin: 6vh 0; padding: 6vh 6vw; border-radius: 20px; - background: $white; + background: var(--white); box-shadow: $main-shadow; .chart-bar { @@ -118,6 +118,7 @@ } &-asterisk { + color: var(--black); margin-left: 2vw; margin-top: 2vh; display: flex; diff --git a/_sass/index.scss b/_sass/index.scss index 7a6a7608..d11f68ab 100644 --- a/_sass/index.scss +++ b/_sass/index.scss @@ -41,13 +41,18 @@ body { } .description { + color: $dark_black; position: inherit; max-width: 520px; width: 100%; z-index: 1; } - .button { background: rgba($white, .4); } + .button { + background: rgba(var(--rgba-white), .4); + color: $dark_black; + &:hover { color: var(--black); } + } } .awards-img { @@ -94,7 +99,7 @@ body { &-technologies { &__container { padding-top: 8vh; - background: linear-gradient(135deg, $white, $main-lilac); + background: linear-gradient(135deg, var(--white), $main-lilac); .header-4 { margin: 7vh 0 4vh 0; @@ -139,7 +144,7 @@ body { height: calc(100% - 10vw); padding: 5vw; overflow: hidden; - background: linear-gradient(135deg, #EBDEF5, $main-lilac); + background: linear-gradient(135deg, #EBDEF5, var(--white)); border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); diff --git a/_sass/mob_dev_services.scss b/_sass/mob_dev_services.scss index 16caf930..b9ef716e 100644 --- a/_sass/mob_dev_services.scss +++ b/_sass/mob_dev_services.scss @@ -41,7 +41,7 @@ } &__cross_platform { - background-image: linear-gradient($white, $palianytsia); + background-image: linear-gradient(var(--white), $palianytsia); &.development__cards { .cards-container { @@ -57,15 +57,15 @@ } &__react_native { - background-image: linear-gradient($sky-ua, $white); + background-image: linear-gradient($sky-ua, var(--white)); box-shadow: 0 4px 25px 0 rgba($purple-heart, .25); - .description.with_margin { margin: 6vh 0; } } &__flutter { background-image: linear-gradient(-135deg, $moon_raker 28.4%, rgba($moon_raker, .25) 52.42%, $moon_raker 73.77%); box-shadow: 0 4px 25px 0 rgba($purple-heart, .25); + filter: var(--filter-invert); } &__ionic { diff --git a/_sass/navbar.scss b/_sass/navbar.scss index 3cf3f419..f2bd9429 100644 --- a/_sass/navbar.scss +++ b/_sass/navbar.scss @@ -5,7 +5,7 @@ header { position: fixed; z-index: 5; width: 100%; - background-color: $white; + background-color: var(--white); box-shadow: 0px 4px 4px 0px rgba(#000, .25); view-transition-name: header; @@ -39,7 +39,7 @@ header { &__link { margin: 0 1.5vw; - color: $black; + color: var(--black); font-size: 0.8em; text-transform: uppercase; text-decoration: none; @@ -52,7 +52,7 @@ header { &__link-contact { margin: 0; padding: 0.6em 2.2em; - background: linear-gradient($white, $white) padding-box, + background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, $main-violet, $purple-heart) border-box; border: 1px solid transparent; border-radius: 50px; @@ -119,7 +119,7 @@ header { &__item:hover .header-navbar__subitems { min-width: 100%; padding: 20px 0; - background-color: $white; + background-color: var(--white); border-radius: 1em; visibility: visible; padding-inline-start: 0; @@ -129,7 +129,7 @@ header { .header-navbar__sub-link { display: block; padding: 10px 20px; - color: $black; + color: var(--black); font-size: 0.7em; letter-spacing: 0.1em; text-decoration: none; diff --git a/_sass/project_dev_services.scss b/_sass/project_dev_services.scss index 06f0a516..62694435 100644 --- a/_sass/project_dev_services.scss +++ b/_sass/project_dev_services.scss @@ -17,7 +17,7 @@ &__main { padding: 14vh 0 6vh; - background-image: linear-gradient($palianytsia, $white, $white, $buzok); + background-image: linear-gradient($palianytsia, var(--white), var(--white), $buzok); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .25); .list-with-images.horizontal:not(:last-child) { @@ -124,7 +124,7 @@ .dev_services__cards .header-2 { margin: 2vh auto 8vh; } .development__cards { - background-image: linear-gradient($kviten, $white); + background-image: linear-gradient($kviten, var(--white)); box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25); .header-2 { margin: 0 0 2vh; } diff --git a/_sass/ror_dev_services.scss b/_sass/ror_dev_services.scss index 0533e22b..aac224a7 100644 --- a/_sass/ror_dev_services.scss +++ b/_sass/ror_dev_services.scss @@ -5,13 +5,10 @@ } &__main { - background-image: linear-gradient(135deg, $sky-ua, $white); + background-image: linear-gradient(135deg, $sky-ua, var(--white)); box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25); - &.wrap { padding-top: 14vh; } - .header-2:last-child { font-size: 1.3em; } - .description { margin: 6vh 0; } img { @@ -22,9 +19,8 @@ } &__ror { - background-image: linear-gradient($kviten, $white, $white); + background-image: linear-gradient($kviten, var(--white), var(--white)); box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25); - .list-with-images { margin-bottom: 0; @@ -36,6 +32,7 @@ background: radial-gradient(circle, rgba($palianytsia, 1) 0%, rgba($white, 1) 60%); box-shadow: inset 0px 12px 15px -7px $moon_raker; transition: all 1s ease-out; + filter: var(--filter-invert); & * { transition: all 1s ease-out; @@ -108,7 +105,7 @@ } &__quality { - background-image: linear-gradient(-135deg, $azovstal, $white); + background-image: linear-gradient(-135deg, $azovstal, var(--white)); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .25); .header-2 { @@ -126,14 +123,13 @@ } &__quality-awards { - background-image: linear-gradient(to left, $azovstal, $white); + background-image: linear-gradient(to left, $azovstal, var(--white)); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .25); - .development__awards { margin-top: 0; } } &__approaches { - background-image: linear-gradient(-135deg, $sky-ua, $white); + background-image: linear-gradient(-135deg, $sky-ua, var(--white)); box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25); .list-with-images__item:not(:first-child) { diff --git a/_sass/services.scss b/_sass/services.scss index 68f978e6..69a177fb 100644 --- a/_sass/services.scss +++ b/_sass/services.scss @@ -101,7 +101,7 @@ } &__mobile-dev { - background: radial-gradient(circle, rgba(212,184,234,1) 0%, rgba(255,255,255,1) 100%); + background: radial-gradient(circle, rgba(212,184,234,1) 0%, rgba(var(--rgba-white)) 100%); } &__engagement-models { diff --git a/_sass/staff_augmentation_services.scss b/_sass/staff_augmentation_services.scss index d0852b0f..4f51e77c 100644 --- a/_sass/staff_augmentation_services.scss +++ b/_sass/staff_augmentation_services.scss @@ -100,10 +100,9 @@ } &__dedicated_model { - background-image: linear-gradient(30deg, #C685D7 0%, $white 82%); + background-image: linear-gradient(30deg, #C685D7 0%, var(--white) 82%); box-shadow: inset 0px 12px 15px -7px rgba($purple-heart, 0.25), 0 4px 4px 0 rgba(0, 0, 0, .25); padding-top: 8vh; - .header-3 + .header-2.with-margin { text-align: justify; } &_description { @@ -172,8 +171,7 @@ } &__services { - background-image: linear-gradient($white, $sky-ua); - box-shadow: 0 4px 25px 0 rgba($purple-heart, .25); + background-image: linear-gradient(var(--white), $sky-ua); .header-2 { max-width: 70%; diff --git a/_sass/variables.scss b/_sass/variables.scss index d052ba7f..e90d3a0e 100644 --- a/_sass/variables.scss +++ b/_sass/variables.scss @@ -24,12 +24,37 @@ $sky-ua: #8cc9fc; $titan_white: #F4F3FF; $white: #fff; $dark_black: #000; +$dark-theme-white: #fff; +$dark-theme-black: #000; + +$rgba-white: 255,255,255; +$rgba-black: 0,0,0,1; $main-gradient: linear-gradient(135deg, $main-violet, $purple-heart); -$active-shadow: inset 2px 2px 5px grey, inset -2px -2px 5px $white; +$active-shadow: inset 2px 2px 5px grey, inset -2px -2px 5px var(--white); $violet-shadow: inset 2px 7px 10px -5px #9c64d2, inset -4px -5px 16px #4c2b84; $light-purple-shadow: 2px 2px 18px 2px rgba(0, 0, 0, .15), inset 0px 4px 15px 0 rgba(0, 0, 0, .15); $main-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2), inset -2px -2px 12px rgba(0, 0, 0, 0.25); -$violet-hover-shadow: inset -1px 4px 13px -5px $white, inset -1px -5px 5px $deep_amethyst, 2px 1px 12px 0px $main-violet; +$violet-hover-shadow: inset -1px 4px 13px -5px var(--white), inset -1px -5px 5px $deep_amethyst, 2px 1px 12px 0px $main-violet; $violet-active-shadow: inset 0px 0px 15px 1px rgba($main-violet, 0.3); + +:root { + --filter-invert: invert(0); + --white: #{$white}; + --black: #{$dark_black}; + --rgba-white: #{$rgba-white}; + .dark-text-inversion { h1,h2,h3,h4,p,div,li {color: var(--black) } } +} + + +@media (prefers-color-scheme: dark) { + :root { + --filter-invert: invert(1) hue-rotate(180deg); + --white: #{$dark_black}; + --black: #{$white}; + --rgba-white: #{$rgba-black}; + .dark-text-inversion { h1,h2,h3,h4,p,div,li {color: var(--black) } } + .dark-background-dark-content { background-color: $black_sea; } + } +} diff --git a/_sass/web_dev_services.scss b/_sass/web_dev_services.scss index 8388a92a..c18a9522 100644 --- a/_sass/web_dev_services.scss +++ b/_sass/web_dev_services.scss @@ -29,15 +29,14 @@ &__main { background-image: linear-gradient(to right top, $moon_raker, #F7EFFC, $moon_raker); - + filter: var(--filter-invert); .description { margin: 8vh 0; } } &__web_solutions { - background-image: linear-gradient(to bottom, $white, $palianytsia); + background-image: linear-gradient(to bottom, var(--white), $palianytsia); box-shadow: 0px 0px 15px 0px $moon_raker; - .header-2 { font-size: 1.3em; line-height: 1.6; @@ -102,7 +101,7 @@ } &__customized_approach { - background-image: linear-gradient(to bottom, $buzok, $white, $white); + background-image: linear-gradient(to bottom, $buzok, var(--white), var(--white)); box-shadow: inset -6px 20px 15px -12px #6b6897; } diff --git a/about.html b/about.html index 15c31bf5..b1502c17 100644 --- a/about.html +++ b/about.html @@ -41,14 +41,14 @@

{{ site.data.about.header }}

-
+
{{ site.data.about.information.first }}
{{ site.data.about.information.second }}
-

{{ site.data.about.company_vision.titlet }}

+

{{ site.data.about.company_vision.title }}

{{ site.data.about.company_vision.subtitle }}

{{ site.data.about.company_vision.description }} @@ -73,7 +73,7 @@

{{ site.data.about.company_vision.subtitle }}

-
+
{{ site.data.about.benefits.title }}

{{ site.data.about.benefits.subtitle }}

diff --git a/assets/css/main.scss b/assets/css/main.scss index c3676fd9..d4fc000f 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -69,11 +69,12 @@ p { margin: 0; } body { font-family: 'Cera Regular', serif; -webkit-tap-highlight-color: transparent; + background-color: var(--white); } a:hover { text-decoration: none !important; } -a:visited { color: $black; } +a:visited { color: var(--black); } ul, ol { margin-left: 0; } @@ -116,7 +117,7 @@ ul, ol { margin-left: 0; } .header-4 { font-size: 1.2em; - color: $black; + color: $black;; } .header-5 { diff --git a/expertise.html b/expertise.html index 901e85a4..bee585de 100644 --- a/expertise.html +++ b/expertise.html @@ -12,7 +12,7 @@
-
+
{{ site.data.expertise.main.title }}

{{ site.data.expertise.main.subtitle }}

{{ site.data.expertise.main.description_1 }}
@@ -31,8 +31,8 @@

{{ site.data.expertise.technologies.subtitle }}

-
-
+
+
{{ site.data.expertise.industries.projects }}
{{ site.data.expertise.industries.subtitle }}
{{ site.data.expertise.industries.title }}
diff --git a/index.html b/index.html index 4a0cd9aa..90817917 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@
-
+

{{ site.data.index.our_vision }}

{{ site.data.index.care_about_your_projects }}

@@ -88,7 +88,7 @@

{{ site.data.index.core_technology }}

-
+

{{ site.data.index.expert_web_services }}

{{ site.data.index.embedded_teams }} diff --git a/services.html b/services.html index 1f9cd93c..ebe7469c 100644 --- a/services.html +++ b/services.html @@ -85,7 +85,7 @@

{{ item.title }}

-
+

{{ site.data.services.mobile_dev_services.title }}

{{ site.data.services.mobile_dev_services.description }}
@@ -129,7 +129,7 @@

{{ site.data.services.mobile_dev_services.title }}

-
+
{{ site.data.services.approaches.subtitle }}
{{ site.data.services.approaches.title }}
@@ -138,7 +138,7 @@

{{ site.data.services.mobile_dev_services.title }}

{% for item in site.data.services.approaches.all %} -
+
Approach
diff --git a/services/dedicated-teams-cooperation.html b/services/dedicated-teams-cooperation.html index a4bc3550..c7dd8d3e 100644 --- a/services/dedicated-teams-cooperation.html +++ b/services/dedicated-teams-cooperation.html @@ -11,7 +11,7 @@
-
+
{{ site.data.team_extension.title }}
{{ site.data.team_extension.subtitle }}
@@ -30,7 +30,7 @@
-
+

{{ site.data.team_extension.team_as_service.title }}

{{ site.data.team_extension.team_as_service.subtitle }} @@ -52,7 +52,7 @@

{{ site.data.team_extension.team_as_service.title }}

-
+

{{ site.data.team_extension.extension.title }}

{{ site.data.team_extension.extension.description }} @@ -76,7 +76,7 @@

{{ site.data.team_extension.extension.title }}

-
+

{{ site.data.team_extension.advantages.title }}

{{ site.data.team_extension.advantages.subtitle }} @@ -98,7 +98,7 @@

{{ site.data.team_extension.advantages.title }}

-
+

{{ site.data.team_extension.dedicated_model.title }}

{{ site.data.team_extension.dedicated_model.subtitle_1 }} @@ -130,7 +130,7 @@

{{ site.data.team_extension.dedicated_model.title }}

-
+
Key
{{ site.data.team_extension.benefits.title }}
@@ -154,7 +154,7 @@

{{ site.data.team_extension.dedicated_model.title }}

-
+
{{ site.data.team_extension.process.title }}
@@ -177,7 +177,7 @@

{{ site.data.team_extension.dedicated_model.title }}

-
+
{{ site.data.team_extension.services.title }}
{% for item in site.data.team_extension.services.all %} diff --git a/services/mobile-app-development.html b/services/mobile-app-development.html index 55712d87..e2080fb3 100644 --- a/services/mobile-app-development.html +++ b/services/mobile-app-development.html @@ -33,7 +33,7 @@
-
+

{{ site.data.mob_dev_services.cross_platform.title }}

{{ site.data.mob_dev_services.cross_platform.description }} @@ -56,7 +56,7 @@

{{ site.data.mob_dev_services.cross_platform.title }}

-
+

{{ site.data.mob_dev_services.react_native.title }}

{{ site.data.mob_dev_services.react_native.description }} @@ -124,7 +124,7 @@

{{ site.data.mob_dev_services.ionic.title }}

-
+
{{ site.data.mob_dev_services.approaches.title }}
{{ site.data.mob_dev_services.approaches.subtitle }}
@@ -164,7 +164,7 @@

{{ site.data.mob_dev_services.ionic.title }}