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 @@