fix(website): Misc responsive fixes #72

Author: LukyVj

docs/source/stylesheets/components/_containers.scss

@@ -75,7 +75,15 @@ section {
 
       .fl-left {
         width: 100%;
-        margin-top: $navigation-height;
+        margin-top: $navigation-height * 1.5;
+        max-width: 500px;
+        float: none;
+        margin-right: auto;
+        margin-left: auto;
+
+         body.index &{
+          margin-top: $navigation-height * 2;
+        }
       }
 
       .fl-right {
@@ -104,7 +112,7 @@ section {
 
 
     &.shrink {
-      min-height: 314px
+      min-height: 314px;
     }
 
     .fl-right svg {
@@ -139,6 +147,7 @@ section {
 
   .bloc-5 {
     margin-bottom: 40px;
+    position: relative;
 
     &:nth-child(1),
     &:nth-child(3) {
@@ -153,8 +162,30 @@ section {
     @include medium-mq {
       width: 100%;
       padding: 0 !important;
+
+      .bloc-3 {
+        position: relative;
+        height: 100%;
+
+        img {
+          width: 100%;
+          position: relative;
+          top: 30px;
+          left: -8px;
+        }
+      }
     }
 
+    @include tablet-mq-portrait {
+      .bloc-7 {
+        padding-right: 16px;
+      }
+      .bloc-3 img {
+        max-width: 50%;
+        top: 0;
+        left: 0
+      }
+    }
   }
 
   .bloc-3 {

docs/source/stylesheets/components/_documentation.scss

@@ -77,5 +77,13 @@
         margin-top: 40px;
       }
     }
+
+    .documentation .hero-section {
+      .fl-left {
+        max-width: 300px !important;
+        width: 300px !important;
+      }
+    }
   }
 }
+

docs/source/stylesheets/components/_footer.scss

@@ -103,7 +103,7 @@
     background: $black;
     position: absolute;
     bottom: 0;
-    height: $navigation-height;
+    min-height: $navigation-height;
     text-align: center;
 
     p {
@@ -167,7 +167,26 @@
     .action-footer {
       width: calc(16px + 100%);
       left: -16px;
+      padding-bottom: 16px;
+      text-align: center;
+
+      p {
+        font-size: 12px;
+        float: left;
+        width: 100%;
+        text-align: center;
+      }
 
+      .btn,
+      a:nth-child(2) {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+        margin: 0 auto;
+        margin-bottom: 8px;
+        float: none;
+        position: relative;
+        left: 8px;
+      }
     }
   }
 }

docs/source/stylesheets/components/_icons.scss

@@ -16,7 +16,7 @@
   }
 
   &-algolia-light {
-    background: url($icon-algolia-light)no-repeat center center / contain
+    background: url($icon-algolia-light)no-repeat center bottom / contain;
   }
 
   &-mail {

docs/source/stylesheets/components/_navigation.scss

@@ -12,6 +12,11 @@
 
   .brand {
     float: left;
+
+    // Fix cross-rendering issues
+    .icon.icon-algolia-light{
+      background-position: center bottom;
+    }
   }
 
   a {
@@ -20,11 +25,6 @@
     padding-bottom: 8px;
   }
 
-  // .menu .icon {
-  //   width: 30px;
-  //   height: $navigation-height;
-  //   display: inline-block;
-  // }
   .menu svg {
     width: 28px;
     height: 60px;

docs/source/stylesheets/components/_sidebar.scss

@@ -57,13 +57,6 @@ nav.sidebar {
     top: -16px;
     border: none;
 
-
-    &.fixed {
-      background: $brand-primary;
-      color: #fff;
-      top: $navigation-height;
-    }
-
     ul {
       width: 100%;
       padding: 0 16px;
@@ -76,12 +69,35 @@ nav.sidebar {
         height: 40px;
         line-height: 40px;
         margin-right: 8px;
+        display: none;
+
 
         a {
           text-align: center;
           color: #fff;
+
+          &:focus,
+          &:target {
+            font-weight: bold;
+            box-shadow: none;
+          }
+        }
+
+        &.active a {
+          font-weight: bold;
+          box-shadow: none;
         }
       }
     }
+
+    &.fixed {
+      background: $brand-primary;
+      color: #fff;
+      top: $navigation-height;
+
+      ul li {
+        display: inline-block;
+      }
+    }
   }
 }

docs/source/stylesheets/vendors/_mixins.scss

@@ -1,3 +1,4 @@
+// Mixins
 @mixin placeholder {
   $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
   @each $placeholder in $placeholders {
@@ -18,11 +19,8 @@
   float: none;
 }
 
-%active-links {
-  color: $red-pink;
-  box-shadow: inset -2px 0 0 0 $red-pink
-}
 
+// Responsive Breakpoints
 @mixin big-min-mq {
   @media (min-width: $bp-big){
     @content
@@ -49,3 +47,34 @@
     @content
   }
 }
+@mixin tablet-mq-portrait {
+ @media only screen
+  and (min-device-width : 768px)
+  and (max-device-width : 1024px)
+  and (orientation : portrait) {
+    @content
+  }
+}
+@mixin tablet-mq-landscape {
+ @media only screen
+  and (min-device-width : 768px)
+  and (max-device-width : 1024px)
+  and (orientation : landscape) {
+    @content
+  }
+}
+
+// Placeholders
+
+%active-links {
+  color: $red-pink;
+  box-shadow: inset -2px 0 0 0 $red-pink;
+
+  @include small-mq {
+    font-weight: bold;
+    box-shadow: none;
+    color: #fff;
+    border-bottom: 2px solid $red-pink;
+
+  }
+}