Responsive section for landing page

.gitignore

@@ -7,3 +7,5 @@ dist/mini-doc\.css
 docs/v3/index-splash-o1\.jpg
 
 docs/v3/index-splash-o2\.jpg
+
+docs/v3/responsive-original\.svg

docs/v3/DEVLOG.md

@@ -77,3 +77,9 @@
 - Made `$_include-parent-layout` a hidden variable in `grid`.
 - Added scaffolding code in `grid` module, just in case someone decides to use it without any other modules.
 - Oddly enough, a flavor file with the default values and clean code is `1.82KB` gzipped, compared to `1.83KB` gzipped in **Fermion**, which means the variables and changes didn't really mess up size so far. Some changes need to be made and some things added, so it's quite probable that this will not be the final number, but still I am very happy about the results so far.
+
+## 20171027
+
+- Changed a lot of the layout and choices made in the `index.html` page, mainly to create a better and more coherent landing page.
+- Designed and added `responsive.svg`.
+- Created the responsiveness and speed section.

docs/v3/index.html

@@ -25,16 +25,25 @@
     <p id="version-info">v3</p>
   </div>
   <!-- TODO: Add CTA ghost button and a link (?) in splash -->
-  <header>Home</header>
+  <header class="sticky row" style="box-sizing: content-box">
+    <div class="col-sm-12 col-md-10 col-md-offset-1">
+      <span style="bottom: 16px; position: absolute">Features</span>
+      <span style="bottom: 16px; position: absolute; padding-left: 120px;">Overview</span>
+      <span style="bottom: 16px; position: absolute; padding-left: 240px;">Get Started</span>
+      <span style="bottom: 16px; position: absolute; padding-left: 370px;">Documentation</span>
+      <span style="bottom: 16px; position: absolute; padding-left: 530px;">Github</span>
+    </div>
+  </header>
   <div class="container">
     <div class="row padded">
-      <div class="col-sm-12 col-md-8 col-md-offset-1">
-        <h2>Minimal&nbsp;<small>Size matters!</small></h2>
-        <p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 10KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p>
+      <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+        <img src="./responsive.svg" id="responsive-image">
+        <h2 style="text-align:center;" id="responsive-header">Fast and Responsive</h2><br><br>
+        <p>Want to build websites that look beautiful on any and all devices, but also load fast on mobile connections? Then <strong>mini.css</strong> is the right tool for you! Its tiny size (under 10KB gzipped), along with its responsive grid and modern components ensures that all your users are satisfied and can access your website anytime, anywhere. Bridging the gap between fully-featured frameworks (e.g. Bootstrap and Semantic UI) and micro frameworks (e.g. Milligram and Pure.CSS), <strong>mini.css</strong> packs a lot of features in a small package, while it relies solely on CSS, meaning you do not have to worry about any conflicts with other Javascript libraries you might be using.</p>
       </div>
-      <div class="col-sm-12 col-md-2 col-sm-first col-md-normal" style="text-align: center;">
+      <!-- <div class="col-sm-12 col-md-2 col-sm-first col-md-normal" style="text-align: center;">
         <img src="icons/wings.svg" width="128px" height="128px"/><br/><br/>
-      </div>
+      </div> -->
     </div>
     <div class="row padded">
       <div class="col-sm-12 col-md-8 col-md-offset-1">

src/flavors/mini-doc.scss

@@ -72,6 +72,23 @@ p.splash {
   font-weight: 500;
 }
 
+.row.padded {
+  padding-top: 20px;
+  padding-bottom: 80px;
+}
+
+#responsive-image {
+  display: block;
+  margin: 50px auto 20px;
+  @media screen and (min-width: 768px){
+    height: 400px;
+  }
+}
+
+#responsive-header {
+  margin-left: 0;
+}
+
 // TODO: Replace with actual header when ready
 header {
   display: block;
@@ -94,8 +111,3 @@ header {
     color: #111;
   }
 }
-
-.row.padded {
-  padding-top: 16px;
-  padding-bottom: 16px;
-}