working on responsive css

14 files changed, 92 insertions, 131 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 {
diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content b/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content
index 83c0bce..cf4fed2 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content
@@ -5331,7 +5331,7 @@ ol {
   position: static; }
 
 .footer {
-  background: #ffca28;
+  background: #eaeaea;
   padding-top: 20px;
   padding-bottom: 20px; }
   .footer .footer-inner {
@@ -5354,33 +5354,33 @@ ol {
       .footer .footer-title {
         margin: 0;
         flex: 0 0 120px; } }
-  .footer ul {
+  .footer ul.footer-menu {
     list-style: none;
     margin: 0;
     padding: 0;
     flex: 1; }
-    .footer ul li {
+    .footer ul.footer-menu li {
       display: block;
       margin-right: 10px;
-      color: white;
+      color: #333;
       font-size: 0.9rem;
       line-height: 1.8; }
-      .footer ul li:last-of-type {
+      .footer ul.footer-menu li:last-of-type {
         margin-right: 0; }
-      .footer ul li a {
-        color: white;
+      .footer ul.footer-menu li a {
+        color: #333;
         text-decoration: none; }
-        .footer ul li a:hover {
+        .footer ul.footer-menu li a:hover {
           text-decoration: underline; }
-      .footer ul li.copyright {
+      .footer ul.footer-menu li.copyright {
         font-weight: bold;
-        color: white;
+        color: #333;
         display: none; }
         @media (min-width: 768px) {
-          .footer ul li.copyright {
+          .footer ul.footer-menu li.copyright {
             display: inline-block; } }
     @media (min-width: 576px) {
-      .footer ul {
+      .footer ul.footer-menu {
         height: inherit;
         display: flex;
         list-style: none;
@@ -5388,16 +5388,16 @@ ol {
         padding: 0;
         align-items: center;
         justify-content: flex-end; }
-        .footer ul li {
+        .footer ul.footer-menu li {
           list-style: none; }
-          .footer ul li a {
+          .footer ul.footer-menu li a {
             display: inline-block;
             height: 40px;
             padding: 10px 8px 10px 8px;
             font-weight: 300; } }
 
 .sub-footer {
-  background: #f4b800;
+  background: #f4f5fb;
   padding-top: 20px;
   padding-bottom: 20px; }
   @media (min-width: 768px) {
@@ -5407,7 +5407,7 @@ ol {
   .sub-footer .sub-footer-inner {
     display: flex;
     flex-direction: column;
-    justify-content: space-between; }
+    justify-content: flex-end; }
     @media (min-width: 768px) {
       .sub-footer .sub-footer-inner {
         flex-direction: row; } }
@@ -5418,14 +5418,15 @@ ol {
       .sub-footer .sub-footer-inner ul li {
         list-style: none;
         display: block;
-        color: #fffcf4;
+        color: #333;
         font-size: 0.9rem;
-        line-height: 1.8; }
+        line-height: 1.8;
+        font-weight: bold; }
         .sub-footer .sub-footer-inner ul li strong {
           font-weight: bold;
           color: #ffffff; }
         .sub-footer .sub-footer-inner ul li a {
-          color: #fffcf4;
+          color: #333;
           text-decoration: none; }
           .sub-footer .sub-footer-inner ul li a:hover {
             text-decoration: underline; }
@@ -5436,7 +5437,7 @@ ol {
           font-weight: bold;
           color: #ffffff; }
         .sub-footer .sub-footer-inner ul li.zerostatic a {
-          color: #ffffff; }
+          color: #333; }
       @media (min-width: 576px) {
         .sub-footer .sub-footer-inner ul li {
           display: inline-block;
@@ -5460,8 +5461,7 @@ ol {
 
 .logo-mobile {
   display: block;
-  width: 40px;
-  padding: 10px 0 10px 0; }
+  width: 54px; }
   @media (min-width: 576px) {
     .logo-mobile {
       display: none; } }
@@ -5533,7 +5533,7 @@ ol {
         animation-delay: 0.6s; }
   .main-menu-mobile ul {
     font-size: 2rem;
-    font-family: "Lora", Arial, sans-serif, -apple-system;
+    font-family: "Roboto", Arial, sans-serif, -apple-system;
     text-align: center;
     list-style: none;
     padding: 0;
@@ -5548,7 +5548,8 @@ ol {
         position: relative;
         color: #ffffff;
         text-decoration: none;
-        overflow: hidden; }
+        overflow: hidden;
+        font-weight: lighter; }
         .main-menu-mobile ul li a:hover::after, .main-menu-mobile ul li a:focus::after, .main-menu-mobile ul li a:active::after {
           width: 100%; }
         .main-menu-mobile ul li a::after {
@@ -5639,15 +5640,16 @@ ol {
   border: 2px solid #fff; }
 
 .title {
-  font-size: 2.4rem;
-  line-height: 1.2;
+  font-size: 2.7rem;
+  line-height: 1.1;
   font-family: "Roboto", Arial, sans-serif, -apple-system;
   letter-spacing: -0.2px;
   font-weight: 100;
-  margin-bottom: 30px; }
+  margin-bottom: 20px; }
   @media (min-width: 768px) {
     .title {
-      font-size: 3rem; } }
+      font-size: 3rem;
+      margin-bottom: 30px; } }
 
 .title-summary {
   font-size: 1.6rem;
@@ -5718,14 +5720,11 @@ ol {
         font-weight: 300; } }
   .content h2 {
     font-size: 2.2rem;
-    line-height: 1.6;
+    line-height: 1.4;
     font-weight: 300;
     letter-spacing: -0.01em;
     font-family: "Roboto", Arial, sans-serif, -apple-system;
     margin-bottom: 20px; }
-    @media (min-width: 768px) {
-      .content h2 {
-        line-height: 1.4; } }
   .content h3 {
     font-size: 1.34rem;
     line-height: 1.6;
@@ -6074,21 +6073,24 @@ ol {
     font-weight: lighter;
     font-family: "Roboto", Arial, sans-serif, -apple-system; }
   .page-home p {
-    width: 60%;
     margin: 0 auto;
     font-size: 1.2rem;
     font-weight: lighter;
     margin-bottom: 40px; }
+    @media (min-width: 768px) {
+      .page-home p {
+        width: 80%; } }
+    @media (min-width: 992px) {
+      .page-home p {
+        width: 60%; } }
   .page-home .terminal {
-    background: #eaeaea;
-    border-radius: 3px;
-    width: 80%;
-    margin: 0 auto;
     border: 1px solid #dcdcdc;
     border-radius: 3px;
     box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
     background: #ffffff;
     padding: 10px;
+    border-radius: 3px;
+    margin: 0 auto;
     margin-top: -200px; }
     .page-home .terminal img {
       width: 100%;
@@ -6101,4 +6103,8 @@ body {
   line-height: 1.4;
   color: #212529; }
 
+.container {
+  padding-left: 20px;
+  padding-right: 20px; }
+
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1b11532..2553864 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -23,12 +23,12 @@
 
 <body class='page {{ block "body_classes" . }}{{ end }}'>
   {{ partial "main-menu-mobile.html" . }}
-  <div id="wrapper" class="wrapper">
+  <div class="wrapper">
     {{ partial "header.html" . }}
     {{ if eq .Section "docs" }}
-    <div class="container pt-3 pt-md-6">
+    <div class="container pt-2 pt-md-6 pb-3 pb-md-6">
       <div class="row">
-        <div class="col-12 col-md-3 mb-2">
+        <div class="col-12 col-md-3 mb-3">
           <div class="sidebar">
             {{ partial "docs-menu.html" . }}
           </div>
@@ -43,9 +43,9 @@
     {{ block "main" . }}
     {{ end }}
     {{ end}}
-
   </div>
 
+  {{ partial "sub-footer.html" . }}
 
   {{ $scripts := resources.Get "js/scripts.js" }}
 
diff --git a/layouts/index.html b/layouts/index.html
index e188328..f81e17b 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -28,9 +28,17 @@
       </div>
     </div>
   </div>
-  <div class="strip strip-grey pt-4 pb-4">
-    <div class="terminal">
-      <img src="{{ .Site.BaseURL }}images/terminal-white.gif" />
+</div>
+
+<div class="strip strip-grey d-none d-md-block">
+  <div class="container pt-8 pb-6">
+      <div class="row">
+        <div class="col-12">
+          <div class="terminal">
+            <img src="{{ .Site.BaseURL }}images/terminal-white.gif" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/layouts/partials/sub-footer.html b/layouts/partials/sub-footer.html
index caffd84..bc46f91 100644
--- a/layouts/partials/sub-footer.html
+++ b/layouts/partials/sub-footer.html
@@ -4,11 +4,6 @@
       <div class="col-12">
         <div class="sub-footer-inner">
           <ul>
-            <li><strong>Phone: </strong>{{ .Site.Data.contact.phone }}</li>
-            <li><strong>Email: </strong><a href="mailto:{{ .Site.Data.contact.email }}">
-                {{ .Site.Data.contact.email }}</a></li>
-          </ul>
-          <ul>
             <li class="zerostatic"><a href="https://www.zerostatic.io">www.zerostatic.io</a></li>
           </ul>
         </div>