Merge branch 'header'

mohammadhprp · Aug 17, 2021 · e6acc7f · e6acc7f
2 parents d0fa2bf + ddce65e
commit e6acc7f
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 10 deletions.
diff --git a/app/assets/styles/modules/_large-hero.css b/app/assets/styles/modules/_large-hero.css
@@ -7,6 +7,7 @@
   }
 
   &__text-content {
+    padding-top: 60px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

diff --git a/app/assets/styles/modules/_primary-nav.css b/app/assets/styles/modules/_primary-nav.css
@@ -0,0 +1,24 @@
+.primary-nav {
+
+  &--pull-right {
+    float: right;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    @mixin clearfix;
+  }
+  li {
+    list-style: none;
+    float: left;
+    padding-right: 20px;
+  }
+
+  a {
+    color: #FFF;
+    font-weight: 300;
+    text-decoration: none;
+    display: block;
+    padding: 12px 0;
+  }
+}
diff --git a/app/assets/styles/modules/_site-header.css b/app/assets/styles/modules/_site-header.css
@@ -0,0 +1,49 @@
+.site-header {
+  padding: 10px 0;
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+
+  @mixin atMedium {
+    background-color: rgba($mainBlue, 0.3);
+  }
+
+  &__btn-container {
+    float: right;
+  }
+  &__logo {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: $mainBlue;
+    padding: 13px 29px;
+
+    @mixin atMedium {
+      left: auto;
+      transform: translateX(0);
+      padding: 25px 36px;
+    }
+  }
+
+  &__menu-icon {
+    width: 20px;
+    height: 20px;
+    background-color: #FFF;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    @mixin atMedium {
+      display: none;
+    }
+  }
+
+  &__menu-content {
+    display: none;
+
+    @mixin atMedium {
+      display: block;
+    }
+  }
+}
diff --git a/app/assets/styles/styles.css b/app/assets/styles/styles.css
@@ -13,3 +13,5 @@
 @import "modules/_feature-item";
 @import "modules/_testimonial";
 @import "modules/_site-footer";
+@import "modules/_site-header";
+@import "modules/_primary-nav";
diff --git a/app/index.html b/app/index.html
@@ -8,16 +8,25 @@
   <meta name="description" content="Your clarify. One trip away. We create soul restoring journeys that inspire you to be you.">
 </head>
 <body>
-  <header>
-    <img src="assets/images/icons/clear-view-escapes.svg">
-    <a href="#" class="btn">Get in Touch</a>
-    <nav>
-      <ul>
-        <li><a href="#our-beginning">Our Beginning</a></li>
-        <li><a href="#features">Features</a></li>
-        <li><a href="#testimonials">Testimonials</a></li>
-      </ul>
-    </nav>
+  <header class="site-header">
+    <div class="wrapper">
+      <div class="site-header__logo">
+        <img src="assets/images/icons/clear-view-escapes.svg">
+      </div>
+      <div class="site-header__menu-icon"></div>
+      <div class="site-header__menu-content">
+        <div class="site-header__btn-container">
+          <a href="#" class="btn">Get in Touch</a>
+        </div>
+          <nav class="primary-nav primary-nav--pull-right">
+            <ul>
+              <li><a href="#our-beginning">Our Beginning</a></li>
+              <li><a href="#features">Features</a></li>
+              <li><a href="#testimonials">Testimonials</a></li>
+            </ul>
+          </nav>
+      </div>
+    </div>
   </header>
 
   <div class="large-hero">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "devDependencies": {
     "autoprefixer": "^9.6.5",
     "css-loader": "^3.2.0",
+    "postcss-hexrgba": "^2.0.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-mixins": "^6.2.2",

diff --git a/webpack.config.js b/webpack.config.js
@@ -5,6 +5,7 @@ const postCSSPlugins = [
   require('postcss-mixins'),
   require('postcss-simple-vars'),
   require('postcss-nested'),
+  require('postcss-hexrgba'),
   require('autoprefixer')
 ]