diff --git a/src/index.ts b/src/index.ts index 345c2d0..6fe634d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,3 @@ -import './js/components/header-show-hide'; import './js/components/popups-show-hide'; import './js/components/learn-more-scroll'; import './js/components/demo'; diff --git a/src/modules/blocks/header.scss b/src/modules/blocks/header.scss index 6c0dd85..4c534fb 100644 --- a/src/modules/blocks/header.scss +++ b/src/modules/blocks/header.scss @@ -1,27 +1,25 @@ $className: 'header'; .#{$className} { - display: none; //prevents flickering while loading + height: 60px; justify-content: center; - position: fixed; + position: sticky; top: 0; left: 0; width: 100%; z-index: 10; - transform: translateY(-100px); - opacity: 0; transition: all 0.3s; + background: $backgroundPrimaryColor; + border-bottom: 1px solid $borderPrimaryColor; - &_shown { - // show header - transform: translateY(0); - opacity: 1; + @include mediaMax($mobile) { + position: fixed; } &__content { flex-grow: 1; max-width: 1920px; - padding: 24px 64px 0; + padding: 12px 64px; min-height: 40px; display: flex; align-items: center; @@ -32,8 +30,42 @@ $className: 'header'; } } - &__logo { + &__left { + display: flex; + flex-direction: row; + align-items: center; + } + + &__links { + margin-left: 64px; + + @include mediaMax($tablet) { + margin-left: 24px; + } + + @include mediaMax($mobile) { + margin-left: 12px; + } + } + + &__link { color: $accentPrimaryColor; + font-weight: 500; + text-decoration: none; + transition: opacity $opacityPrimaryTransition; + + &:hover { + opacity: 0.8; + text-decoration: underline; + } + + &:not(:first-child) { + margin-left: 24px; + } + } + + &__logo { + color: $fontPrimaryColor; font-weight: 700; font-size: 20px; line-height: 1.6; diff --git a/src/modules/blocks/main-slide.scss b/src/modules/blocks/main-slide.scss index 4ef6768..48b26ff 100644 --- a/src/modules/blocks/main-slide.scss +++ b/src/modules/blocks/main-slide.scss @@ -23,6 +23,7 @@ $className: 'main-slide'; } &__left-content { + margin-top: -60px; box-sizing: border-box; width: 100%; max-width: 960px; @@ -34,6 +35,7 @@ $className: 'main-slide'; @include mediaMax($tablet) { max-width: 100%; + margin-top: -12px; padding-top: 43px; border-left: none; } @@ -48,7 +50,7 @@ $className: 'main-slide'; width: 100%; max-width: 960px; height: 100%; - padding: 120px 64px 30px; + padding: 60px 64px 30px; @include mediaMax($tablet) { background-color: $backgroundPrimaryColor; diff --git a/src/modules/common.scss b/src/modules/common.scss index 0b6cf27..434987b 100644 --- a/src/modules/common.scss +++ b/src/modules/common.scss @@ -18,6 +18,12 @@ } } +.no-mobile { + @include mediaMax($mobile) { + display: none; + } +} + .desktop-only { @include mediaMax($tablet) { display: none; diff --git a/src/partials/header.hbs b/src/partials/header.hbs index 86fab95..b87d38f 100644 --- a/src/partials/header.hbs +++ b/src/partials/header.hbs @@ -1,6 +1,13 @@
diff --git a/src/partials/slides/main-slide.hbs b/src/partials/slides/main-slide.hbs index 8f76b18..e75949e 100644 --- a/src/partials/slides/main-slide.hbs +++ b/src/partials/slides/main-slide.hbs @@ -4,20 +4,12 @@ {{inline 'images/logo.svg'}}
- - {{inline 'images/github-logo.svg'}} -

AnyCable

Realtime server for reliable two-way communication.

-

+

Comes in different flavors: open source, managed, on-premise Pro.

diff --git a/src/partials/slides/plans-slide.hbs b/src/partials/slides/plans-slide.hbs index 37bca2a..38d59a1 100644 --- a/src/partials/slides/plans-slide.hbs +++ b/src/partials/slides/plans-slide.hbs @@ -1,6 +1,6 @@

-

Pricing

+

Pricing

Choose option