refills 0.0.1

data/source/stylesheets/refills/_footer.scss

@@ -0,0 +1,55 @@
+.footer {
+	$footer-color: lighten($base-border-color, 10);
+	$footer-text-color: darken($footer-color, 25);
+
+	background-color: $footer-color;
+	padding: 1em 0;
+
+	.footer-inner {
+		max-width: 1200px;
+		padding: 3em;
+		margin: auto;
+
+		.footer-links {
+			margin-bottom: 1em;
+			@include clearfix;
+			@include media($medium-screen) {
+				@include shift(3);	
+			}
+		}
+
+		ul {
+			margin-bottom: 2em;
+			@include media($medium-screen) {
+				@include span-columns(3);
+				@include omega(3n);
+				@include clearfix;
+			}
+			li {
+				text-align: center;
+				@include media($medium-screen) {
+					text-align: left;
+				}
+
+
+				a {
+					display: inline-block;
+				}
+			} 
+		}
+
+		hr {
+			border-bottom: 1px solid $footer-text-color;
+			width: 12em;
+			margin: auto;
+			margin-bottom: 1em;
+		}
+
+		p {
+			margin: auto;
+			text-align: center;
+			color: $footer-text-color;
+			max-width: 35em;
+		}
+	}
+}

data/source/stylesheets/refills/_hero.scss

@@ -0,0 +1,35 @@
+.hero {
+	$hero-background: lighten($base-border-color, 10);	
+
+	background-color: $hero-background;
+	padding-bottom: 4em;
+
+	.hero-inner {
+		@include outer-container;
+		@include clearfix;
+		padding: 1em;
+		margin: auto;
+
+		button {
+			@include button(simple, $base-accent-color);
+			font-size: $base-font-size;
+			outline: none;
+		}
+
+		.hero-copy {
+			@include media($medium-screen) {
+				@include span-columns(6);
+			}
+			
+			h6 {
+				margin-bottom: 2em;	
+			}
+		}
+
+		.hero-image {
+			@include media($medium-screen) {
+				@include span-columns(6);
+			}
+		}
+	}
+}

data/source/stylesheets/refills/_image-cards.scss

@@ -0,0 +1,102 @@
+@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
+}
+
+.image-cards {
+  $image-card-border-color: $base-border-color;
+  $image-card-border: 1px solid $image-card-border-color;
+  $image-card-color: lighten($image-card-border-color, 10);
+  $image-card-header-color: $image-card-color;
+  $image-card-hover-color: darken($image-card-color, 5);
+
+  $image-card-height: 300px;
+
+  @include clearfix;
+  cursor: pointer;
+  margin-bottom: 1em;
+
+  .image-card {
+    height: $image-card-height;
+    border: $image-card-border;
+    background-color: $image-card-color;
+    border-radius: $base-border-radius;
+    margin-bottom: $base-line-height;
+
+    @include media($medium-screen) {
+      @include span-columns(4 of 12);
+    }
+
+    &.top {
+      .image-wrapper {
+        height: $image-card-height /2;
+        border-top-left-radius: $base-border-radius;
+        border-bottom-left-radius: $base-border-radius;
+      }
+    }
+
+    &.left {
+      .image-wrapper {
+        float: left;
+        height: $image-card-height;
+        width: 5%;
+        border-top-left-radius: $base-border-radius;
+        border-bottom-left-radius: $base-border-radius;
+      }
+      .image-card-content {
+        float: right;
+        width: 95%;
+      }
+    }
+
+    &.bottom {
+      position: relative;
+      .image-wrapper {
+        height: $image-card-height /2;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+      }
+    }
+
+    .image-wrapper {
+      @include texture($light-gray, 1); 
+      // see http://magnus-g.github.io/texture-mixin/ for info on how to use this texture mixin
+    }
+
+    .image-card-content {
+      padding-left: 1em;
+      padding-right: 1em;
+      padding-top: 1em;
+      
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+      }  
+    }
+
+    h3 {
+      font-weight: 800;
+    }
+
+    &:hover {
+      background-color: $image-card-hover-color;
+      .card-header {
+        background-color: $image-card-hover-color;
+      }
+    }
+
+    &:active {
+      background-color: $image-card-color;
+      .card-header {
+        background-color: $image-card-color;
+      }
+    }
+  }
+}

data/source/stylesheets/refills/_info-section.scss

@@ -0,0 +1,49 @@
+.info-section {
+	$info-section-border-color: $base-border-color;
+	$info-section-border: 1px solid $info-section-border-color;
+	$info-section-color: lighten($info-section-border-color, 10);
+	$info-section-img-background: $info-section-border-color;
+	
+	@include clearfix;
+	background-color: $info-section-color;
+	border-radius: $base-border-radius;
+	border: $info-section-border;
+	padding: 4em;
+
+	@if lightness($info-section-color) < 50% {
+		color: white;
+	}
+
+	img {
+		content: '';
+	}
+
+	h3 {
+		margin-bottom: 0.5em;
+	}
+
+	li {
+		@include media($medium-screen) {
+			@include span-columns(4);
+			@include omega(3n);
+		}
+	}
+
+	.img-wrapper {
+	  display: block;
+	  margin: 40px auto;
+	  height: 200px;
+	  width: 200px;
+	  border-radius: 190px;
+	  background-color: $info-section-img-background;
+
+	  img {
+	    padding: 30px;
+	    height: 135px;
+	    width: 135px;
+	    display: block;
+	    margin: auto;
+	  }
+	}
+}
+

data/source/stylesheets/refills/_item-list.scss

@@ -0,0 +1,37 @@
+$item-list-border-color: $base-border-color;
+$item-list-border: 1px solid $item-list-border-color;
+
+$item-list-background: lighten($item-list-border-color, 10);
+
+ul.item-list {
+  @include clearfix;
+  $item-list-height: 5em;
+  margin: 0 0 $base-line-height;
+  
+  li {
+    margin-bottom: $base-line-height;
+
+    .item-list-image {
+      float: left;
+      width: $item-list-height;
+      height: $item-list-height;
+      margin-right: 1em;
+      border: $item-list-border;
+      border-radius: $base-border-radius;
+      background-color: $item-list-background;
+    }
+
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    @include media($large-screen) {
+      @include span-columns(6);
+      @include omega(2n);
+    }
+  }
+}

data/source/stylesheets/refills/_master-detail.scss

@@ -0,0 +1,54 @@
+.master-detail {  
+  $master-detail-border-color: $base-border-color;
+  $master-detail-background: lighten($master-detail-border-color, 10);
+  $master-detail-height: 400px;
+  $master-detail-border: 1px solid $master-detail-border-color;
+  
+  border-radius: $base-border-radius;
+  @include clearfix;
+  margin-bottom: $base-line-height;
+  border: $master-detail-border;  
+
+  .master {
+    @include media($medium-screen) {
+      width: 30%;
+      float: left;
+      background-color: $master-detail-background;
+    }
+    ul {
+      height: $master-detail-height;
+      overflow: scroll;
+      overflow-x: hidden;
+
+      li {
+        padding: 1em;
+        border-bottom: $master-detail-border;
+        border-right: $master-detail-border;
+        
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        p {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+  }
+
+  .detail {
+    height: $master-detail-height;
+    display: none;
+
+    @include media($medium-screen) {
+      width: 70%;
+      float: right;
+      padding: 1em;
+      display: block;
+    }
+  }
+}

data/source/stylesheets/refills/_modal.scss

@@ -0,0 +1,160 @@
+$modal-padding: 3em;
+$modal-close-color: $light-gray;
+$modal-image-height: 135px;
+$modal-image-width: $modal-image-height;
+
+.modal-open {
+  overflow: hidden;
+}
+
+.modal {
+  label {
+    cursor: pointer;
+
+    img {
+      $img-width: 300px;
+      border-radius: $img-width/2;
+      display: block;
+      margin-bottom: 2em;
+      max-width: $img-width;
+    }
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+}
+
+.modal-window {
+  @include transition(opacity .25s ease);
+  @include position(fixed, 0px 0px 0px 0px);
+  background: rgba(0,0,0, .85);
+  opacity: 0;
+  text-align: left;
+  visibility: hidden;
+  z-index: 999;
+
+  .modal-bg {
+    @include position(absolute, 0px 0px 0px 0px);
+    cursor: pointer;
+  }
+
+  .modal-inner {
+    @include transition(opacity .25s ease);
+    @include position(absolute, -20% 0px 0px 0px);
+    border-radius: 3px;
+    background: white;
+    margin: auto;
+    max-height: 70%;
+    overflow: auto;
+    padding: $modal-padding;
+    width: 95%;
+
+    @include media($medium-screen) {
+      width: 50%;
+    }
+
+    .img-wrapper-modal {
+      @include size($modal-image-width $modal-image-height);
+      background-color: $light-gray;
+      border-radius: 190px;
+      display: block;
+
+      img {
+        @include size($modal-image-width $modal-image-height);
+        content: '';
+        display: block;
+        padding: 30px;
+      }
+    }
+
+    h1 {
+      color: $base-font-color;
+      margin-bottom: .6em;
+      text-align: left;
+      text-transform: capitalize;
+    }
+
+    p {
+      font-size: $base-font-size;
+      max-width: 100% !important;
+      padding: 0;
+      text-align: left;
+
+      &.intro {
+        color: $blue;
+        line-height: 1.6em;
+      }
+
+      &.body { 
+        color: $base-font-color;
+        line-height: 1.45em;
+
+        @include media($medium-screen) {
+          @include columns(2 8em);
+        }
+      }
+    }
+
+    a.cta {
+      color: white;
+      display: inline-block;
+      margin-right: .5em;
+      margin-top: 1em;
+
+      &:last-child {
+        padding: 0 2em;
+      }
+    }
+  }
+
+  .modal-close {
+    @include position(fixed, ($modal-padding /2) ($modal-padding /2) 0 0);
+    @include size(0.5em);
+    cursor: pointer;
+
+    &:after,
+    &:before {
+      @include position(absolute, 0px 0 0 -50%);
+      @include transform(rotate(45deg));
+      @include size(.15em 1.5em);
+      background: $modal-close-color;
+      content: '';
+      display: block;
+      margin: -3px 0 0 -1px;
+    }
+
+    &:hover:after,
+    &:hover:before {
+      background: darken($modal-close-color, 10);
+    }
+
+    &:before {
+      @include transform(rotate(-45deg));
+    }
+  }
+}
+
+.modal-state:checked + .modal-window {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal-state:checked + .modal-window .modal-inner {
+  top: 0;
+}
+
+
+.btn {
+  @include button(simple, $base-accent-color);
+  font-size: $base-font-size;
+}
+
+p img {
+  float: left;
+  height: auto;
+  margin: 0 1em 1em 0;
+  max-width: 200px;
+}
+
+// Based on code by Kasper Mikiewicz