1 files changed, 113 insertions, 0 deletions
diff --git a/pages/assets/_mixins.scss b/pages/assets/_mixins.scss
new file mode 100644
index 0000000..62c10e3
--- /dev/null
+++ b/pages/assets/_mixins.scss
@@ -0,0 +1,113 @@
+//
+// An UL,LI menu that looks like a cutout and is positioned at the bottom
+// of the enclosing block.
+//
+// This mixin is applied to the enclosing block.
+//
+// the markup should look like this:
+//
+// enclosing-block
+//   ul#id
+//     li.tab
+//       a.tab
+//     li.tab
+//       a.tab
+//
+// the id for the ul is passed in as the first argument.
+//
+// it is difficult to create cutout tabs with a border that look good
+// in all browsers and at different client font-sizes.
+//
+// the problem is that the tab element needs to line up exactly with the
+// bottom of the enclosing block in order to make the cutout illusion work.
+// most methods of doing this create weird jitters in webkit
+// and gecko when resizing the screen or changing the font size. it does not
+// look so good to have a dark line under your tab, breaking the illusion of
+// a cutout.
+//
+// the method which makes this jitter-free is to use a height and a line-height
+// for the <a> tag instead of vertical padding. This requires that <a> is a block
+// which requires that the <li> is block & floated, instead of inline.
+//
+// This method seems to produce by far the most consistant results of letting
+// the active tab sit snugly on the bottom of the enclosing div.
+//
+// Change with caution: I spent way too much time getting this to work.
+//
+
+@mixin cutout-menu(
+  $ul-id,
+  $active-bg: white,
+  $left-indent: 10px,
+  $padding: 7px 14px,
+  $text-size: 14px,
+  $small-left-indent: 10px,
+  $small-padding: 5px 10px,
+  $small-text-size: 12px,
+  $small-screen: $small-sm-max) {
+
+  $border: false;
+
+  // allows us to put the menu at the bottom
+  position: relative;
+
+  ul##{$ul-id} {
+    margin: 0;
+    padding: 0;
+
+    // allows us to put the menu at the bottom
+    position: absolute;
+
+    // puts the menu at the bottom of the enclosing block,
+    // minus the overhand needed to cover the border:
+    // bottom: -(border_width($border));
+    bottom: -1px;
+
+    // padding-left: don't do it.
+    // ^^ In some cases, we need width of 100% to actually be the screen width,
+    // but adding padding makes 100% width be wider than the screen.
+    // So, instead, we add margin to the first and last li.
+
+    white-space: nowrap;
+
+    li.tab {
+      display: block;
+      float: left;
+      &.first {
+        margin-left: $left-indent;
+        @media (max-width: $small-screen) {
+          margin-left: $small-left-indent;
+        }
+      }
+      a.tab {
+        display: block;
+        padding: $padding;
+        @media (max-width: $small-screen) {
+          padding: $small-padding;
+        }
+
+        // line-height makes for much more consistant rendering than using vertical
+        // padding. essential to prevent tabs from looking horrible at different fonts sizes.
+        font-size: $text-size;
+        line-height: $text-size;
+        @media (max-width: $small-screen) {
+          font-size: $small-text-size;
+          line-height: $small-text-size;
+        }
+
+        // the transparent border is needed to prevent the menu from jittering
+        // when the active border is applied.
+        border: 1px solid transparent;
+        border-bottom: 0;
+
+        &.active {
+          background-color: $active-bg;
+          @if $border {
+            border: $border;
+            border-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}