refills 0.0.1

data/source/stylesheets/refills/_navigation.scss

@@ -0,0 +1,168 @@
+header.navigation {
+  $navigation-background: $dark-gray;
+  $navigation-color: white;
+  $navigation-height: 60px;
+  $navigation-nav-button-background: $navigation-background;
+  $navigation-nav-button-background-hover: lighten($navigation-background, 10);
+  $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
+
+  width: 100%;
+  margin: 0;
+  height: $navigation-height;
+  background-color: $navigation-background;
+  font-family: $sans-serif;
+  border-bottom: 1px solid $dark-gray;
+  z-index: 999;
+
+  .menu-wrapper {
+    @include outer-container;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .logo {
+    line-height: $navigation-height;
+    padding-right: 1.35em;
+    padding-left: 1em;
+    font-weight: bold;
+    float: left;    
+    color: white;
+    @include media($medium-screen) {
+      padding-left: 0;
+    }
+  }
+
+  p {
+    font-family: $sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    cursor: pointer;
+    padding-right: 1em;
+    display: block;
+    float: right;
+    margin: 0;
+    line-height: $navigation-height;
+    color: $navigation-color;
+  }
+
+  .nav {
+    ul {
+      display: none;
+      -webkit-transform-style: preserve-3d; // stop webkit flicker
+      overflow: hidden;
+      margin: 0 auto;
+      padding: 0;
+      width: 100%;
+
+      li {
+        position: relative;
+        overflow: hidden;
+        display: block;
+        width: 100%;
+        text-align: right;
+        padding-right: 1em;
+        line-height: $navigation-height;
+        width: 100%;
+        position: relative;
+        display: block;
+        z-index: 99999999;
+        overflow: hidden;
+        background-color: $navigation-background;
+
+        a {
+          text-transform: uppercase;
+          font-weight: bold;
+          color: white;
+        }
+      }
+    }
+  }
+
+  ul.nav-button {
+    display: none;
+    float: right;
+    background-color: $navigation-background;
+    padding: 0 1em 0 1em;
+    width: 100%;
+    list-style: none;
+
+    li {
+      float: right;
+      a {
+        display: inline;
+        line-height: $navigation-height;
+        font-family: $sans-serif;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: white;
+        padding: 1em 1.5em;
+        background-color: $navigation-nav-button-background;
+        border: $navigation-nav-button-border;
+        border-radius: $base-border-radius;
+        font-size: $base-font-size *.8;
+
+        @include transition(ease-in-out, .2s);
+
+        &:hover {
+          background-color: $navigation-nav-button-background-hover;
+        }
+      }
+    }
+    
+    li:first-child:before {
+      content: '';
+    }
+  }
+
+  @include media ($medium-screen) {
+    p {
+      display: none;
+    }
+    .nav {
+      float: left;
+
+      ul {
+        float: left;
+        display: inline;
+        margin: 0;
+        padding: 0;
+
+        li {
+          display: inline;
+          text-decoration: none;
+          line-height: $navigation-height;
+          padding-right: 2em;
+
+          a {
+            color: $navigation-color;
+            letter-spacing: 1px;
+            &:hover {
+              color: lighten($navigation-color, 15);
+            }
+          }
+        }
+      }
+    }
+
+    ul.nav-button {
+      float: right;
+      display: inline;
+      width: auto;
+      background-color: transparent;
+      
+      li {
+        display: inline;
+
+        &:before {
+          content: "•";
+          color: $navigation-color;
+          margin-right: .3em;
+        }
+      }
+
+      li:first-child:before {
+        content: '';
+      }
+    }
+  }
+}

data/source/stylesheets/refills/_overlap.scss

@@ -0,0 +1,42 @@
+@mixin texture($bg-color, $texture-number) { 
+  $texture-list: "line_diagonal1.png";
+  background: url("https://raw.github.com/Magnus-G/texture-mixin/gh-pages/textures/#{nth($texture-list, $texture-number)}");
+  background-color: $bg-color;
+  // see http://magnus-g.github.io/texture-mixin/ for info on how to use this texture mixin
+}
+
+$overlap-height: 20px;
+$overlap-border-color: $base-border-color;
+$overlap-border: 1px solid $overlap-border-color;
+$overlap-background: lighten($overlap-border-color, 10);
+
+.overlap {
+  @include outer-container;
+  margin-bottom: -$overlap-height;
+}
+
+.overlap-content {
+  margin: auto;
+  width: 100%;
+  z-index: 999;
+  max-width: 500px;
+
+  .overlap-content-centered {
+    position: relative;
+    width: 100%;
+    float: left;
+    background-color: $overlap-background;
+    border-top-left-radius: $base-border-radius;
+    border-top-right-radius: $base-border-radius;
+    border: $overlap-border;
+    height: 100px;
+  }
+}
+
+.overlapped {
+  background-color: $overlap-background;
+  height: $overlap-height;
+  border-bottom: $overlap-border;
+  @include texture($overlap-background, 1); 
+  // see http://magnus-g.github.io/texture-mixin/ for info on how to use this texture mixin
+}

data/source/stylesheets/refills/_progress-bar.scss

@@ -0,0 +1,83 @@
+.progress-bar {
+  $progress-border-color: $base-border-color;
+  $progress-border: 1px solid $progress-border-color;
+  $progress-meter-border-color: $base-accent-color;
+  $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
+  $progress-meter-color: $progress-meter-border-color;
+  $progress-background: darken($base-body-color, 5);
+  $progress-animation-duration: 0.7s;
+
+  background-color: $progress-background;
+  border: $progress-border;
+  box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15);
+  border-radius: $base-border-radius;
+  height: 20px;
+  margin: 0 auto;
+  padding: 2px;
+  width: 100%;
+
+  > span.meter {
+    @include animation(progress $progress-animation-duration linear infinite);
+    background-color: $progress-meter-color;
+    @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
+                                                      transparent 25%,
+                                                      transparent 50%,
+                                                      rgba(255,255,255, 0.15) 50%,
+                                                      rgba(255,255,255, 0.15) 75%,
+                                                      transparent 75%));
+    background-size: 40px 40px;
+    background-repeat: repeat-x;
+    border: $progress-meter-border;
+    border-radius: $base-border-radius /1.5;
+    @include box-sizing(border-box);
+    display: block;
+    height: 100%;
+    @include transition(all 0.2s linear);
+    width: 60%;
+  }
+}
+
+@-webkit-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@-moz-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@-ms-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@-o-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}

data/source/stylesheets/refills/_search-bar.scss

@@ -0,0 +1,43 @@
+.search-bar {
+  $search-bar-border-color: $base-border-color;
+  $search-bar-border: 1px solid $search-bar-border-color;
+  $search-bar-background: lighten($search-bar-border-color, 10);
+
+  @include clearfix;
+  border: $search-bar-border;
+  background-color: $search-bar-background;
+  border-radius: $base-border-radius;
+  padding: 0.5em;
+  margin-bottom: 1em;
+
+  .search-item {
+    @include fill-parent;
+    position: relative; 
+  }
+
+  input {
+    @include box-sizing(border-box);
+    display: block;
+  }
+
+  div.search-and-submit {
+    position: relative;
+
+    input[type=search] {
+      @include appearance(none);
+      width: 100%;
+      padding: 1em;
+      font-style: italic;
+      border-radius: $base-border-radius * 2;
+      margin: 0;
+    }
+
+    input[type=submit] {
+      @include button(simple, lighten($light-gray, 10));
+      @include position(absolute, 0.3em 0.3em 0.3em 0);
+      font-size: $base-font-size;
+      color: darken($light-gray, 20);
+      outline: none;
+    }
+  }
+}

data/source/stylesheets/refills/_sidebar-layout.scss

@@ -0,0 +1,56 @@
+$sidebar-layout-border-color: $base-border-color;
+$sidebar-layout-border: 1px solid $sidebar-layout-border-color;
+$sidebar-layout-section-background: lighten($sidebar-layout-border-color, 10);
+
+.sidebar-layout {
+	@include clearfix;
+	height: 100%;
+	border: $sidebar-layout-border;
+
+	aside {
+		height: 100%;
+		@include media($medium-screen) {
+			@include span-columns(3, block-collapse);
+		}
+		
+		ul {
+			height: 100%;
+			padding: 1em;
+			@include media($medium-screen) {
+				padding: 0;
+				border-right: $sidebar-layout-border;
+			}
+		}
+
+		li {
+			margin-right: 1em;
+			margin-bottom: 1em;
+			display: inline-block;
+			@include media($medium-screen) {
+				margin: 0;
+				padding: 1em;
+				display: block;
+				border-bottom: $sidebar-layout-border;
+			}
+		}
+	}
+
+	.content {
+		@include media($medium-screen) {
+			@include span-columns(9);	
+		}
+		background-color: $base-body-color;
+		padding: 1em;
+
+		section {
+			@include media($medium-screen) {
+				@include span-columns(6);	
+				@include omega(2n);
+			}
+			border: $sidebar-layout-border;
+			margin-bottom: 1em;
+			background-color: $sidebar-layout-section-background;
+			padding: 1em;
+		}	
+	}
+}

data/source/stylesheets/refills/_sliding-menu.scss

@@ -0,0 +1,58 @@
+$sliding-menu-border-color: $dark-gray;
+$sliding-menu-background: lighten($sliding-menu-border-color, 5);
+$sliding-menu-color: white;
+$sliding-menu-border: 1px solid $sliding-menu-border-color;
+$sliding-menu-background-hover: $base-accent-color;
+$sliding-menu-color-hover: white;
+
+.menu-anchor {
+  @include button(simple, lighten($light-gray, 10));
+  font-size: $base-font-size;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+}
+
+menu.sliding-menu-content {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+  width: 220px;
+  height: 100%;
+  background: $sliding-menu-background;
+  @include transform(translateX(-220px));
+  @include transition(all .25s linear);
+
+  li a {
+    display: block;
+    border-bottom: $sliding-menu-border;
+    padding: 1em;
+    font-weight: bold;
+    color: $sliding-menu-color;
+    &:hover {
+      background-color: $sliding-menu-background-hover;
+      color: $sliding-menu-color-hover;
+    }
+  }
+}
+
+.sliding-menu-moving-content, 
+.main {
+  @include transform(translateX(0));
+  @include transition(all .25s linear);
+}
+
+// .menu-active is added to <html> on click
+.menu-active menu {
+  @include transform(translateX(0));
+}
+
+.menu-active .sliding-menu-moving-content, 
+.menu-active .main {
+  @include transform(translateX(220px));
+}
+
+// Based on code by Diego Eis