v2.10.1

Removed floats from Header component

README.md

@@ -13,4 +13,5 @@ It's still a bit rough around the edges, some functionality might break, but it
 
 Just drop the `dist/fictoan.css` file into your project and you’re good to go.
 
-`Current version is 2.10.0`
+
+`Current version is 2.10.1`

index.html

@@ -33,7 +33,7 @@
                 <h1 class="text-hue"><strong>FICTOAN Framework<span class="text-white">*</span></strong></h1>
                 <p class="text-white text-small">*Fuck I Couldn’t Think Of A Name Framework</p>
                 <h3 class="text-thin text-grey-30">&mdash;</h3>
-                <h3 class="margin-bottom-tiny text-grey-30">v2.10.0</h3>
+                <h3 class="margin-bottom-tiny text-grey-30">v2.10.1</h3>
                 <p class="text-regular text-large"><a href="https://github.com/sujan-s/fictoan/archive/master.zip" target="_blank">Download</a> / <a href="https://github.com/sujan-s/fictoan" target="_blank">Github</a> / <a href="docs/docs.html">view docs</a></p>
             </div>
         </div>

scss/fictoan/base/_ff-layout.scss

@@ -7,7 +7,8 @@
     margin      : 0 0 2vmax 0;
 }
 
-//  Use 'box' class to have portions that add up to more than 100% width
+//  Use 'box' class to have portions that add up
+//  to more than 100% width
 .box .portion { margin-bottom: $measureFixed*2; }
 
 //  Basics for the portions
@@ -19,8 +20,8 @@
 
 //  Remove the padding for nested portions
 // .portion > .row {
-//     margin-left  : -$measureFixed*3;
-//     margin-right : -$measureFixed*3;
+    // margin-left  : -$measureFixed*3;
+    // margin-right : -$measureFixed*3;
 // }
 
 @media all and (max-width : 600px) {

scss/fictoan/components/_ff-header.scss

@@ -1,48 +1,31 @@
 .ff-header {
-    position : relative;
-    height   : 56px;
+    display         : flex;
+    position        : relative;
+    height          : 56px;
+    justify-content : space-between;
+    align-items     : center;
 }
 
 .ff-content-container .ff-header { margin : 0 -2vmax; }
 
-.ff-header.fixed-on-top {
-    position : fixed;
-    top      : 0;
-    width    : 100%;
-    z-index  : 5000;
-}
-
-.ff-header.fixed-on-bottom {
-    position : fixed;
-    bottom   : 0;
-    width    : 100%;
-    z-index  : 5000;
-}
-
-.ff-header.fixed-on-bottom.shadow-hard { box-shadow : 0  -4px  8px -2px rgba(0, 0, 0, 0.24); }
-.ff-header.fixed-on-bottom.shadow-soft { box-shadow : 0 -16px 32px -8px rgba(0, 0, 0, 0.32); }
-.ff-header.fixed-on-bottom.shadow-mild { box-shadow : 0  -2px  2px -2px rgba(0, 0, 0, 0.24); }
-
 #header-logo {
-    float : left;
-    width : 20%;
+    max-width    : 20%;
+    height       : 56px;
+    justify-self : flex-start;
 }
 
-#header-logo img { height : 56px; }
+#header-logo img {
+    width  : auto;
+    height : 100%;
+}
 
 .header-links {
-    display   : inline-block;
-    position  : relative;
-    float     : right;
-    top       : 50%;
-    transform : translateY(-50%);
+    position         : relative;
+    background-color : transparent;
 }
 
-.header-links { background-color : $headerLinkBG; }
-
 .header-links a:not(.ff-button) {
     color : $headerLinkColor;
-
     &:hover { color : $headerLinkHoverColor; }
 }
 
@@ -70,16 +53,15 @@
         padding : 16px;
     }
 
-    #menu-toggle:checked + .header-links { display : block; }
-
     .header-links {
-        display    : none;
-        position   : absolute;
-        left       : 0;
-        right      : 0;
-        top        : 56px;
-        transform  : translateY(0);
-        box-shadow : 0 4px 8px rgba(10, 10, 10, 0.1);
+        display          : none;
+        position         : absolute;
+        left             : 0;
+        right            : 0;
+        top              : 56px;
+        transform        : translateY(0);
+        background-color : $headerLinkBG;
+        box-shadow       : 0 4px 8px rgba(10, 10, 10, 0.1);
 
         .nav-item { border-top : $navItemBorderColor; }
 
@@ -95,6 +77,8 @@
         }
     }
 
+    #menu-toggle:checked + .header-links { display : block; }
+
     .header-links .nav-item {
         width   : 100%;
         display : block;