From 8309a793fe75cca97f91cdb524b818586718e47b Mon Sep 17 00:00:00 2001 From: Rita Iglesias Date: Thu, 3 Mar 2022 13:44:07 -0300 Subject: [PATCH 1/4] Testing first attempt --- _includes/header.html | 10 ++++++++++ _sass/_variables.scss | 40 +++++++++++++++++++++++++--------------- _sass/homepage.scss | 17 ++++++++++++++--- _sass/jumbotron.scss | 7 ++++--- _sass/navigation.scss | 27 ++++++++++++++++++--------- 5 files changed, 71 insertions(+), 30 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 3fc8b32534b3..63cfbbd9ac69 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,3 +1,13 @@ +
+
+ Support Ukraine πŸ‡ΊπŸ‡¦{' '} + + Help Provide Humanitarian Aid to Ukraine + + . +
+
+
{% include nav.html %} diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 776259290100..36b0e9d63bc6 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -8,19 +8,20 @@ $medium_grey: #f3f4f7; $not_quite_black: #262626; $slate: #262626; $very_light_grey: #f3f4f7; -$very_dark_grey: #CCCDD1; +$very_dark_grey: #cccdd1; $content_text_color: #6c6c6d; $code_background_color: #f3f4f7; $dark_blue: #3d5a97; $quick_start_grey: #6c6c6d; $command_block_black: #6c6c6d; -$smoky_grey: #CCCDD1; -$medium_smoky_grey: #CCCDD1; -$code_link_color: #4974D1; -$purple: #812CE5; +$smoky_grey: #cccdd1; +$medium_smoky_grey: #cccdd1; +$code_link_color: #4974d1; +$purple: #812ce5; $light_white: #e2e2e2; $mid_gray: #979797; +$banner_height: 40px; $desktop_header_height: 90px; $mobile_header_height: 68px; $desktop_footer_height: 471px; @@ -29,19 +30,27 @@ $site_horizontal_padding: 30px; @import "../node_modules/bootstrap/scss/variables"; @mixin desktop { - @media screen and (min-width: 768px) { @content; } + @media screen and (min-width: 768px) { + @content; + } } @mixin full-nav-menu-desktop { - @media screen and (min-width: 1200px) { @content; } + @media screen and (min-width: 1200px) { + @content; + } } @mixin max-width-desktop { - @media screen and (min-width: 1240px) { @content; } + @media screen and (min-width: 1240px) { + @content; + } } @mixin small-desktop { - @media (min-width: 768px) and (max-width: 1239px) { @content; } + @media (min-width: 768px) and (max-width: 1239px) { + @content; + } } @function rem($px) { @@ -49,7 +58,8 @@ $site_horizontal_padding: 30px; } @mixin code_font_family { - font-family: IBMPlexMono,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; + font-family: IBMPlexMono, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; } @mixin clearfix { @@ -92,7 +102,7 @@ $site_horizontal_padding: 30px; bottom: 0; left: 0; background-color: $orange; - transition: width .250s ease-in-out; + transition: width 0.25s ease-in-out; } &:hover:after { @@ -105,10 +115,10 @@ $site_horizontal_padding: 30px; } @mixin external_link_icon { - &:after { - content: url($baseurl + "/assets/images/external-link-icon.svg"); - margin-left: 15px; - } + &:after { + content: url($baseurl + "/assets/images/external-link-icon.svg"); + margin-left: 15px; + } } @mixin blog_date_and_feature { diff --git a/_sass/homepage.scss b/_sass/homepage.scss index 1dd5632139d8..12b62f430038 100644 --- a/_sass/homepage.scss +++ b/_sass/homepage.scss @@ -1,5 +1,4 @@ .homepage { - .main-content-wrapper { @include desktop { margin-top: 539px; @@ -34,7 +33,7 @@ .jumbotron { height: 195px; @include desktop { - height: 395px; + height: 395px; } .btn { margin-top: rem(6px); @@ -57,6 +56,17 @@ .homepage-header { background-color: rgba(0, 0, 0, 0.165); } + + /* Social Banner */ + .SocialBanner { + font-weight: bold; + font-size: 20px; + max-width: 768px; + margin: 0 auto; + text-align: center; + height: $banner_height; + z-index: 9999; + } } .homepage-feature-module { @@ -331,7 +341,8 @@ padding: 20px; width: 90%; - .right-arrow, .left-arrow { + .right-arrow, + .left-arrow { height: 15px; bottom: -3px; position: relative; diff --git a/_sass/jumbotron.scss b/_sass/jumbotron.scss index 45ecf284e37c..ed254b18a672 100644 --- a/_sass/jumbotron.scss +++ b/_sass/jumbotron.scss @@ -9,11 +9,11 @@ margin-bottom: 0; display: flex; align-items: center; - top: $mobile_header_height; + top: $mobile_header_height + $banner_height; @include desktop { height: 550px; - top: $desktop_header_height; + top: $desktop_header_height + $banner_height; } .jumbotron-content { @@ -48,7 +48,8 @@ } &.on-dark-background { - h1, p { + h1, + p { color: $white; } } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index ce2d3f644ea1..5c4b3b4773b2 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -12,7 +12,7 @@ margin-right: auto; position: fixed; right: 0; - top: 0; + top: $banner_height; width: 100%; z-index: 9999; @@ -174,7 +174,8 @@ padding: 0; } - ul li a, .resources-mobile-menu-title { + ul li a, + .resources-mobile-menu-title { font-size: rem(32px); color: $white; letter-spacing: 0; @@ -251,11 +252,13 @@ } .main-menu ul li { - .ecosystem-dropdown, .resources-dropdown a { + .ecosystem-dropdown, + .resources-dropdown a { cursor: pointer; } - .ecosystem-dropdown, .resources-dropdown { + .ecosystem-dropdown, + .resources-dropdown { .with-down-orange-arrow { padding-right: rem(32px); position: relative; @@ -322,7 +325,8 @@ } } -.ecosystem-dropdown-menu, .resources-dropdown-menu { +.ecosystem-dropdown-menu, +.resources-dropdown-menu { left: -75px; width: 226px; display: none; @@ -342,21 +346,26 @@ border-radius: 0.25rem; } -.ecosystem-dropdown:hover, .resources-dropdown:hover, .resources-active:hover { - .ecosystem-dropdown-menu, .resources-dropdown-menu { +.ecosystem-dropdown:hover, +.resources-dropdown:hover, +.resources-active:hover { + .ecosystem-dropdown-menu, + .resources-dropdown-menu { display: block; } } .main-menu ul li { - .ecosystem-dropdown-menu, .resources-dropdown-menu { + .ecosystem-dropdown-menu, + .resources-dropdown-menu { border-radius: 0; padding: 0; } } .main-menu ul li { - .ecosystem-dropdown-menu, .resources-dropdown-menu { + .ecosystem-dropdown-menu, + .resources-dropdown-menu { .dropdown-item { color: #6c6c6d; border-bottom: 1px solid #e2e2e2; From ce54b9f66e94defdb8da93a3e4626ec261e09052 Mon Sep 17 00:00:00 2001 From: Rita Iglesias Date: Thu, 3 Mar 2022 14:56:49 -0300 Subject: [PATCH 2/4] Testing in nav.html --- _includes/header.html | 10 ---------- _includes/nav.html | 10 +++++++++- _sass/homepage.scss | 11 ----------- _sass/navigation.scss | 11 +++++++++++ 4 files changed, 20 insertions(+), 22 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 63cfbbd9ac69..3fc8b32534b3 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,13 +1,3 @@ -
-
- Support Ukraine πŸ‡ΊπŸ‡¦{' '} - - Help Provide Humanitarian Aid to Ukraine - - . -
-
-
{% include nav.html %} diff --git a/_includes/nav.html b/_includes/nav.html index d6291beb5b90..58e56536cef7 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,5 +1,13 @@ {% assign current = page.url | downcase | remove: ".html" | split: '/' %} - +
+
+ Support Ukraine πŸ‡ΊπŸ‡¦ + + Help Provide Humanitarian Aid to Ukraine + + . +
+
diff --git a/_sass/homepage.scss b/_sass/homepage.scss index 12b62f430038..3858d222652f 100644 --- a/_sass/homepage.scss +++ b/_sass/homepage.scss @@ -56,17 +56,6 @@ .homepage-header { background-color: rgba(0, 0, 0, 0.165); } - - /* Social Banner */ - .SocialBanner { - font-weight: bold; - font-size: 20px; - max-width: 768px; - margin: 0 auto; - text-align: center; - height: $banner_height; - z-index: 9999; - } } .homepage-feature-module { diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 5c4b3b4773b2..d73c3626ddd1 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -29,6 +29,17 @@ } } +/* Social Banner */ +.SocialBanner { + font-weight: bold; + font-size: 20px; + max-width: 768px; + margin: 0 auto; + text-align: center; + height: $banner_height; + z-index: 9999; +} + .header-container { position: relative; display: flex; From d3ec373f27c6a7c379946a9912e8e32ddfb57099 Mon Sep 17 00:00:00 2001 From: Rita Iglesias Date: Thu, 3 Mar 2022 15:51:06 -0300 Subject: [PATCH 3/4] Testing in nav.html - removing space --- _sass/jumbotron.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/jumbotron.scss b/_sass/jumbotron.scss index ed254b18a672..4843558fe0ca 100644 --- a/_sass/jumbotron.scss +++ b/_sass/jumbotron.scss @@ -9,11 +9,11 @@ margin-bottom: 0; display: flex; align-items: center; - top: $mobile_header_height + $banner_height; + top: $mobile_header_height; @include desktop { height: 550px; - top: $desktop_header_height + $banner_height; + top: $desktop_header_height; } .jumbotron-content { From 6ea3eb14f94ed39517fcab7799bbc52fac58d43e Mon Sep 17 00:00:00 2001 From: Rita Iglesias Date: Thu, 3 Mar 2022 16:13:27 -0300 Subject: [PATCH 4/4] Testing in nav.html - removing space --- _sass/navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/navigation.scss b/_sass/navigation.scss index d73c3626ddd1..94ab7ef6debf 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -12,7 +12,7 @@ margin-right: auto; position: fixed; right: 0; - top: $banner_height; + top: 0; width: 100%; z-index: 9999;