ark-jekyll-theme 0.0.1 → 0.0.2

data/_sass/scss/_font-style.scss

@@ -0,0 +1,36 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   FONT STYLE
+   Docs: http://tachyons.io/docs/typography/font-style/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.i         { font-style: italic; }
+.fs-normal { font-style: normal; }
+
+@media #{$breakpoint-not-small} {
+  .i-ns       { font-style: italic; }
+  .fs-normal-ns     { font-style: normal; }
+}
+
+@media #{$breakpoint-medium} {
+  .i-m       { font-style: italic; }
+  .fs-normal-m     { font-style: normal; }
+}
+
+@media #{$breakpoint-large} {
+  .i-l       { font-style: italic; }
+  .fs-normal-l     { font-style: normal; }
+}

data/_sass/scss/_font-weight.scss

@@ -0,0 +1,87 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   FONT WEIGHT
+   Docs: http://tachyons.io/docs/typography/font-weight/
+
+   Base
+     fw = font-weight
+
+   Modifiers:
+     1 = literal value 100
+     2 = literal value 200
+     3 = literal value 300
+     4 = literal value 400
+     5 = literal value 500
+     6 = literal value 600
+     7 = literal value 700
+     8 = literal value 800
+     9 = literal value 900
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.normal { font-weight: normal; }
+.b      { font-weight: bold; }
+.fw1    { font-weight: 100; }
+.fw2    { font-weight: 200; }
+.fw3    { font-weight: 300; }
+.fw4    { font-weight: 400; }
+.fw5    { font-weight: 500; }
+.fw6    { font-weight: 600; }
+.fw7    { font-weight: 700; }
+.fw8    { font-weight: 800; }
+.fw9    { font-weight: 900; }
+
+
+@media #{$breakpoint-not-small} {
+  .normal-ns { font-weight: normal; }
+  .b-ns      { font-weight: bold; }
+  .fw1-ns    { font-weight: 100; }
+  .fw2-ns    { font-weight: 200; }
+  .fw3-ns    { font-weight: 300; }
+  .fw4-ns    { font-weight: 400; }
+  .fw5-ns    { font-weight: 500; }
+  .fw6-ns    { font-weight: 600; }
+  .fw7-ns    { font-weight: 700; }
+  .fw8-ns    { font-weight: 800; }
+  .fw9-ns    { font-weight: 900; }
+}
+
+@media #{$breakpoint-medium} {
+  .normal-m { font-weight: normal; }
+  .b-m      { font-weight: bold; }
+  .fw1-m    { font-weight: 100; }
+  .fw2-m    { font-weight: 200; }
+  .fw3-m    { font-weight: 300; }
+  .fw4-m    { font-weight: 400; }
+  .fw5-m    { font-weight: 500; }
+  .fw6-m    { font-weight: 600; }
+  .fw7-m    { font-weight: 700; }
+  .fw8-m    { font-weight: 800; }
+  .fw9-m    { font-weight: 900; }
+}
+
+@media #{$breakpoint-large} {
+  .normal-l { font-weight: normal; }
+  .b-l      { font-weight: bold; }
+  .fw1-l    { font-weight: 100; }
+  .fw2-l    { font-weight: 200; }
+  .fw3-l    { font-weight: 300; }
+  .fw4-l    { font-weight: 400; }
+  .fw5-l    { font-weight: 500; }
+  .fw6-l    { font-weight: 600; }
+  .fw7-l    { font-weight: 700; }
+  .fw8-l    { font-weight: 800; }
+  .fw9-l    { font-weight: 900; }
+}

data/_sass/scss/_forms.scss

@@ -0,0 +1,23 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   FORMS
+   
+*/
+
+.input-reset {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.button-reset::-moz-focus-inner,
+.input-reset::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}

data/_sass/scss/_gradients.scss

@@ -0,0 +1,29 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   GRADIENTS
+
+
+*/
+
+.gradient-blue { 
+  background-image: linear-gradient(#4570B0, #0081C2);
+}
+
+.gradient-blue-reversed { 
+  background-image: linear-gradient(#0081C2, #4570B0);
+}
+
+.gradient-light-blue { 
+  background-image: linear-gradient(#76D3FE, #008AE0);
+}
+
+.gradient-light-blue-reversed { 
+  background-image: linear-gradient(#008AE0, #76D3FE);
+}

data/_sass/scss/_heights.scss

@@ -0,0 +1,131 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   HEIGHTS
+   Docs: http://tachyons.io/docs/layout/heights/
+
+   Base:
+     h = height
+     min-h = min-height
+     min-vh = min-height vertical screen height
+     vh = vertical screen height
+
+   Modifiers
+     1 = 1st step in height scale
+     2 = 2nd step in height scale
+     3 = 3rd step in height scale
+     4 = 4th step in height scale
+     5 = 5th step in height scale
+
+     -25   = literal value 25%
+     -50   = literal value 50%
+     -75   = literal value 75%
+     -100  = literal value 100%
+
+     -auto = string value of auto
+     -inherit = string value of inherit
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* Height Scale */
+
+.h1 { height: $height-1; }
+.h2 { height: $height-2; }
+.h3 { height: $height-3; }
+.h4 { height: $height-4; }
+.h5 { height: $height-5; }
+
+/* Height Percentages - Based off of height of parent */
+
+.h-25 {  height:  25%; }
+.h-50 {  height:  50%; }
+.h-75 {  height:  75%; }
+.h-100 { height: 100%; }
+
+.min-h-100 { min-height: 100%; }
+
+/* Screen Height Percentage */
+
+.vh-25 {  height:  25vh; }
+.vh-50 {  height:  50vh; }
+.vh-75 {  height:  75vh; }
+.vh-100 { height: 100vh; }
+
+.min-vh-100 { min-height: 100vh; }
+
+
+/* String Properties */
+
+.h-auto {     height: auto; }
+.h-inherit {  height: inherit; }
+
+@media #{$breakpoint-not-small} {
+  .h1-ns {  height: $height-1; }
+  .h2-ns {  height: $height-2; }
+  .h3-ns {  height: $height-3; }
+  .h4-ns {  height: $height-4; }
+  .h5-ns {  height: $height-5; }
+  .h-25-ns { height: 25%; }
+  .h-50-ns { height: 50%; }
+  .h-75-ns { height: 75%; }
+  .h-100-ns { height: 100%; }
+  .min-h-100-ns { min-height: 100%; }
+  .vh-25-ns {  height:  25vh; }
+  .vh-50-ns {  height:  50vh; }
+  .vh-75-ns {  height:  75vh; }
+  .vh-100-ns { height: 100vh; }
+  .min-vh-100-ns { min-height: 100vh; }
+  .h-auto-ns { height: auto; }
+  .h-inherit-ns { height: inherit; }
+}
+
+@media #{$breakpoint-medium} {
+  .h1-m { height: $height-1; }
+  .h2-m { height: $height-2; }
+  .h3-m { height: $height-3; }
+  .h4-m { height: $height-4; }
+  .h5-m { height: $height-5; }
+  .h-25-m { height: 25%; }
+  .h-50-m { height: 50%; }
+  .h-75-m { height: 75%; }
+  .h-100-m { height: 100%; }
+  .min-h-100-m { min-height: 100%; }
+  .vh-25-m {  height:  25vh; }
+  .vh-50-m {  height:  50vh; }
+  .vh-75-m {  height:  75vh; }
+  .vh-100-m { height: 100vh; }
+  .min-vh-100-m { min-height: 100vh; }
+  .h-auto-m { height: auto; }
+  .h-inherit-m { height: inherit; }
+}
+
+@media #{$breakpoint-large} {
+  .h1-l { height: $height-1; }
+  .h2-l { height: $height-2; }
+  .h3-l { height: $height-3; }
+  .h4-l { height: $height-4; }
+  .h5-l { height: $height-5; }
+  .h-25-l { height: 25%; }
+  .h-50-l { height: 50%; }
+  .h-75-l { height: 75%; }
+  .h-100-l { height: 100%; }
+  .min-h-100-l { min-height: 100%; }
+  .vh-25-l {  height:  25vh; }
+  .vh-50-l {  height:  50vh; }
+  .vh-75-l {  height:  75vh; }
+  .vh-100-l { height: 100vh; }
+  .min-vh-100-l { min-height: 100vh; }
+  .h-auto-l { height: auto; }
+  .h-inherit-l { height: inherit; }
+}

data/_sass/scss/_hovers.scss

@@ -0,0 +1,166 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+  HOVER EFFECTS
+  Docs: http://tachyons.io/docs/themes/hovers/
+
+    - Dim
+    - Glow
+    - Hide Child
+    - Underline text
+    - Grow
+    - Pointer
+    - Shadow
+
+*/
+
+/*
+
+  Dim element on hover by adding the dim class.
+
+*/
+.dim {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+.dim:hover,
+.dim:focus {
+  opacity: .5;
+  transition: opacity .15s ease-in;
+}
+.dim:active {
+  opacity: .8; transition: opacity .15s ease-out;
+}
+
+/*
+
+  Animate opacity to 100% on hover by adding the glow class.
+
+*/
+.glow {
+  transition: opacity .15s ease-in;
+}
+.glow:hover,
+.glow:focus {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+
+/*
+
+  Hide child & reveal on hover:
+
+  Put the hide-child class on a parent element and any nested element with the
+  child class will be hidden and displayed on hover or focus.
+
+  <div class="hide-child">
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+  </div>
+*/
+
+.hide-child .child {
+  opacity: 0;
+  transition: opacity .15s ease-in;
+}
+.hide-child:hover  .child,
+.hide-child:focus  .child,
+.hide-child:active .child {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+
+.underline-hover:hover,
+.underline-hover:focus {
+  text-decoration: underline;
+}
+
+/* Can combine this with overflow-hidden to make background images grow on hover
+ * even if you are using background-size: cover */
+
+.grow {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform 0.25s ease-out;
+}
+
+.grow:hover,
+.grow:focus {
+  transform: scale(1.05);
+}
+
+.grow:active {
+  transform: scale(.90);
+}
+
+.grow-large {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform .25s ease-in-out;
+}
+
+.grow-large:hover,
+.grow-large:focus {
+  transform: scale(1.2);
+}
+
+.grow-large:active {
+  transform: scale(.95);
+}
+
+/* Add pointer on hover */
+
+.pointer:hover {
+  cursor: pointer;
+}
+
+/*
+   Add shadow on hover.
+
+   Performant box-shadow animation pattern from
+   http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+*/
+
+.shadow-hover {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover::after {
+  content: '';
+  box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
+  border-radius: inherit;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover:hover::after,
+.shadow-hover:focus::after {
+  opacity: 1;
+}
+
+/* Combine with classes in skins and skins-pseudo for
+ * many different transition possibilities. */
+
+.bg-animate,
+.bg-animate:hover,
+.bg-animate:focus {
+  transition: background-color .15s ease-in-out;
+}