leonids 0.1.1

data/_sass/components/_global.scss

@@ -0,0 +1,122 @@
+/**
+  * Global setting
+  */
+*,
+*:before,
+*:after {
+  @include box-sizing;
+}
+.notice {
+  border: 1px solid lighten($text-color, 45%);
+  border-radius: 0.4em;
+  padding: 0.5em 1em;
+}
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+// Tables
+table,
+th,
+td {
+  border: none;
+}
+.table {
+  display: table;
+}
+.table-cell {
+  display: table-cell;
+}
+.table-top {
+  vertical-align: top;
+}
+.table-middle {
+  vertical-align: middle;
+}
+.table-bottom {
+  vertical-align: bottom;
+}
+table {
+  width: 100%;
+  display: table;
+  &.bordered > thead > tr,
+  &.bordered > tbody > tr {
+    border-bottom: 1px solid $table-border-color;
+  }
+  &.striped > tbody {
+    > tr:nth-child(odd) {
+      background-color: $table-striped-color;
+    }
+    > tr > td {
+      border-radius: 0;
+    }
+  }
+  &.highlight > tbody > tr {
+    @include transition(background-color .25s ease);
+    &:hover {
+      background-color: $table-striped-color;
+    }
+  }
+  &.centered {
+    thead tr th,
+    tbody tr td,
+    tfoot tr td {
+      text-align: center;
+    }
+  }
+}
+thead {
+  border-bottom: 1px solid $table-border-color;
+}
+td,
+th {
+  padding: 15px 5px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
+  border-radius: 2px;
+}
+tfoot {
+  border-top: 1px solid $table-border-color;
+}
+
+// Global transition
+b,
+i,
+strong,
+em,
+blockquote,
+p,
+q,
+span,
+figure,
+img,
+h1,
+h2,
+header,
+input,
+a {
+  @include transition(all .1s ease);
+}
+
+// Footer
+footer {
+  text-align: center;
+  padding: 3em 0;
+  .heart-icon {
+    color: $danger;
+    text-shadow: 0 0 5px $white, 0 0 10px $danger;
+  }
+}
+.related-articles {
+  margin-top: 2em;
+  h4 {
+    font-family: $font-family-base;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}

data/_sass/components/_grid.scss

@@ -0,0 +1,125 @@
+/**
+  * Grid
+  */
+
+// Container
+.container {
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 90%;
+}
+@include media-query($medium-screen) {
+  .container {
+    width: 85%;
+  }
+}
+@include media-query($large-screen) {
+  .container {
+    width: 70%;
+  }
+}
+.container .row {
+  margin-left: (-1 * $gutter-width / 2);
+  margin-right: (-1 * $gutter-width / 2);
+}
+
+// Section
+.section {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+
+  &.no-pad {
+    padding: 0;
+  }
+  &.no-pad-bot {
+    padding-bottom: 0;
+  }
+  &.no-pad-top {
+    padding-top: 0;
+  }
+}
+
+// Row and colum
+.row {
+  margin-left: auto;
+  margin-right: auto;
+
+  // Clear floating children
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .col {
+    float: left;
+    @include box-sizing(border-box);
+    display:block;
+  	vertical-align:top;
+  	width:100%;
+
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      &.s#{$i} {
+        width: $perc;
+        margin-left: 0;
+      }
+      $i: $i + 1;
+    }
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      &.offset-s#{$i} {
+        margin-left: $perc;
+      }
+      $i: $i + 1;
+    }
+
+
+    @include media-query($small-screen) {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.m#{$i} {
+          width: $perc;
+          margin-left: 0;
+        }
+        $i: $i + 1;
+      }
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.offset-m#{$i} {
+          margin-left: $perc;
+        }
+        $i: $i + 1;
+      }
+
+    }
+
+    @include media-query($medium-screen) {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.l#{$i} {
+          width: $perc;
+          margin-left: 0;
+        }
+        $i: $i + 1;
+      }
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.offset-l#{$i} {
+          margin-left: $perc;
+        }
+        $i: $i + 1;
+      }
+
+    }
+
+  }
+}

data/_sass/components/_helpers.scss

@@ -0,0 +1,194 @@
+/**
+  * Helpers
+  */
+
+// Displays
+.block { display: block }
+.inline-block { display: inline-block }
+
+.hidden-md {
+  display: none;
+  @include media-query($medium-screen) {
+    display: inline-block;
+  }
+}
+
+.radius-box {
+  border-radius: 10px;
+}
+
+.radius-ls {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.radius-rs {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.radius-l1 {
+  border-bottom-left-radius: 10px;
+  border-top-left-radius: 10px;
+}
+.radius-r1 {
+  border-bottom-right-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+// Margin helpers
+.m0            { margin: 0 }
+.mt0           { margin-top: 0 }
+.mr0           { margin-right: 0 }
+.mb0           { margin-bottom: 0 }
+.ml0           { margin-left: 0 }
+
+.ms            { margin: .25em }
+.mts           { margin-top: .25em }
+.mbs           { margin-bottom: .25em }
+.mrs           { margin-right: .25em }
+.mls           { margin-left: .25em }
+
+.mm            { margin: .5em }
+.mtm           { margin-top: .5em }
+.mbm           { margin-bottom: .5em }
+.mrm           { margin-right: .5em }
+.mlm           { margin-left: .5em }
+
+.m1            { margin: $base-space-unit }
+.mt1           { margin-top: $base-space-unit }
+.mb1           { margin-bottom: $base-space-unit }
+.mr1           { margin-right: $base-space-unit }
+.ml1           { margin-left: $base-space-unit }
+
+.m2            { margin: $base-space-unit*2 }
+.mt2           { margin-top: $base-space-unit*2 }
+.mb2           { margin-bottom: $base-space-unit*2 }
+.mr2           { margin-right: $base-space-unit*2 }
+.ml2           { margin-left: $base-space-unit*2 }
+
+// Padding helpers
+.p0            { padding: 0 }
+.pt0           { padding-top: 0 }
+.pr0           { padding-right: 0 }
+.pb0           { padding-bottom: 0 }
+.pl0           { padding-left: 0 }
+
+.ps            { padding: .25em }
+.pts           { padding-top: .25em }
+.pbs           { padding-bottom: .25em }
+.prs           { padding-right: .25em }
+.pls           { padding-left: .25em }
+
+.pm            { padding: .5em }
+.ptm           { padding-top: .5em }
+.pbm           { padding-bottom: .5em }
+.prm           { padding-right: .5em }
+.plm           { padding-left: .5em }
+
+.p1            { padding: 1em }
+.pt1           { padding-top: 1em }
+.pr1           { padding-right: 1em }
+.pb1           { padding-bottom: 1em }
+.pl1           { padding-left: 1em }
+
+.p2            { padding: 1em*2 }
+.pt2           { padding-top: 1em*2 }
+.pr2           { padding-right: 1em*2 }
+.pb2           { padding-bottom: 1em*2 }
+.pl2           { padding-left: 1em*2 }
+
+.pb5           { padding-bottom: 1em*5 }
+
+// Padding small
+.pads           { padding: .25em }
+
+// Padding medium
+.padm           { padding: .5em }
+
+// Padding large
+.padl           { padding: 1em }
+
+// Padding small left :: right
+.padsx {
+ padding-left: .25em;
+ padding-right: .25em;
+}
+
+// Padding medium left :: right
+.padmx {
+ padding-left: .5em;
+ padding-right: .5em;
+}
+
+// Padding large left :: right
+.padlx {
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+// Padding small top :: bottom
+.padsy {
+ padding-top: .25em;
+ padding-bottom: .25em;
+}
+
+// Padding medium top :: bottom
+.padmy {
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+
+// Padding large top :: bottom
+.padly {
+ padding-top: 1em;
+ padding-bottom: 1em;
+}
+
+// Colors helpers
+.primary-text-color {
+  color: $primary;
+}
+
+.primary-bg-color {
+  background-color: $primary;
+}
+
+.secondary-text-color {
+  color: $secondary;
+}
+
+.secondary-bg-color {
+  background-color: $secondary;
+}
+
+.success-text-color {
+  color: $success;
+}
+
+.success-bg-color {
+  background-color: $success;
+}
+
+.danger-text-color {
+  color: $danger;
+}
+
+.danger-bg-color {
+  background-color: $danger;
+}
+
+.info-text-color {
+  color: $info;
+}
+
+.info-bg-color {
+  background-color: $info;
+}
+
+.warning-text-color {
+  color: $warning;
+}
+
+.warning-bg-color {
+  background-color: $warning;
+}

data/_sass/components/_mixins.scss

@@ -0,0 +1,280 @@
+/* Utility mixins
+   ========================================================================== */
+
+/**
+ * Clearfix for clearing floats like a boss h5bp.com/q
+ */
+
+@mixin clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+/**
+ * Media query
+ */
+
+@mixin media-query($device) {
+    @media only screen and (min-width: $device) {
+        @content;
+    }
+}
+
+/**
+ * Webkit-style focus
+ */
+
+@mixin tab-focus() {
+  /* Default */
+  outline: thin dotted #333;
+  /* Webkit */
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+/**
+ * Center-align a block level element
+ */
+
+@mixin center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+/**
+ * Hide text overflow and end with ...
+ */
+
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+/* Gradient mixins
+   ========================================================================== */
+
+@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
+  background-color: $endColor;
+  background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image  : -webkit-linear-gradient(left, $startColor, $endColor);           // Safari 5.1+, Chrome 10+
+  background-image  : -moz-linear-gradient(left, $startColor, $endColor);            // FF 3.6+
+  background-image  : -ms-linear-gradient(left, $startColor, $endColor);             // IE10
+  background-image  : -o-linear-gradient(left, $startColor, $endColor);              // Opera 11.10
+  background-image  : linear-gradient(left, $startColor, $endColor);               // W3C
+  background-repeat : repeat-x;
+ }
+
+@mixin vertical($startColor : $white, $endColor:  $lightergrey) {
+  background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image  : -webkit-linear-gradient(top, $startColor, $endColor);            // Safari 5.1+, Chrome 10+
+  background-color  : $endColor;
+  background-image  : -moz-linear-gradient(top, $startColor, $endColor);             // FF 3.6+
+  background-image  : -ms-linear-gradient(top, $startColor, $endColor);              // IE10
+  background-image  : -o-linear-gradient(top, $startColor, $endColor);             // Opera 11.10
+  background-image  : linear-gradient(top, $startColor, $endColor);                // W3C
+  background-repeat : repeat-x;
+}
+
+@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
+  background-color  : $endColor;
+  background-image  : -moz-linear-gradient($deg, $startColor, $endColor);           // FF 3.6+
+  background-image  : -ms-linear-gradient($deg, $startColor, $endColor);            // IE10
+  background-image  : -webkit-linear-gradient($deg, $startColor, $endColor);          // Safari 5.1+, Chrome 10+
+  background-image  : -o-linear-gradient($deg, $startColor, $endColor);             // Opera 11.10
+  background-image  : linear-gradient($deg, $startColor, $endColor);              // W3C
+  background-repeat : repeat-x;
+}
+
+// .bordered(COLOR, COLOR, COLOR, COLOR);
+@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
+  border-top : solid 1px $top-color;
+  border-left : solid 1px $left-color;
+  border-right : solid 1px $right-color;
+  border-bottom : solid 1px $bottom-color;
+}
+
+/* Rounded corners
+   ========================================================================== */
+
+/**
+ * Round all corners
+ * example: @include rounded(4px);
+ */
+
+@mixin rounded($radius:4px) {
+  border-radius : $radius;
+}
+
+/**
+ * Round individual corners (top right, bottom right, bottom left, top left)
+ * example: @include border-radius(4px, 0, 0, 4px);
+ */
+
+@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
+  border-top-right-radius: $topright;
+  border-bottom-right-radius: $bottomright;
+  border-bottom-left-radius: $bottomleft;
+  border-top-left-radius: $topleft;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+
+/**
+ * Box shadow
+ * example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR));
+ */
+
+@mixin box-shadow($shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)) {
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
+
+/**
+ * Drop shadow
+ * example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+ */
+
+@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
+  -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+  -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+  box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+}
+
+/**
+ * Text shadow
+ * example: @include text-shadow(0 2px 3px rgba(0,0,0,.25));
+ */
+
+@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
+text-shadow: $shadow; }
+
+/**
+ * Opacity
+ * example: @include opacity(0.5); // 50% opacity
+ */
+
+@mixin opacity($opacity: 0.5) {
+  opacity: $opacity;
+}
+
+/* Transformations
+   ========================================================================== */
+
+/**
+ * @include rotate(VALUEdeg);
+ */
+
+@mixin rotate($deg) {
+  -webkit-transform: rotate($deg);
+  -moz-transform: rotate($deg);
+  -ms-transform: rotate($deg);
+  -o-transform: rotate($deg);
+  transform: rotate($deg);
+}
+
+/**
+ * @include scale(VALUE);
+ */
+
+@mixin scale($ratio) {
+  -webkit-transform: scale($ratio);
+  -moz-transform: scale($ratio);
+  -ms-transform: scale($ratio);
+  -o-transform: scale($ratio);
+  transform: scale($ratio);
+}
+
+/**
+ * @include skew(VALUE, VALUE);
+ */
+
+@mixin skew($x: 0, $y: 0) {
+  -webkit-transform: skew($x, $y);
+  -moz-transform: skew($x, $y);
+  -ms-transform: skew($x, $y);
+  -o-transform: skew($x, $y);
+  transform: skew($x, $y);
+}
+
+/**
+ * @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
+ */
+
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -ms-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
+
+/**
+ * @include translate(VALUE, VALUE);
+ */
+
+@mixin translate($x: 0, $y: 0) {
+  -webkit-transform: translate($x, $y);
+  -moz-transform: translate($x, $y);
+  -ms-transform: translate($x, $y);
+  -o-transform: translate($x, $y);
+  transform: translate($x, $y);
+}
+
+@mixin translate3d($x: 0, $y: 0, $z: 0) {
+  -webkit-transform: translate($x, $y, $z);
+  -moz-transform: translate($x, $y, $z);
+  -ms-transform: translate($x, $y, $z);
+  -o-transform: translate($x, $y, $z);
+  transform: translate($x, $y, $z);
+}
+
+@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
+  -webkit-animation: $name $duration $delay $ease;
+  -moz-animation:    $name $duration $delay $ease;
+  -ms-animation:     $name $duration $delay $ease;
+}
+
+
+/**
+ * Box-sizing
+ * example: @include box-sizing(VALUE); //(border-box, padding-box, content-box)
+ */
+
+@mixin box-sizing($boxsize: border-box) {
+  -webkit-box-sizing: $boxsize;
+  -moz-box-sizing: $boxsize;
+  -ms-box-sizing: $boxsize;
+  box-sizing: $boxsize;
+}
+
+
+/**
+ * Hide from visual and speaking browsers
+ */
+
+@mixin hidden {
+  display: none;
+  visibility: hidden;
+}
+
+/**
+ * Hide but maintain layout
+ */
+
+@mixin invisible() {
+  visibility: hidden;
+}