From 03806347367ea2ffbc8d26a26ebd553208947047 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Fri, 13 Sep 2024 14:51:33 +0300 Subject: [PATCH 01/17] #53: Extract navigation to partial --- hugo.toml | 12 ++ static/assets/css/style.css | 196 ++++++++++++++++-- .../beaver/layouts/partials/page/header.html | 126 +---------- .../layouts/partials/page/navigation.html | 40 ++++ 4 files changed, 233 insertions(+), 141 deletions(-) create mode 100644 themes/beaver/layouts/partials/page/navigation.html diff --git a/hugo.toml b/hugo.toml index 3a617aa23..24522e210 100644 --- a/hugo.toml +++ b/hugo.toml @@ -59,6 +59,7 @@ disableKinds = [] parent = "services" identifier = "fractional-cto" name = "Fractional CTO" + description = "Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations." pageRef= "/services/fractional-cto/" weight = 1 @@ -66,6 +67,7 @@ disableKinds = [] parent = "services" identifier = "fractional-product" name = "Fractional Product Management" + description = "Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules." pageRef= "/services/fractional-product-management/" weight = 2 @@ -73,6 +75,7 @@ disableKinds = [] parent = "services" identifier = "app-web" name = "App/Web Development" + description = "Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes." pageRef= "/services/app-web-development/" weight = 3 @@ -80,6 +83,7 @@ disableKinds = [] parent = "services" identifier = "outsourced-developer" name = "Outsourced Developer Staffing" + description = "Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks." pageRef= "/services/outsourced-developer-staffing/" weight = 4 @@ -87,6 +91,7 @@ disableKinds = [] parent = "services" identifier = "software-qa" name = "Software AQA & Testing" + description = "Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services." pageRef= "/services/software-qa-cat/" weight = 5 @@ -94,6 +99,7 @@ disableKinds = [] parent = "services" identifier = "talent-recruiting" name = "Talent Recruiting & Training" + description = "Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team." pageRef= "/services/talent-recruiting-training/" weight = 6 @@ -107,6 +113,7 @@ disableKinds = [] parent = "usecases" identifier = "startup-mvp" name = "Startup MVP Prototyping & Development" + description = "Whether creating an interactive prototype to validate the user experience or building out a Minimum Viable Product (MVP) for initial customers, we help startups accelerate the path from idea to revenue." pageRef= "/use-cases/startup-mvp-prototyping-development/" weight = 1 @@ -114,6 +121,7 @@ disableKinds = [] parent = "usecases" identifier = "salvage-project" name = "Salvage an Existing Project" + description = "The sooner a software project is salvaged, the better chance it has of being a viable long-term investment. We can help transform your product, providing the visibility, clarity, and control you need to get your project on track." pageRef= "/use-cases/salvage-existing-project/" weight = 2 @@ -121,6 +129,7 @@ disableKinds = [] parent = "usecases" identifier = "empower-team" name = "Empower an Existing Engineering Team" + description = "The easiest & fastest way to grow software development capacity is by using a trusted technology partner that can deploy pre-trained developers on-demand without the need for additional supervision." pageRef= "/use-cases/empower-existing-engineering-team/" weight = 3 @@ -128,6 +137,7 @@ disableKinds = [] parent = "usecases" identifier = "emergency-cto" name = "Emergency CTO Leadership" + description = "To maintain visibility, accountability, and control over technology outcomes when a critical team member leaves, companies need on-demand access to technical leadership to help keep the status quo for IT intact." pageRef= "/use-cases/emergency-cto-leadership/" weight = 4 @@ -135,6 +145,7 @@ disableKinds = [] parent = "usecases" identifier = "automate-product" name = "Automate Product QA & Testing" + description = "To enable faster product development while eliminating the risks of costly mistakes, companies need access to a reliable product testing & QA resource that can ensure quality at any scale." pageRef= "/use-cases/automate-product-qa-testing/" weight = 5 @@ -142,6 +153,7 @@ disableKinds = [] parent = "usecases" identifier = "accelerate-dev" name = "Accelerate Development & Maximize Capacity" + description = "Our developers are ready to deploy within weeks (not months), giving companies the ability to accelerate their software development process while still maintaining control over engineering quality." pageRef= "/use-cases/accelerate-development-maximize-capacity/" weight = 6 diff --git a/static/assets/css/style.css b/static/assets/css/style.css index 32f90b305..0ba0be872 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -1,24 +1,4 @@ -/* -Theme Name: Beaver Builder Theme -Theme URI: http://www.wpbeaverbuilder.com/?utm_medium=bb-pro&utm_source=bb-theme&utm_campaign=themes-admin-page -Version: 1.7.14 -Description: A customizable theme with a simple yet robust set of theme options. -Author: The Beaver Builder Team -Author URI: http://www.wpbeaverbuilder.com/?utm_medium=bb-pro&utm_source=bb-theme&utm_campaign=themes-admin-page -License: GNU General Public License v2.0 -License URI: http://www.gnu.org/licenses/gpl-2.0.html -Text Domain: fl-automator -*/ -/* - -WARNING! DO NOT EDIT THEME FILES IF YOU PLAN ON UPDATING! - -Theme files will be overwritten and your changes will be lost -when updating. Instead, add custom code in the admin under -Appearance > Theme Settings > Code or create a child theme. - -*/ - +/*General*/ .fl-node-ha6dj4z7r51f:last-child > .fl-col-content { border-right-width: 0; } @@ -176,3 +156,177 @@ Appearance > Theme Settings > Code or create a child theme. input[type=submit]:disabled { opacity: 0.25 } + +/*Buttons*/ +.btn, +.btn:hover { + padding: 10px 18px; + font-size: 16px; + line-height: 24px; + font-weight: 700; + border-radius: 25px; + text-decoration: none; +} + +.btn-primary { + background-color: #1a8cff; + color: #fff !important; +} + +.btn-primary:hover { + background-color: #007af4; +} + +/*Navigation*/ +.top-panel { + padding: 15px 20px 0; + position: absolute; + width: 100%; + z-index: 100; +} + +.top-panel .container { + max-width: 1280px; + width: auto; +} + +.top-panel .wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.top-panel .logo { + display: block; +} + +.navigation { +} + +.navigation .list { + display: flex; + flex-direction: row; + list-style: none; + margin: 0; + padding: 0; +} + +.navigation .item { + margin-right: 32px; +} + +.navigation .item:last-child { + margin-right: 0; +} + +.navigation .item.-arrow { + position: relative; +} + +.navigation .item.-arrow:before { + content: ''; + position: absolute; + top: 50%; + right: 0; + margin-top: -5px; + width: 10px; + height: 10px; + border-color: #121212; + border-style: solid; + border-width: 0 1px 1px 0; + transform: rotate(45deg); + transform-origin: 50% 50%; + transition: .3s; +} + +.navigation .item:hover:before { + transform: rotate(225deg); + border-color: #1a8cff; +} + +.navigation .link { + padding: 30px 15px 30px 0; + font-size: 16px; + line-height: 24px; + font-weight: 300; + color: #121212; + text-decoration: none; +} + +.navigation .item:hover .link { + color: #1a8cff; +} + +.navigation .link.active { + color: #1a8cff; +} + +.navigation .item:hover .sub-menu { + display: block; +} + +.navigation .sub-menu { + display: none; + background-color: #fff; + box-shadow: 0 10px 40px rgba(0,0,0,.1); + border-radius: 20px; + padding: 30px; + position: absolute; + top: 100%; + left: 0; + z-index: 10; + text-align: left; + width: 888px; + transform: translateX(-40%); + font-size: 0; + line-height: 0; +} + +.navigation .sub-item { + display: inline-block; + vertical-align: middle; + width: 50%; + font-size: 14px; + line-height: 20px; + font-weight: 300; + margin-bottom: 30px; +} + +.navigation .sub-link { + display: block; + text-decoration: none; +} + +.navigation .sub-image { + float: left; + background-repeat: no-repeat; + background-size: contain; + width: 27px; + height: auto; +} + +.navigation .sub-holder { + overflow: hidden; + padding: 10px; +} + +.navigation .sub-name { + font-weight: 700; + font-size: 20px; + line-height: 26px; + color: #121212; + transition: .3s; +} + +.navigation .sub-item:hover .sub-name { + color: #1a8cff; +} + +.navigation .sub-text { + font-size: 14px; + line-height: 20px; + font-weight: 300; + margin-bottom: 0; + margin-top: 5px; + color: #7e7e7e; +} diff --git a/themes/beaver/layouts/partials/page/header.html b/themes/beaver/layouts/partials/page/header.html index 25e018ae2..991d48fef 100644 --- a/themes/beaver/layouts/partials/page/header.html +++ b/themes/beaver/layouts/partials/page/header.html @@ -1,123 +1,9 @@ - diff --git a/themes/beaver/layouts/partials/page/navigation.html b/themes/beaver/layouts/partials/page/navigation.html new file mode 100644 index 000000000..f883fe885 --- /dev/null +++ b/themes/beaver/layouts/partials/page/navigation.html @@ -0,0 +1,40 @@ + From 67a78be98089a9d7bc840cbb120055f729a5f4aa Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Fri, 13 Sep 2024 16:28:46 +0300 Subject: [PATCH 02/17] #53: Cleanup --- hugo.toml | 48 +++++++++---------- static/assets/css/style.css | 4 +- themes/beaver/layouts/_default/baseof.html | 9 +--- themes/beaver/layouts/page/index.html | 2 - .../beaver/layouts/partials/page/header.html | 5 +- .../layouts/partials/page/navigation.html | 3 +- 6 files changed, 34 insertions(+), 37 deletions(-) diff --git a/hugo.toml b/hugo.toml index 24522e210..2b8a31985 100644 --- a/hugo.toml +++ b/hugo.toml @@ -58,48 +58,48 @@ disableKinds = [] [[menu.main]] parent = "services" identifier = "fractional-cto" - name = "Fractional CTO" - description = "Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations." + title = "Fractional CTO" + name = "Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations." pageRef= "/services/fractional-cto/" weight = 1 [[menu.main]] parent = "services" identifier = "fractional-product" - name = "Fractional Product Management" - description = "Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules." + title = "Fractional Product Management" + name = "Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules." pageRef= "/services/fractional-product-management/" weight = 2 [[menu.main]] parent = "services" identifier = "app-web" - name = "App/Web Development" - description = "Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes." + title = "App/Web Development" + name = "Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes." pageRef= "/services/app-web-development/" weight = 3 [[menu.main]] parent = "services" identifier = "outsourced-developer" - name = "Outsourced Developer Staffing" - description = "Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks." + title = "Outsourced Developer Staffing" + name = "Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks." pageRef= "/services/outsourced-developer-staffing/" weight = 4 [[menu.main]] parent = "services" identifier = "software-qa" - name = "Software AQA & Testing" - description = "Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services." + title = "Software AQA & Testing" + name = "Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services." pageRef= "/services/software-qa-cat/" weight = 5 [[menu.main]] parent = "services" identifier = "talent-recruiting" - name = "Talent Recruiting & Training" - description = "Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team." + title = "Talent Recruiting & Training" + name = "Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team." pageRef= "/services/talent-recruiting-training/" weight = 6 @@ -112,48 +112,48 @@ disableKinds = [] [[menu.main]] parent = "usecases" identifier = "startup-mvp" - name = "Startup MVP Prototyping & Development" - description = "Whether creating an interactive prototype to validate the user experience or building out a Minimum Viable Product (MVP) for initial customers, we help startups accelerate the path from idea to revenue." + title = "Startup MVP Prototyping & Development" + name = "Whether creating an interactive prototype to validate the user experience or building out a Minimum Viable Product (MVP) for initial customers, we help startups accelerate the path from idea to revenue." pageRef= "/use-cases/startup-mvp-prototyping-development/" weight = 1 [[menu.main]] parent = "usecases" identifier = "salvage-project" - name = "Salvage an Existing Project" - description = "The sooner a software project is salvaged, the better chance it has of being a viable long-term investment. We can help transform your product, providing the visibility, clarity, and control you need to get your project on track." + title = "Salvage an Existing Project" + name = "The sooner a software project is salvaged, the better chance it has of being a viable long-term investment. We can help transform your product, providing the visibility, clarity, and control you need to get your project on track." pageRef= "/use-cases/salvage-existing-project/" weight = 2 [[menu.main]] parent = "usecases" identifier = "empower-team" - name = "Empower an Existing Engineering Team" - description = "The easiest & fastest way to grow software development capacity is by using a trusted technology partner that can deploy pre-trained developers on-demand without the need for additional supervision." + title = "Empower an Existing Engineering Team" + name = "The easiest & fastest way to grow software development capacity is by using a trusted technology partner that can deploy pre-trained developers on-demand without the need for additional supervision." pageRef= "/use-cases/empower-existing-engineering-team/" weight = 3 [[menu.main]] parent = "usecases" identifier = "emergency-cto" - name = "Emergency CTO Leadership" - description = "To maintain visibility, accountability, and control over technology outcomes when a critical team member leaves, companies need on-demand access to technical leadership to help keep the status quo for IT intact." + title = "Emergency CTO Leadership" + name = "To maintain visibility, accountability, and control over technology outcomes when a critical team member leaves, companies need on-demand access to technical leadership to help keep the status quo for IT intact." pageRef= "/use-cases/emergency-cto-leadership/" weight = 4 [[menu.main]] parent = "usecases" identifier = "automate-product" - name = "Automate Product QA & Testing" - description = "To enable faster product development while eliminating the risks of costly mistakes, companies need access to a reliable product testing & QA resource that can ensure quality at any scale." + title = "Automate Product QA & Testing" + name = "To enable faster product development while eliminating the risks of costly mistakes, companies need access to a reliable product testing & QA resource that can ensure quality at any scale." pageRef= "/use-cases/automate-product-qa-testing/" weight = 5 [[menu.main]] parent = "usecases" identifier = "accelerate-dev" - name = "Accelerate Development & Maximize Capacity" - description = "Our developers are ready to deploy within weeks (not months), giving companies the ability to accelerate their software development process while still maintaining control over engineering quality." + title = "Accelerate Development & Maximize Capacity" + name = "Our developers are ready to deploy within weeks (not months), giving companies the ability to accelerate their software development process while still maintaining control over engineering quality." pageRef= "/use-cases/accelerate-development-maximize-capacity/" weight = 6 diff --git a/static/assets/css/style.css b/static/assets/css/style.css index 0ba0be872..62f179a14 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -179,7 +179,7 @@ input[type=submit]:disabled { /*Navigation*/ .top-panel { - padding: 15px 20px 0; + padding: 40px 20px 0; position: absolute; width: 100%; z-index: 100; @@ -197,6 +197,8 @@ input[type=submit]:disabled { } .top-panel .logo { + width: 200px; + height: auto; display: block; } diff --git a/themes/beaver/layouts/_default/baseof.html b/themes/beaver/layouts/_default/baseof.html index 94e353544..60992f2c7 100644 --- a/themes/beaver/layouts/_default/baseof.html +++ b/themes/beaver/layouts/_default/baseof.html @@ -46,13 +46,6 @@ {{ end }} - {{ block "header" . }} {{ end }} @@ -62,7 +55,7 @@ - + diff --git a/themes/beaver/layouts/page/index.html b/themes/beaver/layouts/page/index.html index f645c0637..252525f80 100644 --- a/themes/beaver/layouts/page/index.html +++ b/themes/beaver/layouts/page/index.html @@ -1207,7 +1207,5 @@

| resources.Concat "assets/css/_non_critical_homepage.css" | css.PostCSS | minify | fingerprint | resources.PostProcess }} - -loadCSS('{{ $nonCriticalCSS.RelPermalink }}') {{ end }} diff --git a/themes/beaver/layouts/partials/page/header.html b/themes/beaver/layouts/partials/page/header.html index 991d48fef..548fcbfbe 100644 --- a/themes/beaver/layouts/partials/page/header.html +++ b/themes/beaver/layouts/partials/page/header.html @@ -1,7 +1,10 @@
- + + {{ partial "page/navigation.html" . }}
diff --git a/themes/beaver/layouts/partials/page/navigation.html b/themes/beaver/layouts/partials/page/navigation.html index f883fe885..3ed18ef3a 100644 --- a/themes/beaver/layouts/partials/page/navigation.html +++ b/themes/beaver/layouts/partials/page/navigation.html @@ -17,7 +17,8 @@ {{ partial $partialPath . }}
-
{{ .Name }}
+
{{ .Title }}
+
{{ .Name }}
From 3a87b335bd14668b97ba12cd2caf62d02920dd18 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Fri, 13 Sep 2024 17:35:45 +0300 Subject: [PATCH 03/17] #53: Add pixel perfect --- themes/beaver/layouts/partials/page/header.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/themes/beaver/layouts/partials/page/header.html b/themes/beaver/layouts/partials/page/header.html index 548fcbfbe..041973307 100644 --- a/themes/beaver/layouts/partials/page/header.html +++ b/themes/beaver/layouts/partials/page/header.html @@ -1,9 +1,8 @@
- - {{ partial "page/navigation.html" . }} From 801e112b773eb7d7944c724a13d4dbdcecbda35b Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Fri, 13 Sep 2024 17:43:50 +0300 Subject: [PATCH 04/17] #53: Fix define active link --- static/assets/css/style.css | 44 +++++++++++++------ .../layouts/partials/page/navigation.html | 4 +- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/static/assets/css/style.css b/static/assets/css/style.css index 62f179a14..e8fa2cd2b 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -1,4 +1,3 @@ -/*General*/ .fl-node-ha6dj4z7r51f:last-child > .fl-col-content { border-right-width: 0; } @@ -11,9 +10,6 @@ overflow: hidden; } -.g-recaptcha { - float: left; -} /*Blog*/ .blog { @@ -214,7 +210,7 @@ input[type=submit]:disabled { } .navigation .item { - margin-right: 32px; + margin-right: 20px; } .navigation .item:last-child { @@ -230,14 +226,14 @@ input[type=submit]:disabled { position: absolute; top: 50%; right: 0; - margin-top: -5px; - width: 10px; - height: 10px; + margin-top: -6px; + width: 9px; + height: 9px; border-color: #121212; border-style: solid; - border-width: 0 1px 1px 0; + border-width: 0 2px 2px 0; + transform-origin: 70% 70%; transform: rotate(45deg); - transform-origin: 50% 50%; transition: .3s; } @@ -249,6 +245,7 @@ input[type=submit]:disabled { .navigation .link { padding: 30px 15px 30px 0; font-size: 16px; + font-weight: 300; line-height: 24px; font-weight: 300; color: #121212; @@ -259,10 +256,14 @@ input[type=submit]:disabled { color: #1a8cff; } -.navigation .link.active { +.navigation .active .link { color: #1a8cff; } +.navigation .active.item:before { + border-color: #1a8cff; +} + .navigation .item:hover .sub-menu { display: block; } @@ -272,7 +273,8 @@ input[type=submit]:disabled { background-color: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.1); border-radius: 20px; - padding: 30px; + padding: 30px 30px 0; + margin: 30px 0 0; position: absolute; top: 100%; left: 0; @@ -284,6 +286,20 @@ input[type=submit]:disabled { line-height: 0; } +.navigation .sub-menu:before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 15px 0 15px 15px; + border-color: transparent transparent transparent #fff; + right: unset!important; + top: -20px !important; + left: 45% !important; + transform: rotate(270deg) !important; +} + .navigation .sub-item { display: inline-block; vertical-align: middle; @@ -309,7 +325,9 @@ input[type=submit]:disabled { .navigation .sub-holder { overflow: hidden; - padding: 10px; + padding-left: 20px; + padding-right: 45px; + padding: 0 20px; } .navigation .sub-name { diff --git a/themes/beaver/layouts/partials/page/navigation.html b/themes/beaver/layouts/partials/page/navigation.html index 3ed18ef3a..f9637b607 100644 --- a/themes/beaver/layouts/partials/page/navigation.html +++ b/themes/beaver/layouts/partials/page/navigation.html @@ -5,7 +5,7 @@ {{ $active := or (eq $currentPage.RelPermalink .URL) ($currentPage.IsMenuCurrent .Menu .) ($currentPage.HasMenuCurrent .Menu .) }} {{ if .HasChildren }} -
  • +
  • {{ .Name }}
      @@ -28,7 +28,7 @@ {{ else }} -
    • +
    • {{ if eq .URL "/contact-us/" }} {{ .Name }} {{ else }} From 77365b400111e377647d62fcace7c0d340d720a8 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Fri, 13 Sep 2024 19:27:51 +0300 Subject: [PATCH 05/17] #53: Add mobile opener --- static/assets/css/style.css | 42 ++++++++++++++++++- .../layouts/partials/page/navigation.html | 6 ++- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/static/assets/css/style.css b/static/assets/css/style.css index e8fa2cd2b..e3d2ced9a 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -179,11 +179,16 @@ input[type=submit]:disabled { position: absolute; width: 100%; z-index: 100; + + @media (max-width: 1024px) { + padding: 20px; + } } .top-panel .container { max-width: 1280px; width: auto; + padding: 0; } .top-panel .wrapper { @@ -201,12 +206,41 @@ input[type=submit]:disabled { .navigation { } +.navigation .opener { + display: none; + width: 30px; + height: 19px; + border: solid #121212; + border-width: 3px 0; + position: relative; + cursor: pointer; + + @media (max-width: 1024px) { + display: block; + } +} + +.navigation .opener:before { + content: ''; + position: absolute; + width: 100%; + height: 3px; + background-color: #121212; + left: 0; + top: 50%; + margin-top: -1px; +} + .navigation .list { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0; + + @media (max-width: 1024px) { + display: none; + } } .navigation .item { @@ -256,11 +290,11 @@ input[type=submit]:disabled { color: #1a8cff; } -.navigation .active .link { +.navigation .-active .link { color: #1a8cff; } -.navigation .active.item:before { +.navigation .-active.item:before { border-color: #1a8cff; } @@ -284,6 +318,10 @@ input[type=submit]:disabled { transform: translateX(-40%); font-size: 0; line-height: 0; + + @media (max-width: 1080px) { + width: 720px; + } } .navigation .sub-menu:before { diff --git a/themes/beaver/layouts/partials/page/navigation.html b/themes/beaver/layouts/partials/page/navigation.html index f9637b607..0ddd15577 100644 --- a/themes/beaver/layouts/partials/page/navigation.html +++ b/themes/beaver/layouts/partials/page/navigation.html @@ -5,7 +5,7 @@ {{ $active := or (eq $currentPage.RelPermalink .URL) ($currentPage.IsMenuCurrent .Menu .) ($currentPage.HasMenuCurrent .Menu .) }} {{ if .HasChildren }} -
    • +
    • {{ .Name }}
        @@ -28,7 +28,7 @@ {{ else }} -
      • +
      • {{ if eq .URL "/contact-us/" }} {{ .Name }} {{ else }} @@ -38,4 +38,6 @@ {{ end }} {{ end }}
      + +
      From 856ef0615dfd573e8954f777dd56a2190772f687 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Mon, 16 Sep 2024 09:53:22 +0300 Subject: [PATCH 06/17] #53: Add mobile menu --- static/assets/css/navigation.css | 378 ++++++++++++++++++ static/assets/css/style.css | 220 +--------- static/assets/js/script.js | 11 + themes/beaver/layouts/_default/baseof.html | 1 - themes/beaver/layouts/page/index.html | 2 + .../layouts/partials/page/navigation.html | 11 +- .../layouts/partials/page/site-scripts.html | 1 + 7 files changed, 402 insertions(+), 222 deletions(-) create mode 100644 static/assets/css/navigation.css create mode 100644 static/assets/js/script.js diff --git a/static/assets/css/navigation.css b/static/assets/css/navigation.css new file mode 100644 index 000000000..c5f191e0e --- /dev/null +++ b/static/assets/css/navigation.css @@ -0,0 +1,378 @@ + +.top-panel { + padding: 15px 20px 0; + position: absolute; + width: 100%; + z-index: 100; + + @media (max-width: 1024px) { + padding: 20px; + } +} + +.top-panel .container { + max-width: 1280px; + width: auto; + padding: 0; +} + +.top-panel .wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.top-panel .logo { + width: 200px; + height: auto; + display: block; +} + +.navigation { + @media (max-width: 1024px) { + position: fixed; + background-color: #fff; + top: 0; + bottom: 0; + width: 320px; + right: -320px; + z-index: 10; + transition: .3s; + } +} + +.menu-opener { + display: none; + width: 30px; + height: 19px; + border: solid #121212; + border-width: 3px 0; + position: relative; + cursor: pointer; + + @media (max-width: 1024px) { + display: block; + } +} + +.menu-opener:before { + content: ''; + position: absolute; + width: 100%; + height: 3px; + background-color: #121212; + left: 0; + top: 50%; + margin-top: -1px; +} + +.menu-close { + display: none; + width: 25px; + height: 25px; + position: absolute; + top: 24px; + left: 16px; + cursor: pointer; +} + +.menu-close:before { + content: ''; + position: absolute; + height: 2px; + background-color: #121212; + left: 4px; + right: 4px; + top: 50%; + margin-top: -1px; + transform: rotate(45deg); +} + +.menu-close:after { + content: ''; + position: absolute; + height: 2px; + background-color: #121212; + left: 4px; + right: 4px; + top: 50%; + margin-top: -1px; + transform: rotate(-45deg); +} + +.navigation.-open .menu-close { + @media (max-width: 1024px) { + display: block; + } +} + +.navigation .list { + display: flex; + flex-direction: row; + align-items: center; + list-style: none; + margin: 0; + padding: 0; +} + +.navigation.-open + .menu-opener { + @media (max-width: 1024px) { + display: none; + } +} + +.navigation .item { + padding: 15px 0; + margin-right: 7px; + position: relative; +} + +.navigation .item:last-child { + margin-right: 0; +} + +.navigation .item .arrow { + content: ''; + position: absolute; + top: 50%; + right: 0; + margin-top: -6px; + width: 9px; + height: 9px; + border-color: #121212; + border-style: solid; + border-width: 0 2px 2px 0; + transform-origin: 70% 70%; + transform: rotate(45deg); + transition: .3s; +} + +.navigation .link { + padding: 15px; + display: inline-block; + vertical-align: top; + font-size: 16px; + font-weight: 300; + line-height: 24px; + font-weight: 300; + color: #121212; + text-decoration: none; + transition: .3s; +} + + .navigation .-active .link { + color: #1a8cff; +} + +.navigation .item.-active .arrow { + border-color: #1a8cff; +} + +.navigation .sub-menu { + display: none; + background-color: #fff; + box-shadow: 0 10px 40px rgba(0,0,0,.1); + border-radius: 20px; + padding: 30px 30px 0; + margin: 30px 0 0; + position: absolute; + top: 100%; + margin-top: 0; + left: 0; + z-index: 10; + text-align: left; + width: 888px; + transform: translateX(-40%); + font-size: 0; + line-height: 0; + + @media (max-width: 1080px) { + width: 720px; + } +} + +.navigation .sub-menu:before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 15px 0 15px 15px; + border-color: transparent transparent transparent #fff; + right: unset!important; + top: -20px !important; + left: 45% !important; + transform: rotate(270deg) !important; +} + +.navigation .sub-item { + display: inline-block; + vertical-align: middle; + width: 50%; + font-size: 14px; + line-height: 20px; + font-weight: 300; + margin-bottom: 30px; +} + +.navigation .sub-link { + display: block; + text-decoration: none; +} + +.navigation .sub-image { + float: left; + background-repeat: no-repeat; + background-size: contain; + width: 27px; + height: auto; +} + +.navigation .sub-holder { + overflow: hidden; + padding-left: 20px; + padding-right: 45px; + padding: 0 20px; +} + +.navigation .sub-name { + font-weight: 700; + font-size: 20px; + line-height: 26px; + color: #121212; + transition: .3s; +} + +.navigation .sub-item:hover .sub-name { + color: #1a8cff; +} + +.navigation .sub-text { + font-size: 14px; + line-height: 20px; + font-weight: 300; + margin-bottom: 0; + margin-top: 5px; + color: #7e7e7e; +} + +.navigation .item:hover .sub-menu { + display: block; +} + +.navigation .item:hover .link { + color: #1a8cff; +} + +.navigation .item:hover .arrow { + transform: rotate(225deg); + border-color: #1a8cff; +} + +@media (max-width: 1024px) { + .navigation.-open { + right: 0; + overflow-y: auto; + } + + .navigation:before { + position: fixed; + content: ''; + left: 0; + right: 320px; + top: 0; + bottom: 0; + background-color: rgba(0,0,0,.8); + z-index: -1; + opacity: 0; + transition: .3s; + } + + .navigation.-open:before { + opacity: 1; + } + + .navigation.-open .list { + display: block; + padding: 70px 20px 20px; + } + + body.-open { + overflow: hidden; + } + + .navigation .btn { + display: block; + text-align: center; + font-weight: 300; + line-height: 22px; + font-size: 16px; + background-color: #121212; + color: #fff; + border-radius: 6px; + margin-top: 10px; + } + + .navigation .item { + padding: 0; + margin: 0; + } + + .navigation .link { + padding: 14px 0; + } + + .navigation .sub-holder { + padding-right: 0; + } + + .navigation .sub-menu { + width: auto; + position: static; + padding: 0; + margin: 0; + transform: none; + box-shadow: none; + } + + .navigation .item.-open .sub-menu { + display: block; + } + + .navigation .sub-menu:before, + .navigation .sub-menu:after { + display: none; + } + + .navigation .sub-item { + width: auto; + display: block; + margin-bottom: 15px; + } + + .navigation .sub-link { + display: flex; + align-items: center; + } + + .navigation .sub-image { + float: none; + } + + .navigation .sub-name { + font-size: 16px; + line-height: 24px; + } + + .navigation .sub-text { + display: none; + } + + .navigation .item .arrow { + top: 25px; + } + + .navigation .item.-open .arrow { + transform: rotate(225deg); + } +} diff --git a/static/assets/css/style.css b/static/assets/css/style.css index e3d2ced9a..11de97057 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -10,7 +10,6 @@ overflow: hidden; } - /*Blog*/ .blog { padding: 135px 0 50px; @@ -162,6 +161,9 @@ input[type=submit]:disabled { font-weight: 700; border-radius: 25px; text-decoration: none; + white-space: nowrap; + display: inline-block; + vertical-align: top; } .btn-primary { @@ -172,219 +174,3 @@ input[type=submit]:disabled { .btn-primary:hover { background-color: #007af4; } - -/*Navigation*/ -.top-panel { - padding: 40px 20px 0; - position: absolute; - width: 100%; - z-index: 100; - - @media (max-width: 1024px) { - padding: 20px; - } -} - -.top-panel .container { - max-width: 1280px; - width: auto; - padding: 0; -} - -.top-panel .wrapper { - display: flex; - justify-content: space-between; - align-items: center; -} - -.top-panel .logo { - width: 200px; - height: auto; - display: block; -} - -.navigation { -} - -.navigation .opener { - display: none; - width: 30px; - height: 19px; - border: solid #121212; - border-width: 3px 0; - position: relative; - cursor: pointer; - - @media (max-width: 1024px) { - display: block; - } -} - -.navigation .opener:before { - content: ''; - position: absolute; - width: 100%; - height: 3px; - background-color: #121212; - left: 0; - top: 50%; - margin-top: -1px; -} - -.navigation .list { - display: flex; - flex-direction: row; - list-style: none; - margin: 0; - padding: 0; - - @media (max-width: 1024px) { - display: none; - } -} - -.navigation .item { - margin-right: 20px; -} - -.navigation .item:last-child { - margin-right: 0; -} - -.navigation .item.-arrow { - position: relative; -} - -.navigation .item.-arrow:before { - content: ''; - position: absolute; - top: 50%; - right: 0; - margin-top: -6px; - width: 9px; - height: 9px; - border-color: #121212; - border-style: solid; - border-width: 0 2px 2px 0; - transform-origin: 70% 70%; - transform: rotate(45deg); - transition: .3s; -} - -.navigation .item:hover:before { - transform: rotate(225deg); - border-color: #1a8cff; -} - -.navigation .link { - padding: 30px 15px 30px 0; - font-size: 16px; - font-weight: 300; - line-height: 24px; - font-weight: 300; - color: #121212; - text-decoration: none; -} - -.navigation .item:hover .link { - color: #1a8cff; -} - -.navigation .-active .link { - color: #1a8cff; -} - -.navigation .-active.item:before { - border-color: #1a8cff; -} - -.navigation .item:hover .sub-menu { - display: block; -} - -.navigation .sub-menu { - display: none; - background-color: #fff; - box-shadow: 0 10px 40px rgba(0,0,0,.1); - border-radius: 20px; - padding: 30px 30px 0; - margin: 30px 0 0; - position: absolute; - top: 100%; - left: 0; - z-index: 10; - text-align: left; - width: 888px; - transform: translateX(-40%); - font-size: 0; - line-height: 0; - - @media (max-width: 1080px) { - width: 720px; - } -} - -.navigation .sub-menu:before { - position: absolute; - content: ''; - width: 0; - height: 0; - border-style: solid; - border-width: 15px 0 15px 15px; - border-color: transparent transparent transparent #fff; - right: unset!important; - top: -20px !important; - left: 45% !important; - transform: rotate(270deg) !important; -} - -.navigation .sub-item { - display: inline-block; - vertical-align: middle; - width: 50%; - font-size: 14px; - line-height: 20px; - font-weight: 300; - margin-bottom: 30px; -} - -.navigation .sub-link { - display: block; - text-decoration: none; -} - -.navigation .sub-image { - float: left; - background-repeat: no-repeat; - background-size: contain; - width: 27px; - height: auto; -} - -.navigation .sub-holder { - overflow: hidden; - padding-left: 20px; - padding-right: 45px; - padding: 0 20px; -} - -.navigation .sub-name { - font-weight: 700; - font-size: 20px; - line-height: 26px; - color: #121212; - transition: .3s; -} - -.navigation .sub-item:hover .sub-name { - color: #1a8cff; -} - -.navigation .sub-text { - font-size: 14px; - line-height: 20px; - font-weight: 300; - margin-bottom: 0; - margin-top: 5px; - color: #7e7e7e; -} diff --git a/static/assets/js/script.js b/static/assets/js/script.js new file mode 100644 index 000000000..fbd73a2e2 --- /dev/null +++ b/static/assets/js/script.js @@ -0,0 +1,11 @@ +$(document).ready(function() { + $('.js-mobile-menu-opener, .js-mobile-menu-close').click(function(){ + $('.js-navigation, body').toggleClass('-open'); + }) + + if ($(window).width() < 1024) { + $('.js-sub-menu-opener').click(function(){ + $(this).parent().toggleClass('-open'); + }) + } +}); diff --git a/themes/beaver/layouts/_default/baseof.html b/themes/beaver/layouts/_default/baseof.html index 60992f2c7..ae5599ad3 100644 --- a/themes/beaver/layouts/_default/baseof.html +++ b/themes/beaver/layouts/_default/baseof.html @@ -55,7 +55,6 @@ - diff --git a/themes/beaver/layouts/page/index.html b/themes/beaver/layouts/page/index.html index 252525f80..7fd1c8545 100644 --- a/themes/beaver/layouts/page/index.html +++ b/themes/beaver/layouts/page/index.html @@ -1203,9 +1203,11 @@

      (resources.Get "assets/css/skin-65eda28877e04.css") (resources.Get "assets/css/animate.min.css") (resources.Get "/assets/css/style.css") + (resources.Get "/assets/css/navigation.css") (resources.Get "/assets/css/586.css") | resources.Concat "assets/css/_non_critical_homepage.css" | css.PostCSS | minify | fingerprint | resources.PostProcess }} +loadCSS('{{ $nonCriticalCSS.RelPermalink }}') {{ end }} diff --git a/themes/beaver/layouts/partials/page/navigation.html b/themes/beaver/layouts/partials/page/navigation.html index 0ddd15577..7ae2b8241 100644 --- a/themes/beaver/layouts/partials/page/navigation.html +++ b/themes/beaver/layouts/partials/page/navigation.html @@ -1,11 +1,14 @@ -

    • {{ end }} - -{{ define "footer" }} - -{{ end }} diff --git a/themes/beaver/layouts/partials/page/site-scripts.html b/themes/beaver/layouts/partials/page/site-scripts.html index f35b3116d..134ac1382 100644 --- a/themes/beaver/layouts/partials/page/site-scripts.html +++ b/themes/beaver/layouts/partials/page/site-scripts.html @@ -11,17 +11,4 @@ | js.Build (dict "minify" true) | minify | fingerprint | resources.PostProcess }} - - - - - - - - From 33e461c498778ac676bd5f1386c8cfdfc4b40360 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Mon, 16 Sep 2024 12:00:30 +0300 Subject: [PATCH 08/17] #53: Remove unused style --- themes/beaver/assets/css/586.css | 186 ------------------------------- 1 file changed, 186 deletions(-) diff --git a/themes/beaver/assets/css/586.css b/themes/beaver/assets/css/586.css index c4a52daa8..ca930b83a 100644 --- a/themes/beaver/assets/css/586.css +++ b/themes/beaver/assets/css/586.css @@ -281,192 +281,6 @@ body a, body .fl-button, body .pp-button, body button, body input[type="submit"] } } -/* Header */ -header.fl-theme-builder-header-scrolled { - background-color: #FFF; - box-shadow: 0 1px 25px rgba(57, 63, 72, 0.1); -} - -header.fl-theme-builder-header-shrink ul.menu > li { - padding: 25px 0; -} - -header ul.menu > li { - padding-top: 30px; - padding-bottom: 30px; -} - -header ul.menu > li.menu-item-has-children .menu-item-text .pp-menu-toggle { - right: -7px !important; - transition: all 0.3s ease-in-out; -} - -header ul.menu > li.menu-item-has-children:hover .menu-item-text .pp-menu-toggle { - transform: rotate(180deg); -} - -header ul.menu > li > ul.sub-menu { - padding: 30px !important; - transform: translateX(-40%); - display: grid !important; - grid-template-columns: 1fr 1fr; - row-gap: 30px; - column-gap: 40px; -} - -header ul.menu > li > ul.sub-menu > li > a { - display: grid; - grid-template-columns: 26px auto; - grid-template-rows: auto; - column-gap: 20px; - grid-template-areas: "icon menu" "icon description"; - transition: all 0.3s ease-in-out; -} - -header ul.menu > li > ul.sub-menu > li > a .menu-item-text { - grid-area: menu; - line-height: 1.25; -} - -header ul.menu > li > ul.sub-menu > li > a .menu-desc { - font-size: 14px; - font-weight: 300; - grid-area: description; - margin-bottom: 0; - margin-top: 5px; - color: #7E7E7E !important; -} - -header ul.menu > li > ul.sub-menu > li > a .menu-image { - background-repeat: no-repeat; - background-size: contain; - width: 27px; - height: auto; - grid-area: icon; -} - -header ul.menu > li > ul.sub-menu > li.submenu-fractional-cto .menu-desc::before { - content: "Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-app-web .menu-desc::before { - content: "Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-software-qa .menu-desc::before { - content: "Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-fractional-product .menu-desc::before { - content: "Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-outsourced-developer .menu-desc::before { - content: "Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-talent-recruiting .menu-desc::before { - content: "Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team."; -} - -@media (min-width: 861px) { - header ul.menu > li > ul.sub-menu::before { - position: absolute; - width: 0; - height: 0; - content: ""; - border-style: solid; - border-width: 15px 0 15px 15px; - border-color: transparent transparent transparent #FFF; - right: unset !important; - top: -20px !important; - left: 45% !important; - transform: rotate(270deg) !important; - } -} - -@media (max-width: 1115px) { - header ul.menu > li > ul.sub-menu { - transform: translateX(-30%); - } - - header ul.menu > li > ul.sub-menu::before { - left: 33% !important; - } -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-startup-mvp .menu-desc::before { - content: "Whether creating an interactive prototype to validate the user experience or building out a Minimum Viable Product (MVP) for initial customers, we help startups accelerate the path from idea to revenue."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-salvage-project .menu-desc::before { - content: "The sooner a software project is salvaged, the better chance it has of being a viable long-term investment. We can help transform your product, providing the visibility, clarity, and control you need to get your project on track."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-emergency-cto .menu-desc::before { - content: "To maintain visibility, accountability, and control over technology outcomes when a critical team member leaves, companies need on-demand access to technical leadership to help keep the status quo for IT intact."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-empower-team .menu-desc::before { - content: "The easiest & fastest way to grow software development capacity is by using a trusted technology partner that can deploy pre-trained developers on-demand without the need for additional supervision."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-accelerate-dev .menu-desc::before { - content: "Our developers are ready to deploy within weeks (not months), giving companies the ability to accelerate their software development process while still maintaining control over engineering quality."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-automate-product .menu-desc::before { - content: "To enable faster product development while eliminating the risks of costly mistakes, companies need access to a reliable product testing & QA resource that can ensure quality at any scale."; -} - -header ul.menu > li.current-page-ancestor > a { - color: #1A8CFF !important; -} - -header ul.menu > li.current-page-ancestor > .pp-has-submenu-container > a { - color: #1A8CFF !important; -} - -header ul.menu > li.current-page-ancestor > .pp-has-submenu-container > a .pp-menu-toggle::before { - border-color: #1A8CFF; -} - -header ul.menu > li.jt-active > a { - color: #1A8CFF !important; -} - -header ul.menu > li.pp-has-submenu.pp-menu-submenu-right .sub-menu { - right: unset !important; -} - -header ul.menu > li.menu-company ul.sub-menu, header ul.menu > li.menu-resources ul.sub-menu { - width: 386px; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon { - margin-right: 20px; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a { - font-size: 20px; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-facebook { - color: #4267B2; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-instagram { - color: #CD486B; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-twitter { - color: #00ACEE; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-github { - color: #121212; -} - /* Footer */ footer .legal-links .fl-rich-text ul { padding-left: 0; From 1219b7579ac97e6015e664ffbbfd150736cc5d3b Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Mon, 16 Sep 2024 12:40:44 +0300 Subject: [PATCH 09/17] #53: Re-connect styles and scripts --- themes/beaver/assets/js/{script.js => navigation.js} | 0 themes/beaver/layouts/page/index.html | 1 + themes/beaver/layouts/partials/page/site-scripts.html | 1 + 3 files changed, 2 insertions(+) rename themes/beaver/assets/js/{script.js => navigation.js} (100%) diff --git a/themes/beaver/assets/js/script.js b/themes/beaver/assets/js/navigation.js similarity index 100% rename from themes/beaver/assets/js/script.js rename to themes/beaver/assets/js/navigation.js diff --git a/themes/beaver/layouts/page/index.html b/themes/beaver/layouts/page/index.html index cc42dce30..0b1f9c68f 100644 --- a/themes/beaver/layouts/page/index.html +++ b/themes/beaver/layouts/page/index.html @@ -31,6 +31,7 @@ (resources.Get "css/skin-65eda28877e04.css") (resources.Get "css/style.css") (resources.Get "css/586.css") + (resources.Get "css/navigation.css") | resources.Concat "css/_non_critical_homepage.css" | postCSS | minify | fingerprint | resources.PostProcess }} diff --git a/themes/beaver/layouts/partials/page/site-scripts.html b/themes/beaver/layouts/partials/page/site-scripts.html index 134ac1382..ec182bd36 100644 --- a/themes/beaver/layouts/partials/page/site-scripts.html +++ b/themes/beaver/layouts/partials/page/site-scripts.html @@ -6,6 +6,7 @@ {{ $js := slice (resources.Get "js/587.js") + (resources.Get "js/navigation.js") (resources.Get "js/bb-theme/pp_advanced_tabs.js") | resources.Concat "js/_site.js" | js.Build (dict "minify" true) | minify | fingerprint | resources.PostProcess From 536f253231492ef07e7bd73afb1986a49721d9e9 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Mon, 16 Sep 2024 13:01:48 +0300 Subject: [PATCH 10/17] #53: Rewor to js --- themes/beaver/assets/js/navigation.js | 14 +++++++------- .../beaver/layouts/partials/page/site-scripts.html | 3 --- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/themes/beaver/assets/js/navigation.js b/themes/beaver/assets/js/navigation.js index fbd73a2e2..279ce7b18 100644 --- a/themes/beaver/assets/js/navigation.js +++ b/themes/beaver/assets/js/navigation.js @@ -1,11 +1,11 @@ -$(document).ready(function() { - $('.js-mobile-menu-opener, .js-mobile-menu-close').click(function(){ - $('.js-navigation, body').toggleClass('-open'); - }) +document.addEventListener("DOMContentLoaded", function() { + document.querySelectorAll('.js-mobile-menu-opener, .js-mobile-menu-close').addEventListener('click', function (e) { + document.querySelector('.js-navigation, body').toggle('-open'); + }, false); - if ($(window).width() < 1024) { - $('.js-sub-menu-opener').click(function(){ - $(this).parent().toggleClass('-open'); + if (document.querySelector(window).width() < 1024) { + document.querySelectorAll('.js-sub-menu-opener').addEventListener('click', function (e) { + document.querySelector(this).parent().toggle('-open'); }) } }); diff --git a/themes/beaver/layouts/partials/page/site-scripts.html b/themes/beaver/layouts/partials/page/site-scripts.html index ec182bd36..024f2fc15 100644 --- a/themes/beaver/layouts/partials/page/site-scripts.html +++ b/themes/beaver/layouts/partials/page/site-scripts.html @@ -1,7 +1,4 @@ - {{ $js := slice From 6cb0f71ac32db93d397773303c33f16da0049bc2 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Mon, 16 Sep 2024 13:13:25 +0300 Subject: [PATCH 11/17] #53: Fix mobile menu script --- themes/beaver/assets/js/navigation.js | 14 ++++++++++---- .../beaver/layouts/partials/page/site-scripts.html | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/themes/beaver/assets/js/navigation.js b/themes/beaver/assets/js/navigation.js index 279ce7b18..eac59474c 100644 --- a/themes/beaver/assets/js/navigation.js +++ b/themes/beaver/assets/js/navigation.js @@ -1,11 +1,17 @@ document.addEventListener("DOMContentLoaded", function() { - document.querySelectorAll('.js-mobile-menu-opener, .js-mobile-menu-close').addEventListener('click', function (e) { - document.querySelector('.js-navigation, body').toggle('-open'); + document.querySelector('.js-mobile-menu-opener').addEventListener('click', function (e) { + document.querySelector('.js-navigation').classList.add('-open'); + document.querySelector('body').classList.add('-open'); + }, false); + + document.querySelector('.js-mobile-menu-close').addEventListener('click', function (e) { + document.querySelector('.js-navigation').classList.remove('-open'); + document.querySelector('body').classList.remove('-open'); }, false); if (document.querySelector(window).width() < 1024) { - document.querySelectorAll('.js-sub-menu-opener').addEventListener('click', function (e) { - document.querySelector(this).parent().toggle('-open'); + document.querySelector('.js-sub-menu-opener').addEventListener('click', function (e) { + document.querySelector(this).parent().classList.toggle('-open'); }) } }); diff --git a/themes/beaver/layouts/partials/page/site-scripts.html b/themes/beaver/layouts/partials/page/site-scripts.html index 024f2fc15..bb3848720 100644 --- a/themes/beaver/layouts/partials/page/site-scripts.html +++ b/themes/beaver/layouts/partials/page/site-scripts.html @@ -3,8 +3,8 @@ {{ $js := slice (resources.Get "js/587.js") - (resources.Get "js/navigation.js") (resources.Get "js/bb-theme/pp_advanced_tabs.js") + (resources.Get "js/navigation.js") | resources.Concat "js/_site.js" | js.Build (dict "minify" true) | minify | fingerprint | resources.PostProcess }} From b0877389f678051c25b19ec458764e69f14e1683 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Tue, 17 Sep 2024 01:47:08 +0300 Subject: [PATCH 12/17] #53: Resolve critical path conflicts --- themes/beaver/assets/css/navigation.css | 5 +- .../assets/js/bb-theme/pp_advanced_menu.js | 750 +----------------- themes/beaver/layouts/_default/baseof.html | 3 +- themes/beaver/layouts/page/index.html | 1 - .../beaver/layouts/partials/page/header.html | 4 +- .../layouts/partials/page/site-scripts.html | 4 +- 6 files changed, 21 insertions(+), 746 deletions(-) diff --git a/themes/beaver/assets/css/navigation.css b/themes/beaver/assets/css/navigation.css index c5f191e0e..f1621b0b0 100644 --- a/themes/beaver/assets/css/navigation.css +++ b/themes/beaver/assets/css/navigation.css @@ -1,4 +1,3 @@ - .top-panel { padding: 15px 20px 0; position: absolute; @@ -10,13 +9,13 @@ } } -.top-panel .container { +.top-panel .wrapper { max-width: 1280px; width: auto; padding: 0; } -.top-panel .wrapper { +.top-panel .content { display: flex; justify-content: space-between; align-items: center; diff --git a/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js b/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js index 2d90a904e..1c142ed07 100644 --- a/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js +++ b/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js @@ -1,744 +1,18 @@ -class PPAdvancedMenu { - constructor(settings) { - this.settingsId = settings.id; - this.nodeClass = `.fl-node-${settings.id}`; - this.wrapperClass = `${this.nodeClass} .pp-advanced-menu`; - this.breakpoints = { large: 1200, medium: 1115, small: 860, custom: 768 }; - this.currentBrowserWidth = window.innerWidth; - this.offCanvasMenu = null; - this.$submenus = null; - - this._initMenu(); - - window.addEventListener("resize", (e) => { - const width = window.innerWidth; - if (width !== this.currentBrowserWidth) { - this._initMenu(); - this._clickOrHover(); - this.currentBrowserWidth = width; - } - }); - - document.body.addEventListener("click", (e) => { - const wrapper = document.querySelector(this.wrapperClass); - const mobileToggle = wrapper.querySelector( - ".pp-advanced-menu-mobile-toggle", - ); - - if ( - mobileToggle && - mobileToggle.classList.contains("pp-active") && - "hamburger" !== "expanded" - ) { - if (e.target.closest(".fl-module-pp-advanced-menu")) return; - if ( - e.target.closest(".pp-advanced-menu") && - e.target.tagName === "INPUT" - ) - return; - if (e.target.classList.contains("pp-menu-close-btn")) return; - mobileToggle.click(); - } - - if (wrapper) { - wrapper - .querySelectorAll(".pp-has-submenu") - .forEach((el) => el.classList.remove("focus", "pp-active")); - wrapper - .querySelectorAll(".pp-has-submenu .sub-menu") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-has-submenu-container") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-menu-toggle") - .forEach((el) => el.setAttribute("aria-expanded", false)); - } - }); - - document.addEventListener("keyup", (e) => { - if (e.key === "Escape") { - const wrapper = document.querySelector(this.wrapperClass); - wrapper - .querySelectorAll(".pp-has-submenu") - .forEach((el) => el.classList.remove("focus", "pp-active")); - wrapper - .querySelectorAll(".pp-has-submenu .sub-menu") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-has-submenu-container") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-menu-toggle") - .forEach((el) => el.setAttribute("aria-expanded", false)); - const focusedToggle = wrapper.querySelector(".pp-menu-toggle.focus"); - if (focusedToggle && focusedToggle.offsetParent !== null) { - setTimeout(() => focusedToggle.focus(), 100); - } - } - }); - } - - _isMobile() { - return window.innerWidth <= this.breakpoints.small; +document.querySelector('.js-mobile-menu-opener'). + onclick = function () { + document.querySelector('.js-navigation').classList.add('-open'); + document.querySelector('body').classList.add('-open'); } - _isMedium() { - return window.innerWidth <= this.breakpoints.medium; +document.querySelector('.js-mobile-menu-close'). + onclick = function () { + document.querySelector('.js-navigation').classList.remove('-open'); + document.querySelector('body').classList.remove('-open'); } - _isCustom() { - return window.innerWidth <= this.breakpoints.custom; - } - - _isTouch() { - let prefixes = " -webkit- -moz- -o- -ms- ".split(" "); - let mq = function (query) { - return window.matchMedia(query).matches; - }; - if ( - "ontouchstart" in window || - (window.DocumentTouch && document instanceof DocumentTouch) - ) { - return true; - } - let query = ["(", prefixes.join("touch-enabled),("), "heartz", ")"].join( - "", - ); - return mq(query); - } - - _isMenuToggle() { - return !!( - ((this._isMobile() && true) || - (this._isMedium() && false) || - (this._isCustom() && false)) && - $(this.nodeClass).find(".pp-advanced-menu-mobile-toggle").is(":visible") - ); - } - - _initMenu() { - this._setupSubmenu(); - this._menuOnFocus(); - this._submenuOnClick(); - if ($(this.nodeClass).length) { - this._initMegaMenus(); - } - let self = this; - $(this.wrapperClass) - .find(".pp-has-submenu-container") - .on("click", function (e) { - if ("off-canvas" !== "off-canvas" && "off-canvas" !== "full-screen") { - if (self._isTouch()) { - if (!$(this).hasClass("first-click")) { - e.preventDefault(); - $(this).addClass("first-click"); - } - } - } - }); - $(this.wrapperClass) - .find("li.pp-has-submenu a") - .on( - "keyup", - function (e) { - if ( - $(e.target).hasClass("pp-menu-toggle") && - !$(this.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .is(":visible") - ) { - if (e.which === 1 || e.which === 13 || e.which === undefined) { - e.preventDefault(); - e.stopPropagation(); - $(e.target).parents("li.pp-has-submenu").toggleClass("pp-active"); - if ( - $(e.target).parents("li.pp-has-submenu").hasClass("pp-active") - ) { - $(e.target).attr("aria-expanded", true); - } else { - $(e.target).attr("aria-expanded", false); - } - } - } - }.bind(this), - ); - if (this._isMenuToggle()) { - $(this.wrapperClass).off("mouseenter mouseleave"); - this._menuOnClick(); - this._clickOrHover(); - } else { - $(this.wrapperClass).off("click"); - this._submenuOnRight(); - this._submenuRowZindexFix(); - } - if ("hamburger" !== "expanded") { - this._toggleForMobile(); - this._initOffCanvas(); +if (document.querySelector(window).width() < 1024) { + document.querySelector('.js-sub-menu-opener'). + onclick = function () { + document.querySelector(this).parent().classList.toggle('-open'); } - $(this.wrapperClass) - .find("li:not(.menu-item-has-children)") - .on( - "click", - "a", - function (e) { - if ($(e.target).closest(".pp-menu-search-item").length > 0) { - return; - } - $(this.nodeClass).find(".pp-advanced-menu").removeClass("menu-open"); - $(this.nodeClass).find(".pp-advanced-menu").addClass("menu-close"); - $("html") - .removeClass("pp-off-canvas-menu-open") - .removeClass("pp-full-screen-menu-open"); - }.bind(this), - ); - if ($(this.wrapperClass).find(".pp-menu-search-item").length) { - this._toggleMenuSearch(); - } - } - - _setupSubmenu() { - $(this.wrapperClass + " ul.sub-menu").each(function () { - $(this).closest("li").attr("aria-haspopup", "true"); - }); - } - - _menuOnFocus() { - $(this.nodeClass) - .off("focus") - .on( - "focus", - "a", - function (e) { - let $menuItem = $(e.target).parents(".menu-item").first(), - $parents = $(e.target).parentsUntil(this.wrapperClass); - $(".pp-advanced-menu .focus:not(.pp-menu-toggle)").removeClass( - "focus", - ); - $menuItem.addClass("focus"); - $parents.addClass("focus"); - }.bind(this), - ) - .on( - "focusout", - "a", - function (e) { - if ($(".pp-advanced-menu .focus").hasClass("pp-has-submenu")) { - $(e.target) - .parentsUntil(this.wrapperClass) - .find(".pp-has-submenu-container") - .removeClass("first-click"); - } - }.bind(this), - ); - $(this.nodeClass) - .off("focus", ".pp-menu-toggle") - .on( - "focus", - ".pp-menu-toggle", - function (e) { - $(e.target).addClass("focus"); - }.bind(this), - ) - .off("blur", ".pp-menu-toggle") - .on( - "blur", - ".pp-menu-toggle", - function (e) { - if ( - $(e.target).parents("li.pp-has-submenu.pp-active").length === 0 || - $(e.target).parents("li.pp-has-submenu.pp-active").parent("ul.menu") - .length === 0 - ) { - $(e.target).removeClass("focus"); - } - }.bind(this), - ); - } - - _menuOnClick() { - let self = this; - let $mainItem = ""; - $(this.wrapperClass) - .off() - .on( - "click.pp-advanced-menu keyup", - ".pp-has-submenu-container", - function (e) { - let isValidEvent = - e.which === 1 || e.which === 13 || e.which === undefined; - if (!isValidEvent) { - return; - } - if (e.which === 13 && !$(e.target).hasClass("pp-menu-toggle")) { - return; - } - if (self._isTouch()) { - if (!$(this).hasClass("first-click")) { - e.preventDefault(); - $(this).addClass("first-click"); - } - } - e.stopPropagation(); - let isMainEl = $(e.target) - .parents(".menu-item") - .parent() - .parent() - .hasClass("pp-advanced-menu"); - if (isMainEl && $mainItem === "") { - $mainItem = $(e.target).parents(".menu-item"); - } - let $link = $(e.target).parents(".pp-has-submenu").first(), - $subMenu = $link.children(".sub-menu").first(), - $href = $link - .children(".pp-has-submenu-container") - .first() - .find("> a") - .attr("href"), - $subMenuParents = $(e.target).parents(".sub-menu"), - $activeParent = $(e.target).closest(".pp-has-submenu.pp-active"); - if ($activeParent.length > 0) { - $activeParent - .find(".pp-menu-toggle") - .first() - .attr("aria-expanded", true); - } else { - $activeParent - .find(".pp-menu-toggle") - .first() - .attr("aria-expanded", false); - } - if ( - !$subMenu.is(":visible") || - $(e.target).hasClass("pp-menu-toggle") || - ($subMenu.is(":visible") && - (typeof $href === "undefined" || $href === "#")) - ) { - if ( - !$(this.wrapperClass).hasClass( - "pp-advanced-menu-accordion-collapse", - ) - ) { - e.preventDefault(); - } - if ($(e.target).hasClass("pp-menu-toggle")) { - e.stopPropagation(); - e.preventDefault(); - } - } else { - e.stopPropagation(); - window.location.href = $href; - return; - } - if ( - $(this.wrapperClass).hasClass("pp-advanced-menu-accordion-collapse") - ) { - if ( - $link.parents(".menu-item").length && - !$link.parents(".menu-item").hasClass("pp-active") - ) { - $(".menu .pp-active", this.wrapperClass) - .not($link) - .removeClass("pp-active"); - } else if ( - $link.parents(".menu-item").hasClass("pp-active") && - $link.parent(".sub-menu").length - ) { - $(".menu .pp-active", this.wrapperClass) - .not($link) - .not($activeParent) - .removeClass("pp-active"); - } - $(".sub-menu", this.wrapperClass) - .not($subMenu) - .not($subMenuParents) - .slideUp("normal"); - } - if ($(self.wrapperClass).find(".sub-menu:visible").length > 0) { - $(self.wrapperClass) - .find(".sub-menu:visible") - .parent() - .addClass("pp-active"); - } - $subMenu.slideToggle(400, function () { - $(e.target) - .parents(".pp-has-submenu-container") - .parent() - .parent() - .find("> .menu-item.pp-active") - .removeClass("pp-active"); - if ($mainItem !== "") { - $mainItem - .parent() - .find(".menu-item.pp-active") - .removeClass("pp-active"); - $(self.wrapperClass) - .find(".sub-menu") - .parent() - .removeClass("pp-active"); - if ($(self.wrapperClass).find(".sub-menu:visible").length > 0) { - $(self.wrapperClass) - .find(".sub-menu:visible") - .parent() - .addClass("pp-active"); - } else { - $link.toggleClass("pp-active"); - $mainItem.removeClass("pp-active"); - } - } else { - $link.toggleClass("pp-active"); - } - if (!$subMenu.is(":visible")) { - $subMenu.parent().removeClass("pp-active"); - $subMenu - .parent() - .find("> .pp-has-submenu-container .pp-menu-toggle") - .attr("aria-expanded", false); - } else { - $subMenu - .parent() - .find("> .pp-has-submenu-container .pp-menu-toggle") - .attr("aria-expanded", true); - } - }); - }.bind(this), - ); - } - - _submenuOnClick() { - $(this.wrapperClass + " .sub-menu") - .off() - .on( - "click", - "a", - function (e) { - if ($(e.target).parent().hasClass("focus")) { - $(e.target).parentsUntil(this.wrapperClass).removeClass("focus"); - } - }.bind(this), - ); - } - - _clickOrHover() { - this.$submenus = this.$submenus || $(this.wrapperClass).find(".sub-menu"); - let $wrapper = $(this.wrapperClass), - $menu = $wrapper.find(".menu"); - let $li = $wrapper.find(".pp-has-submenu"); - if (this._isMenuToggle()) { - $li.each(function () { - if (!$(this).hasClass("pp-active")) { - $(this).find(".sub-menu").fadeOut(); - } - }); - } else { - $li.each(function () { - if (!$(this).hasClass("pp-active")) { - $(this).find(".sub-menu").css({ - display: "", - opacity: "", - }); - } - }); - } - } - - _submenuOnRight() { - $(this.wrapperClass) - .on( - "mouseenter focus", - ".pp-has-submenu", - function (e) { - if ($(e.currentTarget).find(".sub-menu").length === 0) { - return; - } - let $link = $(e.currentTarget), - $parent = $link.parent(), - $subMenu = $link.find(".sub-menu"), - subMenuWidth = $subMenu.width(), - subMenuPos = 0, - winWidth = window.innerWidth; - if ($link.closest(".pp-menu-submenu-right").length !== 0) { - $link.addClass("pp-menu-submenu-right"); - } else if ($("body").hasClass("rtl")) { - subMenuPos = $parent.is(".sub-menu") - ? $parent.offset().left - subMenuWidth - : $link.offset().left - subMenuWidth; - if (subMenuPos <= 0) { - $link.addClass("pp-menu-submenu-right"); - } - } else { - subMenuPos = $parent.is(".sub-menu") - ? $parent.offset().left + $parent.width() + subMenuWidth - : $link.offset().left + subMenuWidth; - if (subMenuPos > winWidth) { - $link.addClass("pp-menu-submenu-right"); - } - } - }.bind(this), - ) - .on( - "mouseleave", - ".pp-has-submenu", - function (e) { - $(e.currentTarget).removeClass("pp-menu-submenu-right"); - }.bind(this), - ); - } - - _submenuRowZindexFix(e) { - $(this.wrapperClass) - .on( - "mouseenter", - "ul.menu > .pp-has-submenu", - function (e) { - if ($(e.currentTarget).find(".sub-menu").length === 0) { - return; - } - $(this.nodeClass) - .closest(".fl-row") - .find(".fl-row-content") - .css("z-index", "10"); - }.bind(this), - ) - .on( - "mouseleave", - "ul.menu > .pp-has-submenu", - function (e) { - $(this.nodeClass) - .closest(".fl-row") - .find(".fl-row-content") - .css("z-index", ""); - }.bind(this), - ); - } - - _toggleForMobile() { - let $wrapper = null, - $menu = null, - self = this; - if (this._isMenuToggle()) { - $wrapper = $(this.wrapperClass); - $menu = $wrapper.find(".menu"); - - $wrapper.on("click", ".pp-advanced-menu-mobile-toggle", function (e) { - $(this).toggleClass("pp-active"); - $menu.slideToggle(); - e.stopPropagation(); - }); - - $menu.on("click", '.menu-item > a[href*="#"]', function (e) { - let $href = $(this).attr("href"), - $targetID = ""; - if ($href !== "#") { - $targetID = $href.split("#")[1]; - if ($("body").find("#" + $targetID).length > 0) { - e.preventDefault(); - $(this).toggleClass("pp-active"); - setTimeout(function () { - $("html, body").animate( - { scrollTop: $("#" + $targetID).offset().top }, - 1000, - function () { - window.location.hash = $targetID; - }, - ); - }, 500); - if (!self._isMenuToggle()) { - $menu.slideToggle(); - } - } - } - }); - } else { - $wrapper = $(this.wrapperClass); - $menu = $wrapper.children(".menu"); - $wrapper.find(".pp-advanced-menu-mobile-toggle").removeClass("pp-active"); - $menu.css({ display: "" }); - } - } - - _initMegaMenus() { - let module = $(this.nodeClass), - rowContent = module.closest(".fl-row-content"), - rowWidth = rowContent.width(), - megas = module.find(".mega-menu"), - disabled = module.find(".mega-menu-disabled"), - isToggle = this._isMenuToggle(); - if (isToggle) { - megas.removeClass("mega-menu").addClass("mega-menu-disabled"); - module.find("li.mega-menu-disabled > ul.sub-menu").css("width", ""); - rowContent.css("position", ""); - } else { - disabled.removeClass("mega-menu-disabled").addClass("mega-menu"); - module.find("li.mega-menu > ul.sub-menu").css("width", rowWidth + "px"); - rowContent.css("position", "relative"); - } - } - - _initOffCanvas() { - $("html").addClass("pp-off-canvas-menu-module"); - $("html").addClass("pp-off-canvas-menu-" + "right"); - if ( - null === this.offCanvasMenu && - $(this.nodeClass).find(".pp-advanced-menu.off-canvas").length > 0 - ) { - this.offCanvasMenu = $(this.nodeClass).find( - ".pp-advanced-menu.off-canvas", - ); - } - if ( - $("#pp-advanced-menu-off-canvas-" + this.settingsId).length === 0 && - null !== this.offCanvasMenu - ) { - this.offCanvasMenu - .appendTo("body") - .wrap( - '
    ', - ); - } - this._toggleMenu(); - } - - _initFullScreen() { - $("html").addClass("pp-full-screen-menu-module"); - this._toggleMenu(); - } - - _toggleMenu() { - let self = this; - let singleInstance = true; - - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .off("click") - .on("click", function () { - if (singleInstance) { - if ($(".pp-advanced-menu.menu-open").length > 0) { - $(".pp-advanced-menu").removeClass("menu-open"); - $("html").removeClass("pp-full-screen-menu-open"); - } - } - if ($(self.nodeClass).find(".pp-advanced-menu").hasClass("menu-open")) { - $(self.nodeClass).find(".pp-advanced-menu").removeClass("menu-open"); - $(self.nodeClass).find(".pp-advanced-menu").addClass("menu-close"); - $("html").removeClass("pp-off-canvas-menu-open"); - $("html").removeClass("pp-full-screen-menu-open"); - } else { - $(self.nodeClass).find(".pp-advanced-menu").addClass("menu-open"); - $("html").addClass("pp-off-canvas-menu-open"); - self.offCanvasMenu.find("nav").attr("tabindex", "0").trigger("focus"); - $(this).attr("tabindex", "-1").trigger("blur"); - } - }); - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .on("keyup", function (e) { - if (13 === e.keyCode || 13 === e.which) { - $(this).trigger("click"); - } - }); - $(self.nodeClass) - .find(".pp-advanced-menu .pp-menu-close-btn, .pp-clear") - .on("click", function () { - $(self.nodeClass).find(".pp-advanced-menu").removeClass("menu-open"); - $(self.nodeClass).find(".pp-advanced-menu").addClass("menu-close"); - $("html").removeClass("pp-off-canvas-menu-open"); - $("html").removeClass("pp-full-screen-menu-open"); - if ( - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .is(":visible") - ) { - setTimeout(function () { - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .attr("tabindex", 0) - .trigger("focus"); - }, 120); - } - if (self.offCanvasMenu && self.offCanvasMenu.length > 0) { - self.offCanvasMenu.find("nav").attr("tabindex", "-1").trigger("blur"); - } - }); - } - - _placeMobileMenuBelowRow() { - if ($(this.nodeClass + "-clone").length) { - return; - } - if ($("html").hasClass("fl-builder-is-showing-toolbar")) { - return; - } - let module = $(this.nodeClass), - clone = module.clone(), - col = module.closest(".fl-col"); - module.find("ul.menu").remove(); - clone.addClass((this.nodeClass + "-clone").replace(".", "")); - clone.find(".pp-advanced-menu-mobile-toggle").remove(); - col.after(clone); - if (module.hasClass("fl-animation")) { - clone.removeClass("fl-animation"); - } - this._menuOnClick(); - } - - _toggleMenuSearch() { - let items = $(this.wrapperClass).find(".pp-menu-search-item"), - self = this; - items.each(function () { - let item = $(this); - let button = item.find("> a"), - form = item.find(".pp-search-form"), - input = item.find(".pp-search-form__input"); - button.on("click", function (e) { - e.preventDefault(); - item.toggleClass("pp-search-active"); - if (item.hasClass("pp-search-active")) { - setTimeout(function () { - input.focus(); - self._focusMenuSearch(input); - }, 100); - } - $("body").on("click.pp-menu-search", self._hideMenuSearch.bind(self)); - }); - input - .on("focus", function () { - form.addClass("pp-search-form--focus"); - }) - .on("blur", function () { - form.removeClass("pp-search-form--focus"); - }); - }); - } - - _hideMenuSearch(e) { - if (e !== undefined) { - if ($(e.target).closest(".pp-menu-search-item").length > 0) { - return; - } - } - $(this.wrapperClass) - .find(".pp-menu-search-item") - .removeClass("pp-search-active"); - $("body").off("click.pp-menu-search"); - } - - _focusMenuSearch($el) { - if ($el[0].setSelectionRange) { - let len = $el.val().length * 2; - setTimeout(function () { - $el[0].setSelectionRange(len, len); - }, 1); - } else { - $el.val($el.val()); - } - } } - -document.addEventListener("DOMContentLoaded", function () { - new PPAdvancedMenu({ id: "menu" }); -}); diff --git a/themes/beaver/layouts/_default/baseof.html b/themes/beaver/layouts/_default/baseof.html index ae5599ad3..8fc4aa1c5 100644 --- a/themes/beaver/layouts/_default/baseof.html +++ b/themes/beaver/layouts/_default/baseof.html @@ -55,13 +55,14 @@ + Skip to content +{{ partial "page/header.html" . }}
    -{{ partial "page/header.html" . }} {{ block "main" . }} {{ end }} diff --git a/themes/beaver/layouts/page/index.html b/themes/beaver/layouts/page/index.html index 0b1f9c68f..cc42dce30 100644 --- a/themes/beaver/layouts/page/index.html +++ b/themes/beaver/layouts/page/index.html @@ -31,7 +31,6 @@ (resources.Get "css/skin-65eda28877e04.css") (resources.Get "css/style.css") (resources.Get "css/586.css") - (resources.Get "css/navigation.css") | resources.Concat "css/_non_critical_homepage.css" | postCSS | minify | fingerprint | resources.PostProcess }} diff --git a/themes/beaver/layouts/partials/page/header.html b/themes/beaver/layouts/partials/page/header.html index 041973307..f20566381 100644 --- a/themes/beaver/layouts/partials/page/header.html +++ b/themes/beaver/layouts/partials/page/header.html @@ -1,6 +1,6 @@
    -
    -
    +
    +
    diff --git a/themes/beaver/layouts/partials/page/site-scripts.html b/themes/beaver/layouts/partials/page/site-scripts.html index bb3848720..134ac1382 100644 --- a/themes/beaver/layouts/partials/page/site-scripts.html +++ b/themes/beaver/layouts/partials/page/site-scripts.html @@ -1,10 +1,12 @@ + {{ $js := slice (resources.Get "js/587.js") (resources.Get "js/bb-theme/pp_advanced_tabs.js") - (resources.Get "js/navigation.js") | resources.Concat "js/_site.js" | js.Build (dict "minify" true) | minify | fingerprint | resources.PostProcess }} From cf9b92957b66ccbebf732fb36bf77e565d643e53 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Tue, 17 Sep 2024 01:49:39 +0300 Subject: [PATCH 13/17] #53: Fix identical spacing --- themes/beaver/layouts/_default/baseof.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/themes/beaver/layouts/_default/baseof.html b/themes/beaver/layouts/_default/baseof.html index 8fc4aa1c5..0235a5e30 100644 --- a/themes/beaver/layouts/_default/baseof.html +++ b/themes/beaver/layouts/_default/baseof.html @@ -60,9 +60,10 @@ Skip to content + {{ partial "page/header.html" . }} -
    +
    {{ block "main" . }} {{ end }} From 19706614ace8dceaa8efc81e4a330a0c5c232202 Mon Sep 17 00:00:00 2001 From: Andriy Parashchuk Date: Fri, 13 Sep 2024 14:51:33 +0300 Subject: [PATCH 14/17] refact: top navigation to reduce css and simplify html #53: Extract navigation to partial #53: Cleanup #53: Add mobile menu #53: Cleanup #53: Rewor to js #53: Resolve critical path conflicts lint: reformatted fix: loading of assets fix: js fix: open menu refact: load navigation for everybody --- hugo.toml | 36 +- postcss.config.js | 11 +- themes/beaver/assets/css/586.css | 186 -- themes/beaver/assets/css/navigation.css | 373 +++ themes/beaver/assets/css/style.css | 48 +- .../assets/js/bb-theme/pp_advanced_menu.js | 750 +---- themes/beaver/assets/js/navigation.js | 27 + themes/beaver/layouts/_default/baseof.html | 17 +- themes/beaver/layouts/page/index.html | 2440 ++++++++--------- .../beaver/layouts/partials/page/header.html | 130 +- .../layouts/partials/page/navigation.html | 46 + .../layouts/partials/page/site-scripts.html | 8 +- 12 files changed, 1747 insertions(+), 2325 deletions(-) create mode 100644 themes/beaver/assets/css/navigation.css create mode 100644 themes/beaver/assets/js/navigation.js create mode 100644 themes/beaver/layouts/partials/page/navigation.html diff --git a/hugo.toml b/hugo.toml index aa27d67d5..8928e389c 100644 --- a/hugo.toml +++ b/hugo.toml @@ -57,42 +57,48 @@ disableKinds = [] [[menu.main]] parent = "services" identifier = "fractional-cto" - name = "Fractional CTO" + title = "Fractional CTO" + name = "Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations." pageRef= "/services/fractional-cto/" weight = 1 [[menu.main]] parent = "services" identifier = "fractional-product" - name = "Fractional Product Management" + title = "Fractional Product Management" + name = "Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules." pageRef= "/services/fractional-product-management/" weight = 2 [[menu.main]] parent = "services" identifier = "app-web" - name = "App/Web Development" + title = "App/Web Development" + name = "Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes." pageRef= "/services/app-web-development/" weight = 3 [[menu.main]] parent = "services" identifier = "outsourced-developer" - name = "Outsourced Developer Staffing" + title = "Outsourced Developer Staffing" + name = "Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks." pageRef= "/services/outsourced-developer-staffing/" weight = 4 [[menu.main]] parent = "services" identifier = "software-qa" - name = "Software AQA & Testing" + title = "Software AQA & Testing" + name = "Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services." pageRef= "/services/software-qa-cat/" weight = 5 [[menu.main]] parent = "services" identifier = "talent-recruiting" - name = "Talent Recruiting & Training" + title = "Talent Recruiting & Training" + name = "Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team." pageRef= "/services/talent-recruiting-training/" weight = 6 @@ -105,42 +111,48 @@ disableKinds = [] [[menu.main]] parent = "usecases" identifier = "startup-mvp" - name = "Startup MVP Prototyping & Development" + title = "Startup MVP Prototyping & Development" + name = "Whether creating an interactive prototype to validate the user experience or building out a Minimum Viable Product (MVP) for initial customers, we help startups accelerate the path from idea to revenue." pageRef= "/use-cases/startup-mvp-prototyping-development/" weight = 1 [[menu.main]] parent = "usecases" identifier = "salvage-project" - name = "Salvage an Existing Project" + title = "Salvage an Existing Project" + name = "The sooner a software project is salvaged, the better chance it has of being a viable long-term investment. We can help transform your product, providing the visibility, clarity, and control you need to get your project on track." pageRef= "/use-cases/salvage-existing-project/" weight = 2 [[menu.main]] parent = "usecases" identifier = "empower-team" - name = "Empower an Existing Engineering Team" + title = "Empower an Existing Engineering Team" + name = "The easiest & fastest way to grow software development capacity is by using a trusted technology partner that can deploy pre-trained developers on-demand without the need for additional supervision." pageRef= "/use-cases/empower-existing-engineering-team/" weight = 3 [[menu.main]] parent = "usecases" identifier = "emergency-cto" - name = "Emergency CTO Leadership" + title = "Emergency CTO Leadership" + name = "To maintain visibility, accountability, and control over technology outcomes when a critical team member leaves, companies need on-demand access to technical leadership to help keep the status quo for IT intact." pageRef= "/use-cases/emergency-cto-leadership/" weight = 4 [[menu.main]] parent = "usecases" identifier = "automate-product" - name = "Automate Product QA & Testing" + title = "Automate Product QA & Testing" + name = "To enable faster product development while eliminating the risks of costly mistakes, companies need access to a reliable product testing & QA resource that can ensure quality at any scale." pageRef= "/use-cases/automate-product-qa-testing/" weight = 5 [[menu.main]] parent = "usecases" identifier = "accelerate-dev" - name = "Accelerate Development & Maximize Capacity" + title = "Accelerate Development & Maximize Capacity" + name = "Our developers are ready to deploy within weeks (not months), giving companies the ability to accelerate their software development process while still maintaining control over engineering quality." pageRef= "/use-cases/accelerate-development-maximize-capacity/" weight = 6 diff --git a/postcss.config.js b/postcss.config.js index e586857f7..a324de440 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -8,14 +8,7 @@ const purgecss = require("@fullhuman/postcss-purgecss")({ standard: [ "button, input[type=button], input[type=submit]", // pp adv menu - "pp-advanced-menu", "pp-advanced-menu-accordion-collapse", "off-canvas", "pp-menu-position-below", - "menu-close", "menu-open", - "pp-active", "focus", "pp-menu-submenu-right", "mega-menu-disabled", "mega-menu", - "pp-off-canvas-menu-module", "pp-off-canvas-menu-open", "pp-full-screen-menu-module", - "pp-full-screen-menu-open", "fl-node-menu-clone", "pp-search-form--focus", "first-click", - - "pp-advanced-menu", "pp-advanced-menu-accordion-collapse", "pp-menu-default", "pp-menu-align-right", - "pp-menu-position-below", "fl-module-content", "fl-node-content", + "-open", // pp adv tabs "pp-tabs", "pp-tabs-label", "pp-tab-active", "pp-tabs-panel", "pp-tabs-panel-content", @@ -34,7 +27,7 @@ const purgecss = require("@fullhuman/postcss-purgecss")({ ], deep: [ - /^fl-page/ + /^fl-page/, /^navigation/, /^menu-close/, /^top-panel/, /^menu-opener/ ], greedy: [ diff --git a/themes/beaver/assets/css/586.css b/themes/beaver/assets/css/586.css index c4a52daa8..ca930b83a 100644 --- a/themes/beaver/assets/css/586.css +++ b/themes/beaver/assets/css/586.css @@ -281,192 +281,6 @@ body a, body .fl-button, body .pp-button, body button, body input[type="submit"] } } -/* Header */ -header.fl-theme-builder-header-scrolled { - background-color: #FFF; - box-shadow: 0 1px 25px rgba(57, 63, 72, 0.1); -} - -header.fl-theme-builder-header-shrink ul.menu > li { - padding: 25px 0; -} - -header ul.menu > li { - padding-top: 30px; - padding-bottom: 30px; -} - -header ul.menu > li.menu-item-has-children .menu-item-text .pp-menu-toggle { - right: -7px !important; - transition: all 0.3s ease-in-out; -} - -header ul.menu > li.menu-item-has-children:hover .menu-item-text .pp-menu-toggle { - transform: rotate(180deg); -} - -header ul.menu > li > ul.sub-menu { - padding: 30px !important; - transform: translateX(-40%); - display: grid !important; - grid-template-columns: 1fr 1fr; - row-gap: 30px; - column-gap: 40px; -} - -header ul.menu > li > ul.sub-menu > li > a { - display: grid; - grid-template-columns: 26px auto; - grid-template-rows: auto; - column-gap: 20px; - grid-template-areas: "icon menu" "icon description"; - transition: all 0.3s ease-in-out; -} - -header ul.menu > li > ul.sub-menu > li > a .menu-item-text { - grid-area: menu; - line-height: 1.25; -} - -header ul.menu > li > ul.sub-menu > li > a .menu-desc { - font-size: 14px; - font-weight: 300; - grid-area: description; - margin-bottom: 0; - margin-top: 5px; - color: #7E7E7E !important; -} - -header ul.menu > li > ul.sub-menu > li > a .menu-image { - background-repeat: no-repeat; - background-size: contain; - width: 27px; - height: auto; - grid-area: icon; -} - -header ul.menu > li > ul.sub-menu > li.submenu-fractional-cto .menu-desc::before { - content: "Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-app-web .menu-desc::before { - content: "Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-software-qa .menu-desc::before { - content: "Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-fractional-product .menu-desc::before { - content: "Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-outsourced-developer .menu-desc::before { - content: "Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks."; -} - -header ul.menu > li > ul.sub-menu > li.submenu-talent-recruiting .menu-desc::before { - content: "Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team."; -} - -@media (min-width: 861px) { - header ul.menu > li > ul.sub-menu::before { - position: absolute; - width: 0; - height: 0; - content: ""; - border-style: solid; - border-width: 15px 0 15px 15px; - border-color: transparent transparent transparent #FFF; - right: unset !important; - top: -20px !important; - left: 45% !important; - transform: rotate(270deg) !important; - } -} - -@media (max-width: 1115px) { - header ul.menu > li > ul.sub-menu { - transform: translateX(-30%); - } - - header ul.menu > li > ul.sub-menu::before { - left: 33% !important; - } -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-startup-mvp .menu-desc::before { - content: "Whether creating an interactive prototype to validate the user experience or building out a Minimum Viable Product (MVP) for initial customers, we help startups accelerate the path from idea to revenue."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-salvage-project .menu-desc::before { - content: "The sooner a software project is salvaged, the better chance it has of being a viable long-term investment. We can help transform your product, providing the visibility, clarity, and control you need to get your project on track."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-emergency-cto .menu-desc::before { - content: "To maintain visibility, accountability, and control over technology outcomes when a critical team member leaves, companies need on-demand access to technical leadership to help keep the status quo for IT intact."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-empower-team .menu-desc::before { - content: "The easiest & fastest way to grow software development capacity is by using a trusted technology partner that can deploy pre-trained developers on-demand without the need for additional supervision."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-accelerate-dev .menu-desc::before { - content: "Our developers are ready to deploy within weeks (not months), giving companies the ability to accelerate their software development process while still maintaining control over engineering quality."; -} - -header ul.menu > li.menu-usecases ul.sub-menu li.submenu-automate-product .menu-desc::before { - content: "To enable faster product development while eliminating the risks of costly mistakes, companies need access to a reliable product testing & QA resource that can ensure quality at any scale."; -} - -header ul.menu > li.current-page-ancestor > a { - color: #1A8CFF !important; -} - -header ul.menu > li.current-page-ancestor > .pp-has-submenu-container > a { - color: #1A8CFF !important; -} - -header ul.menu > li.current-page-ancestor > .pp-has-submenu-container > a .pp-menu-toggle::before { - border-color: #1A8CFF; -} - -header ul.menu > li.jt-active > a { - color: #1A8CFF !important; -} - -header ul.menu > li.pp-has-submenu.pp-menu-submenu-right .sub-menu { - right: unset !important; -} - -header ul.menu > li.menu-company ul.sub-menu, header ul.menu > li.menu-resources ul.sub-menu { - width: 386px; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon { - margin-right: 20px; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a { - font-size: 20px; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-facebook { - color: #4267B2; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-instagram { - color: #CD486B; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-twitter { - color: #00ACEE; -} - -nav.pp-menu-nav .pp-social-icons span.pp-social-icon a i.fa-github { - color: #121212; -} - /* Footer */ footer .legal-links .fl-rich-text ul { padding-left: 0; diff --git a/themes/beaver/assets/css/navigation.css b/themes/beaver/assets/css/navigation.css new file mode 100644 index 000000000..a3831c50c --- /dev/null +++ b/themes/beaver/assets/css/navigation.css @@ -0,0 +1,373 @@ +.top-panel { + padding: 15px 20px 0; + position: absolute; + width: 100%; + z-index: 100; + + @media (max-width: 1024px) { + padding: 20px; + } +} + +.top-panel .wrapper { + max-width: 1280px; + width: auto; + padding: 0; +} + +.top-panel .content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.top-panel .logo { + width: 200px; + height: auto; + display: block; +} + +.navigation { + @media (max-width: 1024px) { + position: fixed; + background-color: #fff; + top: 0; + bottom: 0; + width: 320px; + right: -320px; + z-index: 10; + transition: 0.3s; + } +} + +.menu-opener { + display: none; + width: 30px; + height: 19px; + border: solid #121212; + border-width: 3px 0; + position: relative; + cursor: pointer; + + @media (max-width: 1024px) { + display: block; + } +} + +.menu-opener:before { + content: ""; + position: absolute; + width: 100%; + height: 3px; + background-color: #121212; + left: 0; + top: 50%; + margin-top: -1px; +} + +.menu-close { + display: none; + width: 25px; + height: 25px; + position: absolute; + top: 24px; + left: 16px; + cursor: pointer; +} + +.menu-close:before { + content: ""; + position: absolute; + height: 2px; + background-color: #121212; + left: 4px; + right: 4px; + top: 50%; + margin-top: -1px; + transform: rotate(45deg); +} + +.menu-close:after { + content: ""; + position: absolute; + height: 2px; + background-color: #121212; + left: 4px; + right: 4px; + top: 50%; + margin-top: -1px; + transform: rotate(-45deg); +} + +.navigation.-open .menu-close { + @media (max-width: 1024px) { + display: block; + } +} + +.navigation .list { + display: flex; + flex-direction: row; + align-items: center; + list-style: none; + margin: 0; + padding: 0; +} + +.navigation.-open + .menu-opener { + @media (max-width: 1024px) { + display: none; + } +} + +.navigation .item { + padding: 15px 0; + margin-right: 7px; + position: relative; +} + +.navigation .item:last-child { + margin-right: 0; +} + +.navigation .item .arrow { + content: ""; + position: absolute; + top: 50%; + right: 0; + margin-top: -6px; + width: 9px; + height: 9px; + border-color: #121212; + border-style: solid; + border-width: 0 2px 2px 0; + transform-origin: 70% 70%; + transform: rotate(45deg); + transition: 0.3s; +} + +.navigation .link { + padding: 15px; + display: inline-block; + vertical-align: top; + font-size: 16px; + font-weight: 300; + line-height: 24px; + color: #121212; + text-decoration: none; + transition: 0.3s; +} + +.navigation .-active .link { + color: #1a8cff; +} + +.navigation .item.-active .arrow { + border-color: #1a8cff; +} + +.navigation .sub-menu { + display: none; + background-color: #fff; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + border-radius: 20px; + padding: 30px 30px 0; + position: absolute; + top: 100%; + margin: 0; + left: 0; + z-index: 10; + text-align: left; + width: 888px; + transform: translateX(-40%); + font-size: 0; + line-height: 0; + + @media (max-width: 1080px) { + width: 720px; + } +} + +.navigation .sub-menu:before { + position: absolute; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 15px 0 15px 15px; + border-color: transparent transparent transparent #fff; + right: unset !important; + top: -20px !important; + left: 45% !important; + transform: rotate(270deg) !important; +} + +.navigation .sub-item { + display: inline-block; + vertical-align: middle; + width: 50%; + font-size: 14px; + line-height: 20px; + font-weight: 300; + margin-bottom: 30px; +} + +.navigation .sub-link { + display: block; + text-decoration: none; +} + +.navigation .sub-image { + float: left; + background-repeat: no-repeat; + background-size: contain; + width: 27px; + height: auto; +} + +.navigation .sub-holder { + overflow: hidden; + padding: 0 20px; +} + +.navigation .sub-name { + font-weight: 700; + font-size: 20px; + line-height: 26px; + color: #121212; + transition: 0.3s; +} + +.navigation .sub-item:hover .sub-name { + color: #1a8cff; +} + +.navigation .sub-text { + font-size: 14px; + line-height: 20px; + font-weight: 300; + margin-bottom: 0; + margin-top: 5px; + color: #7e7e7e; +} + +.navigation .item:hover .sub-menu { + display: block; +} + +.navigation .item:hover .link { + color: #1a8cff; +} + +.navigation .item:hover .arrow { + transform: rotate(225deg); + border-color: #1a8cff; +} + +@media (max-width: 1024px) { + .navigation.-open { + right: 0; + overflow-y: auto; + } + + .navigation:before { + position: fixed; + content: ""; + left: 0; + right: 320px; + top: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.8); + z-index: -1; + opacity: 0; + transition: 0.3s; + } + + .navigation.-open:before { + opacity: 1; + } + + .navigation.-open .list { + display: block; + padding: 70px 20px 20px; + } + + body.-open { + overflow: hidden; + } + + .navigation .btn { + display: block; + text-align: center; + font-weight: 300; + line-height: 22px; + font-size: 16px; + background-color: #121212; + color: #fff; + border-radius: 6px; + margin-top: 10px; + } + + .navigation .item { + padding: 0; + margin: 0; + } + + .navigation .link { + padding: 14px 0; + } + + .navigation .sub-holder { + padding-right: 0; + } + + .navigation .sub-menu { + width: auto; + position: static; + padding: 0; + margin: 0; + transform: none; + box-shadow: none; + } + + .navigation .item.-open .sub-menu { + display: block; + } + + .navigation .sub-menu:before, + .navigation .sub-menu:after { + display: none; + } + + .navigation .sub-item { + width: auto; + display: block; + margin-bottom: 15px; + } + + .navigation .sub-link { + display: flex; + align-items: center; + } + + .navigation .sub-image { + float: none; + } + + .navigation .sub-name { + font-size: 16px; + line-height: 24px; + } + + .navigation .sub-text { + display: none; + } + + .navigation .item .arrow { + top: 25px; + } + + .navigation .item.-open .arrow { + transform: rotate(225deg); + } +} diff --git a/themes/beaver/assets/css/style.css b/themes/beaver/assets/css/style.css index 32f90b305..11de97057 100644 --- a/themes/beaver/assets/css/style.css +++ b/themes/beaver/assets/css/style.css @@ -1,24 +1,3 @@ -/* -Theme Name: Beaver Builder Theme -Theme URI: http://www.wpbeaverbuilder.com/?utm_medium=bb-pro&utm_source=bb-theme&utm_campaign=themes-admin-page -Version: 1.7.14 -Description: A customizable theme with a simple yet robust set of theme options. -Author: The Beaver Builder Team -Author URI: http://www.wpbeaverbuilder.com/?utm_medium=bb-pro&utm_source=bb-theme&utm_campaign=themes-admin-page -License: GNU General Public License v2.0 -License URI: http://www.gnu.org/licenses/gpl-2.0.html -Text Domain: fl-automator -*/ -/* - -WARNING! DO NOT EDIT THEME FILES IF YOU PLAN ON UPDATING! - -Theme files will be overwritten and your changes will be lost -when updating. Instead, add custom code in the admin under -Appearance > Theme Settings > Code or create a child theme. - -*/ - .fl-node-ha6dj4z7r51f:last-child > .fl-col-content { border-right-width: 0; } @@ -31,10 +10,6 @@ Appearance > Theme Settings > Code or create a child theme. overflow: hidden; } -.g-recaptcha { - float: left; -} - /*Blog*/ .blog { padding: 135px 0 50px; @@ -176,3 +151,26 @@ Appearance > Theme Settings > Code or create a child theme. input[type=submit]:disabled { opacity: 0.25 } + +/*Buttons*/ +.btn, +.btn:hover { + padding: 10px 18px; + font-size: 16px; + line-height: 24px; + font-weight: 700; + border-radius: 25px; + text-decoration: none; + white-space: nowrap; + display: inline-block; + vertical-align: top; +} + +.btn-primary { + background-color: #1a8cff; + color: #fff !important; +} + +.btn-primary:hover { + background-color: #007af4; +} diff --git a/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js b/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js index 2d90a904e..1c142ed07 100644 --- a/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js +++ b/themes/beaver/assets/js/bb-theme/pp_advanced_menu.js @@ -1,744 +1,18 @@ -class PPAdvancedMenu { - constructor(settings) { - this.settingsId = settings.id; - this.nodeClass = `.fl-node-${settings.id}`; - this.wrapperClass = `${this.nodeClass} .pp-advanced-menu`; - this.breakpoints = { large: 1200, medium: 1115, small: 860, custom: 768 }; - this.currentBrowserWidth = window.innerWidth; - this.offCanvasMenu = null; - this.$submenus = null; - - this._initMenu(); - - window.addEventListener("resize", (e) => { - const width = window.innerWidth; - if (width !== this.currentBrowserWidth) { - this._initMenu(); - this._clickOrHover(); - this.currentBrowserWidth = width; - } - }); - - document.body.addEventListener("click", (e) => { - const wrapper = document.querySelector(this.wrapperClass); - const mobileToggle = wrapper.querySelector( - ".pp-advanced-menu-mobile-toggle", - ); - - if ( - mobileToggle && - mobileToggle.classList.contains("pp-active") && - "hamburger" !== "expanded" - ) { - if (e.target.closest(".fl-module-pp-advanced-menu")) return; - if ( - e.target.closest(".pp-advanced-menu") && - e.target.tagName === "INPUT" - ) - return; - if (e.target.classList.contains("pp-menu-close-btn")) return; - mobileToggle.click(); - } - - if (wrapper) { - wrapper - .querySelectorAll(".pp-has-submenu") - .forEach((el) => el.classList.remove("focus", "pp-active")); - wrapper - .querySelectorAll(".pp-has-submenu .sub-menu") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-has-submenu-container") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-menu-toggle") - .forEach((el) => el.setAttribute("aria-expanded", false)); - } - }); - - document.addEventListener("keyup", (e) => { - if (e.key === "Escape") { - const wrapper = document.querySelector(this.wrapperClass); - wrapper - .querySelectorAll(".pp-has-submenu") - .forEach((el) => el.classList.remove("focus", "pp-active")); - wrapper - .querySelectorAll(".pp-has-submenu .sub-menu") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-has-submenu-container") - .forEach((el) => el.classList.remove("focus")); - wrapper - .querySelectorAll(".pp-menu-toggle") - .forEach((el) => el.setAttribute("aria-expanded", false)); - const focusedToggle = wrapper.querySelector(".pp-menu-toggle.focus"); - if (focusedToggle && focusedToggle.offsetParent !== null) { - setTimeout(() => focusedToggle.focus(), 100); - } - } - }); - } - - _isMobile() { - return window.innerWidth <= this.breakpoints.small; +document.querySelector('.js-mobile-menu-opener'). + onclick = function () { + document.querySelector('.js-navigation').classList.add('-open'); + document.querySelector('body').classList.add('-open'); } - _isMedium() { - return window.innerWidth <= this.breakpoints.medium; +document.querySelector('.js-mobile-menu-close'). + onclick = function () { + document.querySelector('.js-navigation').classList.remove('-open'); + document.querySelector('body').classList.remove('-open'); } - _isCustom() { - return window.innerWidth <= this.breakpoints.custom; - } - - _isTouch() { - let prefixes = " -webkit- -moz- -o- -ms- ".split(" "); - let mq = function (query) { - return window.matchMedia(query).matches; - }; - if ( - "ontouchstart" in window || - (window.DocumentTouch && document instanceof DocumentTouch) - ) { - return true; - } - let query = ["(", prefixes.join("touch-enabled),("), "heartz", ")"].join( - "", - ); - return mq(query); - } - - _isMenuToggle() { - return !!( - ((this._isMobile() && true) || - (this._isMedium() && false) || - (this._isCustom() && false)) && - $(this.nodeClass).find(".pp-advanced-menu-mobile-toggle").is(":visible") - ); - } - - _initMenu() { - this._setupSubmenu(); - this._menuOnFocus(); - this._submenuOnClick(); - if ($(this.nodeClass).length) { - this._initMegaMenus(); - } - let self = this; - $(this.wrapperClass) - .find(".pp-has-submenu-container") - .on("click", function (e) { - if ("off-canvas" !== "off-canvas" && "off-canvas" !== "full-screen") { - if (self._isTouch()) { - if (!$(this).hasClass("first-click")) { - e.preventDefault(); - $(this).addClass("first-click"); - } - } - } - }); - $(this.wrapperClass) - .find("li.pp-has-submenu a") - .on( - "keyup", - function (e) { - if ( - $(e.target).hasClass("pp-menu-toggle") && - !$(this.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .is(":visible") - ) { - if (e.which === 1 || e.which === 13 || e.which === undefined) { - e.preventDefault(); - e.stopPropagation(); - $(e.target).parents("li.pp-has-submenu").toggleClass("pp-active"); - if ( - $(e.target).parents("li.pp-has-submenu").hasClass("pp-active") - ) { - $(e.target).attr("aria-expanded", true); - } else { - $(e.target).attr("aria-expanded", false); - } - } - } - }.bind(this), - ); - if (this._isMenuToggle()) { - $(this.wrapperClass).off("mouseenter mouseleave"); - this._menuOnClick(); - this._clickOrHover(); - } else { - $(this.wrapperClass).off("click"); - this._submenuOnRight(); - this._submenuRowZindexFix(); - } - if ("hamburger" !== "expanded") { - this._toggleForMobile(); - this._initOffCanvas(); +if (document.querySelector(window).width() < 1024) { + document.querySelector('.js-sub-menu-opener'). + onclick = function () { + document.querySelector(this).parent().classList.toggle('-open'); } - $(this.wrapperClass) - .find("li:not(.menu-item-has-children)") - .on( - "click", - "a", - function (e) { - if ($(e.target).closest(".pp-menu-search-item").length > 0) { - return; - } - $(this.nodeClass).find(".pp-advanced-menu").removeClass("menu-open"); - $(this.nodeClass).find(".pp-advanced-menu").addClass("menu-close"); - $("html") - .removeClass("pp-off-canvas-menu-open") - .removeClass("pp-full-screen-menu-open"); - }.bind(this), - ); - if ($(this.wrapperClass).find(".pp-menu-search-item").length) { - this._toggleMenuSearch(); - } - } - - _setupSubmenu() { - $(this.wrapperClass + " ul.sub-menu").each(function () { - $(this).closest("li").attr("aria-haspopup", "true"); - }); - } - - _menuOnFocus() { - $(this.nodeClass) - .off("focus") - .on( - "focus", - "a", - function (e) { - let $menuItem = $(e.target).parents(".menu-item").first(), - $parents = $(e.target).parentsUntil(this.wrapperClass); - $(".pp-advanced-menu .focus:not(.pp-menu-toggle)").removeClass( - "focus", - ); - $menuItem.addClass("focus"); - $parents.addClass("focus"); - }.bind(this), - ) - .on( - "focusout", - "a", - function (e) { - if ($(".pp-advanced-menu .focus").hasClass("pp-has-submenu")) { - $(e.target) - .parentsUntil(this.wrapperClass) - .find(".pp-has-submenu-container") - .removeClass("first-click"); - } - }.bind(this), - ); - $(this.nodeClass) - .off("focus", ".pp-menu-toggle") - .on( - "focus", - ".pp-menu-toggle", - function (e) { - $(e.target).addClass("focus"); - }.bind(this), - ) - .off("blur", ".pp-menu-toggle") - .on( - "blur", - ".pp-menu-toggle", - function (e) { - if ( - $(e.target).parents("li.pp-has-submenu.pp-active").length === 0 || - $(e.target).parents("li.pp-has-submenu.pp-active").parent("ul.menu") - .length === 0 - ) { - $(e.target).removeClass("focus"); - } - }.bind(this), - ); - } - - _menuOnClick() { - let self = this; - let $mainItem = ""; - $(this.wrapperClass) - .off() - .on( - "click.pp-advanced-menu keyup", - ".pp-has-submenu-container", - function (e) { - let isValidEvent = - e.which === 1 || e.which === 13 || e.which === undefined; - if (!isValidEvent) { - return; - } - if (e.which === 13 && !$(e.target).hasClass("pp-menu-toggle")) { - return; - } - if (self._isTouch()) { - if (!$(this).hasClass("first-click")) { - e.preventDefault(); - $(this).addClass("first-click"); - } - } - e.stopPropagation(); - let isMainEl = $(e.target) - .parents(".menu-item") - .parent() - .parent() - .hasClass("pp-advanced-menu"); - if (isMainEl && $mainItem === "") { - $mainItem = $(e.target).parents(".menu-item"); - } - let $link = $(e.target).parents(".pp-has-submenu").first(), - $subMenu = $link.children(".sub-menu").first(), - $href = $link - .children(".pp-has-submenu-container") - .first() - .find("> a") - .attr("href"), - $subMenuParents = $(e.target).parents(".sub-menu"), - $activeParent = $(e.target).closest(".pp-has-submenu.pp-active"); - if ($activeParent.length > 0) { - $activeParent - .find(".pp-menu-toggle") - .first() - .attr("aria-expanded", true); - } else { - $activeParent - .find(".pp-menu-toggle") - .first() - .attr("aria-expanded", false); - } - if ( - !$subMenu.is(":visible") || - $(e.target).hasClass("pp-menu-toggle") || - ($subMenu.is(":visible") && - (typeof $href === "undefined" || $href === "#")) - ) { - if ( - !$(this.wrapperClass).hasClass( - "pp-advanced-menu-accordion-collapse", - ) - ) { - e.preventDefault(); - } - if ($(e.target).hasClass("pp-menu-toggle")) { - e.stopPropagation(); - e.preventDefault(); - } - } else { - e.stopPropagation(); - window.location.href = $href; - return; - } - if ( - $(this.wrapperClass).hasClass("pp-advanced-menu-accordion-collapse") - ) { - if ( - $link.parents(".menu-item").length && - !$link.parents(".menu-item").hasClass("pp-active") - ) { - $(".menu .pp-active", this.wrapperClass) - .not($link) - .removeClass("pp-active"); - } else if ( - $link.parents(".menu-item").hasClass("pp-active") && - $link.parent(".sub-menu").length - ) { - $(".menu .pp-active", this.wrapperClass) - .not($link) - .not($activeParent) - .removeClass("pp-active"); - } - $(".sub-menu", this.wrapperClass) - .not($subMenu) - .not($subMenuParents) - .slideUp("normal"); - } - if ($(self.wrapperClass).find(".sub-menu:visible").length > 0) { - $(self.wrapperClass) - .find(".sub-menu:visible") - .parent() - .addClass("pp-active"); - } - $subMenu.slideToggle(400, function () { - $(e.target) - .parents(".pp-has-submenu-container") - .parent() - .parent() - .find("> .menu-item.pp-active") - .removeClass("pp-active"); - if ($mainItem !== "") { - $mainItem - .parent() - .find(".menu-item.pp-active") - .removeClass("pp-active"); - $(self.wrapperClass) - .find(".sub-menu") - .parent() - .removeClass("pp-active"); - if ($(self.wrapperClass).find(".sub-menu:visible").length > 0) { - $(self.wrapperClass) - .find(".sub-menu:visible") - .parent() - .addClass("pp-active"); - } else { - $link.toggleClass("pp-active"); - $mainItem.removeClass("pp-active"); - } - } else { - $link.toggleClass("pp-active"); - } - if (!$subMenu.is(":visible")) { - $subMenu.parent().removeClass("pp-active"); - $subMenu - .parent() - .find("> .pp-has-submenu-container .pp-menu-toggle") - .attr("aria-expanded", false); - } else { - $subMenu - .parent() - .find("> .pp-has-submenu-container .pp-menu-toggle") - .attr("aria-expanded", true); - } - }); - }.bind(this), - ); - } - - _submenuOnClick() { - $(this.wrapperClass + " .sub-menu") - .off() - .on( - "click", - "a", - function (e) { - if ($(e.target).parent().hasClass("focus")) { - $(e.target).parentsUntil(this.wrapperClass).removeClass("focus"); - } - }.bind(this), - ); - } - - _clickOrHover() { - this.$submenus = this.$submenus || $(this.wrapperClass).find(".sub-menu"); - let $wrapper = $(this.wrapperClass), - $menu = $wrapper.find(".menu"); - let $li = $wrapper.find(".pp-has-submenu"); - if (this._isMenuToggle()) { - $li.each(function () { - if (!$(this).hasClass("pp-active")) { - $(this).find(".sub-menu").fadeOut(); - } - }); - } else { - $li.each(function () { - if (!$(this).hasClass("pp-active")) { - $(this).find(".sub-menu").css({ - display: "", - opacity: "", - }); - } - }); - } - } - - _submenuOnRight() { - $(this.wrapperClass) - .on( - "mouseenter focus", - ".pp-has-submenu", - function (e) { - if ($(e.currentTarget).find(".sub-menu").length === 0) { - return; - } - let $link = $(e.currentTarget), - $parent = $link.parent(), - $subMenu = $link.find(".sub-menu"), - subMenuWidth = $subMenu.width(), - subMenuPos = 0, - winWidth = window.innerWidth; - if ($link.closest(".pp-menu-submenu-right").length !== 0) { - $link.addClass("pp-menu-submenu-right"); - } else if ($("body").hasClass("rtl")) { - subMenuPos = $parent.is(".sub-menu") - ? $parent.offset().left - subMenuWidth - : $link.offset().left - subMenuWidth; - if (subMenuPos <= 0) { - $link.addClass("pp-menu-submenu-right"); - } - } else { - subMenuPos = $parent.is(".sub-menu") - ? $parent.offset().left + $parent.width() + subMenuWidth - : $link.offset().left + subMenuWidth; - if (subMenuPos > winWidth) { - $link.addClass("pp-menu-submenu-right"); - } - } - }.bind(this), - ) - .on( - "mouseleave", - ".pp-has-submenu", - function (e) { - $(e.currentTarget).removeClass("pp-menu-submenu-right"); - }.bind(this), - ); - } - - _submenuRowZindexFix(e) { - $(this.wrapperClass) - .on( - "mouseenter", - "ul.menu > .pp-has-submenu", - function (e) { - if ($(e.currentTarget).find(".sub-menu").length === 0) { - return; - } - $(this.nodeClass) - .closest(".fl-row") - .find(".fl-row-content") - .css("z-index", "10"); - }.bind(this), - ) - .on( - "mouseleave", - "ul.menu > .pp-has-submenu", - function (e) { - $(this.nodeClass) - .closest(".fl-row") - .find(".fl-row-content") - .css("z-index", ""); - }.bind(this), - ); - } - - _toggleForMobile() { - let $wrapper = null, - $menu = null, - self = this; - if (this._isMenuToggle()) { - $wrapper = $(this.wrapperClass); - $menu = $wrapper.find(".menu"); - - $wrapper.on("click", ".pp-advanced-menu-mobile-toggle", function (e) { - $(this).toggleClass("pp-active"); - $menu.slideToggle(); - e.stopPropagation(); - }); - - $menu.on("click", '.menu-item > a[href*="#"]', function (e) { - let $href = $(this).attr("href"), - $targetID = ""; - if ($href !== "#") { - $targetID = $href.split("#")[1]; - if ($("body").find("#" + $targetID).length > 0) { - e.preventDefault(); - $(this).toggleClass("pp-active"); - setTimeout(function () { - $("html, body").animate( - { scrollTop: $("#" + $targetID).offset().top }, - 1000, - function () { - window.location.hash = $targetID; - }, - ); - }, 500); - if (!self._isMenuToggle()) { - $menu.slideToggle(); - } - } - } - }); - } else { - $wrapper = $(this.wrapperClass); - $menu = $wrapper.children(".menu"); - $wrapper.find(".pp-advanced-menu-mobile-toggle").removeClass("pp-active"); - $menu.css({ display: "" }); - } - } - - _initMegaMenus() { - let module = $(this.nodeClass), - rowContent = module.closest(".fl-row-content"), - rowWidth = rowContent.width(), - megas = module.find(".mega-menu"), - disabled = module.find(".mega-menu-disabled"), - isToggle = this._isMenuToggle(); - if (isToggle) { - megas.removeClass("mega-menu").addClass("mega-menu-disabled"); - module.find("li.mega-menu-disabled > ul.sub-menu").css("width", ""); - rowContent.css("position", ""); - } else { - disabled.removeClass("mega-menu-disabled").addClass("mega-menu"); - module.find("li.mega-menu > ul.sub-menu").css("width", rowWidth + "px"); - rowContent.css("position", "relative"); - } - } - - _initOffCanvas() { - $("html").addClass("pp-off-canvas-menu-module"); - $("html").addClass("pp-off-canvas-menu-" + "right"); - if ( - null === this.offCanvasMenu && - $(this.nodeClass).find(".pp-advanced-menu.off-canvas").length > 0 - ) { - this.offCanvasMenu = $(this.nodeClass).find( - ".pp-advanced-menu.off-canvas", - ); - } - if ( - $("#pp-advanced-menu-off-canvas-" + this.settingsId).length === 0 && - null !== this.offCanvasMenu - ) { - this.offCanvasMenu - .appendTo("body") - .wrap( - '
    ', - ); - } - this._toggleMenu(); - } - - _initFullScreen() { - $("html").addClass("pp-full-screen-menu-module"); - this._toggleMenu(); - } - - _toggleMenu() { - let self = this; - let singleInstance = true; - - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .off("click") - .on("click", function () { - if (singleInstance) { - if ($(".pp-advanced-menu.menu-open").length > 0) { - $(".pp-advanced-menu").removeClass("menu-open"); - $("html").removeClass("pp-full-screen-menu-open"); - } - } - if ($(self.nodeClass).find(".pp-advanced-menu").hasClass("menu-open")) { - $(self.nodeClass).find(".pp-advanced-menu").removeClass("menu-open"); - $(self.nodeClass).find(".pp-advanced-menu").addClass("menu-close"); - $("html").removeClass("pp-off-canvas-menu-open"); - $("html").removeClass("pp-full-screen-menu-open"); - } else { - $(self.nodeClass).find(".pp-advanced-menu").addClass("menu-open"); - $("html").addClass("pp-off-canvas-menu-open"); - self.offCanvasMenu.find("nav").attr("tabindex", "0").trigger("focus"); - $(this).attr("tabindex", "-1").trigger("blur"); - } - }); - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .on("keyup", function (e) { - if (13 === e.keyCode || 13 === e.which) { - $(this).trigger("click"); - } - }); - $(self.nodeClass) - .find(".pp-advanced-menu .pp-menu-close-btn, .pp-clear") - .on("click", function () { - $(self.nodeClass).find(".pp-advanced-menu").removeClass("menu-open"); - $(self.nodeClass).find(".pp-advanced-menu").addClass("menu-close"); - $("html").removeClass("pp-off-canvas-menu-open"); - $("html").removeClass("pp-full-screen-menu-open"); - if ( - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .is(":visible") - ) { - setTimeout(function () { - $(self.nodeClass) - .find(".pp-advanced-menu-mobile-toggle") - .attr("tabindex", 0) - .trigger("focus"); - }, 120); - } - if (self.offCanvasMenu && self.offCanvasMenu.length > 0) { - self.offCanvasMenu.find("nav").attr("tabindex", "-1").trigger("blur"); - } - }); - } - - _placeMobileMenuBelowRow() { - if ($(this.nodeClass + "-clone").length) { - return; - } - if ($("html").hasClass("fl-builder-is-showing-toolbar")) { - return; - } - let module = $(this.nodeClass), - clone = module.clone(), - col = module.closest(".fl-col"); - module.find("ul.menu").remove(); - clone.addClass((this.nodeClass + "-clone").replace(".", "")); - clone.find(".pp-advanced-menu-mobile-toggle").remove(); - col.after(clone); - if (module.hasClass("fl-animation")) { - clone.removeClass("fl-animation"); - } - this._menuOnClick(); - } - - _toggleMenuSearch() { - let items = $(this.wrapperClass).find(".pp-menu-search-item"), - self = this; - items.each(function () { - let item = $(this); - let button = item.find("> a"), - form = item.find(".pp-search-form"), - input = item.find(".pp-search-form__input"); - button.on("click", function (e) { - e.preventDefault(); - item.toggleClass("pp-search-active"); - if (item.hasClass("pp-search-active")) { - setTimeout(function () { - input.focus(); - self._focusMenuSearch(input); - }, 100); - } - $("body").on("click.pp-menu-search", self._hideMenuSearch.bind(self)); - }); - input - .on("focus", function () { - form.addClass("pp-search-form--focus"); - }) - .on("blur", function () { - form.removeClass("pp-search-form--focus"); - }); - }); - } - - _hideMenuSearch(e) { - if (e !== undefined) { - if ($(e.target).closest(".pp-menu-search-item").length > 0) { - return; - } - } - $(this.wrapperClass) - .find(".pp-menu-search-item") - .removeClass("pp-search-active"); - $("body").off("click.pp-menu-search"); - } - - _focusMenuSearch($el) { - if ($el[0].setSelectionRange) { - let len = $el.val().length * 2; - setTimeout(function () { - $el[0].setSelectionRange(len, len); - }, 1); - } else { - $el.val($el.val()); - } - } } - -document.addEventListener("DOMContentLoaded", function () { - new PPAdvancedMenu({ id: "menu" }); -}); diff --git a/themes/beaver/assets/js/navigation.js b/themes/beaver/assets/js/navigation.js new file mode 100644 index 000000000..3824cf198 --- /dev/null +++ b/themes/beaver/assets/js/navigation.js @@ -0,0 +1,27 @@ +document.addEventListener("DOMContentLoaded", function () { + document.querySelector(".js-mobile-menu-opener").addEventListener( + "click", + function (e) { + document.querySelector(".js-navigation").classList.add("-open"); + document.querySelector("body").classList.add("-open"); + }, + false, + ); + + document.querySelector(".js-mobile-menu-close").addEventListener( + "click", + function (e) { + document.querySelector(".js-navigation").classList.remove("-open"); + document.querySelector("body").classList.remove("-open"); + }, + false, + ); + + if (window.innerWidth < 1024) { + document + .querySelector(".js-sub-menu-opener") + .addEventListener("click", function (e) { + document.querySelector(this).parent().classList.toggle("-open"); + }); + } +}); diff --git a/themes/beaver/layouts/_default/baseof.html b/themes/beaver/layouts/_default/baseof.html index 0049ef929..2ddb84eeb 100644 --- a/themes/beaver/layouts/_default/baseof.html +++ b/themes/beaver/layouts/_default/baseof.html @@ -45,15 +45,14 @@ {{ end }} - {{ block "header" . }} {{ end }} + {{ $CSS := slice + (resources.Get "css/navigation.css") + | resources.Concat "css/_shared.css" | postCSS | minify | fingerprint | resources.PostProcess + }} + + @@ -61,15 +60,15 @@ - Skip to content -
    {{ partial "page/header.html" . }} +
    + {{ block "main" . }} {{ end }}
    diff --git a/themes/beaver/layouts/page/index.html b/themes/beaver/layouts/page/index.html index 5b1864801..d6698c406 100644 --- a/themes/beaver/layouts/page/index.html +++ b/themes/beaver/layouts/page/index.html @@ -1,1221 +1,1219 @@ -{{ define "header" }} -{{ partial "header/critical/homepage.html" . }} - -{{ $CSS := slice - (resources.Get "css/components/pp_adv_menu.css") - (resources.Get "css/companies.css") - | resources.Concat "css/_critical.css" | postCSS | minify | fingerprint | resources.PostProcess -}} - - -{{ end }} - -{{ define "footer" }} - -{{ end }} - -{{ define "main" }} -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - Build faster. Scale smarter. -

    -
    -
    -
    -
    -
    -

    Streamline development, accelerate delivery, & achieve your product vision with access to turnkey engineering resources backed by world-class technical talent.

    -
    -
    -
    -
    -
    -
    - - Talk to an Expert - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - {{ $image := .Page.Resources.Get "build-faster-scale-smarter.jpeg" }} - {{ $title := "Build Faster Scale Smarter" }} - {{ partial "img/homepage.html" (dict "image" $image "title" $title) }} -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "svg" "logo-dark" }} -
    -
    -
    -
    -
    -
    -
    -

    {{ .Params.overview_first_value }}+

    -
    -
    -
    -
    -
    -
    -

    {{ .Params.overview_first_name }}

    -
    -
    -
    -
    -
    -
    - - Learn More - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    We helped over 160+ companies that went beyond their goals with our teams

    -
    -
    -
    - -
    -
    - {{ partial "companies.html" . }} -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    SERVICES

    -
    -
    -
    -
    -
    -

    - We optimize technology -

    -
    -
    -
    -
    -
    -

    From technical strategy and innovation to talent acquisition and software development, we help empower products and teams at any stage.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - {{ partial "header/icons/fractional-cto.html" . }} -
    -
    -
    -

    Fractional CTO

    -
    -
    -
    -

    Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations.

    -
    -
    - - Learn More - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "header/icons/app-web.html" . }} -
    -
    -
    -

    App/Web Development

    -
    -
    -
    -

    Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes.

    -
    -
    - - Learn More - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "header/icons/software-qa.html" . }} -
    -
    -
    -

    Software QA & CAT

    -
    -
    -
    -

    Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services.

    -
    -
    - - Learn More - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "header/icons/fractional-product.html" . }} -
    -
    -
    -

    Fractional Product Management

    -
    -
    -
    -

    Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules.

    -
    -
    - - Learn More - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "header/icons/outsourced-developer.html" . }} -
    -
    -
    -

    Outsourced Developer Staffing

    -
    -
    -
    -

    Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks.

    -
    -
    - - Learn More - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "header/icons/talent-recruiting.html" . }} -
    -
    -
    -

    Talent Recruiting and Training

    -
    -
    -
    -

    Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team.

    -
    -
    - - Learn More - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    TECHNOLOGIES

    -
    -
    -
    -
    -
    -

    - Just like you, we choose scalable and flexible technologies -

    -
    -
    -
    -
    -
    -

    We provide a diverse mix of experiences across the leading back-end and front-end coding languages.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "svg" "technologies/ruby" }} -
    -
    -
    -
    -
    -
    -
    -

    Ruby on Rails

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "svg" "technologies/python" }} -
    -
    -
    -
    -
    -
    -
    -

    Python

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "svg" "technologies/react" }} -
    -
    -
    -
    -
    -
    -
    -

    React.js

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "svg" "technologies/vue" }} -
    -
    -
    -
    -
    -
    -
    -

    Vue.js

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "svg" "technologies/react" }} -
    -
    -
    -
    -
    -
    -
    -

    React Native

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "svg" "technologies/node" }} -
    -
    -
    -
    -
    -
    -
    -

    Node.js

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    CLIENTS + CASE STUDIES

    -
    -
    -
    -
    -
    -

    - Our client experiences -

    -
    -
    -
    -
    -
    -
    -
    -
    -

    We’ve delivered successful project outcomes in a variety of industries, ranging from early-stage startups to established enterprises.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - View All Clients - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - {{ $pages := where .Site.RegularPages "Type" "clients" }} - {{ $pages = $pages | first 3 }} - - - {{ range $pages }} - {{ .Scratch.Set "logoVariant" "white" }} - {{ partial "clients/grid-single.html" . }} - {{ end }} - -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -
    -
    -
    -
    -
    -

    WHY US?

    -
    -
    -
    -
    -
    -

    - We help you create effective digital solutions -

    -
    -
    -
    -
    -
    -

    Combining Talent, Technical Strategy, & Robust Development Processes

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -

    We Prioritize You

    -
    -
    -
    -

    We only work with a few clients at a time & make those selective clients our primary focus. By putting our clients in the spotlight, we drastically improve alignment, increase work quality.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -

    We Help You Adapt

    -
    -
    -
    -

    Our team has a tremendous amount of experience helping startups thrive. Whether it’s pre-revenue, seed stage, or post-funding, we can help take your company to the next level from any stage.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -

    We Are Reliable

    -
    -
    -
    -

    Technical oversight and the development process is critical to the success of your project. We provide the structure needed to consistently deliver results on-time and optimize product performance.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -

    We Simplify Costs

    -
    -
    -
    -

    Without a repeatable system for software development, it’s easy to lose control over both costs & timeline. We provide turnkey solutions that are designed to be faster, cheaper, and easier to manage.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - Working with teams, CTOs praise us as “trustworthy” and “reliable” -

    -
    -
    -
    -
    -
    -

    Talk with one of our experts to get a technical strategy and planning session for your project at no cost.

    -
    -
    -
    -
    -
    -
    - - Talk to an Expert - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    USE CASES

    -
    -
    -
    -
    -
    -

    - Delivering positive technology outcomes -

    -
    -
    -
    -
    -
    -

    We are committed to helping companies confront & conquer new software development challenges, no matter how complicated.

    -
    -
    -
    -
    -
    -
    -
    - - - - - - -
    -
    -
    - -
    -
    -

    Startup MVP Prototyping & Development

    -
      -
    • - - - - - With the emergence of lean methodologies, software startups are finding creative, cost-effective ways to go-to-market on a budget.
      • -
    • - - - - - Instead of enduring big expenses & risks to build a full product, startups can use prototypes and Minimally-Viable Products (MVP) as a low-cost way to gather customer feedback and iterate on the overall product vision.
      • -
    • - - - - - We’ve helped startups across a variety of industries go from zero to go-to-market at a fraction of the costs with prototyping & MVP development services.
      • -
    -

    Learn More

    -
    -
    -
    -
    - -
    -
    -

    Salvage an Existing Project

    -
      -
    • - - - - - - Software products often get handled by many people, teams, and leaders as it ages, which can make it harder to maintain, repair, and improve.
      • -
    • - - - - - - Without the right best practices & documentation, software codebases can become impossible to use without consultants or additional technical resources.
      • -
    • - - - - - - We can help transform the long-term stability of your software product, providing the visibility, clarity, and control you need to get your project on track.
      • -
    -

    Learn More

    -
    -
    -
    -
    - -
    -
    -

    Emergency CTO Leadership

    -
      -
    • - - - - - - Technology & software products need constant supervision from someone with the knowledge to reduce errors, spot problems, & prevent downtime.
      • -
    • - - - - - - When a company loses technical leadership or reaches unfamiliar territory, it’s critical to find the right technical expertise as soon as possible.
      • -
    • - - - - - - With access to a fractional CTO, you can maintain best practices, hire developers faster, & streamline operations at a fraction of the cost of a full-time CTO
      • -
    -

    Learn More

    -
    -
    -
    -
    - -
    -
    -

    Empower an Existing Engineering Team

    -
      -
    • - - - - - - Even a talented development team can become overwhelmed by customer complaints, technical issues, or aggressive deadlines.
      • -
    • - - - - - - When a core development team is rushed or overworked, companies risk losing control over product quality & missing critical software errors.
      • -
    • - - - - - - With access to on-demand engineering resources, you can help support your core team and make it easier for them to adapt as the environment changes.
      • -
    -

    Learn More

    -
    -
    -
    -
    - -
    -
    -

    Accelerate Development & Maximize Capacity

    -
      -
    • - - - - - - Software development is a delicate balancing act between speed & quality, which can be difficult to achieve.
      • -
    • - - - - - - Any team can build a high-quality product with enough time, but very few teams can deliver a high level of quality at a competitive pace.
      • -
    • - - - - - - With access to on-demand engineering resources, you can accelerate development speed while maintaining product quality.
      • -
    -

    Learn More

    -
    -
    -
    -
    - -
    -
    -

    Automate Product QA & Testing

    -
      -
    • - - - - - - The larger a software product grows, the harder it becomes to maintain, improve, and optimize it over time without issues emerging.
      • -
    • - - - - - - Without an effective system for ongoing product testing, it’s easy for hidden issues to devolve into an uncontrollable, unsustainable situation.
      • -
    • - - - - - - With our fully-managed software testing & QA services, you can accelerate development cycles while minimizing costly mistakes & product errors.
      • -
    -

    Learn More

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - {{ partial "page/testimonials.html" . }} -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - Let’s get started now -

    -
    -
    -
    -
    -
    -

    Get in touch with one of our experts to get a technical strategy & planning session for your project at no cost.

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    - - Contact Us - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - - -
    -
    -
    -
    -{{ end }} +{{ define "header" }} +{{ partial "header/critical/homepage.html" . }} + +{{ $CSS := slice + (resources.Get "css/companies.css") + | resources.Concat "css/_critical.css" | postCSS | minify | fingerprint | resources.PostProcess +}} + +{{ end }} + +{{ define "footer" }} + +{{ end }} + +{{ define "main" }} +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Build faster. Scale smarter. +

    +
    +
    +
    +
    +
    +

    Streamline development, accelerate delivery, & achieve your product vision with access to turnkey engineering resources backed by world-class technical talent.

    +
    +
    +
    +
    +
    +
    + + Talk to an Expert + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + {{ $image := .Page.Resources.Get "build-faster-scale-smarter.jpeg" }} + {{ $title := "Build Faster Scale Smarter" }} + {{ partial "img/homepage.html" (dict "image" $image "title" $title) }} +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "svg" "logo-dark" }} +
    +
    +
    +
    +
    +
    +
    +

    {{ .Params.overview_first_value }}+

    +
    +
    +
    +
    +
    +
    +

    {{ .Params.overview_first_name }}

    +
    +
    +
    +
    +
    +
    + + Learn More + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    We helped over 160+ companies that went beyond their goals with our teams

    +
    +
    +
    + +
    +
    + {{ partial "companies.html" . }} +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    SERVICES

    +
    +
    +
    +
    +
    +

    + We optimize technology +

    +
    +
    +
    +
    +
    +

    From technical strategy and innovation to talent acquisition and software development, we help empower products and teams at any stage.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + {{ partial "header/icons/fractional-cto.html" . }} +
    +
    +
    +

    Fractional CTO

    +
    +
    +
    +

    Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations.

    +
    +
    + + Learn More + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "header/icons/app-web.html" . }} +
    +
    +
    +

    App/Web Development

    +
    +
    +
    +

    Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes.

    +
    +
    + + Learn More + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "header/icons/software-qa.html" . }} +
    +
    +
    +

    Software QA & CAT

    +
    +
    +
    +

    Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services.

    +
    +
    + + Learn More + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "header/icons/fractional-product.html" . }} +
    +
    +
    +

    Fractional Product Management

    +
    +
    +
    +

    Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules.

    +
    +
    + + Learn More + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "header/icons/outsourced-developer.html" . }} +
    +
    +
    +

    Outsourced Developer Staffing

    +
    +
    +
    +

    Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks.

    +
    +
    + + Learn More + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "header/icons/talent-recruiting.html" . }} +
    +
    +
    +

    Talent Recruiting and Training

    +
    +
    +
    +

    Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team.

    +
    +
    + + Learn More + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    TECHNOLOGIES

    +
    +
    +
    +
    +
    +

    + Just like you, we choose scalable and flexible technologies +

    +
    +
    +
    +
    +
    +

    We provide a diverse mix of experiences across the leading back-end and front-end coding languages.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "svg" "technologies/ruby" }} +
    +
    +
    +
    +
    +
    +
    +

    Ruby on Rails

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "svg" "technologies/python" }} +
    +
    +
    +
    +
    +
    +
    +

    Python

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "svg" "technologies/react" }} +
    +
    +
    +
    +
    +
    +
    +

    React.js

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "svg" "technologies/vue" }} +
    +
    +
    +
    +
    +
    +
    +

    Vue.js

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "svg" "technologies/react" }} +
    +
    +
    +
    +
    +
    +
    +

    React Native

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "svg" "technologies/node" }} +
    +
    +
    +
    +
    +
    +
    +

    Node.js

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    CLIENTS + CASE STUDIES

    +
    +
    +
    +
    +
    +

    + Our client experiences +

    +
    +
    +
    +
    +
    +
    +
    +
    +

    We’ve delivered successful project outcomes in a variety of industries, ranging from early-stage startups to established enterprises.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + View All Clients + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + {{ $pages := where .Site.RegularPages "Type" "clients" }} + {{ $pages = $pages | first 3 }} + + + {{ range $pages }} + {{ .Scratch.Set "logoVariant" "white" }} + {{ partial "clients/grid-single.html" . }} + {{ end }} + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +

    WHY US?

    +
    +
    +
    +
    +
    +

    + We help you create effective digital solutions +

    +
    +
    +
    +
    +
    +

    Combining Talent, Technical Strategy, & Robust Development Processes

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +

    We Prioritize You

    +
    +
    +
    +

    We only work with a few clients at a time & make those selective clients our primary focus. By putting our clients in the spotlight, we drastically improve alignment, increase work quality.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +

    We Help You Adapt

    +
    +
    +
    +

    Our team has a tremendous amount of experience helping startups thrive. Whether it’s pre-revenue, seed stage, or post-funding, we can help take your company to the next level from any stage.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +

    We Are Reliable

    +
    +
    +
    +

    Technical oversight and the development process is critical to the success of your project. We provide the structure needed to consistently deliver results on-time and optimize product performance.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +

    We Simplify Costs

    +
    +
    +
    +

    Without a repeatable system for software development, it’s easy to lose control over both costs & timeline. We provide turnkey solutions that are designed to be faster, cheaper, and easier to manage.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Working with teams, CTOs praise us as “trustworthy” and “reliable” +

    +
    +
    +
    +
    +
    +

    Talk with one of our experts to get a technical strategy and planning session for your project at no cost.

    +
    +
    +
    +
    +
    +
    + + Talk to an Expert + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    USE CASES

    +
    +
    +
    +
    +
    +

    + Delivering positive technology outcomes +

    +
    +
    +
    +
    +
    +

    We are committed to helping companies confront & conquer new software development challenges, no matter how complicated.

    +
    +
    +
    +
    +
    +
    +
    + + + + + + +
    +
    +
    + +
    +
    +

    Startup MVP Prototyping & Development

    +
      +
    • + + + + + With the emergence of lean methodologies, software startups are finding creative, cost-effective ways to go-to-market on a budget.
      • +
    • + + + + + Instead of enduring big expenses & risks to build a full product, startups can use prototypes and Minimally-Viable Products (MVP) as a low-cost way to gather customer feedback and iterate on the overall product vision.
      • +
    • + + + + + We’ve helped startups across a variety of industries go from zero to go-to-market at a fraction of the costs with prototyping & MVP development services.
      • +
    +

    Learn More

    +
    +
    +
    +
    + +
    +
    +

    Salvage an Existing Project

    +
      +
    • + + + + + + Software products often get handled by many people, teams, and leaders as it ages, which can make it harder to maintain, repair, and improve.
      • +
    • + + + + + + Without the right best practices & documentation, software codebases can become impossible to use without consultants or additional technical resources.
      • +
    • + + + + + + We can help transform the long-term stability of your software product, providing the visibility, clarity, and control you need to get your project on track.
      • +
    +

    Learn More

    +
    +
    +
    +
    + +
    +
    +

    Emergency CTO Leadership

    +
      +
    • + + + + + + Technology & software products need constant supervision from someone with the knowledge to reduce errors, spot problems, & prevent downtime.
      • +
    • + + + + + + When a company loses technical leadership or reaches unfamiliar territory, it’s critical to find the right technical expertise as soon as possible.
      • +
    • + + + + + + With access to a fractional CTO, you can maintain best practices, hire developers faster, & streamline operations at a fraction of the cost of a full-time CTO
      • +
    +

    Learn More

    +
    +
    +
    +
    + +
    +
    +

    Empower an Existing Engineering Team

    +
      +
    • + + + + + + Even a talented development team can become overwhelmed by customer complaints, technical issues, or aggressive deadlines.
      • +
    • + + + + + + When a core development team is rushed or overworked, companies risk losing control over product quality & missing critical software errors.
      • +
    • + + + + + + With access to on-demand engineering resources, you can help support your core team and make it easier for them to adapt as the environment changes.
      • +
    +

    Learn More

    +
    +
    +
    +
    + +
    +
    +

    Accelerate Development & Maximize Capacity

    +
      +
    • + + + + + + Software development is a delicate balancing act between speed & quality, which can be difficult to achieve.
      • +
    • + + + + + + Any team can build a high-quality product with enough time, but very few teams can deliver a high level of quality at a competitive pace.
      • +
    • + + + + + + With access to on-demand engineering resources, you can accelerate development speed while maintaining product quality.
      • +
    +

    Learn More

    +
    +
    +
    +
    + +
    +
    +

    Automate Product QA & Testing

    +
      +
    • + + + + + + The larger a software product grows, the harder it becomes to maintain, improve, and optimize it over time without issues emerging.
      • +
    • + + + + + + Without an effective system for ongoing product testing, it’s easy for hidden issues to devolve into an uncontrollable, unsustainable situation.
      • +
    • + + + + + + With our fully-managed software testing & QA services, you can accelerate development cycles while minimizing costly mistakes & product errors.
      • +
    +

    Learn More

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ partial "page/testimonials.html" . }} +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Let’s get started now +

    +
    +
    +
    +
    +
    +

    Get in touch with one of our experts to get a technical strategy & planning session for your project at no cost.

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + Contact Us + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    +{{ end }} diff --git a/themes/beaver/layouts/partials/page/header.html b/themes/beaver/layouts/partials/page/header.html index 2642c47fc..f20566381 100644 --- a/themes/beaver/layouts/partials/page/header.html +++ b/themes/beaver/layouts/partials/page/header.html @@ -1,123 +1,11 @@ -