@mixin clearfix

huntout · Apr 9, 2014 · 2fd6edd · 2fd6edd
1 parent 8923184
commit 2fd6edd
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 10 deletions.
diff --git a/app/_layouts/default.html b/app/_layouts/default.html
@@ -68,7 +68,7 @@
         <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
-    <header class="clearfix">
+    <header>
       <h1 class="logo" onclick="document.location.href='/';"><a href="/"><img src="/img/signature.png" alt="Huntout"></a></h1>
       <ul class="navigation">
         <li><a href="/archive/"{% if page.url contains "/archive/" %}class="active"{% endif %} title="Archive posts">Archive</a></li>

diff --git a/app/_layouts/post.html b/app/_layouts/post.html
@@ -21,8 +21,8 @@ <h1>{{ page.title }}</h1>
             <div class="next"><i class="fa fa-angle-right fa-3x"></i></div>
           </a>
           {% endif %}
-          <div class="clearfix">
-            <div class="curr">
+          <div class="curr">
+            <div class="link">
               <i class="fa fa-link"></i> <a href="{{ page.url | prepend: site.baseurl }}">{{ page.url | prepend: site.baseurl }}</a>
             </div>
             <ul class="tags-box">

diff --git a/app/_scss/_base.scss b/app/_scss/_base.scss
@@ -137,6 +137,7 @@ header {
   color: #ccc;
   padding-top: $padding-top;
   padding-bottom: $padding-bottom;
+  @include clearfix;
   .logo {
     display: block;
     float: left;

diff --git a/app/_scss/_mixins.scss b/app/_scss/_mixins.scss
@@ -40,3 +40,25 @@
        -o-transition: $var;
           transition: $var;
 }
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+@mixin clearfix {
+  &:before,
+  &:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+  }
+  &:after {
+      clear: both;
+  }
+}
diff --git a/app/_scss/_post.scss b/app/_scss/_post.scss
@@ -5,7 +5,8 @@
     @include ribbon($post-padding);
     margin-top: 2em;
     color: #777;
-    .curr {
+    .link {
+      padding-top: 1em;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;

diff --git a/app/_scss/_ribbon.scss b/app/_scss/_ribbon.scss
@@ -1,5 +1,6 @@
 @mixin ribbon($padding) {
-  $offset: $padding / 10;
+  $offset: $padding / 8;
+  $height: 2em;
   $color: $bg-color;
   $darken: darken($color, 15%);
   position: relative;
@@ -11,26 +12,27 @@
     right: -$offset;
     left: -$offset;
     width: 100%;
-    padding: $offset ($padding + $offset) 0;
+    padding: 0 ($padding + $offset);
     background: $color;
     @include box-shadow(0 1px 4px black(.27), 0 0 40px black(.06) inset);
+    @include clearfix;
     .prev,
     .next {
       float: left;
-      margin: (-$offset) 0 (-$offset) (-$padding - $offset);
+      margin: 0 0 0 (-$padding - $offset);
       padding: 0 ($padding / 2 - $offset * 2);
       color: $darken;
       &:hover {
         color: $color;
         background-color: $darken;
       }
       .fa {
-        line-height: 1.8;
+        line-height: $height;
       }
     }
     .next {
       float: right;
-      margin: (-$offset) (-$padding - $offset) (-$offset) 0;
+      margin: 0 (-$padding - $offset) 0 0;
     }
   }
   .triangle-l,

diff --git a/app/_scss/_tags.scss b/app/_scss/_tags.scss
@@ -9,7 +9,9 @@
 }
 .tags-box {
   line-height: 1.5em;
+  margin-bottom: 0;
   list-style: none;
+  @include clearfix;
   > li {
     float: left;
     margin: 0 .8em .8em 0 !important;

diff --git a/app/tags/index.html b/app/tags/index.html
@@ -15,7 +15,7 @@
 
 <div class="tags-page">
 
-  <ul class="tags-box clearfix">
+  <ul class="tags-box">
     {% for item in (0..site.tags.size) %}{% unless forloop.last %}
     {% capture this_word %}{{ tag_words[item] | strip_newlines }}{% endcapture %}
     <li><a href="#{{ this_word | cgi_escape }}">{{ this_word }} <sup>{{ site.tags[this_word].size }}</sup></a>