working on responsive css

10 files changed, 34 insertions, 82 deletions

diff --git a/assets/scss/components/_content.scss b/assets/scss/components/_content.scss
index c8e8581..c20cf24 100644
--- a/assets/scss/components/_content.scss
+++ b/assets/scss/components/_content.scss
@@ -1,5 +1,3 @@
-$paragraph-color: $black;
-
 .content {
   -webkit-font-smoothing: antialiased;
   pre {
@@ -67,14 +65,11 @@ $paragraph-color: $black;
   }
   h2 {
     font-size: 2.2rem;
-    line-height: 1.6;
+    line-height: 1.4;
     font-weight: 300;
     letter-spacing: -0.01em;
     font-family: $font-family-base;
     margin-bottom: 20px;
-    @include media-breakpoint-up(md) {
-      line-height: 1.4;
-    }
   }
   h3 {
     font-size: 1.34rem;
diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss
index 99ba757..6cd901c 100644
--- a/assets/scss/components/_footer.scss
+++ b/assets/scss/components/_footer.scss
@@ -1,5 +1,5 @@
 .footer {
-  background: $secondary;
+  background: #eaeaea;
   padding-top: 20px;
   padding-bottom: 20px;
   .footer-inner {
@@ -24,7 +24,7 @@
       flex: 0 0 120px;
     }
   }
-  ul {
+  ul.footer-menu {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -32,14 +32,14 @@
     li {
       display: block;
       margin-right: 10px;
-      color: lighten($secondary, 50%);
+      color: #333;
       font-size: 0.9rem;
       line-height: 1.8;
       &:last-of-type {
         margin-right: 0;
       }
       a {
-        color: lighten($secondary, 50%);
+        color: #333;
         text-decoration: none;
         &:hover {
           text-decoration: underline;
@@ -47,7 +47,7 @@
       }
       &.copyright {
         font-weight: bold;
-        color: lighten($secondary, 50%);
+        color: #333;
         display: none;
         @include media-breakpoint-up(md) {
           display: inline-block;
diff --git a/assets/scss/components/_logo.scss b/assets/scss/components/_logo.scss
index 777fa99..50ed25b 100644
--- a/assets/scss/components/_logo.scss
+++ b/assets/scss/components/_logo.scss
@@ -16,8 +16,7 @@
 }
 .logo-mobile {
   display: block;
-  width: 40px;
-  padding: 10px 0 10px 0;
+  width: 54px;
   @include media-breakpoint-up(sm) {
     display: none;
   }
diff --git a/assets/scss/components/_main-menu-mobile.scss b/assets/scss/components/_main-menu-mobile.scss
index b3cd6e2..0826118 100644
--- a/assets/scss/components/_main-menu-mobile.scss
+++ b/assets/scss/components/_main-menu-mobile.scss
@@ -1,56 +1,6 @@
-$color-main: $primary;
-$color-active: #ffffff;
-$color-link: #ffffff;
-
-$button-height: 27px;
-$button-width: 35px;
-// .button_container {
-//   position: fixed;
-//   top: 5%;
-//   right: 2%;
-//   height: $button-height;
-//   width: $button-width;
-//   cursor: pointer;
-//   z-index: 1000;
-//   transition: opacity 0.25s ease;
-//   &:hover {
-//     opacity: 0.7;
-//   }
-//   &.active {
-//     .top {
-//       transform: translateY(11px) translateX(0) rotate(45deg);
-//       background: $color-active;
-//     }
-//     .middle {
-//       opacity: 0;
-//       background: $color-active;
-//     }
-//     .bottom {
-//       transform: translateY(-11px) translateX(0) rotate(-45deg);
-//       background: $color-active;
-//     }
-//   }
-//   span {
-//     background: $color-main;
-//     border: none;
-//     height: 5px;
-//     width: 100%;
-//     position: absolute;
-//     top: 0;
-//     left: 0;
-//     transition: all 0.35s ease;
-//     cursor: pointer;
-//     &:nth-of-type(2) {
-//       top: 11px;
-//     }
-//     &:nth-of-type(3) {
-//       top: 22px;
-//     }
-//   }
-// }
 .main-menu-mobile {
   position: fixed;
-  background: $color-main;
+  background: $primary;
   top: 0;
   left: 0;
   width: 100%;
@@ -90,7 +40,7 @@ $button-width: 35px;
   }
   ul {
     font-size: 2rem;
-    font-family: $font-family-serif;
+    font-family: $font-family-base;
     text-align: center;
     list-style: none;
     padding: 0;
@@ -103,9 +53,10 @@ $button-width: 35px;
       a {
         display: block;
         position: relative;
-        color: $color-link;
+        color: #ffffff;
         text-decoration: none;
         overflow: hidden;
+        font-weight: lighter;
         &:hover::after,
         &:focus::after,
         &:active::after {
@@ -119,7 +70,7 @@ $button-width: 35px;
           width: 0%;
           transform: translateX(-50%);
           height: 3px;
-          background: $color-link;
+          background: #ffffff;
           transition: 0.35s;
         }
       }
diff --git a/assets/scss/components/_sub-footer.scss b/assets/scss/components/_sub-footer.scss
index a0a5398..986e7dd 100644
--- a/assets/scss/components/_sub-footer.scss
+++ b/assets/scss/components/_sub-footer.scss
@@ -1,5 +1,5 @@
 .sub-footer {
-  background: darken($secondary, 10%);
+  background: #f4f5fb;
   padding-top: 20px;
   padding-bottom: 20px;
   @include media-breakpoint-up(md) {
@@ -9,7 +9,7 @@
   .sub-footer-inner {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-end;
     @include media-breakpoint-up(md) {
       flex-direction: row;
     }
@@ -20,15 +20,16 @@
       li {
         list-style: none;
         display: block;
-        color: lighten($secondary, 40%);
+        color: #333;
         font-size: 0.9rem;
         line-height: 1.8;
+        font-weight: bold;
         strong {
           font-weight: bold;
           color: #ffffff;
         }
         a {
-          color: lighten($secondary, 40%);
+          color: #333;
           text-decoration: none;
           &:hover {
             text-decoration: underline;
@@ -43,7 +44,7 @@
         }
         &.zerostatic {
           a {
-            color: #ffffff;
+            color: #333;
           }
         }
       }
diff --git a/assets/scss/components/_summary.scss b/assets/scss/components/_summary.scss
deleted file mode 100644
index 88de2a3..0000000
--- a/assets/scss/components/_summary.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.summary {
-}
diff --git a/assets/scss/components/_title.scss b/assets/scss/components/_title.scss
index 0a522b7..07e0016 100644
--- a/assets/scss/components/_title.scss
+++ b/assets/scss/components/_title.scss
@@ -1,15 +1,15 @@
 .title {
-  font-size: 2.4rem;
-  line-height: 1.2;
+  font-size: 2.7rem;
+  line-height: 1.1;
   font-family: $font-family-base;
   letter-spacing: -0.2px;
   font-weight: 100;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   @include media-breakpoint-up(md) {
     font-size: 3rem;
+    margin-bottom: 30px;
   }
 }
-
 .title-summary {
   font-size: 1.6rem;
   line-height: 1.4;
diff --git a/assets/scss/components/_type.scss b/assets/scss/components/_type.scss
deleted file mode 100644
index e69de29..0000000
--- a/assets/scss/components/_type.scss
+++ /dev/null
diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss
index eebc576..a828a68 100644
--- a/assets/scss/pages/_home.scss
+++ b/assets/scss/pages/_home.scss
@@ -5,18 +5,21 @@
     font-family: $font-family-base;
   }
   p {
-    width: 60%;
     margin: 0 auto;
     font-size: 1.2rem;
     font-weight: lighter;
     margin-bottom: 40px;
+    @include media-breakpoint-up(md) {
+      width: 80%;
+    }
+    @include media-breakpoint-up(lg) {
+      width: 60%;
+    }
   }
   .terminal {
-    background: #eaeaea;
+    @include whitebox();
     border-radius: 3px;
-    width: 80%;
     margin: 0 auto;
-    @include whitebox();
     margin-top: -200px;
     img {
       width: 100%;
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index b2ed725..c9fe76f 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -64,6 +64,7 @@
 // Pages
 @import 'pages/home';
 
+// Global
 body {
   font-family: $font-family-base;
   font-size: 1rem;
@@ -71,6 +72,10 @@ body {
   line-height: 1.4;
   color: $black;
 }
+.container {
+  padding-left: $grid-gutter-width;
+  padding-right: $grid-gutter-width;
+}
 
 // Display breakpoints for DEV
 // body:after {