diff --git a/_includes/footer_scripts.html b/_includes/footer_scripts.html index e494d4b1f4ab..742669b60ccd 100644 --- a/_includes/footer_scripts.html +++ b/_includes/footer_scripts.html @@ -24,8 +24,8 @@ var top = $(this).scrollTop(); var fullPosition = $(".main-background").height() - $(".header-holder").height(); - if (top === 0) { - $(".header-holder").css({"backgroundColor": "transparent"}); + if (top <= 40) { + $(".header-holder").css({"backgroundColor": "rgba(0, 0, 0, 0.165)"}); } else if (top >= fullPosition) { $(".header-holder").css({"backgroundColor": "#000000"}); } else { diff --git a/_includes/main_menu.html b/_includes/main_menu.html index cbd9f7934114..d5bcfd16d658 100644 --- a/_includes/main_menu.html +++ b/_includes/main_menu.html @@ -4,22 +4,12 @@ Get Started -
  • +
  • -
    - +
    • @@ -39,10 +29,12 @@ Docs -
  • + {% assign resources = "resources, features, hub" | split: ", " %} + +
  • -
    - +
    • diff --git a/_includes/mobile_menu.html b/_includes/mobile_menu.html index 1ef931ab669b..32f67f6d3ced 100644 --- a/_includes/mobile_menu.html +++ b/_includes/mobile_menu.html @@ -27,10 +27,6 @@ Get Started -
  • - Features -
    • -
  • Ecosystem
    • @@ -39,10 +35,6 @@ Mobile -
  • - PyTorch Hub -
    • -
  • Blog
    • @@ -55,10 +47,32 @@ Docs -
  • - Resources +
  • + Resources
    • + + diff --git a/_sass/homepage.scss b/_sass/homepage.scss index 35c96c3311d2..6144b2746071 100644 --- a/_sass/homepage.scss +++ b/_sass/homepage.scss @@ -53,6 +53,10 @@ background-color: $light_grey; } } + + .homepage-header { + background-color: rgba(0, 0, 0, 0.165); + } } .homepage-feature-module { @@ -368,7 +372,7 @@ &:hover { color: $orange; } - } + } } .no-banner { diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 61eb26cf33bf..579ebf18cc45 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -109,6 +109,10 @@ a { color: $orange; } + + .with-down-arrow { + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); + } } &:last-of-type { @@ -118,7 +122,7 @@ ul li a { color: $white; - font-size: rem(18px); + font-size: 1.3rem; letter-spacing: 0; line-height: rem(34px); text-align: center; @@ -164,7 +168,7 @@ padding: 0; } - ul li a { + ul li a, .resources-mobile-menu-title { font-size: rem(32px); color: $white; letter-spacing: 0; @@ -199,14 +203,14 @@ height: 100%; min-height: 100%; margin-top: -$mobile_header_height; - padding-top: 25%; + padding-top: 50%; + overflow-y: scroll; @media only screen and (max-width: 320px) { - padding-top: 50%; - overflow-y: scroll; + padding-top: 75%; } @include small-desktop { - padding-top: 0; + padding-top: 25%; } .navSearchWrapper { @@ -237,11 +241,56 @@ } } +.resources, .features, .hub { + .main-menu ul li{ + &.active { + &:after { + display: none; + } + } + } +} + .main-menu ul li { .ecosystem-dropdown, .resources-dropdown a { cursor: pointer; } + .ecosystem-dropdown, .resources-dropdown { + .with-down-orange-arrow { + padding-right: rem(32px); + position: relative; + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); + background-size: 14px 18px; + background-position: top 7px right 10px; + background-repeat: no-repeat; + } + + .with-down-white-arrow { + padding-right: rem(32px); + position: relative; + background-image: url($baseurl + "/assets/images/chevron-down-white.svg"); + background-size: 14px 18px; + background-position: top 7px right 10px; + background-repeat: no-repeat; + &:hover { + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); + } + } + + .with-down-arrow { + padding-right: rem(32px); + position: relative; + background-image: url($baseurl + "/assets/images/chevron-down-black.svg"); + background-size: 14px 18px; + background-position: top 7px right 10px; + background-repeat: no-repeat; + &:hover { + background-image: url($baseurl + "/assets/images/chevron-down-orange.svg"); + } + } + } + .dropdown-menu { border-radius: 0; padding: 0; @@ -279,13 +328,11 @@ width: 226px; display: none; position: absolute; - top: rem(50px); z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0; - margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; @@ -296,8 +343,10 @@ border-radius: 0.25rem; } -.ecosystem-dropdown-menu.show-menu, .resources-dropdown-menu.show-menu { - display: block; +.ecosystem-dropdown:hover, .resources-dropdown:hover { + .ecosystem-dropdown-menu, .resources-dropdown-menu { + display: block; + } } .main-menu ul li { @@ -347,3 +396,11 @@ background-color: $orange; color: white; } + +.mobile-main-menu-links-container { + ul.resources-mobile-menu-items { + li { + padding-left: 15px; + } + } +} diff --git a/_sass/search.scss b/_sass/search.scss index 87496739441f..b3a2a09b23e9 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -321,9 +321,9 @@ input::placeholder { color: transparent; width: 25px; height: 25px; - background-size: 12px 15px; + background-size: 14px 16px; background-repeat: no-repeat; - background-position: 7px 5px; + background-position: 6px 5px; border-radius: 25px; cursor: pointer; &:hover { diff --git a/assets/images/chevron-down-black.svg b/assets/images/chevron-down-black.svg new file mode 100644 index 000000000000..9fffa77268c3 --- /dev/null +++ b/assets/images/chevron-down-black.svg @@ -0,0 +1,17 @@ + + + + Created with Sketch. + + + + + + + + + + + + + diff --git a/assets/images/chevron-down-white.svg b/assets/images/chevron-down-white.svg new file mode 100644 index 000000000000..e7bd84de3a86 --- /dev/null +++ b/assets/images/chevron-down-white.svg @@ -0,0 +1,17 @@ + + + + Created with Sketch. + + + + + + + + + + + + + diff --git a/assets/main-menu-dropdown.js b/assets/main-menu-dropdown.js index 441456811c53..3da2d3220480 100644 --- a/assets/main-menu-dropdown.js +++ b/assets/main-menu-dropdown.js @@ -1,8 +1,4 @@ -$("[data-toggle='ecosystem-dropdown']").on("click", function() { - toggleDropdown($(this).attr("data-toggle")); -}); - -$("[data-toggle='resources-dropdown']").on("click", function() { +$("[data-toggle='resources-dropdown']").hover(function() { toggleDropdown($(this).attr("data-toggle")); }); diff --git a/index.html b/index.html index 8cfa6a316927..6d2cc8004773 100644 --- a/index.html +++ b/index.html @@ -98,7 +98,7 @@

    {{ item.title }}

    {% endfor %} -
    +

    Community