Fix float of footer relative to page on very short pages. Tweaked col…

… width for iPad (widened left sidebar)
hadynz · Jul 6, 2014 · ae0ea23 · ae0ea23
1 parent 2178059
commit ae0ea23
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 32 deletions.
diff --git a/_includes/header/_navigation.html b/_includes/header/_navigation.html
@@ -1,7 +1,7 @@
 <div class="navbar navbar-defaultstyle" role="navigation">
     <div class="row">
 
-        <div class="navbar-header col-sm-3">
+        <div class="navbar-header col-sm-4 col-md-3">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
@@ -25,7 +25,7 @@
             </a>
         </div>
 
-        <div class="navbar-collapse collapse col-sm-9">
+        <div class="navbar-collapse collapse col-sm-8 col-md-9">
             <ul class="nav navbar-nav">
             {% for link in site.data.navigation %}
                 {% if link.external %}

diff --git a/_includes/header/header.html b/_includes/header/header.html
@@ -22,7 +22,7 @@
         <!-- Optional Cover photo for page -->
         {% if page.large_header or page.image %}
         <div class="masthead--title row" style="{{ page.image.title_style }}">
-            <div class="inner col-sm-9 col-sm-offset-3">
+            <div class="inner col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3">
                 {% include post/_title.html %}
             </div>
         </div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -14,7 +14,7 @@
         {% endif %}
 
         <!-- Main page content -->
-        <div class="blog-content col-sm-9 col-sm-push-3 col-md-8 col-md-push-3 col-lg-7 col-lg-push-3">
+        <div class="blog-content col-sm-8 col-sm-push-4 col-md-8 col-md-push-3 col-lg-7 col-lg-push-3">
             <div class="blog-content--inner">
 
                 {% if hasLargeHeader == false %}
@@ -25,26 +25,28 @@
 
                 {{ content }}
             </div>
+            {% if site.widget.disqus.short_name and page.comments %}
+            <div class="hidden-xs">
+                <div id="disqus_thread" class="blog-content--comments"></div>
+            </div>
+            {% endif %}
         </div>
 
         <!-- Personal Biography -->
-        {% if page.biography != false %}
-        <div class="biography-wrapper col-sm-3 col-sm-pull-9 col-md-3 col-md-pull-8 col-lg-3 col-lg-pull-7">
-            {% include biography.html hasLargeHeader=hasLargeHeader %}
-        </div>
-        {% endif %}
 
-    </div>
+        <aside class="left-sidebar">
+            {% if page.biography != false %}
+            <div class="biography-wrapper col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-8 col-lg-3 col-lg-pull-7">
+                {% include biography.html hasLargeHeader=hasLargeHeader %}
+            </div>
+            {% endif %}
+            {% include footer.html %}
+        </aside>
 
-    {% if site.widget.disqus.short_name and page.comments %}
-    <div class="row hidden-xs">
-        <div id="disqus_thread" class="blog-content--comments col-sm-9 col-sm-push-3 col-md-8 col-md-push-3 col-lg-7 col-lg-push-3"></div>
     </div>
-    {% endif %}
 
 </div>
 
-{% include footer.html %}
 {% include scripts/scripts.html %}
 
 </body>

diff --git a/assets/css/biography.css b/assets/css/biography.css
@@ -41,6 +41,7 @@
         margin: 20px 0;
     }
     .biography--avatar img {
+        max-width: 150px;
         border: 4px solid #FFF;
         position: relative;
         top: -4px;
@@ -53,9 +54,6 @@
     .biography-is-fixed {
         width: 210px;
     }
-    .biography--avatar img {
-        max-width: 150px;
-    }
 }
 
 /* Large devices (large desktops, 1200px and up) */

diff --git a/assets/css/blog.css b/assets/css/blog.css
@@ -1,4 +1,9 @@
 /* Main Content */
+.blog-content {
+    z-index: 1;
+    position: relative;
+}
+
 .blog-content--inner a:not(.btn, .title-link) {
     text-decoration: underline;
 }
@@ -107,9 +112,6 @@
 
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
-    .blog-content-wrapper {
-        margin-bottom: 25px;
-    }
     .blog-content--inner h2:before {
         position: absolute;
         left: -18px;
@@ -118,4 +120,4 @@
         position: absolute;
         left: -8px;
     }
-}
+}
diff --git a/assets/css/footer.css b/assets/css/footer.css
@@ -4,29 +4,37 @@ html {
 }
 
 .page-footer {
-    text-align: center;
-    padding: 15px 0;
     font-size: 11px;
     color: #999;
-    z-index: -1;
 }
 
 .page-footer p:last-child {
     margin-bottom: 0;
 }
 
-/* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+    .biography-wrapper {
+        margin-bottom: 86px; /* The exact height of the footer */
+    }
     .page-footer {
         text-align: left;
-        width: 100%;
-        padding: 0;
+        padding-bottom: 21px;
         position: absolute;
-        bottom: 40px;
+        bottom: 0;
     }
     .page-footer--inner {
         width: 215px;
-        position: relative;
-        z-index: 5;
+    }
+}
+
+/* Extra small devices (phones, less than 768px) */
+@media (max-width: 767px) {
+    .page-footer {
+        text-align: center;
+        padding: 15px 0;
+    }
+    .page-footer--inner p {
+        margin: 0;
     }
 }