From 56494a09af697a147c72a7da0236922e964a323a Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Wed, 3 Sep 2014 23:03:19 -0400 Subject: [PATCH] Cleanup stylesheets - Add Bourbon and Neat --- .../2013-05-23-readability-feature-post.md | 2 +- _sass/{elements.scss => _elements.scss} | 26 +- _sass/{forms.scss => _forms.scss} | 6 +- _sass/_grid-settings.scss | 9 + _sass/{page.scss => _layout.scss} | 273 ++++++------- _sass/_mixins.scss | 225 +++++++++++ _sass/{pygments.scss => _pygments.scss} | 3 +- _sass/{reset.scss => _reset.scss} | 124 ++---- _sass/_site.scss | 269 +++++++++++++ _sass/_variables.scss | 46 +++ _sass/coderay.scss | 133 ------- _sass/grid.scss | 47 --- _sass/mixins.scss | 269 ------------- _sass/site.scss | 46 --- _sass/typography.scss | 125 ------ _sass/variables.scss | 36 -- .../bourbon/_bourbon-deprecated-upcoming.scss | 8 + _sass/vendor/bourbon/_bourbon.scss | 78 ++++ _sass/vendor/bourbon/addons/_button.scss | 374 ++++++++++++++++++ _sass/vendor/bourbon/addons/_clearfix.scss | 23 ++ .../bourbon/addons/_directional-values.scss | 111 ++++++ _sass/vendor/bourbon/addons/_ellipsis.scss | 7 + _sass/vendor/bourbon/addons/_font-family.scss | 5 + _sass/vendor/bourbon/addons/_hide-text.scss | 10 + .../bourbon/addons/_html5-input-types.scss | 86 ++++ _sass/vendor/bourbon/addons/_position.scss | 32 ++ _sass/vendor/bourbon/addons/_prefixer.scss | 45 +++ .../vendor/bourbon/addons/_retina-image.scss | 31 ++ _sass/vendor/bourbon/addons/_size.scss | 16 + .../bourbon/addons/_timing-functions.scss | 32 ++ _sass/vendor/bourbon/addons/_triangle.scss | 83 ++++ _sass/vendor/bourbon/addons/_word-wrap.scss | 8 + _sass/vendor/bourbon/css3/_animation.scss | 52 +++ _sass/vendor/bourbon/css3/_appearance.scss | 3 + .../bourbon/css3/_backface-visibility.scss | 6 + .../bourbon/css3/_background-image.scss | 42 ++ _sass/vendor/bourbon/css3/_background.scss | 55 +++ _sass/vendor/bourbon/css3/_border-image.scss | 59 +++ _sass/vendor/bourbon/css3/_border-radius.scss | 22 ++ _sass/vendor/bourbon/css3/_box-sizing.scss | 4 + _sass/vendor/bourbon/css3/_calc.scss | 4 + _sass/vendor/bourbon/css3/_columns.scss | 47 +++ _sass/vendor/bourbon/css3/_filter.scss | 5 + _sass/vendor/bourbon/css3/_flex-box.scss | 321 +++++++++++++++ _sass/vendor/bourbon/css3/_font-face.scss | 23 ++ .../bourbon/css3/_font-feature-settings.scss | 10 + .../bourbon/css3/_hidpi-media-query.scss | 10 + _sass/vendor/bourbon/css3/_hyphens.scss | 4 + .../vendor/bourbon/css3/_image-rendering.scss | 14 + _sass/vendor/bourbon/css3/_keyframes.scss | 35 ++ .../vendor/bourbon/css3/_linear-gradient.scss | 38 ++ _sass/vendor/bourbon/css3/_perspective.scss | 8 + _sass/vendor/bourbon/css3/_placeholder.scss | 8 + .../vendor/bourbon/css3/_radial-gradient.scss | 39 ++ _sass/vendor/bourbon/css3/_transform.scss | 15 + _sass/vendor/bourbon/css3/_transition.scss | 77 ++++ _sass/vendor/bourbon/css3/_user-select.scss | 3 + _sass/vendor/bourbon/functions/_assign.scss | 11 + .../bourbon/functions/_color-lightness.scss | 13 + .../vendor/bourbon/functions/_flex-grid.scss | 39 ++ .../bourbon/functions/_golden-ratio.scss | 3 + .../vendor/bourbon/functions/_grid-width.scss | 13 + .../bourbon/functions/_modular-scale.scss | 66 ++++ _sass/vendor/bourbon/functions/_px-to-em.scss | 13 + .../vendor/bourbon/functions/_px-to-rem.scss | 15 + .../bourbon/functions/_strip-units.scss | 5 + .../vendor/bourbon/functions/_tint-shade.scss | 9 + .../functions/_transition-property-name.scss | 22 ++ _sass/vendor/bourbon/functions/_unpack.scss | 17 + .../bourbon/helpers/_convert-units.scss | 15 + .../helpers/_gradient-positions-parser.scss | 13 + _sass/vendor/bourbon/helpers/_is-num.scss | 8 + .../bourbon/helpers/_linear-angle-parser.scss | 25 ++ .../helpers/_linear-gradient-parser.scss | 41 ++ .../helpers/_linear-positions-parser.scss | 61 +++ .../helpers/_linear-side-corner-parser.scss | 31 ++ .../bourbon/helpers/_radial-arg-parser.scss | 69 ++++ .../helpers/_radial-gradient-parser.scss | 50 +++ .../helpers/_radial-positions-parser.scss | 18 + .../bourbon/helpers/_render-gradients.scss | 26 ++ .../bourbon/helpers/_shape-size-stripper.scss | 10 + _sass/vendor/bourbon/helpers/_str-to-num.scss | 50 +++ _sass/vendor/bourbon/settings/_prefixer.scss | 6 + _sass/vendor/bourbon/settings/_px-to-em.scss | 1 + _sass/vendor/neat/_neat-helpers.scss | 7 + _sass/vendor/neat/_neat.scss | 21 + .../neat/functions/_new-breakpoint.scss | 16 + _sass/vendor/neat/functions/_private.scss | 125 ++++++ _sass/vendor/neat/grid/_fill-parent.scss | 7 + _sass/vendor/neat/grid/_grid.scss | 5 + _sass/vendor/neat/grid/_media.scss | 38 ++ _sass/vendor/neat/grid/_omega.scss | 61 +++ _sass/vendor/neat/grid/_outer-container.scss | 8 + _sass/vendor/neat/grid/_pad.scss | 8 + _sass/vendor/neat/grid/_private.scss | 43 ++ _sass/vendor/neat/grid/_reset.scss | 12 + _sass/vendor/neat/grid/_row.scss | 17 + _sass/vendor/neat/grid/_shift.scss | 16 + _sass/vendor/neat/grid/_span-columns.scss | 43 ++ _sass/vendor/neat/grid/_to-deprecate.scss | 57 +++ _sass/vendor/neat/grid/_visual-grid.scss | 41 ++ _sass/vendor/neat/settings/_grid.scss | 7 + _sass/vendor/neat/settings/_visual-grid.scss | 5 + about/index.md | 2 +- assets/css/main.scss | 8 +- theme-setup/index.md | 11 +- 106 files changed, 3778 insertions(+), 922 deletions(-) rename _sass/{elements.scss => _elements.scss} (94%) rename _sass/{forms.scss => _forms.scss} (98%) create mode 100644 _sass/_grid-settings.scss rename _sass/{page.scss => _layout.scss} (64%) create mode 100644 _sass/_mixins.scss rename _sass/{pygments.scss => _pygments.scss} (98%) rename _sass/{reset.scss => _reset.scss} (55%) create mode 100644 _sass/_site.scss create mode 100644 _sass/_variables.scss delete mode 100644 _sass/coderay.scss delete mode 100644 _sass/grid.scss delete mode 100644 _sass/mixins.scss delete mode 100644 _sass/site.scss delete mode 100644 _sass/typography.scss delete mode 100644 _sass/variables.scss create mode 100644 _sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss create mode 100644 _sass/vendor/bourbon/_bourbon.scss create mode 100644 _sass/vendor/bourbon/addons/_button.scss create mode 100644 _sass/vendor/bourbon/addons/_clearfix.scss create mode 100644 _sass/vendor/bourbon/addons/_directional-values.scss create mode 100644 _sass/vendor/bourbon/addons/_ellipsis.scss create mode 100644 _sass/vendor/bourbon/addons/_font-family.scss create mode 100644 _sass/vendor/bourbon/addons/_hide-text.scss create mode 100644 _sass/vendor/bourbon/addons/_html5-input-types.scss create mode 100644 _sass/vendor/bourbon/addons/_position.scss create mode 100644 _sass/vendor/bourbon/addons/_prefixer.scss create mode 100644 _sass/vendor/bourbon/addons/_retina-image.scss create mode 100644 _sass/vendor/bourbon/addons/_size.scss create mode 100644 _sass/vendor/bourbon/addons/_timing-functions.scss create mode 100644 _sass/vendor/bourbon/addons/_triangle.scss create mode 100644 _sass/vendor/bourbon/addons/_word-wrap.scss create mode 100644 _sass/vendor/bourbon/css3/_animation.scss create mode 100644 _sass/vendor/bourbon/css3/_appearance.scss create mode 100644 _sass/vendor/bourbon/css3/_backface-visibility.scss create mode 100644 _sass/vendor/bourbon/css3/_background-image.scss create mode 100644 _sass/vendor/bourbon/css3/_background.scss create mode 100644 _sass/vendor/bourbon/css3/_border-image.scss create mode 100644 _sass/vendor/bourbon/css3/_border-radius.scss create mode 100644 _sass/vendor/bourbon/css3/_box-sizing.scss create mode 100644 _sass/vendor/bourbon/css3/_calc.scss create mode 100644 _sass/vendor/bourbon/css3/_columns.scss create mode 100644 _sass/vendor/bourbon/css3/_filter.scss create mode 100644 _sass/vendor/bourbon/css3/_flex-box.scss create mode 100644 _sass/vendor/bourbon/css3/_font-face.scss create mode 100644 _sass/vendor/bourbon/css3/_font-feature-settings.scss create mode 100644 _sass/vendor/bourbon/css3/_hidpi-media-query.scss create mode 100644 _sass/vendor/bourbon/css3/_hyphens.scss create mode 100644 _sass/vendor/bourbon/css3/_image-rendering.scss create mode 100644 _sass/vendor/bourbon/css3/_keyframes.scss create mode 100644 _sass/vendor/bourbon/css3/_linear-gradient.scss create mode 100644 _sass/vendor/bourbon/css3/_perspective.scss create mode 100644 _sass/vendor/bourbon/css3/_placeholder.scss create mode 100644 _sass/vendor/bourbon/css3/_radial-gradient.scss create mode 100644 _sass/vendor/bourbon/css3/_transform.scss create mode 100644 _sass/vendor/bourbon/css3/_transition.scss create mode 100644 _sass/vendor/bourbon/css3/_user-select.scss create mode 100644 _sass/vendor/bourbon/functions/_assign.scss create mode 100644 _sass/vendor/bourbon/functions/_color-lightness.scss create mode 100644 _sass/vendor/bourbon/functions/_flex-grid.scss create mode 100644 _sass/vendor/bourbon/functions/_golden-ratio.scss create mode 100644 _sass/vendor/bourbon/functions/_grid-width.scss create mode 100644 _sass/vendor/bourbon/functions/_modular-scale.scss create mode 100644 _sass/vendor/bourbon/functions/_px-to-em.scss create mode 100644 _sass/vendor/bourbon/functions/_px-to-rem.scss create mode 100644 _sass/vendor/bourbon/functions/_strip-units.scss create mode 100644 _sass/vendor/bourbon/functions/_tint-shade.scss create mode 100644 _sass/vendor/bourbon/functions/_transition-property-name.scss create mode 100644 _sass/vendor/bourbon/functions/_unpack.scss create mode 100644 _sass/vendor/bourbon/helpers/_convert-units.scss create mode 100644 _sass/vendor/bourbon/helpers/_gradient-positions-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_is-num.scss create mode 100644 _sass/vendor/bourbon/helpers/_linear-angle-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_linear-gradient-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_linear-positions-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_radial-arg-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_radial-gradient-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_radial-positions-parser.scss create mode 100644 _sass/vendor/bourbon/helpers/_render-gradients.scss create mode 100644 _sass/vendor/bourbon/helpers/_shape-size-stripper.scss create mode 100644 _sass/vendor/bourbon/helpers/_str-to-num.scss create mode 100644 _sass/vendor/bourbon/settings/_prefixer.scss create mode 100644 _sass/vendor/bourbon/settings/_px-to-em.scss create mode 100644 _sass/vendor/neat/_neat-helpers.scss create mode 100644 _sass/vendor/neat/_neat.scss create mode 100644 _sass/vendor/neat/functions/_new-breakpoint.scss create mode 100644 _sass/vendor/neat/functions/_private.scss create mode 100644 _sass/vendor/neat/grid/_fill-parent.scss create mode 100644 _sass/vendor/neat/grid/_grid.scss create mode 100644 _sass/vendor/neat/grid/_media.scss create mode 100644 _sass/vendor/neat/grid/_omega.scss create mode 100644 _sass/vendor/neat/grid/_outer-container.scss create mode 100644 _sass/vendor/neat/grid/_pad.scss create mode 100644 _sass/vendor/neat/grid/_private.scss create mode 100644 _sass/vendor/neat/grid/_reset.scss create mode 100644 _sass/vendor/neat/grid/_row.scss create mode 100644 _sass/vendor/neat/grid/_shift.scss create mode 100644 _sass/vendor/neat/grid/_span-columns.scss create mode 100644 _sass/vendor/neat/grid/_to-deprecate.scss create mode 100644 _sass/vendor/neat/grid/_visual-grid.scss create mode 100644 _sass/vendor/neat/settings/_grid.scss create mode 100644 _sass/vendor/neat/settings/_visual-grid.scss diff --git a/_posts/articles/2013-05-23-readability-feature-post.md b/_posts/articles/2013-05-23-readability-feature-post.md index 98d08a5..413e5a9 100644 --- a/_posts/articles/2013-05-23-readability-feature-post.md +++ b/_posts/articles/2013-05-23-readability-feature-post.md @@ -13,7 +13,7 @@ comments: true share: true --- -This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag. +This is a sample post with a large feature image up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag. Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies. diff --git a/_sass/elements.scss b/_sass/_elements.scss similarity index 94% rename from _sass/elements.scss rename to _sass/_elements.scss index d8f6d12..9eb3d41 100644 --- a/_sass/elements.scss +++ b/_sass/_elements.scss @@ -20,24 +20,25 @@ figure { } a { img { - @include translate(0, 0); + @include transform(translateY(0)); -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; - @include opacity(0.7); + opacity: 0.7; &:hover { - @include translate(0, -5px); + @include transform(translateY(-5px)); @include box-shadow(0 0 10px rgba($black, .20)); - @include opacity(1); + opacity: 1; } } } &.half { - @media #{$large} { + @include media($large) { img { - width: 310px; + width: 47.5%; float: left; - margin-right: 10px; + margin-right: 2.5%; + margin-bottom: 2.5%; } figcaption { clear: left; @@ -45,11 +46,12 @@ figure { } } &.third { - @media #{$large} { + @include media($large) { img { - width: 200px; + width: 30.8%; float: left; - margin-right: 10px; + margin-right: 2.5%; + margin-bottom: 2.5%; } figcaption { clear: left; @@ -74,11 +76,11 @@ table { display: inline-block; margin-bottom: 20px; padding: 8px 20px; - @include font-rem(14); + @include font-size(14); background-color: $black; color: $white; border: 2px solid $black !important; - @include rounded(20px); + border-radius: $border-radius; &:visited { color: $white; } diff --git a/_sass/forms.scss b/_sass/_forms.scss similarity index 98% rename from _sass/forms.scss rename to _sass/_forms.scss index d3b5eb8..b851c3b 100644 --- a/_sass/forms.scss +++ b/_sass/_forms.scss @@ -168,7 +168,7 @@ textarea[disabled], input[readonly], select[readonly], textarea[readonly] { - @include opacity(.5); + opacity: 0.5; cursor : not-allowed; } @@ -263,7 +263,7 @@ select:focus { box-shadow: none; border-radius: 0; background-clip: padding-box; - @include font-rem(32); + @include font-size(32); &:focus { box-shadow: none; outline: none; @@ -278,7 +278,7 @@ select:focus { display: none; } ::-webkit-input-placeholder { - @include font-rem(32); + @include font-size(32); } .search-field::-webkit-search-decoration, .search-field::-webkit-search-cancel-button, diff --git a/_sass/_grid-settings.scss b/_sass/_grid-settings.scss new file mode 100644 index 0000000..850392d --- /dev/null +++ b/_sass/_grid-settings.scss @@ -0,0 +1,9 @@ +@import "vendor/neat/neat-helpers"; + +// Change the grid settings +$visual_grid: false; +$max-width: em(960); + +// Define your breakpoints +$medium: new-breakpoint(min-width em(768) 12); +$large: new-breakpoint(min-width em(1000) 12); \ No newline at end of file diff --git a/_sass/page.scss b/_sass/_layout.scss similarity index 64% rename from _sass/page.scss rename to _sass/_layout.scss index 0dc2f2d..d75c642 100644 --- a/_sass/page.scss +++ b/_sass/_layout.scss @@ -4,13 +4,15 @@ body { width: 100%; background-color: $body-color; border-top: 5px solid $black; - @media #{$medium} { - @include font-rem(20); + @include media($medium) { + @include font-size(20); } } + // Top Navigation // -------------------------------------------------- + .navigation-wrapper { text-align: center; @include clearfix; @@ -28,7 +30,7 @@ body { float: left; list-style: none; text-align: center; - @include font-rem(14); + @include font-size(14,no); text-transform: uppercase; color: $white; a:hover { @@ -49,14 +51,14 @@ body { #site-nav { z-index: 9000; display: none; - @media #{$medium} { + @include media($medium) { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } &.closed { - @media #{$medium} { + @include media($medium) { display: block; } } @@ -65,7 +67,7 @@ body { max-height: 100%; li { float: none; - @media #{$medium} { + @include media($medium) { float: left; } } @@ -79,34 +81,37 @@ body { display: block; vertical-align: top; margin: 0; - padding: 4px 20px; + padding: 6px 20px; background-color: $black; + height: 44px; @include rounded(0); - @media #{$medium} { + @include media($medium) { display: none; } } + // Masthead // -------------------------------------------------- + .masthead { margin-top: 40px; @include clearfix; - @media #{$medium} { + @include media($medium) { margin-top: 0; } .wrap { text-align: center; - max-width: 27.5em; + max-width: em(440); padding-right: 20px; padding-left: 20px; - @media #{$medium} { - max-width: 45.5em; + @include media($medium) { + max-width: em(728); padding-right: 60px; padding-left: 60px; } - @media #{$large} { - max-width: 60em; + @include media($large) { + max-width: em(960); } } } @@ -114,22 +119,16 @@ body { img { width: 100px; height: 100px; - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-delay: .05s; - -moz-animation-delay: .05s; - -o-animation-delay: .05s; - animation-delay: .05s; + @include animation-duration(1s); + @include animation-delay(.05s); border: 4px solid $white; @include rounded(100px); - @media #{$medium} { + @include media($medium) { width: 150px; height: 150px; @include rounded(150px); } - @media #{$large} { + @include media($large) { width: 200px; height: 200px; @include rounded(200px); @@ -138,37 +137,29 @@ body { } .site-title { margin-bottom: 0; - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-delay: .75s; - -moz-animation-delay: .75s; - -o-animation-delay: .75s; - animation-delay: .75s; - a { color: $black; } + @include animation-duration(1s); + @include animation-delay(.75s); + a { + color: $black; + } } .site-description { margin-top: 0; font-family: $alt-font; - @include font-rem(16); + @include font-size(16); font-weight: 400; font-style: italic; - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-delay: 1s; - -moz-animation-delay: 1s; - -o-animation-delay: 1s; - animation-delay: 1s; - @media #{$medium} { - @include font-rem(20); + @include animation-duration(1s); + @include animation-delay(1s); + @include media($medium) { + @include font-size(20); } } + // Main // -------------------------------------------------- + #main { @include clearfix; } @@ -181,31 +172,25 @@ body { .entry-feature-image { margin: 20px 0 0; width: 100%; - @media #{$medium} { + @include media($medium) { margin-top: -75px; } - @media #{$large} { + @include media($large) { margin-top: -145px; } } .entry-header { - max-width: 640px; - width: 100%; - margin-right: auto; - margin-left: auto; - @media #{$large} { - max-width: 100%; - margin-right: 0; - margin-left: 0; - } + @include fill-parent; } .entry-tags { display: block; margin-top: 2em; text-transform: uppercase; - @include font-rem(16); + @include font-size(16); font-weight: 600; - a { color: $text-color; } + a { + color: $text-color; + } } span + .entry-title { margin-top: 0; @@ -213,7 +198,7 @@ span + .entry-title { .entry-title { font-family: $alt-font; font-style: italic; - @include font-rem(36); + @include font-size(36,yes,36); font-weight: 400; line-height: 1; letter-spacing: -3px; @@ -221,50 +206,34 @@ span + .entry-title { color: $black; text-decoration: underline; } - @media #{$medium} { - max-width: 600px; - @include font-rem(52); + @include media($medium) { + @include font-size(52,yes,54); } - @media #{$large} { - max-width: 800px; - @include font-rem(68); + @include media($large) { + @include font-size(68,yes,72); } } .entry-wrapper { - margin: 0 auto 3em; - max-width: 440px; - padding-right: 20px; - padding-left: 20px; - @include clearfix(); - @media #{$medium} { - max-width: 760px; - padding-right: 60px; - padding-left: 60px; - } - @media #{$large} { - max-width: 960px; - } + @include outer-container; + margin-top: 0; + margin-bottom: 3em; + padding-right: $gutter; + padding-left: $gutter; } .entry-meta { - max-width: 640px; - width: 100%; - margin-right: auto; - margin-bottom: 30px; - margin-left: auto; - display: block; + @include span-columns(12); text-transform: uppercase; - @include font-rem(14); - a { color: $text-color; } - @media #{$large} { - float: left; - width: 150px; - margin: 0 40px 40px 0; - padding: 0; + @include font-size(14); + a { + color: $text-color; + } + @include media($large) { + @include span-columns(2.5); } & > span { padding: 0 20px 10px 0; display: inline-block; - @media #{$large} { + @include media($large) { display: block; padding: 8px 0; border-bottom: 1px solid lighten($black,80); @@ -274,7 +243,7 @@ span + .entry-title { } .bio-photo { display: none; - @media #{$large} { + @include media($large) { display: block; width: 150px; height: 150px; @@ -284,15 +253,12 @@ span + .entry-title { } } .entry-content { - max-width: 640px; - width: 100%; - margin-right: auto; - margin-left: auto; + @include span-columns(12); p:first-child { margin-top: 0; } - @media #{$large} { - float: left; + @include media($large) { + @include span-columns(9.5); } p > a, li > a { @@ -319,14 +285,15 @@ span + .entry-title { // Page layout #home, #page { + .entry-wrapper { + max-width: em(760); + } .entry-title { text-align: center; max-width: 100%; } .entry-content { - @media #{$large} { - float: none; - } + @include span-columns(12); } } // Post index layout @@ -338,16 +305,17 @@ span + .entry-title { padding: 8px 0; border-bottom: 1px solid lighten($black,80); border-bottom: 1px solid rgba($black,.10); + @include font-size(18,no); @include clearfix; } a > span { float: right; } .entry-date { - @include font-rem(14); + @include font-size(14,no); text-transform: uppercase; display: none; - @media #{$medium} { + @include media($medium) { display: inline; } } @@ -361,7 +329,7 @@ span + .entry-title { @include clearfix; &.inline li { float: left; - @include font-rem(14); + @include font-size(14); line-height: 2.5; } a { @@ -372,32 +340,55 @@ span + .entry-title { text-decoration: none; span { vertical-align: super; - @include font-rem(10); + @include font-size(10); } } } -// Search -// -------------------------------------------------- -.search-wrapper { - display: none; - position: absolute; - top: 50px; - width: 90%; - padding-right: 5%; - padding-left: 5%; - @include clearfix; - @media #{$medium} { - top: 100px; - } +// Table of Contents +// table of contents +#markdown-toc { + font-family: $alt-font; + margin-top: $gutter; + margin-bottom: $gutter; + padding-left: 0; + border: 1px solid $border-color; + border-radius: $border-radius; + ul { + list-style-type: none; + padding-left: 0; + } + li { + @include font-size(16,no,18); + border-bottom: 1px solid $border-color; + list-style-type: none; + } + h6 { + margin: 0; + padding: (.25 * $gutter) (.5 * $gutter); + background: $table-stripe-color; + } + a { + display: block; + padding: (.25 * $gutter) (.5 * $gutter); + border-left: 2px solid transparent; + border-bottom: 0 solid transparent; + &:hover, + &:focus { + background: lighten($border-color,5); + } + } } + + // Footer // -------------------------------------------------- + .footer-wrapper { @include clearfix; margin: 2em auto; text-align: center; font-family: $alt-font; - @include font-rem(14); + @include font-size(14); font-style: italic; color: lighten($text-color,20); a { @@ -405,25 +396,45 @@ span + .entry-title { } } + +// Search Overlay +// -------------------------------------------------- + +.search-wrapper { + @include outer-container; + margin-top: 0; + padding-right: $gutter; + padding-left: $gutter; + height: 1px; +} + + // Social Icons // -------------------------------------------------- + .social-icons { margin: 1em 0 2em; a { padding: 4px 8px; - &:hover { color:$black; } + &:hover { + color: $black; + } } } -// Chrome Frame + +// Browser Upgrade // -------------------------------------------------- + .upgrade { padding: 10px; text-align: center; } -// Google Search + +// Google Search Form // -------------------------------------------------- + #goog-fixurl { ul { list-style: none; @@ -437,19 +448,11 @@ span + .entry-title { #goog-wm-qt { width: auto; margin-right: 10px; + padding: 8px 10px; + @include font-size(14); + border-width: 2px; + border-radius: $border-radius; } #goog-wm-sb { - display: inline-block; - padding: 8px 20px; - background-color: $black; - color: $white; - border: 2px solid $black !important; - @include rounded(20px); - &:visited { - color: $white; - } - &:hover { - background-color: $white; - color: $black; - } + @extend .btn; } diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss new file mode 100644 index 0000000..d7427f7 --- /dev/null +++ b/_sass/_mixins.scss @@ -0,0 +1,225 @@ +// UTILITY MIXINS +// -------------------------------------------------- + +// 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; +} + +// TYPOGRAPHY +// -------------------------------------------------- + +// Full-fat vertical rhythm +// ------------------------ +@mixin font-size($size) { + font-size: 0px + $size; + font-size: 0rem + $size / $doc-font-size; + line-height: 0 + round($doc-line-height / $size*10000) / 10000; + margin-bottom: 0px + $doc-line-height; + margin-bottom: 0rem + ($doc-line-height / $doc-font-size); +} + +// Just the REMs +// ------------- +@mixin font-rem($size) { + font-size: 0px + $size; + font-size: 0rem + $size / $doc-font-size; +} + +// Just font-size and line-height +// ------------------------------ +@mixin font($size) { + font-size: 0px + $size; + font-size: 0rem + $size / $doc-font-size; + line-height: 0 + round($doc-line-height / $size*10000) / 10000; +} + +@mixin text-overflow() { +overflow: hidden; +text-overflow: ellipsis; +white-space: nowrap; } + +// MIXINS +// -------------------------------------------------- + +%tab-focus { + // Default + outline: thin dotted #333; + // Webkit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + + +// Typography +// -------------------------------------------------- + +/* Vertical Rhythm + https://github.com/sturobson/Sassifaction + + In this mixin you can specify the font size in PX and + it will calculate the REM based on your $doc-font-size + & $doc-line-height variables. + + @include font-size(24); + + It will also create a bottom margin based on the + $doc-font-size & $doc-line-height variables unless you + specify that it shouldn't have one. + + @include font-size(24, no); + + Or if you want to specify a different bottom margin to + be generated. + + @include font-size(24,32); + + This mixin also generates a pixel-less line height by + default unless you specify that you either don't want + one where I'd suggest declaring 1 within the mixin. + + @include font-size(24, yes, 1); + + There's also the option to specify a different line-height + for it to generate to, where you would specify the + line-height in (effectively) it's pixel value. + + @include font-size(24, yes, 40); +*/ + +@mixin font-size($size, $margin: yes, $line-height: $doc-line-height) { + + // generates the font-size in REMs with a PX fallback + font-size: 0px + $size; + font-size: 0rem + $size / $doc-font-size; + + // line-height functions + //////////////////////// + + // if you a line-height is specified in the mixin + @if $line-height != $doc-line-height and $line-height != 1 { + line-height: ceil($size / $line-height) * ($line-height / $size); + } + + // if $line-height == 1 + // because, typing 1 is quicker than 16 + @else if $line-height == 1 { + line-height: 1; + } + + // normal $line-height + // if the line-height is left. + @else { + line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size); + } + + // margin-bottom functions + ////////////////////////// + + // if no is bottom margin is required + @if $margin == no { + margin-bottom: 0; + } + + // if a specific bottom margin is required + @else if $margin != yes and $margin != no { + margin-bottom: 0px + $margin; + margin-bottom: 0rem + ($margin / $doc-font-size); + } + + // if you're keeping the vertical rhythm with the margin + @else { + margin-bottom: 0px + $doc-line-height; + margin-bottom: 0rem + ($doc-line-height / $doc-font-size); + } +} + +// ROUND CORNERS +// -------------------------------------------------- + +// @include rounded(VALUE); +@mixin rounded($radius:4px) { +border-radius : $radius; } + +// @include border-radius(VALUE,VALUE,VALUE,VALUE); +@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; +background-clip : padding-box; } + +// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) +@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { +-webkit-box-shadow : $shadow; +-moz-box-shadow : $shadow; +box-shadow : $shadow; } + +// @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); } + +// @include text-shadow(); +@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { +text-shadow : $shadow; } + +// @include opacity(VALUE); +@mixin opacity($opacity : .5) { +opacity : $opacity; } + +// For image replacement +@mixin hide-text() { +text-indent : 100%; +white-space : nowrap; +overflow : hidden; } + +// Hide from visual and speaking browsers +@mixin hidden() { +display : none !important; +visibility : hidden; } +.hidden { + display: none; + visibility: hidden; +} + +// Hide but maintain layout +@mixin invisible() { +visibility : hidden; } + +// @include resize(VALUE) (none, both, horizontal, vertical, inherit) +@mixin resize($direction: both) { +resize : $direction; +overflow : auto; } + +// @include userselect(VALUE) (all, element, none, text) +@mixin user-select($select) { +-webkit-user-select : $select; +-moz-user-select : $select; +-o-user-select : $select; +user-select : $select; } + +// Hidden but available to speaking browsers +@mixin visuallyhidden() { +overflow : hidden; +position : absolute; +clip : rect(0 0 0 0); +height : 1px; +width : 1px; +margin : -1px; +padding : 0; +border : 0; } \ No newline at end of file diff --git a/_sass/pygments.scss b/_sass/_pygments.scss similarity index 98% rename from _sass/pygments.scss rename to _sass/_pygments.scss index 0cec2fc..936df99 100644 --- a/_sass/pygments.scss +++ b/_sass/_pygments.scss @@ -1,10 +1,9 @@ .highlight { background-color: #efefef; font-family: $code-font; - @include font(12); color: #333332; margin-bottom: 1.5em; - @include rounded(4px); + @include rounded($border-radius); pre { position: relative; margin: 0; diff --git a/_sass/reset.scss b/_sass/_reset.scss similarity index 55% rename from _sass/reset.scss rename to _sass/_reset.scss index 87a9c53..489fcb3 100644 --- a/_sass/reset.scss +++ b/_sass/_reset.scss @@ -1,12 +1,16 @@ -// -// Reset CSS +// STYLE RESETS // Adapted from http://github.com/necolas/normalize.css // -------------------------------------------------- +// Apply a natural box layout model to all elements +*, *:before, *:after { + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + } -// Display in IE6-9 and FF3 -// ------------------------- +// Remove margin +body { margin: 0; } +// Display HTML5 elements in IE6-9 and FF3 article, aside, details, @@ -21,8 +25,6 @@ section { } // Display block in IE6-9 and FF3 -// ------------------------- - audio, canvas, video { @@ -32,33 +34,28 @@ video { } // Prevents modern browsers from displaying 'audio' without controls -// ------------------------- - audio:not([controls]) { - display: none; + display: none; } -// Base settings -// ------------------------- - +// Base font settings html { font-size: 100%; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } -// Focus states +// Apply focus state a:focus { - @include tab-focus; + @extend %tab-focus; } -// Hover & Active + +// Remove outline a:hover, a:active { outline: 0; } -// Prevents sub and sup affecting line-height in all browsers -// ------------------------- - +// Prevent sub and sup affecting line-height in all browsers sub, sup { position: relative; @@ -73,21 +70,17 @@ sub { bottom: -0.25em; } -// Blockquote -// ------------------------- - +// Normalize blockquotes blockquote { margin: 0; } // Img border in a's and image quality -// ------------------------- - img { - /* Responsive images (ensure images don't scale beyond their parents) */ - max-width: 100%; /* Part 1: Set a maxium relative to the parent */ - width: auto\9; /* IE7-8 need help adjusting responsive images */ - height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ + // Responsive images (ensure images don't scale beyond their parents) + max-width: 100%; // Part 1: Set a maximum relative to the parent + width: auto\9; // IE7-8 need help adjusting responsive images + height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching vertical-align: middle; border: 0; @@ -100,10 +93,7 @@ img { max-width: none; } -// Forms -// ------------------------- - -// Font size in all browsers, margin changes, misc consistency +// Consistent form font size in all browsers, margin changes, misc button, input, select, @@ -150,74 +140,4 @@ input[type="search"]::-webkit-search-cancel-button { textarea { overflow: auto; // Remove vertical scrollbar in IE6-9 vertical-align: top; // Readability and alignment cross-browser -} - - -// Printing -// ------------------------- -// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css - -@media print { - - * { - text-shadow: none !important; - color: #000 !important; // Black prints faster: h5bp.com/s - background: transparent !important; - box-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - // Don't show links for images, or javascript/internal links - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; // h5bp.com/t - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - @page { - margin: 0.5cm; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } } \ No newline at end of file diff --git a/_sass/_site.scss b/_sass/_site.scss new file mode 100644 index 0000000..88d4d29 --- /dev/null +++ b/_sass/_site.scss @@ -0,0 +1,269 @@ +// Selection +// -------------------------------------------------- + +::-moz-selection { + background-color: lighten($base-color, 65%); + color: $base-color; + text-shadow: none; +} +::selection { + background-color: lighten($base-color, 65%); + color: $base-color; + text-shadow: none; +} + + +// Body +// -------------------------------------------------- + +body { + font-family: $base-font; + color: $text-color; +} + + +// TYPOGRAPHY +// -------------------------------------------------- + +body { + font-family: $base-font; + color: $text-color; + @include font-size(16); +} + +p { + @include font-size(18,yes,28); +} + +li { + @include font-size(16,12,24); +} + +// Headings +h1, h2, h3, h4, h5, h6 { + font-family: $heading-font; + text-rendering: optimizeLegibility; // Fix the character spacing for headings +} +h1 { + @include font-size(36); +} +h2 { + @include font-size(32); +} +h3 { + @include font-size(28); +} +h4 { + @include font-size(24); +} +h5 { + @include font-size(20); +} +h6 { + @include font-size(18); +} + +u, +ins { + text-decoration: none; + border-bottom: 1px solid $text-color; +} + + +// Tables +table { + border-collapse: collapse; + margin: ((0px + $doc-line-height) / 2) 0; + margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0; + width: 100%; +} +tbody { + tr:hover > td, tr:hover > th { + background-color: $table-hover-color; + } +} +thead { + tr:first-child td { + border-bottom: 2px solid $table-border-color; + } +} +th { + padding: (0px + $doc-line-height) / 2; + padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; + font-family: $alt-font; + font-weight: bold; + text-align: left; + background-color: $table-header-color; + border-bottom: 1px solid darken($border-color, 15%); +} +td { + border-bottom: 1px solid $border-color; + padding: (0px + $doc-line-height) / 2; + padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; + @include font-size(18); +} +tr, td, th { + vertical-align: middle; +} + + +// Links +// -------------------------------------------------- + +a { + text-decoration: none; + color: $link-color; + &:visited { + color: lighten($link-color, 20); + } + &:hover { + color: darken($link-color, 20); + } + &:focus { + outline: thin dotted; + color: darken($link-color, 20); + } + &:hover, + &:active { + outline: 0; + } +} + +.link-arrow { + font-weight: 100; + text-decoration: underline; + font-style: normal; +} + + +// Figures +// -------------------------------------------------- + +figcaption { + padding-top: 10px; + @include font-size(14); + line-height: 1.3; + color: lighten($text-color, 10); +} + + +// Feature Image Caption +// -------------------------------------------------- + +.image-credit { + margin: 0 auto; + max-width: 440px; + padding-top: 5px; + padding-right: 20px; + padding-left: 20px; + text-align: right; + @include font-size(14,no); + line-height: 1.3; + color: lighten($text-color, 30); + @include clearfix(); + @include media($medium) { + max-width: 760px; + padding-right: 60px; + padding-left: 60px; + } + @include media($large) { + max-width: 960px; + } + a { + color: lighten($text-color, 30); + } +} + + +// Note text +// -------------------------------------------------- + +.notice { + margin-top: 1.5em; + padding: .5em 1em; + text-indent: 0; + @include font-size(16); + background-color: lighten($black, 95); + border: 1px solid lighten($black, 90); + @include rounded(4px); +} + + +// Blockquotes +// -------------------------------------------------- + +blockquote { + font-family: $alt-font; + font-style: italic; + @include font-size(16); + padding-left: 20px; + border-left: 8px solid $black; +} + + +// Footnotes +// -------------------------------------------------- + +.footnotes { + @include font-size(14); + font-family: $base-font; +} + + +// Code +// -------------------------------------------------- + +tt, code, kbd, samp, pre { + font-family: $code-font; +} +p, +li { + code { + @include font-size(14); + white-space: nowrap; + margin: 0 2px; + padding: 0 5px; + border: 1px solid lighten($black, 90); + background-color: lighten($black, 95); + @include rounded(3px); + } +} +pre { + @include font-size(14); + overflow-x: auto; +} + + +// Utility Classes +// -------------------------------------------------- + +.wrap { + margin: 0 auto; +} +.all-caps { + text-transform: uppercase; +} +.pull-left { + float: left; + padding-right: $gutter; +} +.pull-right { + float: right; + padding-left: $gutter; +} +.unstyled-list { + list-style: none; + margin-left: 0; + padding-left: 0; + li { + list-style-type: none; + } +} + + +// Global Transition +// --------------------------------------------------- + +b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { + @include transition(all .2s ease); +} \ No newline at end of file diff --git a/_sass/_variables.scss b/_sass/_variables.scss new file mode 100644 index 0000000..a63f9da --- /dev/null +++ b/_sass/_variables.scss @@ -0,0 +1,46 @@ +// TYPOGRAPHY ================================================ +$base-font: 'source-sans-pro', sans-serif; +$heading-font: $base-font; +$caption-font: $base-font; +$code-font: 'source-code-pro', monospace; +$alt-font: 'volkhov', serif; + +$doc-font-size: 16; +$doc-line-height: 24; + +$border-radius: 3px; + + +// set-up the body font-size / line-height +body { + margin-top: 0px + $doc-line-height; + font-size: 0px + $doc-font-size; +} + + +// COLORS ===================================================== +$body-color : #fff; +$text-color : #222; +$base-color : #343434; +$comp-color : spin($base-color, 180); +$border-color : #ddd; +$white : #fff; +$black : #000; +$accent-color : $black; +$link-color : #222; + +$table-border-color : $border-color; +$table-border : 1px solid $table-border-color; +$table-background : $body-color; +$table-header-color : lighten($table-background, 10); +$table-hover-color : darken($table-background, 2); +$table-stripe-color : darken($table-background, 4); +$table-stripe-color-hover : darken($table-stripe-color, 5); + + +// MEDIA QUERIES ============================================== +$micro : "only screen and (min-width: 30em)"; +$small : "only screen and (min-width: 37.5em)"; +$medium : "only screen and (min-width: 48em)"; +$large : "only screen and (min-width: 62em)"; +$x-large : "only screen and (min-width: 86.375em)"; diff --git a/_sass/coderay.scss b/_sass/coderay.scss deleted file mode 100644 index 200fd8c..0000000 --- a/_sass/coderay.scss +++ /dev/null @@ -1,133 +0,0 @@ -.CodeRay { - background-color: #efefef; - font-family: $code-font; - @include font(12); - color: #333332; - margin-bottom: 1.5em; - @include rounded(4px); - pre { - margin: 0px; - padding: 1em; - } -} - -div.CodeRay { } -span.CodeRay { white-space: pre; border: 0px; padding: 2px } - -table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px } -table.CodeRay td { - padding: 1em 0.5em; - vertical-align: top; -} - -.CodeRay .line-numbers, .CodeRay .no { - background-color: #ECECEC; - color: #AAA; - text-align: right; -} - -.CodeRay .line-numbers a { - color: #AAA; -} - -.CodeRay .line-numbers tt { font-weight: bold } -.CodeRay .line-numbers .highlighted { color: red } -.CodeRay .line { display: block; float: left; width: 100%; } -.CodeRay span.line-numbers { padding: 0 24px 0 4px } -.CodeRay .code { width: 100% } - -ol.CodeRay { font-size: 10pt } -ol.CodeRay li { white-space: pre } - -.CodeRay .code pre { overflow: auto } -.CodeRay .debug { color:white ! important; background:blue ! important; } - -.CodeRay .annotation { color:#007 } -.CodeRay .attribute-name { color:#f08 } -.CodeRay .attribute-value { color:#700 } -.CodeRay .binary { color:#509; font-weight:bold } -.CodeRay .comment { color:#998; font-style: italic;} -.CodeRay .char { color:#04D } -.CodeRay .char .content { color:#04D } -.CodeRay .char .delimiter { color:#039 } -.CodeRay .class { color:#458; font-weight:bold } -.CodeRay .complex { color:#A08; font-weight:bold } -.CodeRay .constant { color:teal; } -.CodeRay .color { color:#0A0 } -.CodeRay .class-variable { color:#369 } -.CodeRay .decorator { color:#B0B; } -.CodeRay .definition { color:#099; font-weight:bold } -.CodeRay .directive { color:#088; font-weight:bold } -.CodeRay .delimiter { color:black } -.CodeRay .doc { color:#970 } -.CodeRay .doctype { color:#34b } -.CodeRay .doc-string { color:#D42; font-weight:bold } -.CodeRay .escape { color:#666; font-weight:bold } -.CodeRay .entity { color:#800; font-weight:bold } -.CodeRay .error { color:#F00; background-color:#FAA } -.CodeRay .exception { color:#C00; font-weight:bold } -.CodeRay .filename { color:#099; } -.CodeRay .function { color:#900; font-weight:bold } -.CodeRay .global-variable { color:teal; font-weight:bold } -.CodeRay .hex { color:#058; font-weight:bold } -.CodeRay .integer { color:#099; } -.CodeRay .include { color:#B44; font-weight:bold } -.CodeRay .inline { color: black } -.CodeRay .inline .inline { background: #ccc } -.CodeRay .inline .inline .inline { background: #bbb } -.CodeRay .inline .inline-delimiter { color: #D14; } -.CodeRay .inline-delimiter { color: #D14; } -.CodeRay .important { color:#f00; } -.CodeRay .interpreted { color:#B2B; font-weight:bold } -.CodeRay .instance-variable { color:teal } -.CodeRay .label { color:#970; font-weight:bold } -.CodeRay .local-variable { color:#963 } -.CodeRay .octal { color:#40E; font-weight:bold } -.CodeRay .operator { } -.CodeRay .predefined-constant { font-weight:bold } -.CodeRay .predefined { color:#369; font-weight:bold } -.CodeRay .preprocessor { color:#579; } -.CodeRay .pseudo-class { color:#00C; font-weight:bold } -.CodeRay .predefined-type { color:#074; font-weight:bold } -.CodeRay .reserved, .keyword { color:#000; font-weight:bold } - -.CodeRay .key { color: #808; } -.CodeRay .key .delimiter { color: #606; } -.CodeRay .key .char { color: #80f; } -.CodeRay .value { color: #088; } - -.CodeRay .regexp { background-color:#fff0ff } -.CodeRay .regexp .content { color:#808 } -.CodeRay .regexp .delimiter { color:#404 } -.CodeRay .regexp .modifier { color:#C2C } -.CodeRay .regexp .function { color:#404; font-weight: bold } - -.CodeRay .string { color: #D20; } -.CodeRay .string .string { } -.CodeRay .string .string .string { background-color:#ffd0d0 } -.CodeRay .string .content { color: #D14; } -.CodeRay .string .char { color: #D14; } -.CodeRay .string .delimiter { color: #D14; } - -.CodeRay .shell { color:#D14 } -.CodeRay .shell .content { } -.CodeRay .shell .delimiter { color:#D14 } - -.CodeRay .symbol { color:#990073 } -.CodeRay .symbol .content { color:#A60 } -.CodeRay .symbol .delimiter { color:#630 } - -.CodeRay .tag { color:#070 } -.CodeRay .tag-special { color:#D70; font-weight:bold } -.CodeRay .type { color:#339; font-weight:bold } -.CodeRay .variable { color:#036 } - -.CodeRay .insert { background: #afa; } -.CodeRay .delete { background: #faa; } -.CodeRay .change { color: #aaf; background: #007; } -.CodeRay .head { color: #f8f; background: #505 } - -.CodeRay .insert .insert { color: #080; font-weight:bold } -.CodeRay .delete .delete { color: #800; font-weight:bold } -.CodeRay .change .change { color: #66f; } -.CodeRay .head .head { color: #f4f; } \ No newline at end of file diff --git a/_sass/grid.scss b/_sass/grid.scss deleted file mode 100644 index ffb89e7..0000000 --- a/_sass/grid.scss +++ /dev/null @@ -1,47 +0,0 @@ -// Defining number of columns in the grid. -// Common Values would be 12, 16 or 24 -$width: 100%; -$def_grid: 12; -$margin: 0; - -@mixin container(){ - margin:0 auto; - width:$width; -} - -// Works out the width of elements based -// on total number of columns and width -// number of columns being displayed. -// Removes 20px for margins -@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){ - display:$display; - float:$float; - width:(100%/$grid * $cols) - ($margin * 2); -} - -// Allows for padding before element -@mixin prefix($grid:$def_grid,$cols:''){ - margin-left:(100%/$grid * $cols); -} -// Allows for padding after element -@mixin suffix($grid:$def_grid,$cols:''){ - margin-right:(100%/$grid * $cols); -} -// Removes left margin -@mixin first(){ - margin-left:0; -} -// Removes right margin -@mixin last(){ - margin-right:0; -} - -@mixin push($grid:$def_grid,$move:'') { - position:relative; - left:(100%/$grid * $move); -} - -@mixin pull($grid:$def_grid,$move:''){ - position:relative; - left:(100%/$grid * $move) * -1; -} \ No newline at end of file diff --git a/_sass/mixins.scss b/_sass/mixins.scss deleted file mode 100644 index 041db82..0000000 --- a/_sass/mixins.scss +++ /dev/null @@ -1,269 +0,0 @@ -// UTILITY MIXINS -// -------------------------------------------------- - -// Clearfix -// -------------------- -// For clearing floats like a boss h5bp.com/q -@mixin clearfix { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} - -// 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; -} - -// TYPOGRAPHY -// -------------------------------------------------- - -// Full-fat vertical rhythm -// ------------------------ -@mixin font-size($size) { - font-size: 0px + $size; - font-size: 0rem + $size / $doc-font-size; - line-height: 0 + round($doc-line-height / $size*10000) / 10000; - margin-bottom: 0px + $doc-line-height; - margin-bottom: 0rem + ($doc-line-height / $doc-font-size); -} - -// Just the REMs -// ------------- -@mixin font-rem($size) { - font-size: 0px + $size; - font-size: 0rem + $size / $doc-font-size; -} - -// Just font-size and line-height -// ------------------------------ -@mixin font($size) { - font-size: 0px + $size; - font-size: 0rem + $size / $doc-font-size; - line-height: 0 + round($doc-line-height / $size*10000) / 10000; -} - -@mixin text-overflow() { -overflow: hidden; -text-overflow: ellipsis; -white-space: nowrap; } - -// GRADIENTS -// -------------------------------------------------- - -@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; } - -// ROUND CORNERS -// -------------------------------------------------- - -// @include rounded(VALUE); -@mixin rounded($radius:4px) { -border-radius : $radius; } - -// @include border-radius(VALUE,VALUE,VALUE,VALUE); -@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; -background-clip : padding-box; } - -// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) -@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { --webkit-box-shadow : $shadow; --moz-box-shadow : $shadow; -box-shadow : $shadow; } - -// @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); } - -// @include text-shadow(); -@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { -text-shadow : $shadow; } - -// @include opacity(VALUE); -@mixin opacity($opacity : .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;} - -// BACKGROUND -// -------------------------------------------------- - -// @include background-alpha(VALUE VALUE); -@mixin background-alpha($color: $white, $alpha: 1) { -background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); } - -// @include background-size(VALUE VALUE); -@mixin background-size($size){ --webkit-background-size : $size; --moz-background-size : $size; --o-background-size : $size; -background-size : $size; } - -// @include background-clip(VALUE); (border-box, padding-box, content-box) -@mixin background-clip($clip) { --webkit-background-clip : $clip; --moz-background-clip : $clip; -background-clip : $clip; } - -// @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; } - -// For image replacement -@mixin hide-text() { -text-indent : 100%; -white-space : nowrap; -overflow : hidden; } - -// Hide from visual and speaking browsers -@mixin hidden() { -display : none !important; -visibility : hidden; } -.hidden { - display: none; - visibility: hidden; -} - -// Hide but maintain layout -@mixin invisible() { -visibility : hidden; } - -// @include resize(VALUE) (none, both, horizontal, vertical, inherit) -@mixin resize($direction: both) { -resize : $direction; -overflow : auto; } - -// @include userselect(VALUE) (all, element, none, text) -@mixin user-select($select) { --webkit-user-select : $select; --moz-user-select : $select; --o-user-select : $select; -user-select : $select; } - -// Hidden but available to speaking browsers -@mixin visuallyhidden() { -overflow : hidden; -position : absolute; -clip : rect(0 0 0 0); -height : 1px; -width : 1px; -margin : -1px; -padding : 0; -border : 0; } \ No newline at end of file diff --git a/_sass/site.scss b/_sass/site.scss deleted file mode 100644 index dd235ff..0000000 --- a/_sass/site.scss +++ /dev/null @@ -1,46 +0,0 @@ -// Selection -// -------------------------------------------------- - -::-moz-selection { - background-color: lighten($base-color, 65%); - color: $base-color; - text-shadow: none; -} -::selection { - background-color: lighten($base-color, 65%); - color: $base-color; - text-shadow: none; -} - - -// Utility Classes -// -------------------------------------------------- - -.wrap { - margin: 0 auto; -} -.all-caps { - text-transform: uppercase; -} -.pull-left { - float: left; -} -.pull-right { - float:right; -} -.unstyled-list { - list-style: none; - margin-left: 0; - padding-left: 0; - li { - list-style-type: none; - } -} - - -// Global Transition -// --------------------------------------------------- - -b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { - @include transition(all .2s ease); -} \ No newline at end of file diff --git a/_sass/typography.scss b/_sass/typography.scss deleted file mode 100644 index 0bb29d8..0000000 --- a/_sass/typography.scss +++ /dev/null @@ -1,125 +0,0 @@ -// Body -// -------------------------------------------------- -body { - font-family: $base-font; - color: $text-color; -} - -// Headings -// -------------------------------------------------- -h1, h2, h3, h4, h5, h6 { - font-family: $heading-font; -} - -// Links -// -------------------------------------------------- -a { - text-decoration: none; - color: $link-color; - &:visited { - color: lighten($link-color, 20); - } - &:hover { - color: darken($link-color, 20); - } - &:focus { - outline: thin dotted; - color: darken($link-color, 20); - } - &:hover, - &:active { - outline: 0; - } -} - -.link-arrow { - font-weight: 100; - text-decoration: underline; - font-style: normal; -} - -// Figures -// -------------------------------------------------- -figcaption { - padding-top: 10px; - @include font(14); - line-height: 1.3; - color: lighten($text-color, 10); -} - -// Feature Image Caption -// -------------------------------------------------- -.image-credit { - margin: 0 auto; - max-width: 440px; - padding-top: 5px; - padding-right: 20px; - padding-left: 20px; - text-align: right; - @include font(14); - line-height: 1.3; - color: lighten($text-color, 30); - @include clearfix(); - @media #{$medium} { - max-width: 760px; - padding-right: 60px; - padding-left: 60px; - } - @media #{$large} { - max-width: 960px; - } - a { - color: lighten($text-color, 30); - } -} - -// Note text -// -------------------------------------------------- -.notice { - margin-top: 1.5em; - padding: .5em 1em; - text-indent: 0; - @include font-rem(16); - background-color: lighten($black, 95); - border: 1px solid lighten($black, 90); - @include rounded(4px); -} - -// Blockquotes -// -------------------------------------------------- -blockquote { - font-family: $alt-font; - font-style: italic; - @include font-size(16); - padding-left: 20px; - border-left: 8px solid $black; -} - -// Footnotes -// -------------------------------------------------- -.footnotes { - @include font(14); - font-family: $base-font; -} - -// Code -// -------------------------------------------------- -tt, code, kbd, samp, pre { - font-family: $code-font; -} -p, -li { - code { - @include font(12); - white-space: nowrap; - margin: 0 2px; - padding: 0 5px; - border: 1px solid lighten($black, 90); - background-color: lighten($black, 95); - @include rounded(3px); - } -} -pre { - @include font(12); - overflow-x: auto; -} diff --git a/_sass/variables.scss b/_sass/variables.scss deleted file mode 100644 index 415b0c9..0000000 --- a/_sass/variables.scss +++ /dev/null @@ -1,36 +0,0 @@ -// TYPOGRAPHY ================================================ -$base-font: 'source-sans-pro', sans-serif; -$heading-font: $base-font; -$caption-font: $base-font; -$code-font: 'source-code-pro', monospace; -$alt-font: 'volkhov', serif; - -$doc-font-size: 16; -$doc-line-height: 24; - - -// set-up the body font-size / line-height -body { - margin-top: 0px + $doc-line-height; - font-size: 0px + $doc-font-size; -} - - -// COLORS ===================================================== -$body-color : #fff; -$text-color : #222; -$base-color : #343434; -$comp-color : spin($base-color, 180); -$border-color : $base-color; -$white : #fff; -$black : #000; -$accent-color : $black; -$link-color : #222; - - -// MEDIA QUERIES ============================================== -$micro : "only screen and (min-width: 30em)"; -$small : "only screen and (min-width: 37.5em)"; -$medium : "only screen and (min-width: 48em)"; -$large : "only screen and (min-width: 62em)"; -$x-large : "only screen and (min-width: 86.375em)"; diff --git a/_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss b/_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 0000000..f946b3b --- /dev/null +++ b/_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss @@ -0,0 +1,8 @@ +//************************************************************************// +// These mixins/functions are deprecated +// They will be removed in the next MAJOR version release +//************************************************************************// +@mixin inline-block { + display: inline-block; + @warn "inline-block mixin is deprecated and will be removed in the next major version release"; +} diff --git a/_sass/vendor/bourbon/_bourbon.scss b/_sass/vendor/bourbon/_bourbon.scss new file mode 100644 index 0000000..11d52d7 --- /dev/null +++ b/_sass/vendor/bourbon/_bourbon.scss @@ -0,0 +1,78 @@ +// Settings +@import "settings/prefixer"; +@import "settings/px-to-em"; + +// Custom Helpers +@import "helpers/convert-units"; +@import "helpers/gradient-positions-parser"; +@import "helpers/is-num"; +@import "helpers/linear-angle-parser"; +@import "helpers/linear-gradient-parser"; +@import "helpers/linear-positions-parser"; +@import "helpers/linear-side-corner-parser"; +@import "helpers/radial-arg-parser"; +@import "helpers/radial-positions-parser"; +@import "helpers/radial-gradient-parser"; +@import "helpers/render-gradients"; +@import "helpers/shape-size-stripper"; +@import "helpers/str-to-num"; + +// Custom Functions +@import "functions/assign"; +@import "functions/color-lightness"; +@import "functions/flex-grid"; +@import "functions/golden-ratio"; +@import "functions/grid-width"; +@import "functions/modular-scale"; +@import "functions/px-to-em"; +@import "functions/px-to-rem"; +@import "functions/strip-units"; +@import "functions/tint-shade"; +@import "functions/transition-property-name"; +@import "functions/unpack"; + +// CSS3 Mixins +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/backface-visibility"; +@import "css3/background"; +@import "css3/background-image"; +@import "css3/border-image"; +@import "css3/border-radius"; +@import "css3/box-sizing"; +@import "css3/calc"; +@import "css3/columns"; +@import "css3/filter"; +@import "css3/flex-box"; +@import "css3/font-face"; +@import "css3/font-feature-settings"; +@import "css3/hyphens"; +@import "css3/hidpi-media-query"; +@import "css3/image-rendering"; +@import "css3/keyframes"; +@import "css3/linear-gradient"; +@import "css3/perspective"; +@import "css3/radial-gradient"; +@import "css3/transform"; +@import "css3/transition"; +@import "css3/user-select"; +@import "css3/placeholder"; + +// Addons & other mixins +@import "addons/button"; +@import "addons/clearfix"; +@import "addons/directional-values"; +@import "addons/ellipsis"; +@import "addons/font-family"; +@import "addons/hide-text"; +@import "addons/html5-input-types"; +@import "addons/position"; +@import "addons/prefixer"; +@import "addons/retina-image"; +@import "addons/size"; +@import "addons/timing-functions"; +@import "addons/triangle"; +@import "addons/word-wrap"; + +// Soon to be deprecated Mixins +@import "bourbon-deprecated-upcoming"; diff --git a/_sass/vendor/bourbon/addons/_button.scss b/_sass/vendor/bourbon/addons/_button.scss new file mode 100644 index 0000000..14a89e4 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_button.scss @@ -0,0 +1,374 @@ +@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { + + @if type-of($style) == string and type-of($base-color) == color { + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == string and type-of($base-color) == number { + $padding: $text-size; + $text-size: $base-color; + $base-color: #4294f0; + + @if $padding == inherit { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == color and type-of($base-color) == color { + $base-color: $style; + $style: simple; + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == color and type-of($base-color) == number { + $padding: $text-size; + $text-size: $base-color; + $base-color: $style; + $style: simple; + + @if $padding == inherit { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == number { + $padding: $base-color; + $text-size: $style; + $base-color: #4294f0; + $style: simple; + + @if $padding == #4294f0 { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } +} + + +// Selector Style Button +//************************************************************************// +@mixin buttonstyle($type, $b-color, $t-size, $pad) { + // Grayscale button + @if $type == simple and $b-color == grayscale($b-color) { + @include simple($b-color, true, $t-size, $pad); + } + + @if $type == shiny and $b-color == grayscale($b-color) { + @include shiny($b-color, true, $t-size, $pad); + } + + @if $type == pill and $b-color == grayscale($b-color) { + @include pill($b-color, true, $t-size, $pad); + } + + @if $type == flat and $b-color == grayscale($b-color) { + @include flat($b-color, true, $t-size, $pad); + } + + // Colored button + @if $type == simple { + @include simple($b-color, false, $t-size, $pad); + } + + @else if $type == shiny { + @include shiny($b-color, false, $t-size, $pad); + } + + @else if $type == pill { + @include pill($b-color, false, $t-size, $pad); + } + + @else if $type == flat { + @include flat($b-color, false, $t-size, $pad); + } +} + + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border; + border-radius: 3px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: $padding; + text-decoration: none; + text-shadow: 0 1px 0 $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } + + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + + border: 1px solid $border-active; + box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; + } +} + + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + + border: 1px solid $border; + border-bottom: 1px solid $border-bottom; + border-radius: 5px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + padding: $padding; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + + &:hover:not(:disabled) { + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + + box-shadow: inset 0 0 20px 0 $inset-shadow-active; + } +} + + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + border-radius: 16px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: normal; + line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); + padding: $padding; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + text-shadow: 0 -1px 1px $text-shadow-hover; + background-clip: padding-box; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } + + background: $active-color; + border: 1px solid $border-active; + border-bottom: 1px solid $border-bottom-active; + box-shadow: inset 0 0 6px 3px $inset-shadow-active; + text-shadow: 0 -1px 1px $text-shadow-active; + } +} + + + +// Flat Button +//************************************************************************// +@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + } + + background-color: $base-color; + border-radius: 3px; + border: none; + color: $color; + display: inline-block; + font-size: inherit; + font-weight: bold; + padding: 7px 18px; + text-decoration: none; + background-clip: padding-box; + + &:hover:not(:disabled){ + $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + } + + background-color: $base-color-hover; + cursor: pointer; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + + @if $grayscale == true { + $base-color-active: grayscale($base-color-active); + } + + background-color: $base-color-active; + cursor: pointer; + } +} diff --git a/_sass/vendor/bourbon/addons/_clearfix.scss b/_sass/vendor/bourbon/addons/_clearfix.scss new file mode 100644 index 0000000..783cfbc --- /dev/null +++ b/_sass/vendor/bourbon/addons/_clearfix.scss @@ -0,0 +1,23 @@ +// Modern micro clearfix provides an easy way to contain floats without adding additional markup. +// +// Example usage: +// +// // Contain all floats within .wrapper +// .wrapper { +// @include clearfix; +// .content, +// .sidebar { +// float : left; +// } +// } + +@mixin clearfix { + &:after { + content:""; + display:table; + clear:both; + } +} + +// Acknowledgements +// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) diff --git a/_sass/vendor/bourbon/addons/_directional-values.scss b/_sass/vendor/bourbon/addons/_directional-values.scss new file mode 100644 index 0000000..742f103 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_directional-values.scss @@ -0,0 +1,111 @@ +// directional-property mixins are shorthands +// for writing properties like the following +// +// @include margin(null 0 10px); +// ------ +// margin-right: 0; +// margin-bottom: 10px; +// margin-left: 0; +// +// - or - +// +// @include border-style(dotted null); +// ------ +// border-top-style: dotted; +// border-bottom-style: dotted; +// +// ------ +// +// Note: You can also use false instead of null + +@function collapse-directionals($vals) { + $output: null; + + $A: nth( $vals, 1 ); + $B: if( length($vals) < 2, $A, nth($vals, 2)); + $C: if( length($vals) < 3, $A, nth($vals, 3)); + $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); + + @if $A == 0 { $A: 0 } + @if $B == 0 { $B: 0 } + @if $C == 0 { $C: 0 } + @if $D == 0 { $D: 0 } + + @if $A == $B and $A == $C and $A == $D { $output: $A } + @else if $A == $C and $B == $D { $output: $A $B } + @else if $B == $D { $output: $A $B $C } + @else { $output: $A $B $C $D } + + @return $output; +} + +@function contains-falsy($list) { + @each $item in $list { + @if not $item { + @return true; + } + } + + @return false; +} + +@mixin directional-property($pre, $suf, $vals) { + // Property Names + $top: $pre + "-top" + if($suf, "-#{$suf}", ""); + $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); + $left: $pre + "-left" + if($suf, "-#{$suf}", ""); + $right: $pre + "-right" + if($suf, "-#{$suf}", ""); + $all: $pre + if($suf, "-#{$suf}", ""); + + $vals: collapse-directionals($vals); + + @if contains-falsy($vals) { + @if nth($vals, 1) { #{$top}: nth($vals, 1); } + + @if length($vals) == 1 { + @if nth($vals, 1) { #{$right}: nth($vals, 1); } + } @else { + @if nth($vals, 2) { #{$right}: nth($vals, 2); } + } + + // prop: top/bottom right/left + @if length($vals) == 2 { + @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + + // prop: top right/left bottom + } @else if length($vals) == 3 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + + // prop: top right bottom left + } @else if length($vals) == 4 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 4) { #{$left}: nth($vals, 4); } + } + + // prop: top/right/bottom/left + } @else { + #{$all}: $vals; + } +} + +@mixin margin($vals...) { + @include directional-property(margin, false, $vals...); +} + +@mixin padding($vals...) { + @include directional-property(padding, false, $vals...); +} + +@mixin border-style($vals...) { + @include directional-property(border, style, $vals...); +} + +@mixin border-color($vals...) { + @include directional-property(border, color, $vals...); +} + +@mixin border-width($vals...) { + @include directional-property(border, width, $vals...); +} diff --git a/_sass/vendor/bourbon/addons/_ellipsis.scss b/_sass/vendor/bourbon/addons/_ellipsis.scss new file mode 100644 index 0000000..a8ea2a4 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_ellipsis.scss @@ -0,0 +1,7 @@ +@mixin ellipsis($width: 100%) { + display: inline-block; + max-width: $width; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/_sass/vendor/bourbon/addons/_font-family.scss b/_sass/vendor/bourbon/addons/_font-family.scss new file mode 100644 index 0000000..31f5d9c --- /dev/null +++ b/_sass/vendor/bourbon/addons/_font-family.scss @@ -0,0 +1,5 @@ +$georgia: Georgia, Cambria, "Times New Roman", Times, serif; +$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; +$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; +$verdana: Verdana, Geneva, sans-serif; diff --git a/_sass/vendor/bourbon/addons/_hide-text.scss b/_sass/vendor/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000..fc79438 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_hide-text.scss @@ -0,0 +1,10 @@ +@mixin hide-text { + overflow: hidden; + + &:before { + content: ""; + display: block; + width: 0; + height: 100%; + } +} diff --git a/_sass/vendor/bourbon/addons/_html5-input-types.scss b/_sass/vendor/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000..9e9324a --- /dev/null +++ b/_sass/vendor/bourbon/addons/_html5-input-types.scss @@ -0,0 +1,86 @@ +//************************************************************************// +// Generate a variable ($all-text-inputs) with a list of all html5 +// input types that have a text-based input, excluding textarea. +// http://diveintohtml5.org/forms.html +//************************************************************************// +$inputs-list: 'input[type="email"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="url"]', + + // Webkit & Gecko may change the display of these in the future + 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="time"]', + 'input[type="week"]'; + +// Bare inputs +//************************************************************************// +$all-text-inputs: assign-inputs($inputs-list); + +// Hover Pseudo-class +//************************************************************************// +$all-text-inputs-hover: assign-inputs($inputs-list, hover); + +// Focus Pseudo-class +//************************************************************************// +$all-text-inputs-focus: assign-inputs($inputs-list, focus); + + + +// You must use interpolation on the variable: +// #{$all-text-inputs} +// #{$all-text-inputs-hover} +// #{$all-text-inputs-focus} + +// Example +//************************************************************************// +// #{$all-text-inputs}, textarea { +// border: 1px solid red; +// } + + + +//************************************************************************// +// Generate a variable ($all-button-inputs) with a list of all html5 +// input types that have a button-based input, excluding button. +//************************************************************************// +$inputs-button-list: 'input[type="button"]', + 'input[type="reset"]', + 'input[type="submit"]'; + +// Bare inputs +//************************************************************************// +$all-button-inputs: assign-inputs($inputs-button-list); + +// Hover Pseudo-class +//************************************************************************// +$all-button-inputs-hover: assign-inputs($inputs-button-list, hover); + +// Focus Pseudo-class +//************************************************************************// +$all-button-inputs-focus: assign-inputs($inputs-button-list, focus); + +// Active Pseudo-class +//************************************************************************// +$all-button-inputs-active: assign-inputs($inputs-button-list, active); + + + +// You must use interpolation on the variable: +// #{$all-button-inputs} +// #{$all-button-inputs-hover} +// #{$all-button-inputs-focus} +// #{$all-button-inputs-active} + +// Example +//************************************************************************// +// #{$all-button-inputs}, button { +// border: 1px solid red; +// } diff --git a/_sass/vendor/bourbon/addons/_position.scss b/_sass/vendor/bourbon/addons/_position.scss new file mode 100644 index 0000000..7de7518 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_position.scss @@ -0,0 +1,32 @@ +@mixin position ($position: relative, $coordinates: null null null null) { + + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $coordinates: unpack($coordinates); + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + position: $position; + + @if ($top and $top == auto) or (type-of($top) == number) { + top: $top; + } + + @if ($right and $right == auto) or (type-of($right) == number) { + right: $right; + } + + @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { + bottom: $bottom; + } + + @if ($left and $left == auto) or (type-of($left) == number) { + left: $left; + } +} diff --git a/_sass/vendor/bourbon/addons/_prefixer.scss b/_sass/vendor/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000..c32f502 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_prefixer.scss @@ -0,0 +1,45 @@ +//************************************************************************// +// Example: @include prefixer(border-radius, $radii, webkit ms spec); +//************************************************************************// +// Variables located in /settings/_prefixer.scss + +@mixin prefixer ($property, $value, $prefixes) { + @each $prefix in $prefixes { + @if $prefix == webkit { + @if $prefix-for-webkit { + -webkit-#{$property}: $value; + } + } + @else if $prefix == moz { + @if $prefix-for-mozilla { + -moz-#{$property}: $value; + } + } + @else if $prefix == ms { + @if $prefix-for-microsoft { + -ms-#{$property}: $value; + } + } + @else if $prefix == o { + @if $prefix-for-opera { + -o-#{$property}: $value; + } + } + @else if $prefix == spec { + @if $prefix-for-spec { + #{$property}: $value; + } + } + @else { + @warn "Unrecognized prefix: #{$prefix}"; + } + } +} + +@mixin disable-prefix-for-all() { + $prefix-for-webkit: false !global; + $prefix-for-mozilla: false !global; + $prefix-for-microsoft: false !global; + $prefix-for-opera: false !global; + $prefix-for-spec: false !global; +} diff --git a/_sass/vendor/bourbon/addons/_retina-image.scss b/_sass/vendor/bourbon/addons/_retina-image.scss new file mode 100644 index 0000000..7931bd1 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_retina-image.scss @@ -0,0 +1,31 @@ +@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) { + @if $asset-pipeline { + background-image: image-url("#{$filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}.#{$extension}"); + } + + @include hidpi { + @if $asset-pipeline { + @if $retina-filename { + background-image: image-url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + @else { + @if $retina-filename { + background-image: url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + background-size: $background-size; + + } +} diff --git a/_sass/vendor/bourbon/addons/_size.scss b/_sass/vendor/bourbon/addons/_size.scss new file mode 100644 index 0000000..ac705e2 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_size.scss @@ -0,0 +1,16 @@ +@mixin size($size) { + $height: nth($size, 1); + $width: $height; + + @if length($size) > 1 { + $height: nth($size, 2); + } + + @if $height == auto or (type-of($height) == number and not unitless($height)) { + height: $height; + } + + @if $width == auto or (type-of($height) == number and not unitless($width)) { + width: $width; + } +} diff --git a/_sass/vendor/bourbon/addons/_timing-functions.scss b/_sass/vendor/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000..51b2410 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_timing-functions.scss @@ -0,0 +1,32 @@ +// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html + +// EASE IN +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +// EASE OUT +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +// EASE IN OUT +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/_sass/vendor/bourbon/addons/_triangle.scss b/_sass/vendor/bourbon/addons/_triangle.scss new file mode 100644 index 0000000..573954e --- /dev/null +++ b/_sass/vendor/bourbon/addons/_triangle.scss @@ -0,0 +1,83 @@ +@mixin triangle ($size, $color, $direction) { + height: 0; + width: 0; + + $width: nth($size, 1); + $height: nth($size, length($size)); + + $foreground-color: nth($color, 1); + $background-color: if(length($color) == 2, nth($color, 2), transparent); + + @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + + $width: $width / 2; + $height: if(length($size) > 1, $height, $height/2); + + @if $direction == up { + border-left: $width solid $background-color; + border-right: $width solid $background-color; + border-bottom: $height solid $foreground-color; + + } @else if $direction == right { + border-top: $width solid $background-color; + border-bottom: $width solid $background-color; + border-left: $height solid $foreground-color; + + } @else if $direction == down { + border-left: $width solid $background-color; + border-right: $width solid $background-color; + border-top: $height solid $foreground-color; + + } @else if $direction == left { + border-top: $width solid $background-color; + border-bottom: $width solid $background-color; + border-right: $height solid $foreground-color; + } + } + + @else if ($direction == up-right) or ($direction == up-left) { + border-top: $height solid $foreground-color; + + @if $direction == up-right { + border-left: $width solid $background-color; + + } @else if $direction == up-left { + border-right: $width solid $background-color; + } + } + + @else if ($direction == down-right) or ($direction == down-left) { + border-bottom: $height solid $foreground-color; + + @if $direction == down-right { + border-left: $width solid $background-color; + + } @else if $direction == down-left { + border-right: $width solid $background-color; + } + } + + @else if ($direction == inset-up) { + border-width: $height $width; + border-style: solid; + border-color: $background-color $background-color $foreground-color; + } + + @else if ($direction == inset-down) { + border-width: $height $width; + border-style: solid; + border-color: $foreground-color $background-color $background-color; + } + + @else if ($direction == inset-right) { + border-width: $width $height; + border-style: solid; + border-color: $background-color $background-color $background-color $foreground-color; + } + + @else if ($direction == inset-left) { + border-width: $width $height; + border-style: solid; + border-color: $background-color $foreground-color $background-color $background-color; + } +} diff --git a/_sass/vendor/bourbon/addons/_word-wrap.scss b/_sass/vendor/bourbon/addons/_word-wrap.scss new file mode 100644 index 0000000..9734a59 --- /dev/null +++ b/_sass/vendor/bourbon/addons/_word-wrap.scss @@ -0,0 +1,8 @@ +@mixin word-wrap($wrap: break-word) { + word-wrap: $wrap; + + @if $wrap == break-word { + overflow-wrap: break-word; + word-break: break-all; + } +} diff --git a/_sass/vendor/bourbon/css3/_animation.scss b/_sass/vendor/bourbon/css3/_animation.scss new file mode 100644 index 0000000..08c3dbf --- /dev/null +++ b/_sass/vendor/bourbon/css3/_animation.scss @@ -0,0 +1,52 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +// Official animation shorthand property. +@mixin animation ($animations...) { + @include prefixer(animation, $animations, webkit moz spec); +} + +// Individual Animation Properties +@mixin animation-name ($names...) { + @include prefixer(animation-name, $names, webkit moz spec); +} + + +@mixin animation-duration ($times...) { + @include prefixer(animation-duration, $times, webkit moz spec); +} + + +@mixin animation-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out + @include prefixer(animation-timing-function, $motions, webkit moz spec); +} + + +@mixin animation-iteration-count ($values...) { +// infinite | + @include prefixer(animation-iteration-count, $values, webkit moz spec); +} + + +@mixin animation-direction ($directions...) { +// normal | alternate + @include prefixer(animation-direction, $directions, webkit moz spec); +} + + +@mixin animation-play-state ($states...) { +// running | paused + @include prefixer(animation-play-state, $states, webkit moz spec); +} + + +@mixin animation-delay ($times...) { + @include prefixer(animation-delay, $times, webkit moz spec); +} + + +@mixin animation-fill-mode ($modes...) { +// none | forwards | backwards | both + @include prefixer(animation-fill-mode, $modes, webkit moz spec); +} diff --git a/_sass/vendor/bourbon/css3/_appearance.scss b/_sass/vendor/bourbon/css3/_appearance.scss new file mode 100644 index 0000000..3eb16e4 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_appearance.scss @@ -0,0 +1,3 @@ +@mixin appearance ($value) { + @include prefixer(appearance, $value, webkit moz ms o spec); +} diff --git a/_sass/vendor/bourbon/css3/_backface-visibility.scss b/_sass/vendor/bourbon/css3/_backface-visibility.scss new file mode 100644 index 0000000..1161fe6 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_backface-visibility.scss @@ -0,0 +1,6 @@ +//************************************************************************// +// Backface-visibility mixin +//************************************************************************// +@mixin backface-visibility($visibility) { + @include prefixer(backface-visibility, $visibility, webkit spec); +} diff --git a/_sass/vendor/bourbon/css3/_background-image.scss b/_sass/vendor/bourbon/css3/_background-image.scss new file mode 100644 index 0000000..6abe88b --- /dev/null +++ b/_sass/vendor/bourbon/css3/_background-image.scss @@ -0,0 +1,42 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// + +@mixin background-image($images...) { + $webkit-images: (); + $spec-images: (); + + @each $image in $images { + $webkit-image: (); + $spec-image: (); + + @if (type-of($image) == string) { + $url-str: str-slice($image, 0, 3); + $gradient-type: str-slice($image, 0, 6); + + @if $url-str == "url" { + $webkit-image: $image; + $spec-image: $image; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser($image); + $webkit-image: map-get($gradients, webkit-image); + $spec-image: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser($image); + $webkit-image: map-get($gradients, webkit-image); + $spec-image: map-get($gradients, spec-image); + } + } + + $webkit-images: append($webkit-images, $webkit-image, comma); + $spec-images: append($spec-images, $spec-image, comma); + } + + background-image: $webkit-images; + background-image: $spec-images; +} diff --git a/_sass/vendor/bourbon/css3/_background.scss b/_sass/vendor/bourbon/css3/_background.scss new file mode 100644 index 0000000..9bce930 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_background.scss @@ -0,0 +1,55 @@ +//************************************************************************// +// Background property for adding multiple backgrounds using shorthand +// notation. +//************************************************************************// + +@mixin background($backgrounds...) { + $webkit-backgrounds: (); + $spec-backgrounds: (); + + @each $background in $backgrounds { + $webkit-background: (); + $spec-background: (); + $background-type: type-of($background); + + @if $background-type == string or list { + $background-str: if($background-type == list, nth($background, 1), $background); + + $url-str: str-slice($background-str, 0, 3); + $gradient-type: str-slice($background-str, 0, 6); + + @if $url-str == "url" { + $webkit-background: $background; + $spec-background: $background; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser("#{$background}"); + $webkit-background: map-get($gradients, webkit-image); + $spec-background: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser("#{$background}"); + $webkit-background: map-get($gradients, webkit-image); + $spec-background: map-get($gradients, spec-image); + } + + @else { + $webkit-background: $background; + $spec-background: $background; + } + } + + @else { + $webkit-background: $background; + $spec-background: $background; + } + + $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); + $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); + } + + background: $webkit-backgrounds; + background: $spec-backgrounds; +} diff --git a/_sass/vendor/bourbon/css3/_border-image.scss b/_sass/vendor/bourbon/css3/_border-image.scss new file mode 100644 index 0000000..e338c2d --- /dev/null +++ b/_sass/vendor/bourbon/css3/_border-image.scss @@ -0,0 +1,59 @@ +@mixin border-image($borders...) { + $webkit-borders: (); + $spec-borders: (); + + @each $border in $borders { + $webkit-border: (); + $spec-border: (); + $border-type: type-of($border); + + @if $border-type == string or list { + $border-str: if($border-type == list, nth($border, 1), $border); + + $url-str: str-slice($border-str, 0, 3); + $gradient-type: str-slice($border-str, 0, 6); + + @if $url-str == "url" { + $webkit-border: $border; + $spec-border: $border; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser("#{$border}"); + $webkit-border: map-get($gradients, webkit-image); + $spec-border: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser("#{$border}"); + $webkit-border: map-get($gradients, webkit-image); + $spec-border: map-get($gradients, spec-image); + } + + @else { + $webkit-border: $border; + $spec-border: $border; + } + } + + @else { + $webkit-border: $border; + $spec-border: $border; + } + + $webkit-borders: append($webkit-borders, $webkit-border, comma); + $spec-borders: append($spec-borders, $spec-border, comma); + } + + -webkit-border-image: $webkit-borders; + border-image: $spec-borders; + border-style: solid; +} + +//Examples: +// @include border-image(url("image.png")); +// @include border-image(url("image.png") 20 stretch); +// @include border-image(linear-gradient(45deg, orange, yellow)); +// @include border-image(linear-gradient(45deg, orange, yellow) stretch); +// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); +// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); diff --git a/_sass/vendor/bourbon/css3/_border-radius.scss b/_sass/vendor/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000..7c17190 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_border-radius.scss @@ -0,0 +1,22 @@ +//************************************************************************// +// Shorthand Border-radius mixins +//************************************************************************// +@mixin border-top-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-top-right-radius, $radii, spec); +} + +@mixin border-bottom-radius($radii) { + @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} + +@mixin border-left-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-bottom-left-radius, $radii, spec); +} + +@mixin border-right-radius($radii) { + @include prefixer(border-top-right-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} diff --git a/_sass/vendor/bourbon/css3/_box-sizing.scss b/_sass/vendor/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000..f07e1d4 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_box-sizing.scss @@ -0,0 +1,4 @@ +@mixin box-sizing ($box) { +// content-box | border-box | inherit + @include prefixer(box-sizing, $box, webkit moz spec); +} diff --git a/_sass/vendor/bourbon/css3/_calc.scss b/_sass/vendor/bourbon/css3/_calc.scss new file mode 100644 index 0000000..94d7e4c --- /dev/null +++ b/_sass/vendor/bourbon/css3/_calc.scss @@ -0,0 +1,4 @@ +@mixin calc($property, $value) { + #{$property}: -webkit-calc(#{$value}); + #{$property}: calc(#{$value}); +} diff --git a/_sass/vendor/bourbon/css3/_columns.scss b/_sass/vendor/bourbon/css3/_columns.scss new file mode 100644 index 0000000..96f601c --- /dev/null +++ b/_sass/vendor/bourbon/css3/_columns.scss @@ -0,0 +1,47 @@ +@mixin columns($arg: auto) { +// || + @include prefixer(columns, $arg, webkit moz spec); +} + +@mixin column-count($int: auto) { +// auto || integer + @include prefixer(column-count, $int, webkit moz spec); +} + +@mixin column-gap($length: normal) { +// normal || length + @include prefixer(column-gap, $length, webkit moz spec); +} + +@mixin column-fill($arg: auto) { +// auto || length + @include prefixer(column-fill, $arg, webkit moz spec); +} + +@mixin column-rule($arg) { +// || || + @include prefixer(column-rule, $arg, webkit moz spec); +} + +@mixin column-rule-color($color) { + @include prefixer(column-rule-color, $color, webkit moz spec); +} + +@mixin column-rule-style($style: none) { +// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + @include prefixer(column-rule-style, $style, webkit moz spec); +} + +@mixin column-rule-width ($width: none) { + @include prefixer(column-rule-width, $width, webkit moz spec); +} + +@mixin column-span($arg: none) { +// none || all + @include prefixer(column-span, $arg, webkit moz spec); +} + +@mixin column-width($length: auto) { +// auto || length + @include prefixer(column-width, $length, webkit moz spec); +} diff --git a/_sass/vendor/bourbon/css3/_filter.scss b/_sass/vendor/bourbon/css3/_filter.scss new file mode 100644 index 0000000..8560d77 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_filter.scss @@ -0,0 +1,5 @@ +@mixin filter($function: none) { + // [ + @include prefixer(perspective, $depth, webkit moz spec); +} + +@mixin perspective-origin($value: 50% 50%) { + @include prefixer(perspective-origin, $value, webkit moz spec); +} diff --git a/_sass/vendor/bourbon/css3/_placeholder.scss b/_sass/vendor/bourbon/css3/_placeholder.scss new file mode 100644 index 0000000..5682fd0 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_placeholder.scss @@ -0,0 +1,8 @@ +@mixin placeholder { + $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; + } + } +} diff --git a/_sass/vendor/bourbon/css3/_radial-gradient.scss b/_sass/vendor/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000..7a8c376 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,39 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($G1, $G2, + $G3: null, $G4: null, + $G5: null, $G6: null, + $G7: null, $G8: null, + $G9: null, $G10: null, + $pos: null, + $shape-size: null, + $fallback: null) { + + $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: nth($data, 1); + $G2: nth($data, 2); + $pos: nth($data, 3); + $shape-size: nth($data, 4); + + $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; + + // Strip deprecated cover/contain for spec + $shape-size-spec: _shape-size-stripper($shape-size); + + // Set $G1 as the default fallback color + $first-color: nth($full, 1); + $fallback-color: nth($first-color, 1); + + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + // Add Commas and spaces + $shape-size: if($shape-size, '#{$shape-size}, ', null); + $pos: if($pos, '#{$pos}, ', null); + $pos-spec: if($pos, 'at #{$pos}', null); + $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); + + background-color: $fallback-color; + background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); + background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); +} diff --git a/_sass/vendor/bourbon/css3/_transform.scss b/_sass/vendor/bourbon/css3/_transform.scss new file mode 100644 index 0000000..8cc3596 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_transform.scss @@ -0,0 +1,15 @@ +@mixin transform($property: none) { +// none | + @include prefixer(transform, $property, webkit moz ms o spec); +} + +@mixin transform-origin($axes: 50%) { +// x-axis - left | center | right | length | % +// y-axis - top | center | bottom | length | % +// z-axis - length + @include prefixer(transform-origin, $axes, webkit moz ms o spec); +} + +@mixin transform-style ($style: flat) { + @include prefixer(transform-style, $style, webkit moz ms o spec); +} diff --git a/_sass/vendor/bourbon/css3/_transition.scss b/_sass/vendor/bourbon/css3/_transition.scss new file mode 100644 index 0000000..5ad4c0a --- /dev/null +++ b/_sass/vendor/bourbon/css3/_transition.scss @@ -0,0 +1,77 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all 2s ease-in-out); +// @include transition (opacity 1s ease-in 2s, width 2s ease-out); +// @include transition-property (transform, opacity); + +@mixin transition ($properties...) { + // Fix for vendor-prefix transform property + $needs-prefixes: false; + $webkit: (); + $moz: (); + $spec: (); + + // Create lists for vendor-prefixed transform + @each $list in $properties { + @if nth($list, 1) == "transform" { + $needs-prefixes: true; + $list1: -webkit-transform; + $list2: -moz-transform; + $list3: (); + + @each $var in $list { + $list3: join($list3, $var); + + @if $var != "transform" { + $list1: join($list1, $var); + $list2: join($list2, $var); + } + } + + $webkit: append($webkit, $list1); + $moz: append($moz, $list2); + $spec: append($spec, $list3); + } + + // Create lists for non-prefixed transition properties + @else { + $webkit: append($webkit, $list, comma); + $moz: append($moz, $list, comma); + $spec: append($spec, $list, comma); + } + } + + @if $needs-prefixes { + -webkit-transition: $webkit; + -moz-transition: $moz; + transition: $spec; + } + @else { + @if length($properties) >= 1 { + @include prefixer(transition, $properties, webkit moz spec); + } + + @else { + $properties: all 0.15s ease-out 0s; + @include prefixer(transition, $properties, webkit moz spec); + } + } +} + +@mixin transition-property ($properties...) { + -webkit-transition-property: transition-property-names($properties, 'webkit'); + -moz-transition-property: transition-property-names($properties, 'moz'); + transition-property: transition-property-names($properties, false); +} + +@mixin transition-duration ($times...) { + @include prefixer(transition-duration, $times, webkit moz spec); +} + +@mixin transition-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + @include prefixer(transition-timing-function, $motions, webkit moz spec); +} + +@mixin transition-delay ($times...) { + @include prefixer(transition-delay, $times, webkit moz spec); +} diff --git a/_sass/vendor/bourbon/css3/_user-select.scss b/_sass/vendor/bourbon/css3/_user-select.scss new file mode 100644 index 0000000..1380aa8 --- /dev/null +++ b/_sass/vendor/bourbon/css3/_user-select.scss @@ -0,0 +1,3 @@ +@mixin user-select($arg: none) { + @include prefixer(user-select, $arg, webkit moz ms spec); +} diff --git a/_sass/vendor/bourbon/functions/_assign.scss b/_sass/vendor/bourbon/functions/_assign.scss new file mode 100644 index 0000000..9a1db93 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_assign.scss @@ -0,0 +1,11 @@ +@function assign-inputs($inputs, $pseudo: null) { + $list : (); + + @each $input in $inputs { + $input: unquote($input); + $input: if($pseudo, $input + ":" + $pseudo, $input); + $list: append($list, $input, comma); + } + + @return $list; +} \ No newline at end of file diff --git a/_sass/vendor/bourbon/functions/_color-lightness.scss b/_sass/vendor/bourbon/functions/_color-lightness.scss new file mode 100644 index 0000000..8c6df4e --- /dev/null +++ b/_sass/vendor/bourbon/functions/_color-lightness.scss @@ -0,0 +1,13 @@ +// Programatically determines whether a color is light or dark +// Returns a boolean +// More details here http://robots.thoughtbot.com/closer-look-color-lightness + +@function is-light($hex-color) { + $-local-red: red(rgba($hex-color, 1.0)); + $-local-green: green(rgba($hex-color, 1.0)); + $-local-blue: blue(rgba($hex-color, 1.0)); + + $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; + + @return $-local-lightness > .6; +} diff --git a/_sass/vendor/bourbon/functions/_flex-grid.scss b/_sass/vendor/bourbon/functions/_flex-grid.scss new file mode 100644 index 0000000..3bbd866 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_flex-grid.scss @@ -0,0 +1,39 @@ +// Flexible grid +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); +} + +// Flexible gutter +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); +} + +// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. +// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. +// +// The calculation presumes that your column structure will be missing the last gutter: +// +// -- column -- gutter -- column -- gutter -- column +// +// $fg-column: 60px; // Column Width +// $fg-gutter: 25px; // Gutter Width +// $fg-max-columns: 12; // Total Columns For Main Container +// +// div { +// width: flex-grid(4); // returns (315px / 995px) = 31.65829%; +// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; +// +// p { +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// float: left; +// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; +// } +// +// blockquote { +// float: left; +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// } +// } \ No newline at end of file diff --git a/_sass/vendor/bourbon/functions/_golden-ratio.scss b/_sass/vendor/bourbon/functions/_golden-ratio.scss new file mode 100644 index 0000000..463d14a --- /dev/null +++ b/_sass/vendor/bourbon/functions/_golden-ratio.scss @@ -0,0 +1,3 @@ +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, $golden) +} diff --git a/_sass/vendor/bourbon/functions/_grid-width.scss b/_sass/vendor/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000..8e63d83 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_grid-width.scss @@ -0,0 +1,13 @@ +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. +// +// $gw-column: 100px; // Column Width +// $gw-gutter: 40px; // Gutter Width +// +// div { +// width: grid-width(4); // returns 520px; +// margin-left: $gw-gutter; // returns 40px; +// } diff --git a/_sass/vendor/bourbon/functions/_modular-scale.scss b/_sass/vendor/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000..afc59eb --- /dev/null +++ b/_sass/vendor/bourbon/functions/_modular-scale.scss @@ -0,0 +1,66 @@ +// Scaling Variables +$golden: 1.618; +$minor-second: 1.067; +$major-second: 1.125; +$minor-third: 1.2; +$major-third: 1.25; +$perfect-fourth: 1.333; +$augmented-fourth: 1.414; +$perfect-fifth: 1.5; +$minor-sixth: 1.6; +$major-sixth: 1.667; +$minor-seventh: 1.778; +$major-seventh: 1.875; +$octave: 2; +$major-tenth: 2.5; +$major-eleventh: 2.667; +$major-twelfth: 3; +$double-octave: 4; + +@function modular-scale($value, $increment, $ratio) { + $v1: nth($value, 1); + $v2: nth($value, length($value)); + $value: $v1; + + // scale $v2 to just above $v1 + @while $v2 > $v1 { + $v2: ($v2 / $ratio); // will be off-by-1 + } + @while $v2 < $v1 { + $v2: ($v2 * $ratio); // will fix off-by-1 + } + + // check AFTER scaling $v2 to prevent double-counting corner-case + $double-stranded: $v2 > $v1; + + @if $increment > 0 { + @for $i from 1 through $increment { + @if $double-stranded and ($v1 * $ratio) > $v2 { + $value: $v2; + $v2: ($v2 * $ratio); + } @else { + $v1: ($v1 * $ratio); + $value: $v1; + } + } + } + + @if $increment < 0 { + // adjust $v2 to just below $v1 + @if $double-stranded { + $v2: ($v2 / $ratio); + } + + @for $i from $increment through -1 { + @if $double-stranded and ($v1 / $ratio) < $v2 { + $value: $v2; + $v2: ($v2 / $ratio); + } @else { + $v1: ($v1 / $ratio); + $value: $v1; + } + } + } + + @return $value; +} diff --git a/_sass/vendor/bourbon/functions/_px-to-em.scss b/_sass/vendor/bourbon/functions/_px-to-em.scss new file mode 100644 index 0000000..4832245 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_px-to-em.scss @@ -0,0 +1,13 @@ +// Convert pixels to ems +// eg. for a relational value of 12px write em(12) when the parent is 16px +// if the parent is another value say 24px write em(12, 24) + +@function em($pxval, $base: $em-base) { + @if not unitless($pxval) { + $pxval: strip-units($pxval); + } + @if not unitless($base) { + $base: strip-units($base); + } + @return ($pxval / $base) * 1em; +} diff --git a/_sass/vendor/bourbon/functions/_px-to-rem.scss b/_sass/vendor/bourbon/functions/_px-to-rem.scss new file mode 100644 index 0000000..96b244e --- /dev/null +++ b/_sass/vendor/bourbon/functions/_px-to-rem.scss @@ -0,0 +1,15 @@ +// Convert pixels to rems +// eg. for a relational value of 12px write rem(12) +// Assumes $em-base is the font-size of + +@function rem($pxval) { + @if not unitless($pxval) { + $pxval: strip-units($pxval); + } + + $base: $em-base; + @if not unitless($base) { + $base: strip-units($base); + } + @return ($pxval / $base) * 1rem; +} diff --git a/_sass/vendor/bourbon/functions/_strip-units.scss b/_sass/vendor/bourbon/functions/_strip-units.scss new file mode 100644 index 0000000..6afc6e6 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_strip-units.scss @@ -0,0 +1,5 @@ +// Srtips the units from a value. e.g. 12px -> 12 + +@function strip-units($val) { + @return ($val / ($val * 0 + 1)); +} diff --git a/_sass/vendor/bourbon/functions/_tint-shade.scss b/_sass/vendor/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000..f717200 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_tint-shade.scss @@ -0,0 +1,9 @@ +// Add percentage of white to a color +@function tint($color, $percent){ + @return mix(white, $color, $percent); +} + +// Add percentage of black to a color +@function shade($color, $percent){ + @return mix(black, $color, $percent); +} diff --git a/_sass/vendor/bourbon/functions/_transition-property-name.scss b/_sass/vendor/bourbon/functions/_transition-property-name.scss new file mode 100644 index 0000000..54cd422 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_transition-property-name.scss @@ -0,0 +1,22 @@ +// Return vendor-prefixed property names if appropriate +// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background +//************************************************************************// +@function transition-property-names($props, $vendor: false) { + $new-props: (); + + @each $prop in $props { + $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + } + + @return $new-props; +} + +@function transition-property-name($prop, $vendor: false) { + // put other properties that need to be prefixed here aswell + @if $vendor and $prop == transform { + @return unquote('-'+$vendor+'-'+$prop); + } + @else { + @return $prop; + } +} \ No newline at end of file diff --git a/_sass/vendor/bourbon/functions/_unpack.scss b/_sass/vendor/bourbon/functions/_unpack.scss new file mode 100644 index 0000000..3775963 --- /dev/null +++ b/_sass/vendor/bourbon/functions/_unpack.scss @@ -0,0 +1,17 @@ +// Convert shorthand to the 4-value syntax + +@function unpack($shorthand) { + @if length($shorthand) == 1 { + @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + } + @else if length($shorthand) == 2 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + } + @else if length($shorthand) == 3 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + } + @else { + @return $shorthand; + } +} + diff --git a/_sass/vendor/bourbon/helpers/_convert-units.scss b/_sass/vendor/bourbon/helpers/_convert-units.scss new file mode 100644 index 0000000..3443db3 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_convert-units.scss @@ -0,0 +1,15 @@ +//************************************************************************// +// Helper function for str-to-num fn. +// Source: http://sassmeister.com/gist/9647408 +//************************************************************************// +@function _convert-units($number, $unit) { + $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; + $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; + $index: index($strings, $unit); + + @if not $index { + @warn "Unknown unit `#{$unit}`."; + @return false; + } + @return $number * nth($units, $index); +} diff --git a/_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss b/_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss new file mode 100644 index 0000000..07d30b6 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss @@ -0,0 +1,13 @@ +@function _gradient-positions-parser($gradient-type, $gradient-positions) { + @if $gradient-positions + and ($gradient-type == linear) + and (type-of($gradient-positions) != color) { + $gradient-positions: _linear-positions-parser($gradient-positions); + } + @else if $gradient-positions + and ($gradient-type == radial) + and (type-of($gradient-positions) != color) { + $gradient-positions: _radial-positions-parser($gradient-positions); + } + @return $gradient-positions; +} diff --git a/_sass/vendor/bourbon/helpers/_is-num.scss b/_sass/vendor/bourbon/helpers/_is-num.scss new file mode 100644 index 0000000..71459e1 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_is-num.scss @@ -0,0 +1,8 @@ +//************************************************************************// +// Helper for linear-gradient-parser +//************************************************************************// +@function _is-num($char) { + $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; + $index: index($values, $char); + @return if($index, true, false); +} diff --git a/_sass/vendor/bourbon/helpers/_linear-angle-parser.scss b/_sass/vendor/bourbon/helpers/_linear-angle-parser.scss new file mode 100644 index 0000000..e0401ed --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_linear-angle-parser.scss @@ -0,0 +1,25 @@ +// Private function for linear-gradient-parser +@function _linear-angle-parser($image, $first-val, $prefix, $suffix) { + $offset: null; + $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); + $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); + + @if ($unit-long == "grad") or + ($unit-long == "turn") { + $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); + } + + @else if ($unit-short == "deg") or + ($unit-short == "rad") { + $offset: if($unit-short == "deg", -90 * 3, 1.6rad); + } + + @if $offset { + $num: _str-to-num($first-val); + + @return ( + webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, + spec-image: $image + ); + } +} diff --git a/_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss b/_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss new file mode 100644 index 0000000..12bcdcd --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss @@ -0,0 +1,41 @@ +@function _linear-gradient-parser($image) { + $image: unquote($image); + $gradients: (); + $start: str-index($image, "("); + $end: str-index($image, ","); + $first-val: str-slice($image, $start + 1, $end - 1); + + $prefix: str-slice($image, 0, $start); + $suffix: str-slice($image, $end, str-length($image)); + + $has-multiple-vals: str-index($first-val, " "); + $has-single-position: unquote(_position-flipper($first-val) + ""); + $has-angle: _is-num(str-slice($first-val, 0, 0)); + + @if $has-multiple-vals { + $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); + } + + @else if $has-single-position != "" { + $pos: unquote($has-single-position + ""); + + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $prefix + "to " + $pos + $suffix + ); + } + + @else if $has-angle { + // Rotate degree for webkit + $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); + } + + @else { + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $image + ); + } + + @return $gradients; +} diff --git a/_sass/vendor/bourbon/helpers/_linear-positions-parser.scss b/_sass/vendor/bourbon/helpers/_linear-positions-parser.scss new file mode 100644 index 0000000..d26383e --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_linear-positions-parser.scss @@ -0,0 +1,61 @@ +@function _linear-positions-parser($pos) { + $type: type-of(nth($pos, 1)); + $spec: null; + $degree: null; + $side: null; + $corner: null; + $length: length($pos); + // Parse Side and corner positions + @if ($length > 1) { + @if nth($pos, 1) == "to" { // Newer syntax + $side: nth($pos, 2); + + @if $length == 2 { // eg. to top + // Swap for backwards compatability + $degree: _position-flipper(nth($pos, 2)); + } + @else if $length == 3 { // eg. to top left + $corner: nth($pos, 3); + } + } + @else if $length == 2 { // Older syntax ("top left") + $side: _position-flipper(nth($pos, 1)); + $corner: _position-flipper(nth($pos, 2)); + } + + @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + $spec: to $side $corner; + } + @else if $length == 1 { + // Swap for backwards compatability + @if $type == string { + $degree: $pos; + $spec: to _position-flipper($pos); + } + @else { + $degree: -270 - $pos; //rotate the gradient opposite from spec + $spec: $pos; + } + } + $degree: unquote($degree + ","); + $spec: unquote($spec + ","); + @return $degree $spec; +} + +@function _position-flipper($pos) { + @return if($pos == left, right, null) + if($pos == right, left, null) + if($pos == top, bottom, null) + if($pos == bottom, top, null); +} diff --git a/_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss b/_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss new file mode 100644 index 0000000..86ad88f --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss @@ -0,0 +1,31 @@ +// Private function for linear-gradient-parser +@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { + $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); + $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); + $val-3: null; + $has-val-3: str-index($val-2, " "); + + @if $has-val-3 { + $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); + $val-2: str-slice($val-2, 0, $has-val-3 - 1); + } + + $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); + $pos: unquote($pos + ""); + + // Use old spec for webkit + @if $val-1 == "to" { + @return ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ); + } + + // Bring the code up to spec + @else { + @return ( + webkit-image: -webkit- + $image, + spec-image: $prefix + "to " + $pos + $suffix + ); + } +} diff --git a/_sass/vendor/bourbon/helpers/_radial-arg-parser.scss b/_sass/vendor/bourbon/helpers/_radial-arg-parser.scss new file mode 100644 index 0000000..a3a3704 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_radial-arg-parser.scss @@ -0,0 +1,69 @@ +@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { + @each $value in $G1, $G2 { + $first-val: nth($value, 1); + $pos-type: type-of($first-val); + $spec-at-index: null; + + // Determine if spec was passed to mixin + @if type-of($value) == list { + $spec-at-index: if(index($value, at), index($value, at), false); + } + @if $spec-at-index { + @if $spec-at-index > 1 { + @for $i from 1 through ($spec-at-index - 1) { + $shape-size: $shape-size nth($value, $i); + } + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + @else if $spec-at-index == 1 { + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + $G1: null; + } + + // If not spec calculate correct values + @else { + @if ($pos-type != color) or ($first-val != "transparent") { + @if ($pos-type == number) + or ($first-val == "center") + or ($first-val == "top") + or ($first-val == "right") + or ($first-val == "bottom") + or ($first-val == "left") { + + $pos: $value; + + @if $pos == $G1 { + $G1: null; + } + } + + @else if + ($first-val == "ellipse") + or ($first-val == "circle") + or ($first-val == "closest-side") + or ($first-val == "closest-corner") + or ($first-val == "farthest-side") + or ($first-val == "farthest-corner") + or ($first-val == "contain") + or ($first-val == "cover") { + + $shape-size: $value; + + @if $value == $G1 { + $G1: null; + } + + @else if $value == $G2 { + $G2: null; + } + } + } + } + } + @return $G1, $G2, $pos, $shape-size; +} diff --git a/_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss b/_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss new file mode 100644 index 0000000..6dde50f --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss @@ -0,0 +1,50 @@ +@function _radial-gradient-parser($image) { + $image: unquote($image); + $gradients: (); + $start: str-index($image, "("); + $end: str-index($image, ","); + $first-val: str-slice($image, $start + 1, $end - 1); + + $prefix: str-slice($image, 0, $start); + $suffix: str-slice($image, $end, str-length($image)); + + $is-spec-syntax: str-index($first-val, "at"); + + @if $is-spec-syntax and $is-spec-syntax > 1 { + $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + $pos: append($pos, $keyword, comma); + + $gradients: ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ) + } + + @else if $is-spec-syntax == 1 { + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + + $gradients: ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ) + } + + @else if str-index($image, "cover") or str-index($image, "contain") { + @warn "Radial-gradient needs to be updated to conform to latest spec."; + + $gradients: ( + webkit-image: null, + spec-image: $image + ) + } + + @else { + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $image + ) + } + + @return $gradients; +} diff --git a/_sass/vendor/bourbon/helpers/_radial-positions-parser.scss b/_sass/vendor/bourbon/helpers/_radial-positions-parser.scss new file mode 100644 index 0000000..6a5b477 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_radial-positions-parser.scss @@ -0,0 +1,18 @@ +@function _radial-positions-parser($gradient-pos) { + $shape-size: nth($gradient-pos, 1); + $pos: nth($gradient-pos, 2); + $shape-size-spec: _shape-size-stripper($shape-size); + + $pre-spec: unquote(if($pos, "#{$pos}, ", null)) + unquote(if($shape-size, "#{$shape-size},", null)); + $pos-spec: if($pos, "at #{$pos}", null); + + $spec: "#{$shape-size-spec} #{$pos-spec}"; + + // Add comma + @if ($spec != ' ') { + $spec: "#{$spec}," + } + + @return $pre-spec $spec; +} diff --git a/_sass/vendor/bourbon/helpers/_render-gradients.scss b/_sass/vendor/bourbon/helpers/_render-gradients.scss new file mode 100644 index 0000000..5765676 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_render-gradients.scss @@ -0,0 +1,26 @@ +// User for linear and radial gradients within background-image or border-image properties + +@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { + $pre-spec: null; + $spec: null; + $vendor-gradients: null; + @if $gradient-type == linear { + @if $gradient-positions { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + } + @else if $gradient-type == radial { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); + } + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} diff --git a/_sass/vendor/bourbon/helpers/_shape-size-stripper.scss b/_sass/vendor/bourbon/helpers/_shape-size-stripper.scss new file mode 100644 index 0000000..ee5eda4 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_shape-size-stripper.scss @@ -0,0 +1,10 @@ +@function _shape-size-stripper($shape-size) { + $shape-size-spec: null; + @each $value in $shape-size { + @if ($value == "cover") or ($value == "contain") { + $value: null; + } + $shape-size-spec: "#{$shape-size-spec} #{$value}"; + } + @return $shape-size-spec; +} diff --git a/_sass/vendor/bourbon/helpers/_str-to-num.scss b/_sass/vendor/bourbon/helpers/_str-to-num.scss new file mode 100644 index 0000000..b3d6168 --- /dev/null +++ b/_sass/vendor/bourbon/helpers/_str-to-num.scss @@ -0,0 +1,50 @@ +//************************************************************************// +// Helper function for linear/radial-gradient-parsers. +// Source: http://sassmeister.com/gist/9647408 +//************************************************************************// +@function _str-to-num($string) { + // Matrices + $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; + $numbers: 0 1 2 3 4 5 6 7 8 9; + + // Result + $result: 0; + $divider: 0; + $minus: false; + + // Looping through all characters + @for $i from 1 through str-length($string) { + $character: str-slice($string, $i, $i); + $index: index($strings, $character); + + @if $character == '-' { + $minus: true; + } + + @else if $character == '.' { + $divider: 1; + } + + @else { + @if not $index { + $result: if($minus, $result * -1, $result); + @return _convert-units($result, str-slice($string, $i)); + } + + $number: nth($numbers, $index); + + @if $divider == 0 { + $result: $result * 10; + } + + @else { + // Move the decimal dot to the left + $divider: $divider * 10; + $number: $number / $divider; + } + + $result: $result + $number; + } + } + @return if($minus, $result * -1, $result); +} diff --git a/_sass/vendor/bourbon/settings/_prefixer.scss b/_sass/vendor/bourbon/settings/_prefixer.scss new file mode 100644 index 0000000..ecab49f --- /dev/null +++ b/_sass/vendor/bourbon/settings/_prefixer.scss @@ -0,0 +1,6 @@ +// Variable settings for /addons/prefixer.scss +$prefix-for-webkit: true !default; +$prefix-for-mozilla: true !default; +$prefix-for-microsoft: true !default; +$prefix-for-opera: true !default; +$prefix-for-spec: true !default; // required for keyframe mixin diff --git a/_sass/vendor/bourbon/settings/_px-to-em.scss b/_sass/vendor/bourbon/settings/_px-to-em.scss new file mode 100644 index 0000000..f2f9a3e --- /dev/null +++ b/_sass/vendor/bourbon/settings/_px-to-em.scss @@ -0,0 +1 @@ +$em-base: 16px !default; diff --git a/_sass/vendor/neat/_neat-helpers.scss b/_sass/vendor/neat/_neat-helpers.scss new file mode 100644 index 0000000..e915c69 --- /dev/null +++ b/_sass/vendor/neat/_neat-helpers.scss @@ -0,0 +1,7 @@ +// Functions +@import "functions/private"; +@import "functions/new-breakpoint"; + +// Settings +@import "settings/grid"; +@import "settings/visual-grid"; diff --git a/_sass/vendor/neat/_neat.scss b/_sass/vendor/neat/_neat.scss new file mode 100644 index 0000000..e93d636 --- /dev/null +++ b/_sass/vendor/neat/_neat.scss @@ -0,0 +1,21 @@ +// Bourbon Neat 1.6.0.pre +// MIT Licensed +// Copyright (c) 2012-2013 thoughtbot, inc. + +// Helpers +@import "neat-helpers"; + +// Grid +@import "grid/private"; +@import "grid/reset"; +@import "grid/grid"; +@import "grid/omega"; +@import "grid/outer-container"; +@import "grid/span-columns"; +@import "grid/row"; +@import "grid/shift"; +@import "grid/pad"; +@import "grid/fill-parent"; +@import "grid/media"; +@import "grid/to-deprecate"; +@import "grid/visual-grid"; diff --git a/_sass/vendor/neat/functions/_new-breakpoint.scss b/_sass/vendor/neat/functions/_new-breakpoint.scss new file mode 100644 index 0000000..a89c9ce --- /dev/null +++ b/_sass/vendor/neat/functions/_new-breakpoint.scss @@ -0,0 +1,16 @@ +@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { + + @if length($query) == 1 { + $query: $default-feature nth($query, 1) $total-columns; + } + + @else if length($query) % 2 == 0 { + $query: append($query, $total-columns); + } + + @if not belongs-to($query, $visual-grid-breakpoints) { + $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; + } + + @return $query; +} diff --git a/_sass/vendor/neat/functions/_private.scss b/_sass/vendor/neat/functions/_private.scss new file mode 100644 index 0000000..6f03cfc --- /dev/null +++ b/_sass/vendor/neat/functions/_private.scss @@ -0,0 +1,125 @@ +// Checks if a number is even +@function is-even($int) { + @if $int%2 == 0 { + @return true; + } + + @return false; +} + +// Checks if an element belongs to a list +@function belongs-to($tested-item, $list) { + @each $item in $list { + @if $item == $tested-item { + @return true; + } + } + + @return false; +} + +// Contains display value +@function contains-display-value($query) { + @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) { + @return true; + } + + @return false; +} + +// Parses the first argument of span-columns() +@function container-span($span: $span) { + @if length($span) == 3 { + $container-columns: nth($span, 3); + @return $container-columns; + } + + @else if length($span) == 2 { + $container-columns: nth($span, 2); + @return $container-columns; + } + + @else { + @return $grid-columns; + } +} + +@function container-shift($shift: $shift) { + $parent-columns: $grid-columns !global !default; + + @if length($shift) == 3 { + $container-columns: nth($shift, 3); + @return $container-columns; + } + + @else if length($shift) == 2 { + $container-columns: nth($shift, 2); + @return $container-columns; + } + + @else { + @return $parent-columns; + } +} + +// Generates a striped background +@function gradient-stops($grid-columns, $color: $visual-grid-color) { + $transparent: rgba(0,0,0,0); + + $column-width: flex-grid(1, $grid-columns); + $gutter-width: flex-gutter($grid-columns); + $column-offset: $column-width; + + $values: ($transparent 0, $color 0); + + @for $i from 1 to $grid-columns*2 { + @if is-even($i) { + $values: append($values, $transparent $column-offset, comma); + $values: append($values, $color $column-offset, comma); + $column-offset: $column-offset + $column-width; + } + + @else { + $values: append($values, $color $column-offset, comma); + $values: append($values, $transparent $column-offset, comma); + $column-offset: $column-offset + $gutter-width; + } + } + + @return $values; +} + +// Layout direction +@function get-direction($layout, $default) { + $direction: nil; + + @if $layout == LTR or $layout == RTL { + $direction: direction-from-layout($layout); + } @else { + $direction: direction-from-layout($default); + } + + @return $direction; +} + +@function direction-from-layout($layout) { + $direction: nil; + + @if $layout == LTR { + $direction: right; + } @else { + $direction: left; + } + + @return $direction; +} + +@function get-opposite-direction($direction) { + $opposite-direction: left; + + @if $direction == left { + $opposite-direction: right; + } + + @return $opposite-direction; +} diff --git a/_sass/vendor/neat/grid/_fill-parent.scss b/_sass/vendor/neat/grid/_fill-parent.scss new file mode 100644 index 0000000..859c977 --- /dev/null +++ b/_sass/vendor/neat/grid/_fill-parent.scss @@ -0,0 +1,7 @@ +@mixin fill-parent() { + width: 100%; + + @if $border-box-sizing == false { + @include box-sizing(border-box); + } +} diff --git a/_sass/vendor/neat/grid/_grid.scss b/_sass/vendor/neat/grid/_grid.scss new file mode 100644 index 0000000..e074b6c --- /dev/null +++ b/_sass/vendor/neat/grid/_grid.scss @@ -0,0 +1,5 @@ +@if $border-box-sizing == true { + * { + @include box-sizing(border-box); + } +} diff --git a/_sass/vendor/neat/grid/_media.scss b/_sass/vendor/neat/grid/_media.scss new file mode 100644 index 0000000..bf27f70 --- /dev/null +++ b/_sass/vendor/neat/grid/_media.scss @@ -0,0 +1,38 @@ +@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) { + @if length($query) == 1 { + @media screen and ($default-feature: nth($query, 1)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns !global; + @content; + $grid-columns: $default-grid-columns !global; + } + } + + @else { + $loopTo: length($query); + $mediaQuery: 'screen and '; + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns !global; + + @if length($query) % 2 != 0 { + $grid-columns: nth($query, $loopTo) !global; + $loopTo: $loopTo - 1; + } + + $i: 1; + @while $i <= $loopTo { + $mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') '; + + @if ($i + 1) != $loopTo { + $mediaQuery: $mediaQuery + 'and '; + } + + $i: $i + 2; + } + + @media #{$mediaQuery} { + @content; + $grid-columns: $default-grid-columns !global; + } + } +} diff --git a/_sass/vendor/neat/grid/_omega.scss b/_sass/vendor/neat/grid/_omega.scss new file mode 100644 index 0000000..c99ed6c --- /dev/null +++ b/_sass/vendor/neat/grid/_omega.scss @@ -0,0 +1,61 @@ +// Remove last element gutter +@mixin omega($query: block, $direction: default) { + $table: if(belongs-to(table, $query), true, false); + $auto: if(belongs-to(auto, $query), true, false); + + @if $direction != default { + @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead." + } @else { + $direction: get-direction($layout-direction, $default-layout-direction); + } + + @if $table { + @warn "The omega mixin no longer removes padding in table layouts." + } + + @if length($query) == 1 { + @if $auto { + &:last-child { + margin-#{$direction}: 0; + } + } + + @else if contains-display-value($query) and $table == false { + margin-#{$direction}: 0; + } + + @else { + @include nth-child($query, $direction); + } + } + + @else if length($query) == 2 { + @if $auto { + &:last-child { + margin-#{$direction}: 0; + } + } + + @else { + @include nth-child(nth($query, 1), $direction); + } + } + + @else { + @warn "Too many arguments passed to the omega() mixin." + } +} + +@mixin nth-child($query, $direction) { + $opposite-direction: get-opposite-direction($direction); + + &:nth-child(#{$query}) { + margin-#{$direction}: 0; + } + + @if type-of($query) == number { + &:nth-child(#{$query}+1) { + clear: $opposite-direction; + } + } +} diff --git a/_sass/vendor/neat/grid/_outer-container.scss b/_sass/vendor/neat/grid/_outer-container.scss new file mode 100644 index 0000000..22c541f --- /dev/null +++ b/_sass/vendor/neat/grid/_outer-container.scss @@ -0,0 +1,8 @@ +@mixin outer-container { + @include clearfix; + max-width: $max-width; + margin: { + left: auto; + right: auto; + } +} diff --git a/_sass/vendor/neat/grid/_pad.scss b/_sass/vendor/neat/grid/_pad.scss new file mode 100644 index 0000000..3ef5d80 --- /dev/null +++ b/_sass/vendor/neat/grid/_pad.scss @@ -0,0 +1,8 @@ +@mixin pad($padding: flex-gutter()) { + $padding-list: null; + @each $value in $padding { + $value: if($value == 'default', flex-gutter(), $value); + $padding-list: join($padding-list, $value); + } + padding: $padding-list; +} diff --git a/_sass/vendor/neat/grid/_private.scss b/_sass/vendor/neat/grid/_private.scss new file mode 100644 index 0000000..b195336 --- /dev/null +++ b/_sass/vendor/neat/grid/_private.scss @@ -0,0 +1,43 @@ +$parent-columns: $grid-columns !default; +$fg-column: $column; +$fg-gutter: $gutter; +$fg-max-columns: $grid-columns; +$container-display-table: false !default; +$layout-direction: nil !default; + +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); +} + +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); +} + +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +@function get-parent-columns($columns) { + @if $columns != $grid-columns { + $parent-columns: $columns !global; + } @else { + $parent-columns: $grid-columns !global; + } + + @return $parent-columns; +} + +@function is-display-table($container-is-display-table, $display) { + $display-table: false; + + @if $container-is-display-table == true { + $display-table: true; + } @else if $display == table { + $display-table: true; + } + + @return $display-table; +} diff --git a/_sass/vendor/neat/grid/_reset.scss b/_sass/vendor/neat/grid/_reset.scss new file mode 100644 index 0000000..496c4a7 --- /dev/null +++ b/_sass/vendor/neat/grid/_reset.scss @@ -0,0 +1,12 @@ +@mixin reset-display { + $container-display-table: false !global; +} + +@mixin reset-layout-direction { + $layout-direction: $default-layout-direction !global; +} + +@mixin reset-all { + @include reset-display; + @include reset-layout-direction; +} diff --git a/_sass/vendor/neat/grid/_row.scss b/_sass/vendor/neat/grid/_row.scss new file mode 100644 index 0000000..81da6d3 --- /dev/null +++ b/_sass/vendor/neat/grid/_row.scss @@ -0,0 +1,17 @@ +@mixin row($display: block, $direction: $default-layout-direction) { + @include clearfix; + $layout-direction: $direction !global; + + @if $display == table { + display: table; + @include fill-parent; + table-layout: fixed; + $container-display-table: true !global; + } + + @else { + display: block; + $container-display-table: false !global; + } +} + diff --git a/_sass/vendor/neat/grid/_shift.scss b/_sass/vendor/neat/grid/_shift.scss new file mode 100644 index 0000000..1d27b9b --- /dev/null +++ b/_sass/vendor/neat/grid/_shift.scss @@ -0,0 +1,16 @@ +@mixin shift($n-columns: 1) { + @include shift-in-context($n-columns); +} + +@mixin shift-in-context($shift: $columns of $container-columns) { + $n-columns: nth($shift, 1); + $parent-columns: container-shift($shift) !global; + + $direction: get-direction($layout-direction, $default-layout-direction); + $opposite-direction: get-opposite-direction($direction); + + margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); + + // Reset nesting context + $parent-columns: $grid-columns !global; +} diff --git a/_sass/vendor/neat/grid/_span-columns.scss b/_sass/vendor/neat/grid/_span-columns.scss new file mode 100644 index 0000000..c79193d --- /dev/null +++ b/_sass/vendor/neat/grid/_span-columns.scss @@ -0,0 +1,43 @@ +@mixin span-columns($span: $columns of $container-columns, $display: block) { + $columns: nth($span, 1); + $container-columns: container-span($span); + + // Set nesting context (used by shift()) + $parent-columns: get-parent-columns($container-columns) !global; + + $direction: get-direction($layout-direction, $default-layout-direction); + $opposite-direction: get-opposite-direction($direction); + + $display-table: is-display-table($container-display-table, $display); + + @if $display-table { + display: table-cell; + width: percentage($columns / $container-columns); + } @else { + float: #{$opposite-direction}; + + @if $display != no-display { + display: block; + } + + @if $display == collapse { + @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead." + } + + @if $display == collapse or $display == block-collapse { + width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); + + &:last-child { + width: flex-grid($columns, $container-columns); + } + + } @else { + margin-#{$direction}: flex-gutter($container-columns); + width: flex-grid($columns, $container-columns); + + &:last-child { + margin-#{$direction}: 0; + } + } + } +} diff --git a/_sass/vendor/neat/grid/_to-deprecate.scss b/_sass/vendor/neat/grid/_to-deprecate.scss new file mode 100644 index 0000000..d0a681f --- /dev/null +++ b/_sass/vendor/neat/grid/_to-deprecate.scss @@ -0,0 +1,57 @@ +@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { + @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."; + + @if length($query) == 1 { + @media screen and ($default-feature: nth($query, 1)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns; + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 2 { + @media screen and (nth($query, 1): nth($query, 2)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns; + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 3 { + @media screen and (nth($query, 1): nth($query, 2)) { + $default-grid-columns: $grid-columns; + $grid-columns: nth($query, 3); + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 4 { + @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns; + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 5 { + @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { + $default-grid-columns: $grid-columns; + $grid-columns: nth($query, 5); + @content; + $grid-columns: $default-grid-columns; + } + } + + @else { + @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."; + } +} + +@mixin nth-omega($nth, $display: block, $direction: default) { + @warn "The nth-omega() mixin is deprecated. Please use omega() instead."; + @include omega($nth $display, $direction); +} diff --git a/_sass/vendor/neat/grid/_visual-grid.scss b/_sass/vendor/neat/grid/_visual-grid.scss new file mode 100644 index 0000000..1c822fd --- /dev/null +++ b/_sass/vendor/neat/grid/_visual-grid.scss @@ -0,0 +1,41 @@ +@mixin grid-column-gradient($values...) { + background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values); + background-image: -webkit-linear-gradient(left, $values); + background-image: -moz-linear-gradient(left, $values); + background-image: -ms-linear-gradient(left, $values); + background-image: -o-linear-gradient(left, $values); + background-image: unquote("linear-gradient(left, #{$values})"); +} + +@if $visual-grid == true or $visual-grid == yes { + body:before { + content: ''; + display: inline-block; + @include grid-column-gradient(gradient-stops($grid-columns)); + height: 100%; + left: 0; + margin: 0 auto; + max-width: $max-width; + opacity: $visual-grid-opacity; + position: fixed; + right: 0; + width: 100%; + pointer-events: none; + + @if $visual-grid-index == back { + z-index: -1; + } + + @else if $visual-grid-index == front { + z-index: 9999; + } + + @each $breakpoint in $visual-grid-breakpoints { + @if $breakpoint != nil { + @include media($breakpoint) { + @include grid-column-gradient(gradient-stops($grid-columns)); + } + } + } + } +} diff --git a/_sass/vendor/neat/settings/_grid.scss b/_sass/vendor/neat/settings/_grid.scss new file mode 100644 index 0000000..f1dcda4 --- /dev/null +++ b/_sass/vendor/neat/settings/_grid.scss @@ -0,0 +1,7 @@ +$column: golden-ratio(1em, 3) !default; // Column width +$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns +$grid-columns: 12 !default; // Total number of columns in the grid +$max-width: em(1088) !default; // Max-width of the outer container +$border-box-sizing: true !default; // Makes all elements have a border-box layout +$default-feature: min-width; // Default @media feature for the breakpoint() mixin +$default-layout-direction: LTR !default; diff --git a/_sass/vendor/neat/settings/_visual-grid.scss b/_sass/vendor/neat/settings/_visual-grid.scss new file mode 100644 index 0000000..611c2b3 --- /dev/null +++ b/_sass/vendor/neat/settings/_visual-grid.scss @@ -0,0 +1,5 @@ +$visual-grid: false !default; // Display the base grid +$visual-grid-color: #EEE !default; +$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front) +$visual-grid-opacity: 0.4 !default; +$visual-grid-breakpoints: () !default; diff --git a/about/index.md b/about/index.md index dbf6c40..b575e7b 100644 --- a/about/index.md +++ b/about/index.md @@ -21,6 +21,6 @@ Looking for a simple, responsive, theme for your Jekyll powered blog? Well look * [Simple site search](https://github.com/christian-fei/Simple-Jekyll-Search) * Support for Disqus Comments -Install Minimal Mistakes Theme +Install So Simple Theme [^1]: Example: *domain.com/category-name/post-title* \ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss index 9f7c811..6123c87 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -13,15 +13,15 @@ sitemap: false // Partials @import "variables"; -@import "grid"; +@import "vendor/bourbon/bourbon"; +@import "grid-settings"; +@import "vendor/neat/neat"; @import "mixins"; @import "reset"; @import "site"; -@import "typography"; @import "pygments"; -@import "coderay"; @import "elements"; @import "forms"; -@import "page"; +@import "layout"; @import "vendor/font-awesome/font-awesome"; @import "vendor/magnific-popup/magnific-popup"; \ No newline at end of file diff --git a/theme-setup/index.md b/theme-setup/index.md index 182e618..f65935e 100644 --- a/theme-setup/index.md +++ b/theme-setup/index.md @@ -65,12 +65,11 @@ so-simple-theme/ ├── assets/ | ├── css/ # compiled stylesheets | ├── fonts/ # webfonts -| ├── js/ -| | ├── _main.js # main JavaScript file, plugin settings, etc -| | ├── plugins/ # scripts and jQuery plugins to combine with _main.js -| | ├── scripts.min.js # concatenated and minified _main.js + plugin scripts -| | └── vendor/ # vendor scripts to leave alone and load as is -| └── less/ +| └── js/ +| ├── _main.js # main JavaScript file, plugin settings, etc +| ├── plugins/ # scripts and jQuery plugins to combine with _main.js +| ├── scripts.min.js # concatenated and minified _main.js + plugin scripts +| └── vendor/ # vendor scripts to leave alone and load as is ├── blog/ # sample blog category page ├── images/ # images for posts and pages ├── 404.md # 404 page