diff --git a/.themes/oscailte b/.themes/oscailte new file mode 160000 index 00000000000..0844f3dd9e1 --- /dev/null +++ b/.themes/oscailte @@ -0,0 +1 @@ +Subproject commit 0844f3dd9e1747f1bd6b7b803c04dc3733c36d78 diff --git a/Rakefile b/Rakefile index c7ad5049fc8..947b2a4bf15 100644 --- a/Rakefile +++ b/Rakefile @@ -9,16 +9,16 @@ ssh_port = "22" document_root = "~/website.com/" rsync_delete = false rsync_args = "" # Any extra arguments to pass to rsync -deploy_default = "rsync" +deploy_default = "push" # This will be configured for you when you run config_deploy deploy_branch = "gh-pages" ## -- Misc Configs -- ## -public_dir = "public" # compiled site directory +public_dir = "public/" # compiled site directory source_dir = "source" # source file directory -blog_index_dir = 'source' # directory for your blog's index page (if you put your index in source/blog/index.html, set this to 'source/blog') +blog_index_dir = 'source/blog' # directory for your blog's index page (if you put your index in source/blog/index.html, set this to 'source/blog') deploy_dir = "_deploy" # deploy directory (for Github pages deployment) stash_dir = "_stash" # directory to stash posts for speedy generation posts_dir = "_posts" # directory for blog files diff --git a/_config.yml b/_config.yml index c1d56f4fa07..19c6db446e4 100644 --- a/_config.yml +++ b/_config.yml @@ -1,13 +1,14 @@ +# See options at https://github.com/coogie/oscailte # ----------------------- # # Main Configs # # ----------------------- # -url: http://yoursite.com -title: My Octopress Blog -subtitle: A blogging framework for hackers. -author: Your Name +url: https://home-assistant.io +title: Home Assistant +subtitle: Open-source home automation platform running on Python 3 +author: Paulus Schoutsen simple_search: https://www.google.com/search -description: +description: Home Assistant is an open-source home automation platform running on Python 3. # Default date format is "ordinal" (resulting in "July 22nd 2007") # You can customize the format as defined in @@ -29,7 +30,7 @@ email: root: / permalink: /blog/:year/:month/:day/:title/ source: source -destination: public +destination: public/ plugins: plugins code_dir: downloads/code category_dir: blog/categories @@ -70,7 +71,7 @@ github_show_profile_link: true github_skip_forks: true # Twitter -twitter_user: +twitter_user: balloob twitter_tweet_button: true # Google +1 @@ -79,8 +80,8 @@ google_plus_one_size: medium # Google Plus Profile # Hidden: No visible button, just add author information to search results -googleplus_user: -googleplus_hidden: false +googleplus_user: +PaulusSchoutsen +googleplus_hidden: true # Pinboard pinboard_user: @@ -99,3 +100,6 @@ google_analytics_tracking_id: # Facebook Like facebook_like: false + +social: + visible: false diff --git a/sass/_base.scss b/sass/_base.scss new file mode 100644 index 00000000000..05fdd005cbe --- /dev/null +++ b/sass/_base.scss @@ -0,0 +1,5 @@ +@import "base/utilities"; +@import "base/solarized"; +@import "base/theme"; +@import "base/typography"; +@import "base/layout"; diff --git a/sass/_partials.scss b/sass/_partials.scss new file mode 100644 index 00000000000..99c28b6378c --- /dev/null +++ b/sass/_partials.scss @@ -0,0 +1,8 @@ +@import "partials/header"; +@import "partials/navigation"; +@import "partials/blog"; +@import "partials/sharing"; +@import "partials/syntax"; +@import "partials/archive"; +@import "partials/sidebar"; +@import "partials/footer"; diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss new file mode 100644 index 00000000000..81903428f5c --- /dev/null +++ b/sass/base/_layout.scss @@ -0,0 +1,192 @@ +$max-width: 1200px !default; + +// Padding used for layout margins +$pad-min: 18px !default; +$pad-narrow: 25px !default; +$pad-medium: 35px !default; +$pad-wide: 55px !default; + +// Sidebar widths used in media queries +$sidebar-width-medium: 240px !default; +$sidebar-pad-medium: 15px !default; +$sidebar-pad-wide: 20px !default; +$sidebar-width-wide: 300px !default; + +$indented-lists: false !default; + +$header-font-size: 1em !default; +$header-padding-top: 1.5em !default; +$header-padding-bottom: 1.5em !default; + +.group { @include pie-clearfix; } + +@mixin collapse-sidebar { + float: none; + width: auto; + clear: left; + margin: 0; + padding: 0 $pad-medium 1px; + background-color: lighten($sidebar-bg, 2); + border-top: 1px solid lighten($sidebar-border, 4); + section { + &.odd, &.even { float: left; width: 48%; } + &.odd { margin-left: 0; } + &.even { margin-left: 4%; } + } + &.thirds section { + width: 30%; + margin-left: 5%; + &.first { + margin-left: 0; + clear: both; + } + } +} + +body { + -webkit-text-size-adjust: none; + max-width: $max-width; + position: relative; + margin: 0 auto; + > header, > nav, > footer, #content > article, #content > div > article, #content > div > section { + @extend .group; + padding-left: $pad-min; + padding-right: $pad-min; + @media only screen and (min-width: 480px) { + padding-left: $pad-narrow; + padding-right: $pad-narrow; + } + @media only screen and (min-width: 768px) { + padding-left: $pad-medium; + padding-right: $pad-medium; + } + @media only screen and (min-width: 992px) { + padding-left: $pad-wide; + padding-right: $pad-wide; + } + } + div.pagination { + @extend .group; + margin-left: $pad-min; + margin-right: $pad-min; + @media only screen and (min-width: 480px) { + margin-left: $pad-narrow; + margin-right: $pad-narrow; + } + @media only screen and (min-width: 768px) { + margin-left: $pad-medium; + margin-right: $pad-medium; + } + @media only screen and (min-width: 992px) { + margin-left: $pad-wide; + margin-right: $pad-wide; + } + } + > header { + font-size: $header-font-size; + padding-top: $header-padding-top; + padding-bottom: $header-padding-bottom; + } +} + +#content { + overflow: hidden; + > div, > article { width: 100%; } +} + +aside.sidebar { + float: none; + padding: 0 $pad-min 1px; + background-color: lighten($sidebar-bg, 2); + border-top: 1px solid $sidebar-border; + @extend .group; +} + +.flex-content { max-width: 100%; height: auto; } + +.basic-alignment { + &.left { float: left; margin-right: 1.5em; } + &.right { float: right; margin-left: 1.5em; } + &.center { display:block; margin: 0 auto 1.5em; } + &.left, &.right { margin-bottom: .8em; } +} + +.toggle-sidebar { &, .no-sidebar & { display: none; }} + +body.sidebar-footer { + @media only screen and (min-width: 750px) { + aside.sidebar{ @include collapse-sidebar; } + } + #content { margin-right: 0px; } + .toggle-sidebar { display: none; } +} + +@media only screen and (min-width: 550px) { + body > header { font-size: $header-font-size; } +} +@media only screen and (min-width: 750px) { + aside.sidebar { @include collapse-sidebar; } +} +#main, #content, .sidebar { + @extend .group; +} +@media only screen and (min-width: 768px) { + body { -webkit-text-size-adjust: auto; } + body > header { font-size: $header-font-size * 1.2; } + #main { + padding: 0; + margin: 0 auto; + } + #content { + overflow: visible; + margin-right: $sidebar-width-medium; + position: relative; + .no-sidebar & { margin-right: 0; border-right: 0; } + .collapse-sidebar & { margin-right: 20px; } + > div, > article { + padding-top: $pad-medium/2; + padding-bottom: $pad-medium/2; + float: left; + } + } + aside.sidebar { + width: $sidebar-width-medium - $sidebar-pad-medium*2; + padding: 0 $sidebar-pad-medium $sidebar-pad-medium; + background: none; + clear: none; + float: left; + margin: 0 -100% 0 0; + section { + width: auto; margin-left: 0; + &.odd, &.even { float: none; width: auto; margin-left: 0; } + } + .collapse-sidebar & { + @include collapse-sidebar; + } + } +} + +@media only screen and (min-width: 992px) { + body > header { font-size: $header-font-size * 1.3; } + #content { margin-right: $sidebar-width-wide; } + #content { + > div, > article { + padding-top: $pad-wide/2; + padding-bottom: $pad-wide/2; + } + } + aside.sidebar { + width: $sidebar-width-wide - $sidebar-pad-wide*2; + padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; + .collapse-sidebar & { + padding: { left: $pad-wide; right: $pad-wide; } + } + } +} + +@if $indented-lists == false { + @media only screen and (min-width: 768px) { + ul, ol { margin-left: 0; } + } +} + diff --git a/sass/base/_solarized.scss b/sass/base/_solarized.scss new file mode 100644 index 00000000000..45d8fc5eff3 --- /dev/null +++ b/sass/base/_solarized.scss @@ -0,0 +1,46 @@ +$base03: #002b36 !default; //darkest blue +$base02: #073642 !default; //dark blue +$base01: #586e75 !default; //darkest gray +$base00: #657b83 !default; //dark gray +$base0: #839496 !default; //medium gray +$base1: #93a1a1 !default; //medium light gray +$base2: #eee8d5 !default; //cream +$base3: #fdf6e3 !default; //white +$solar-yellow: #b58900 !default; +$solar-orange: #cb4b16 !default; +$solar-red: #dc322f !default; +$solar-magenta: #d33682 !default; +$solar-violet: #6c71c4 !default; +$solar-blue: #268bd2 !default; +$solar-cyan: #2aa198 !default; +$solar-green: #859900 !default; + +$solarized: dark !default; + +@if $solarized == light { + + $_base03: $base03; + $_base02: $base02; + $_base01: $base01; + $_base00: $base00; + $_base0: $base0; + $_base1: $base1; + $_base2: $base2; + $_base3: $base3; + + $base03: $_base3; + $base02: $_base2; + $base01: $_base1; + $base00: $_base0; + $base0: $_base00; + $base1: $_base01; + $base2: $_base02; + $base3: $_base03; +} + +/* non highlighted code colors */ +$pre-bg: $base03 !default; +$pre-border: darken($base02, 5) !default; +$pre-color: $base1 !default; + + diff --git a/sass/base/_theme.scss b/sass/base/_theme.scss new file mode 100644 index 00000000000..c35136d5ac9 --- /dev/null +++ b/sass/base/_theme.scss @@ -0,0 +1,85 @@ +$noise-bg: image-url('noise.png') top left !default; +$img-border: inline-image('dotted-border.png') !default; + +// Main Link Colors +$link-color: lighten(#165b94, 3) !default; +$link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default; +$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default; +$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default; + +// Main Section Colors +$main-bg: #f8f8f8 !default; +$page-bg: #252525 !default; +$article-border: #eeeeee !default; + +$header-bg: #333 !default; +$header-border: lighten($header-bg, 15) !default; +$title-color: #f2f2f2 !default; +$subtitle-color: #aaa !default; + +$text-color: #222 !default; +$text-color-light: #aaa !default; +$type-border: #ddd !default; + +/* Navigation */ +$nav-bg: #ccc !default; +$nav-bg-front: image-url('noise.png') !default; +$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)) !default; +$nav-color: darken($nav-bg, 38) !default; +$nav-color-hover: darken($nav-color, 25) !default; +$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; +$nav-border: darken($nav-bg, 10) !default; +$nav-border-top: lighten($nav-bg, 15) !default; +$nav-border-bottom: darken($nav-bg, 25) !default; +$nav-border-left: darken($nav-bg, 11) !default; +$nav-border-right: lighten($nav-bg, 7) !default; + +/* Sidebar colors */ +$sidebar-bg: #f2f2f2 !default; +$sidebar-link-color: $text-color !default; +$sidebar-link-color-hover: $link-color-hover !default; +$sidebar-link-color-active: $link-color-active !default; +$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; +$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; +$sidebar-border-hover: darken($sidebar-bg, 7) !default; +$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; +$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; + +$footer-color: #888 !default; +$footer-bg: #ccc !default; +$footer-bg-front: image-url('noise.png') !default; +$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)) !default; +$footer-color: darken($footer-bg, 38) !default; +$footer-color-hover: darken($footer-color, 10) !default; +$footer-border-top: lighten($footer-bg, 15) !default; +$footer-border-bottom: darken($footer-bg, 15) !default; +$footer-link-color: darken($footer-bg, 38) !default; +$footer-link-color-hover: darken($footer-color, 25) !default; +$page-border-bottom: darken($footer-bg, 5) !default; + + +/* Core theme application */ + +a { + @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); +} +aside.sidebar a { + @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active); +} +a { + @include transition(color .3s); +} + +html { + background: $page-bg image-url('line-tile.png') top left; +} +body { + > div { + background: $sidebar-bg $noise-bg; + border-bottom: 1px solid $page-border-bottom; + > div { + background: $main-bg $noise-bg; + border-right: 1px solid $sidebar-border; + } + } +} diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss new file mode 100644 index 00000000000..9a6bbacd2a2 --- /dev/null +++ b/sass/base/_typography.scss @@ -0,0 +1,164 @@ +$blockquote: $type-border !default; +$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default; +$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default; +$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; +$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default; +$header-title-font-family: $heading-font-family !default; +$header-subtitle-font-family: $heading-font-family !default; + +// Fonts +.heading { + font-family: $heading-font-family; +} +.sans { font-family: $sans; } +.serif { font-family: $serif; } +.mono { font-family: $mono; } + +body > header h1 { + font-size: 2.2em; + @extend .heading; + font-family: $header-title-font-family; + font-weight: normal; + line-height: 1.2em; + margin-bottom: 0.6667em; +} +body > header h2 { + font-family: $header-subtitle-font-family; +} + +body { + line-height: 1.5em; + color: $text-color; + @extend .serif; +} +h1 { + font-size: 2.2em; + line-height: 1.2em; +} + +@media only screen and (min-width: 992px) { + body { font-size: 1.15em; } + h1 { font-size: 2.6em; line-height: 1.2em; } +} + +#{headings()}{ + @extend .heading; + text-rendering: optimizelegibility; + margin-bottom: 1em; + font-weight: bold; +} +h2, section h1 { + font-size: 1.5em; +} +h3, section h2, section section h1 { + font-size: 1.3em; +} +h4, section h3, section section h2, section section section h1 { + font-size: 1em; +} +h5, section h4, section section h3 { + font-size: .9em; +} +h6, section h5, section section h4, section section section h3 { + font-size: .8em; +} + +p, article blockquote, ul, ol { margin-bottom: 1.5em; } + +ul { list-style-type: disc; + ul { list-style-type: circle; margin-bottom: 0px; + ul { list-style-type: square; margin-bottom: 0px; }}} + +ol { list-style-type: decimal; + ol { list-style-type: lower-alpha; margin-bottom: 0px; + ol { list-style-type: lower-roman; margin-bottom: 0px; }}} + +ul, ol { &, ul, ol { margin-left: 1.3em; }} +ul, ol { ul, ol { margin-bottom: 0em; }} + +strong { font-weight: bold; } + +em { font-style: italic; } + +sup, sub { font-size: 0.75em; position: relative; display: inline-block; padding: 0 .2em; line-height: .8em;} +sup { top: -.5em; } +sub { bottom: -.5em; } + +a[rev='footnote']{ font-size: .75em; padding: 0 .3em; line-height: 1; } + +q { font-style: italic; + &:before { content: "\201C"; } + &:after { content: "\201D"; } +} + +em, dfn { font-style: italic; } + +strong, dfn { font-weight: bold; } + +del, s { text-decoration: line-through; } + +abbr, acronym { border-bottom: 1px dotted; cursor: help; } + +pre, code, tt { @extend .mono; } + +hr { margin-bottom: 0.2em; } + +small { font-size: .8em; } + +big { font-size: 1.2em; } + +article blockquote { + $bq-margin: 1.2em; + font-style: italic; + position: relative; + font-size: 1.2em; + line-height: 1.5em; + padding-left: 1em; + border-left: 4px solid rgba($text-color-light, .5); + cite { + font-style: italic; + a { color: $text-color-light !important; word-wrap: break-word; } + &:before { content: '\2014'; padding:{right: .3em; left: .3em;} color: $text-color-light; } + } + @media only screen and (min-width: 992px) { + padding-left: 1.5em; + border-left-width: 4px; + } +} + +.pullquote-right:before, +.pullquote-left:before { + /* Reset metrics. */ + padding: 0; + border: none; + + /* Content */ + content: attr(data-pullquote); + + /* Pull out to the right, modular scale based margins. */ + float: right; + width: 45%; + margin: .5em 0 1em 1.5em; + + /* Baseline correction */ + position: relative; + top: 7px; + font-size: 1.4em; + line-height: 1.45em; +} + +.pullquote-left:before { + /* Make left pullquotes align properly. */ + float: left; + margin: .5em 1.5em 1em 0; +} + +/* @extend this to force long lines of continuous text to wrap */ +.force-wrap { + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + white-space: pre-wrap; + word-wrap: break-word; +} + diff --git a/sass/base/_utilities.scss b/sass/base/_utilities.scss new file mode 100644 index 00000000000..2d49e659e74 --- /dev/null +++ b/sass/base/_utilities.scss @@ -0,0 +1,28 @@ +@mixin mask-image($img, $repeat: no-repeat){ + @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); + @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); + width: image-width($img); + height: image-height($img); +} + +@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) { + @include border-radius($border-radius); + @include box-shadow($shadow); + @include box-sizing(border-box); + border: $border; +} + +@mixin selection($bg, $color: inherit, $text-shadow: none){ + * { + &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; } + &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; } + &::selection { background: $bg; color: $color; text-shadow: $text-shadow; } + } +} + +@function text-color($color, $dark: dark, $light: light){ + $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000; + $text-color: if($text-color >= 150, $dark, $light); + @return $text-color; +} + diff --git a/sass/custom/_colors.scss b/sass/custom/_colors.scss new file mode 100644 index 00000000000..23af5e739d0 --- /dev/null +++ b/sass/custom/_colors.scss @@ -0,0 +1,49 @@ +// Here you can easily change your sites's color scheme. +// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. +// If you need a handy color picker try http://hslpicker.com + +$header-bg: #fff; +//$subtitle-color: lighten($header-bg, 58); +$nav-bg: #fff; +$nav-bg-front: none; +$nav-bg-back: #fff; +//$sidebar-bg: desaturate(#eceff5, 8); +//$sidebar-link-color: saturate(#526f9a, 10); +//$sidebar-link-color-hover: darken(#7ab662, 9); +$footer-bg: #fff; +$footer-bg-front: #fff; +$footer-bg-back: #fff; + +/* To use the light Solarized highlighting theme uncomment the following line */ +//$solarized: light; + +/* If you want to tweak the Solarized colors you can do that here */ +//$base03: #002b36; //darkest blue +//$base02: #073642; //dark blue +//$base01: #586e75; //darkest gray +//$base00: #657b83; //dark gray +//$base0: #839496; //medium gray +//$base1: #93a1a1; //medium light gray +//$base2: #eee8d5; //cream +//$base3: #fdf6e3; //white +//$solar-yellow: #b58900; +//$solar-orange: #cb4b16; +//$solar-red: #dc322f; +//$solar-magenta: #d33682; +//$solar-violet: #6c71c4; +//$solar-blue: #268bd2; +//$solar-cyan: #2aa198; +//$solar-green: #859900; + + +/* Non highlighted code colors */ +//$pre-bg: $base03; +//$pre-border: darken($base02, 5); +//$pre-color: $base1; + +$main-bg: #fff; +$page-bg: #fff; +$link-color: #268bd2; +$nav-color: $link-color; +$link-color-visited:darken($nav-color, 25); +$title-color: $link-color; diff --git a/sass/custom/_fonts.scss b/sass/custom/_fonts.scss new file mode 100644 index 00000000000..0d51f6843a5 --- /dev/null +++ b/sass/custom/_fonts.scss @@ -0,0 +1,10 @@ +// Here you can easily change font faces which are used in your site. +// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's. +// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html + +$sans: "Open Sans", sans-serif; +$serif: "Noto Serif", serif; +//$mono: "Courier", monospace; +$heading-font-family: $sans; +//$header-title-font-family: "Futura", sans-serif; +//$header-subtitle-font-family: "Futura", sans-serif; diff --git a/sass/custom/_layout.scss b/sass/custom/_layout.scss new file mode 100644 index 00000000000..74c7de9d429 --- /dev/null +++ b/sass/custom/_layout.scss @@ -0,0 +1,21 @@ +// Here you can easily change your sites's layout. +// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works. + +//$header-font-size: 1em; +//$header-padding-top: 1.5em; +//$header-padding-bottom: 1.5em; + +//$max-width: 1350px; +//$indented-lists: true; + +// Padding used for layout margins +//$pad-min: 18px; +//$pad-narrow: 25px; +//$pad-medium: 35px; +//$pad-wide: 55px; + +// Sidebar widths used in media queries +//$sidebar-width-medium: 240px; +//$sidebar-pad-medium: 15px; +//$sidebar-pad-wide: 20px; +//$sidebar-width-wide: 300px; diff --git a/sass/custom/_paulus.scss b/sass/custom/_paulus.scss new file mode 100644 index 00000000000..3d8b1655975 --- /dev/null +++ b/sass/custom/_paulus.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + +// https://fortawesome.github.io/Font-Awesome/3.2.1/icons/ + +.ha-title { + white-space: nowrap; + + img { + width: 40px; + vertical-align: middle; + } +} + +.usp ul { + text-align: left; + margin-left: 27px; + margin-top: -18px; +} + +.note { + background: #e7f2fa; + padding: 12px; + margin-bottom: 1em; + box-shadow: rgba(0,0,0,0.06) 0 0 10px; + + .title::before { + font-family: "FontAwesome"; + content: "\f05a"; + margin-right: 5px; + } + + .title { + border-top-left-radius: 0.4em; + border-top-right-radius: 0.4em; + font-weight: bold; + display: block; + color: #fff; + background: #6ab0de; + margin: -12px; + padding: 6px 12px; + margin-bottom: 12px; + box-sizing: border-box; + } + + .content { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/sass/custom/_styles.scss b/sass/custom/_styles.scss new file mode 100644 index 00000000000..d35472805bf --- /dev/null +++ b/sass/custom/_styles.scss @@ -0,0 +1,142 @@ +// This File is imported last, and will override other styles in the cascade +// Add styles here to make changes without digging in too much +html { + background:$page-bg; +} +body { + line-height: 1.8em; + font-size:1.1em; + max-width:1320px; + > div { + background: #fff !important; + border-bottom:2px solid #f2f2f2; + > div { + border-right:2px solid #f2f2f2; + background: #fff !important; + } + } + > nav { + border-bottom:2px solid #f2f2f2; + li+li { + border-left:2px solid #f2f2f2; + } + a { + font-family: $serif; + } + } + >header { + h1 a { + font-weight: bold; + } + } + + #content .blog-index article { + table { + font-size: 90%; + margin-bottom: 1.5em; + thead tr { + border-bottom: 1px solid $sidebar-border; + } + th { + font-weight: bold; + padding-right: 20px; + } + td { + padding: 0 20px 10px 0; + vertical-align: top; + } + } + + header { + h1 { + margin: 0; + a { text-decoration: none; + &:hover { + text-decoration: none; + color:$link-color; + } + } + } + } + } + #blog-archives { + h1 { + a { text-decoration: none; + &:hover { text-decoration:none; } } + } + } + aside.sidebar { + background:#fff; + border-left:2px solid #f2f2f2; + height:100%; + form .search { + padding: .3em .5em 0; + font-size: .85em; + font-family: $serif; + line-height: 1.1em; + width: 95%; + background-color: #fff; + border: 2px solid #f2f2f2; + color: #000; + } + input[type=text]:focus, textarea:focus { + box-shadow: 0 0 0 rgba(255,255,255,1); + } + } + + .toggle-sidebar { + display:none; + } +} +@media only screen and (max-width: 749px) { + aside.sidebar { + padding-top:15px; + padding-bottom:15px; + } +} +@media only screen and (min-width: 750px) { + aside.sidebar { + border-top:0px solid black; + } +} +@media only screen and (min-width:992px) { + body { + font-size: 1.3em; + } + .collapse-sidebar aside.sidebar { + background: #fff; + } +} +.meta { + font-family: $serif; +} +.sticky { + position: fixed; + width:100%; + left: 0; + top: 0; + z-index: 100; +} +::-webkit-input-placeholder { + color: $link-color; +} +:-moz-placeholder { /* Firefox 18- */ + color: $link-color; +} +::-moz-placeholder { /* Firefox 19+ */ + color: $link-color; +} +:-ms-input-placeholder { + color: $link-color; +} + +.highlight, html .gist .gist-file .gist-syntax .gist-highlight { + table { + margin: 0; + td { + padding: 0; + &.code { width: 100%; } + } + } + border: 1px solid $pre-border !important; +} diff --git a/sass/fontawesome/_core.scss b/sass/fontawesome/_core.scss new file mode 100644 index 00000000000..0189c73dfb6 --- /dev/null +++ b/sass/fontawesome/_core.scss @@ -0,0 +1,129 @@ +/* FONT AWESOME CORE + * -------------------------- */ + +[class^="icon-"], +[class*=" icon-"] { + @include icon-FontAwesome(); +} + +[class^="icon-"]:before, +[class*=" icon-"]:before { + text-decoration: inherit; + display: inline-block; + speak: none; +} + +/* makes the font 33% larger relative to the icon container */ +.icon-large:before { + vertical-align: -10%; + font-size: (4em/3); +} + +/* makes sure icons active on rollover in links */ +a { + [class^="icon-"], + [class*=" icon-"] { + display: inline; + } +} + +/* increased font size for icon-large */ +[class^="icon-"], +[class*=" icon-"] { + &.icon-fixed-width { + display: inline-block; + width: (16em/14); + text-align: right; + padding-right: (4em/14); + &.icon-large { + width: (20em/14); + } + } +} + +.icons-ul { + margin-left: $icons-li-width; + list-style-type: none; + + > li { position: relative; } + + .icon-li { + position: absolute; + left: -$icons-li-width; + width: $icons-li-width; + text-align: center; + line-height: inherit; + } +} + +// allows usage of the hide class directly on font awesome icons +[class^="icon-"], +[class*=" icon-"] { + &.hide { + display: none; + } +} + +.icon-muted { color: $iconMuted; } +.icon-light { color: $iconLight; } +.icon-dark { color: $iconDark; } + +// Icon Borders +// ------------------------- + +.icon-border { + border: solid 1px $borderColor; + padding: .2em .25em .15em; + @include border-radius(3px); +} + +// Icon Sizes +// ------------------------- + +.icon-2x { + font-size: 2em; + &.icon-border { + border-width: 2px; + @include border-radius(4px); + } +} +.icon-3x { + font-size: 3em; + &.icon-border { + border-width: 3px; + @include border-radius(5px); + } +} +.icon-4x { + font-size: 4em; + &.icon-border { + border-width: 4px; + @include border-radius(6px); + } +} + +.icon-5x { + font-size: 5em; + &.icon-border { + border-width: 5px; + @include border-radius(7px); + } +} + + +// Floats & Margins +// ------------------------- + +// Quick floats +.pull-right { float: right; } +.pull-left { float: left; } + +[class^="icon-"], +[class*=" icon-"] { + &.pull-left { + margin-right: .3em; + } + &.pull-right { + margin-left: .3em; + } +} diff --git a/sass/fontawesome/_extras.scss b/sass/fontawesome/_extras.scss new file mode 100644 index 00000000000..9a25845d8de --- /dev/null +++ b/sass/fontawesome/_extras.scss @@ -0,0 +1,93 @@ +/* EXTRAS + * -------------------------- */ + +/* Stacked and layered icon */ +@include icon-stack(); + +/* Animated rotating icon */ +.icon-spin { + display: inline-block; + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; +} + +/* Prevent stack and spinners from being taken inline when inside a link */ +a .icon-stack, +a .icon-spin { + display: inline-block; + text-decoration: none; +} + +@-moz-keyframes spin { + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(359deg); } +} +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); } +} +@-o-keyframes spin { + 0% { -o-transform: rotate(0deg); } + 100% { -o-transform: rotate(359deg); } +} +@-ms-keyframes spin { + 0% { -ms-transform: rotate(0deg); } + 100% { -ms-transform: rotate(359deg); } +} +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(359deg); } +} + +/* Icon rotations and mirroring */ +.icon-rotate-90:before { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); +} + +.icon-rotate-180:before { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); +} + +.icon-rotate-270:before { + -webkit-transform: rotate(270deg); + -moz-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -o-transform: rotate(270deg); + transform: rotate(270deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); +} + +.icon-flip-horizontal:before { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +.icon-flip-vertical:before { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -ms-transform: scale(1, -1); + -o-transform: scale(1, -1); + transform: scale(1, -1); +} + +/* ensure rotation occurs inside anchor tags */ +a { + .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical { + &:before { display: inline-block; } + } +} diff --git a/sass/fontawesome/_font-awesome.scss b/sass/fontawesome/_font-awesome.scss new file mode 100644 index 00000000000..379dfd00f06 --- /dev/null +++ b/sass/fontawesome/_font-awesome.scss @@ -0,0 +1,32 @@ +/*! + * Font Awesome 3.2.1 + * the iconic font designed for Bootstrap + * ------------------------------------------------------------------------------ + * The full suite of pictographic icons, examples, and documentation can be + * found at http://fontawesome.io. Stay up to date on Twitter at + * http://twitter.com/fontawesome. + * + * License + * ------------------------------------------------------------------------------ + * - The Font Awesome font is licensed under SIL OFL 1.1 - + * http://scripts.sil.org/OFL + * - Font Awesome CSS, LESS, and SASS files are licensed under MIT License - + * http://opensource.org/licenses/mit-license.html + * - Font Awesome documentation licensed under CC BY 3.0 - + * http://creativecommons.org/licenses/by/3.0/ + * - Attribution is no longer required in Font Awesome 3.0, but much appreciated: + * "Font Awesome by Dave Gandy - http://fontawesome.io" + * + * Author - Dave Gandy + * ------------------------------------------------------------------------------ + * Email: dave@fontawesome.io + * Twitter: http://twitter.com/davegandy + * Work: Lead Product Designer @ Kyruus - http://kyruus.com + */ + +@import "variables"; +@import "mixins"; +@import "path"; +@import "core"; +@import "extras"; +@import "icons"; diff --git a/sass/fontawesome/_icons.scss b/sass/fontawesome/_icons.scss new file mode 100644 index 00000000000..eefda0c9efe --- /dev/null +++ b/sass/fontawesome/_icons.scss @@ -0,0 +1,381 @@ +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + * readers do not read off random characters that represent icons */ + +.icon-glass:before { content: $glass; } +.icon-music:before { content: $music; } +.icon-search:before { content: $search; } +.icon-envelope-alt:before { content: $envelope-alt; } +.icon-heart:before { content: $heart; } +.icon-star:before { content: $star; } +.icon-star-empty:before { content: $star-empty; } +.icon-user:before { content: $user; } +.icon-film:before { content: $film; } +.icon-th-large:before { content: $th-large; } +.icon-th:before { content: $th; } +.icon-th-list:before { content: $th-list; } +.icon-ok:before { content: $ok; } +.icon-remove:before { content: $remove; } +.icon-zoom-in:before { content: $zoom-in; } +.icon-zoom-out:before { content: $zoom-out; } +.icon-power-off:before, +.icon-off:before { content: $off; } +.icon-signal:before { content: $signal; } +.icon-gear:before, +.icon-cog:before { content: $cog; } +.icon-trash:before { content: $trash; } +.icon-home:before { content: $home; } +.icon-file-alt:before { content: $file-alt; } +.icon-time:before { content: $time; } +.icon-road:before { content: $road; } +.icon-download-alt:before { content: $download-alt; } +.icon-download:before { content: $download; } +.icon-upload:before { content: $upload; } +.icon-inbox:before { content: $inbox; } +.icon-play-circle:before { content: $play-circle; } +.icon-rotate-right:before, +.icon-repeat:before { content: $repeat; } +.icon-refresh:before { content: $refresh; } +.icon-list-alt:before { content: $list-alt; } +.icon-lock:before { content: $lock; } +.icon-flag:before { content: $flag; } +.icon-headphones:before { content: $headphones; } +.icon-volume-off:before { content: $volume-off; } +.icon-volume-down:before { content: $volume-down; } +.icon-volume-up:before { content: $volume-up; } +.icon-qrcode:before { content: $qrcode; } +.icon-barcode:before { content: $barcode; } +.icon-tag:before { content: $tag; } +.icon-tags:before { content: $tags; } +.icon-book:before { content: $book; } +.icon-bookmark:before { content: $bookmark; } +.icon-print:before { content: $print; } +.icon-camera:before { content: $camera; } +.icon-font:before { content: $font; } +.icon-bold:before { content: $bold; } +.icon-italic:before { content: $italic; } +.icon-text-height:before { content: $text-height; } +.icon-text-width:before { content: $text-width; } +.icon-align-left:before { content: $align-left; } +.icon-align-center:before { content: $align-center; } +.icon-align-right:before { content: $align-right; } +.icon-align-justify:before { content: $align-justify; } +.icon-list:before { content: $list; } +.icon-indent-left:before { content: $indent-left; } +.icon-indent-right:before { content: $indent-right; } +.icon-facetime-video:before { content: $facetime-video; } +.icon-picture:before { content: $picture; } +.icon-pencil:before { content: $pencil; } +.icon-map-marker:before { content: $map-marker; } +.icon-adjust:before { content: $adjust; } +.icon-tint:before { content: $tint; } +.icon-edit:before { content: $edit; } +.icon-share:before { content: $share; } +.icon-check:before { content: $check; } +.icon-move:before { content: $move; } +.icon-step-backward:before { content: $step-backward; } +.icon-fast-backward:before { content: $fast-backward; } +.icon-backward:before { content: $backward; } +.icon-play:before { content: $play; } +.icon-pause:before { content: $pause; } +.icon-stop:before { content: $stop; } +.icon-forward:before { content: $forward; } +.icon-fast-forward:before { content: $fast-forward; } +.icon-step-forward:before { content: $step-forward; } +.icon-eject:before { content: $eject; } +.icon-chevron-left:before { content: $chevron-left; } +.icon-chevron-right:before { content: $chevron-right; } +.icon-plus-sign:before { content: $plus-sign; } +.icon-minus-sign:before { content: $minus-sign; } +.icon-remove-sign:before { content: $remove-sign; } +.icon-ok-sign:before { content: $ok-sign; } +.icon-question-sign:before { content: $question-sign; } +.icon-info-sign:before { content: $info-sign; } +.icon-screenshot:before { content: $screenshot; } +.icon-remove-circle:before { content: $remove-circle; } +.icon-ok-circle:before { content: $ok-circle; } +.icon-ban-circle:before { content: $ban-circle; } +.icon-arrow-left:before { content: $arrow-left; } +.icon-arrow-right:before { content: $arrow-right; } +.icon-arrow-up:before { content: $arrow-up; } +.icon-arrow-down:before { content: $arrow-down; } +.icon-mail-forward:before, +.icon-share-alt:before { content: $share-alt; } +.icon-resize-full:before { content: $resize-full; } +.icon-resize-small:before { content: $resize-small; } +.icon-plus:before { content: $plus; } +.icon-minus:before { content: $minus; } +.icon-asterisk:before { content: $asterisk; } +.icon-exclamation-sign:before { content: $exclamation-sign; } +.icon-gift:before { content: $gift; } +.icon-leaf:before { content: $leaf; } +.icon-fire:before { content: $fire; } +.icon-eye-open:before { content: $eye-open; } +.icon-eye-close:before { content: $eye-close; } +.icon-warning-sign:before { content: $warning-sign; } +.icon-plane:before { content: $plane; } +.icon-calendar:before { content: $calendar; } +.icon-random:before { content: $random; } +.icon-comment:before { content: $comment; } +.icon-magnet:before { content: $magnet; } +.icon-chevron-up:before { content: $chevron-up; } +.icon-chevron-down:before { content: $chevron-down; } +.icon-retweet:before { content: $retweet; } +.icon-shopping-cart:before { content: $shopping-cart; } +.icon-folder-close:before { content: $folder-close; } +.icon-folder-open:before { content: $folder-open; } +.icon-resize-vertical:before { content: $resize-vertical; } +.icon-resize-horizontal:before { content: $resize-horizontal; } +.icon-bar-chart:before { content: $bar-chart; } +.icon-twitter-sign:before { content: $twitter-sign; } +.icon-facebook-sign:before { content: $facebook-sign; } +.icon-camera-retro:before { content: $camera-retro; } +.icon-key:before { content: $key; } +.icon-gears:before, +.icon-cogs:before { content: $cogs; } +.icon-comments:before { content: $comments; } +.icon-thumbs-up-alt:before { content: $thumbs-up-alt; } +.icon-thumbs-down-alt:before { content: $thumbs-down-alt; } +.icon-star-half:before { content: $star-half; } +.icon-heart-empty:before { content: $heart-empty; } +.icon-signout:before { content: $signout; } +.icon-linkedin-sign:before { content: $linkedin-sign; } +.icon-pushpin:before { content: $pushpin; } +.icon-external-link:before { content: $external-link; } +.icon-signin:before { content: $signin; } +.icon-trophy:before { content: $trophy; } +.icon-github-sign:before { content: $github-sign; } +.icon-upload-alt:before { content: $upload-alt; } +.icon-lemon:before { content: $lemon; } +.icon-phone:before { content: $phone; } +.icon-unchecked:before, +.icon-check-empty:before { content: $check-empty; } +.icon-bookmark-empty:before { content: $bookmark-empty; } +.icon-phone-sign:before { content: $phone-sign; } +.icon-twitter:before { content: $twitter; } +.icon-facebook:before { content: $facebook; } +.icon-github:before { content: $github; } +.icon-unlock:before { content: $unlock; } +.icon-credit-card:before { content: $credit-card; } +.icon-rss:before { content: $rss; } +.icon-hdd:before { content: $hdd; } +.icon-bullhorn:before { content: $bullhorn; } +.icon-bell:before { content: $bell; } +.icon-certificate:before { content: $certificate; } +.icon-hand-right:before { content: $hand-right; } +.icon-hand-left:before { content: $hand-left; } +.icon-hand-up:before { content: $hand-up; } +.icon-hand-down:before { content: $hand-down; } +.icon-circle-arrow-left:before { content: $circle-arrow-left; } +.icon-circle-arrow-right:before { content: $circle-arrow-right; } +.icon-circle-arrow-up:before { content: $circle-arrow-up; } +.icon-circle-arrow-down:before { content: $circle-arrow-down; } +.icon-globe:before { content: $globe; } +.icon-wrench:before { content: $wrench; } +.icon-tasks:before { content: $tasks; } +.icon-filter:before { content: $filter; } +.icon-briefcase:before { content: $briefcase; } +.icon-fullscreen:before { content: $fullscreen; } +.icon-group:before { content: $group; } +.icon-link:before { content: $link; } +.icon-cloud:before { content: $cloud; } +.icon-beaker:before { content: $beaker; } +.icon-cut:before { content: $cut; } +.icon-copy:before { content: $copy; } +.icon-paperclip:before, +.icon-paper-clip:before { content: $paper-clip; } +.icon-save:before { content: $save; } +.icon-sign-blank:before { content: $sign-blank; } +.icon-reorder:before { content: $reorder; } +.icon-list-ul:before { content: $list-ul; } +.icon-list-ol:before { content: $list-ol; } +.icon-strikethrough:before { content: $strikethrough; } +.icon-underline:before { content: $underline; } +.icon-table:before { content: $table; } +.icon-magic:before { content: $magic; } +.icon-truck:before { content: $truck; } +.icon-pinterest:before { content: $pinterest; } +.icon-pinterest-sign:before { content: $pinterest-sign; } +.icon-google-plus-sign:before { content: $google-plus-sign; } +.icon-google-plus:before { content: $google-plus; } +.icon-money:before { content: $money; } +.icon-caret-down:before { content: $caret-down; } +.icon-caret-up:before { content: $caret-up; } +.icon-caret-left:before { content: $caret-left; } +.icon-caret-right:before { content: $caret-right; } +.icon-columns:before { content: $columns; } +.icon-sort:before { content: $sort; } +.icon-sort-down:before { content: $sort-down; } +.icon-sort-up:before { content: $sort-up; } +.icon-envelope:before { content: $envelope; } +.icon-linkedin:before { content: $linkedin; } +.icon-rotate-left:before, +.icon-undo:before { content: $undo; } +.icon-legal:before { content: $legal; } +.icon-dashboard:before { content: $dashboard; } +.icon-comment-alt:before { content: $comment-alt; } +.icon-comments-alt:before { content: $comments-alt; } +.icon-bolt:before { content: $bolt; } +.icon-sitemap:before { content: $sitemap; } +.icon-umbrella:before { content: $umbrella; } +.icon-paste:before { content: $paste; } +.icon-lightbulb:before { content: $lightbulb; } +.icon-exchange:before { content: $exchange; } +.icon-cloud-download:before { content: $cloud-download; } +.icon-cloud-upload:before { content: $cloud-upload; } +.icon-user-md:before { content: $user-md; } +.icon-stethoscope:before { content: $stethoscope; } +.icon-suitcase:before { content: $suitcase; } +.icon-bell-alt:before { content: $bell-alt; } +.icon-coffee:before { content: $coffee; } +.icon-food:before { content: $food; } +.icon-file-text-alt:before { content: $file-text-alt; } +.icon-building:before { content: $building; } +.icon-hospital:before { content: $hospital; } +.icon-ambulance:before { content: $ambulance; } +.icon-medkit:before { content: $medkit; } +.icon-fighter-jet:before { content: $fighter-jet; } +.icon-beer:before { content: $beer; } +.icon-h-sign:before { content: $h-sign; } +.icon-plus-sign-alt:before { content: $plus-sign-alt; } +.icon-double-angle-left:before { content: $double-angle-left; } +.icon-double-angle-right:before { content: $double-angle-right; } +.icon-double-angle-up:before { content: $double-angle-up; } +.icon-double-angle-down:before { content: $double-angle-down; } +.icon-angle-left:before { content: $angle-left; } +.icon-angle-right:before { content: $angle-right; } +.icon-angle-up:before { content: $angle-up; } +.icon-angle-down:before { content: $angle-down; } +.icon-desktop:before { content: $desktop; } +.icon-laptop:before { content: $laptop; } +.icon-tablet:before { content: $tablet; } +.icon-mobile-phone:before { content: $mobile-phone; } +.icon-circle-blank:before { content: $circle-blank; } +.icon-quote-left:before { content: $quote-left; } +.icon-quote-right:before { content: $quote-right; } +.icon-spinner:before { content: $spinner; } +.icon-circle:before { content: $circle; } +.icon-mail-reply:before, +.icon-reply:before { content: $reply; } +.icon-github-alt:before { content: $github-alt; } +.icon-folder-close-alt:before { content: $folder-close-alt; } +.icon-folder-open-alt:before { content: $folder-open-alt; } +.icon-expand-alt:before { content: $expand-alt; } +.icon-collapse-alt:before { content: $collapse-alt; } +.icon-smile:before { content: $smile; } +.icon-frown:before { content: $frown; } +.icon-meh:before { content: $meh; } +.icon-gamepad:before { content: $gamepad; } +.icon-keyboard:before { content: $keyboard; } +.icon-flag-alt:before { content: $flag-alt; } +.icon-flag-checkered:before { content: $flag-checkered; } +.icon-terminal:before { content: $terminal; } +.icon-code:before { content: $code; } +.icon-reply-all:before { content: $reply-all; } +.icon-mail-reply-all:before { content: $mail-reply-all; } +.icon-star-half-full:before, +.icon-star-half-empty:before { content: $star-half-empty; } +.icon-location-arrow:before { content: $location-arrow; } +.icon-crop:before { content: $crop; } +.icon-code-fork:before { content: $code-fork; } +.icon-unlink:before { content: $unlink; } +.icon-question:before { content: $question; } +.icon-info:before { content: $info; } +.icon-exclamation:before { content: $exclamation; } +.icon-superscript:before { content: $superscript; } +.icon-subscript:before { content: $subscript; } +.icon-eraser:before { content: $eraser; } +.icon-puzzle-piece:before { content: $puzzle-piece; } +.icon-microphone:before { content: $microphone; } +.icon-microphone-off:before { content: $microphone-off; } +.icon-shield:before { content: $shield; } +.icon-calendar-empty:before { content: $calendar-empty; } +.icon-fire-extinguisher:before { content: $fire-extinguisher; } +.icon-rocket:before { content: $rocket; } +.icon-maxcdn:before { content: $maxcdn; } +.icon-chevron-sign-left:before { content: $chevron-sign-left; } +.icon-chevron-sign-right:before { content: $chevron-sign-right; } +.icon-chevron-sign-up:before { content: $chevron-sign-up; } +.icon-chevron-sign-down:before { content: $chevron-sign-down; } +.icon-html5:before { content: $html5; } +.icon-css3:before { content: $css3; } +.icon-anchor:before { content: $anchor; } +.icon-unlock-alt:before { content: $unlock-alt; } +.icon-bullseye:before { content: $bullseye; } +.icon-ellipsis-horizontal:before { content: $ellipsis-horizontal; } +.icon-ellipsis-vertical:before { content: $ellipsis-vertical; } +.icon-rss-sign:before { content: $rss-sign; } +.icon-play-sign:before { content: $play-sign; } +.icon-ticket:before { content: $ticket; } +.icon-minus-sign-alt:before { content: $minus-sign-alt; } +.icon-check-minus:before { content: $check-minus; } +.icon-level-up:before { content: $level-up; } +.icon-level-down:before { content: $level-down; } +.icon-check-sign:before { content: $check-sign; } +.icon-edit-sign:before { content: $edit-sign; } +.icon-external-link-sign:before { content: $external-link-sign; } +.icon-share-sign:before { content: $share-sign; } +.icon-compass:before { content: $compass; } +.icon-collapse:before { content: $collapse; } +.icon-collapse-top:before { content: $collapse-top; } +.icon-expand:before { content: $expand; } +.icon-euro:before, +.icon-eur:before { content: $eur; } +.icon-gbp:before { content: $gbp; } +.icon-dollar:before, +.icon-usd:before { content: $usd; } +.icon-rupee:before, +.icon-inr:before { content: $inr; } +.icon-yen:before, +.icon-jpy:before { content: $jpy; } +.icon-renminbi:before, +.icon-cny:before { content: $cny; } +.icon-won:before, +.icon-krw:before { content: $krw; } +.icon-bitcoin:before, +.icon-btc:before { content: $btc; } +.icon-file:before { content: $file; } +.icon-file-text:before { content: $file-text; } +.icon-sort-by-alphabet:before { content: $sort-by-alphabet; } +.icon-sort-by-alphabet-alt:before { content: $sort-by-alphabet-alt; } +.icon-sort-by-attributes:before { content: $sort-by-attributes; } +.icon-sort-by-attributes-alt:before { content: $sort-by-attributes-alt; } +.icon-sort-by-order:before { content: $sort-by-order; } +.icon-sort-by-order-alt:before { content: $sort-by-order-alt; } +.icon-thumbs-up:before { content: $thumbs-up; } +.icon-thumbs-down:before { content: $thumbs-down; } +.icon-youtube-sign:before { content: $youtube-sign; } +.icon-youtube:before { content: $youtube; } +.icon-xing:before { content: $xing; } +.icon-xing-sign:before { content: $xing-sign; } +.icon-youtube-play:before { content: $youtube-play; } +.icon-dropbox:before { content: $dropbox; } +.icon-stackexchange:before { content: $stackexchange; } +.icon-instagram:before { content: $instagram; } +.icon-flickr:before { content: $flickr; } +.icon-adn:before { content: $adn; } +.icon-bitbucket:before { content: $bitbucket; } +.icon-bitbucket-sign:before { content: $bitbucket-sign; } +.icon-tumblr:before { content: $tumblr; } +.icon-tumblr-sign:before { content: $tumblr-sign; } +.icon-long-arrow-down:before { content: $long-arrow-down; } +.icon-long-arrow-up:before { content: $long-arrow-up; } +.icon-long-arrow-left:before { content: $long-arrow-left; } +.icon-long-arrow-right:before { content: $long-arrow-right; } +.icon-apple:before { content: $apple; } +.icon-windows:before { content: $windows; } +.icon-android:before { content: $android; } +.icon-linux:before { content: $linux; } +.icon-dribbble:before { content: $dribbble; } +.icon-skype:before { content: $skype; } +.icon-foursquare:before { content: $foursquare; } +.icon-trello:before { content: $trello; } +.icon-female:before { content: $female; } +.icon-male:before { content: $male; } +.icon-gittip:before { content: $gittip; } +.icon-sun:before { content: $sun; } +.icon-moon:before { content: $moon; } +.icon-archive:before { content: $archive; } +.icon-bug:before { content: $bug; } +.icon-vk:before { content: $vk; } +.icon-weibo:before { content: $weibo; } +.icon-renren:before { content: $renren; } diff --git a/sass/fontawesome/_mixins.scss b/sass/fontawesome/_mixins.scss new file mode 100644 index 00000000000..ca9c5931b3e --- /dev/null +++ b/sass/fontawesome/_mixins.scss @@ -0,0 +1,48 @@ +// Mixins +// -------------------------- + +@mixin icon($icon) { + @include icon-FontAwesome(); + content: $icon; +} + +@mixin icon-FontAwesome() { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; + -webkit-font-smoothing: antialiased; + *margin-right: .3em; // fixes ie7 issues +} + +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +@mixin icon-stack($width: 2em, $height: 2em, $top-font-size: 1em, $base-font-size: 2em) { + .icon-stack { + position: relative; + display: inline-block; + width: $width; + height: $height; + line-height: $width; + vertical-align: -35%; + [class^="icon-"], + [class*=" icon-"] { + display: block; + text-align: center; + position: absolute; + width: 100%; + height: 100%; + font-size: $top-font-size; + line-height: inherit; + *line-height: $height; + } + .icon-stack-base { + font-size: $base-font-size; + *line-height: #{$height / $base-font-size}em; + } + } +} diff --git a/sass/fontawesome/_path.scss b/sass/fontawesome/_path.scss new file mode 100644 index 00000000000..bb3f36b70b6 --- /dev/null +++ b/sass/fontawesome/_path.scss @@ -0,0 +1,14 @@ +/* FONT PATH + * -------------------------- */ + +@font-face { + font-family: 'FontAwesome'; + src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?v=#{$FontAwesomeVersion}'); + src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=#{$FontAwesomeVersion}') format('embedded-opentype'), + url('#{$FontAwesomePath}/fontawesome-webfont.woff?v=#{$FontAwesomeVersion}') format('woff'), + url('#{$FontAwesomePath}/fontawesome-webfont.ttf?v=#{$FontAwesomeVersion}') format('truetype'), + url('#{$FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=#{$FontAwesomeVersion}') format('svg'); +// src: url('#{$FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts + font-weight: normal; + font-style: normal; +} diff --git a/sass/fontawesome/_variables.scss b/sass/fontawesome/_variables.scss new file mode 100644 index 00000000000..7d6bbc5b1d6 --- /dev/null +++ b/sass/fontawesome/_variables.scss @@ -0,0 +1,734 @@ +// Variables +// -------------------------- + +$FontAwesomePath: "../font" !default; +$FontAwesomeVersion: "3.2.1" !default; +$borderColor: #eeeeee !default; +$iconMuted: #eeeeee !default; +$iconLight: white !default; +$iconDark: #333333 !default; +$icons-li-width: (30em/14); + + +$glass: "\f000"; + +$music: "\f001"; + +$search: "\f002"; + +$envelope-alt: "\f003"; + +$heart: "\f004"; + +$star: "\f005"; + +$star-empty: "\f006"; + +$user: "\f007"; + +$film: "\f008"; + +$th-large: "\f009"; + +$th: "\f00a"; + +$th-list: "\f00b"; + +$ok: "\f00c"; + +$remove: "\f00d"; + +$zoom-in: "\f00e"; + +$zoom-out: "\f010"; + +$off: "\f011"; + +$signal: "\f012"; + +$cog: "\f013"; + +$trash: "\f014"; + +$home: "\f015"; + +$file-alt: "\f016"; + +$time: "\f017"; + +$road: "\f018"; + +$download-alt: "\f019"; + +$download: "\f01a"; + +$upload: "\f01b"; + +$inbox: "\f01c"; + +$play-circle: "\f01d"; + +$repeat: "\f01e"; + +$refresh: "\f021"; + +$list-alt: "\f022"; + +$lock: "\f023"; + +$flag: "\f024"; + +$headphones: "\f025"; + +$volume-off: "\f026"; + +$volume-down: "\f027"; + +$volume-up: "\f028"; + +$qrcode: "\f029"; + +$barcode: "\f02a"; + +$tag: "\f02b"; + +$tags: "\f02c"; + +$book: "\f02d"; + +$bookmark: "\f02e"; + +$print: "\f02f"; + +$camera: "\f030"; + +$font: "\f031"; + +$bold: "\f032"; + +$italic: "\f033"; + +$text-height: "\f034"; + +$text-width: "\f035"; + +$align-left: "\f036"; + +$align-center: "\f037"; + +$align-right: "\f038"; + +$align-justify: "\f039"; + +$list: "\f03a"; + +$indent-left: "\f03b"; + +$indent-right: "\f03c"; + +$facetime-video: "\f03d"; + +$picture: "\f03e"; + +$pencil: "\f040"; + +$map-marker: "\f041"; + +$adjust: "\f042"; + +$tint: "\f043"; + +$edit: "\f044"; + +$share: "\f045"; + +$check: "\f046"; + +$move: "\f047"; + +$step-backward: "\f048"; + +$fast-backward: "\f049"; + +$backward: "\f04a"; + +$play: "\f04b"; + +$pause: "\f04c"; + +$stop: "\f04d"; + +$forward: "\f04e"; + +$fast-forward: "\f050"; + +$step-forward: "\f051"; + +$eject: "\f052"; + +$chevron-left: "\f053"; + +$chevron-right: "\f054"; + +$plus-sign: "\f055"; + +$minus-sign: "\f056"; + +$remove-sign: "\f057"; + +$ok-sign: "\f058"; + +$question-sign: "\f059"; + +$info-sign: "\f05a"; + +$screenshot: "\f05b"; + +$remove-circle: "\f05c"; + +$ok-circle: "\f05d"; + +$ban-circle: "\f05e"; + +$arrow-left: "\f060"; + +$arrow-right: "\f061"; + +$arrow-up: "\f062"; + +$arrow-down: "\f063"; + +$share-alt: "\f064"; + +$resize-full: "\f065"; + +$resize-small: "\f066"; + +$plus: "\f067"; + +$minus: "\f068"; + +$asterisk: "\f069"; + +$exclamation-sign: "\f06a"; + +$gift: "\f06b"; + +$leaf: "\f06c"; + +$fire: "\f06d"; + +$eye-open: "\f06e"; + +$eye-close: "\f070"; + +$warning-sign: "\f071"; + +$plane: "\f072"; + +$calendar: "\f073"; + +$random: "\f074"; + +$comment: "\f075"; + +$magnet: "\f076"; + +$chevron-up: "\f077"; + +$chevron-down: "\f078"; + +$retweet: "\f079"; + +$shopping-cart: "\f07a"; + +$folder-close: "\f07b"; + +$folder-open: "\f07c"; + +$resize-vertical: "\f07d"; + +$resize-horizontal: "\f07e"; + +$bar-chart: "\f080"; + +$twitter-sign: "\f081"; + +$facebook-sign: "\f082"; + +$camera-retro: "\f083"; + +$key: "\f084"; + +$cogs: "\f085"; + +$comments: "\f086"; + +$thumbs-up-alt: "\f087"; + +$thumbs-down-alt: "\f088"; + +$star-half: "\f089"; + +$heart-empty: "\f08a"; + +$signout: "\f08b"; + +$linkedin-sign: "\f08c"; + +$pushpin: "\f08d"; + +$external-link: "\f08e"; + +$signin: "\f090"; + +$trophy: "\f091"; + +$github-sign: "\f092"; + +$upload-alt: "\f093"; + +$lemon: "\f094"; + +$phone: "\f095"; + +$check-empty: "\f096"; + +$bookmark-empty: "\f097"; + +$phone-sign: "\f098"; + +$twitter: "\f099"; + +$facebook: "\f09a"; + +$github: "\f09b"; + +$unlock: "\f09c"; + +$credit-card: "\f09d"; + +$rss: "\f09e"; + +$hdd: "\f0a0"; + +$bullhorn: "\f0a1"; + +$bell: "\f0a2"; + +$certificate: "\f0a3"; + +$hand-right: "\f0a4"; + +$hand-left: "\f0a5"; + +$hand-up: "\f0a6"; + +$hand-down: "\f0a7"; + +$circle-arrow-left: "\f0a8"; + +$circle-arrow-right: "\f0a9"; + +$circle-arrow-up: "\f0aa"; + +$circle-arrow-down: "\f0ab"; + +$globe: "\f0ac"; + +$wrench: "\f0ad"; + +$tasks: "\f0ae"; + +$filter: "\f0b0"; + +$briefcase: "\f0b1"; + +$fullscreen: "\f0b2"; + +$group: "\f0c0"; + +$link: "\f0c1"; + +$cloud: "\f0c2"; + +$beaker: "\f0c3"; + +$cut: "\f0c4"; + +$copy: "\f0c5"; + +$paper-clip: "\f0c6"; + +$save: "\f0c7"; + +$sign-blank: "\f0c8"; + +$reorder: "\f0c9"; + +$list-ul: "\f0ca"; + +$list-ol: "\f0cb"; + +$strikethrough: "\f0cc"; + +$underline: "\f0cd"; + +$table: "\f0ce"; + +$magic: "\f0d0"; + +$truck: "\f0d1"; + +$pinterest: "\f0d2"; + +$pinterest-sign: "\f0d3"; + +$google-plus-sign: "\f0d4"; + +$google-plus: "\f0d5"; + +$money: "\f0d6"; + +$caret-down: "\f0d7"; + +$caret-up: "\f0d8"; + +$caret-left: "\f0d9"; + +$caret-right: "\f0da"; + +$columns: "\f0db"; + +$sort: "\f0dc"; + +$sort-down: "\f0dd"; + +$sort-up: "\f0de"; + +$envelope: "\f0e0"; + +$linkedin: "\f0e1"; + +$undo: "\f0e2"; + +$legal: "\f0e3"; + +$dashboard: "\f0e4"; + +$comment-alt: "\f0e5"; + +$comments-alt: "\f0e6"; + +$bolt: "\f0e7"; + +$sitemap: "\f0e8"; + +$umbrella: "\f0e9"; + +$paste: "\f0ea"; + +$lightbulb: "\f0eb"; + +$exchange: "\f0ec"; + +$cloud-download: "\f0ed"; + +$cloud-upload: "\f0ee"; + +$user-md: "\f0f0"; + +$stethoscope: "\f0f1"; + +$suitcase: "\f0f2"; + +$bell-alt: "\f0f3"; + +$coffee: "\f0f4"; + +$food: "\f0f5"; + +$file-text-alt: "\f0f6"; + +$building: "\f0f7"; + +$hospital: "\f0f8"; + +$ambulance: "\f0f9"; + +$medkit: "\f0fa"; + +$fighter-jet: "\f0fb"; + +$beer: "\f0fc"; + +$h-sign: "\f0fd"; + +$plus-sign-alt: "\f0fe"; + +$double-angle-left: "\f100"; + +$double-angle-right: "\f101"; + +$double-angle-up: "\f102"; + +$double-angle-down: "\f103"; + +$angle-left: "\f104"; + +$angle-right: "\f105"; + +$angle-up: "\f106"; + +$angle-down: "\f107"; + +$desktop: "\f108"; + +$laptop: "\f109"; + +$tablet: "\f10a"; + +$mobile-phone: "\f10b"; + +$circle-blank: "\f10c"; + +$quote-left: "\f10d"; + +$quote-right: "\f10e"; + +$spinner: "\f110"; + +$circle: "\f111"; + +$reply: "\f112"; + +$github-alt: "\f113"; + +$folder-close-alt: "\f114"; + +$folder-open-alt: "\f115"; + +$expand-alt: "\f116"; + +$collapse-alt: "\f117"; + +$smile: "\f118"; + +$frown: "\f119"; + +$meh: "\f11a"; + +$gamepad: "\f11b"; + +$keyboard: "\f11c"; + +$flag-alt: "\f11d"; + +$flag-checkered: "\f11e"; + +$terminal: "\f120"; + +$code: "\f121"; + +$reply-all: "\f122"; + +$mail-reply-all: "\f122"; + +$star-half-empty: "\f123"; + +$location-arrow: "\f124"; + +$crop: "\f125"; + +$code-fork: "\f126"; + +$unlink: "\f127"; + +$question: "\f128"; + +$info: "\f129"; + +$exclamation: "\f12a"; + +$superscript: "\f12b"; + +$subscript: "\f12c"; + +$eraser: "\f12d"; + +$puzzle-piece: "\f12e"; + +$microphone: "\f130"; + +$microphone-off: "\f131"; + +$shield: "\f132"; + +$calendar-empty: "\f133"; + +$fire-extinguisher: "\f134"; + +$rocket: "\f135"; + +$maxcdn: "\f136"; + +$chevron-sign-left: "\f137"; + +$chevron-sign-right: "\f138"; + +$chevron-sign-up: "\f139"; + +$chevron-sign-down: "\f13a"; + +$html5: "\f13b"; + +$css3: "\f13c"; + +$anchor: "\f13d"; + +$unlock-alt: "\f13e"; + +$bullseye: "\f140"; + +$ellipsis-horizontal: "\f141"; + +$ellipsis-vertical: "\f142"; + +$rss-sign: "\f143"; + +$play-sign: "\f144"; + +$ticket: "\f145"; + +$minus-sign-alt: "\f146"; + +$check-minus: "\f147"; + +$level-up: "\f148"; + +$level-down: "\f149"; + +$check-sign: "\f14a"; + +$edit-sign: "\f14b"; + +$external-link-sign: "\f14c"; + +$share-sign: "\f14d"; + +$compass: "\f14e"; + +$collapse: "\f150"; + +$collapse-top: "\f151"; + +$expand: "\f152"; + +$eur: "\f153"; + +$gbp: "\f154"; + +$usd: "\f155"; + +$inr: "\f156"; + +$jpy: "\f157"; + +$cny: "\f158"; + +$krw: "\f159"; + +$btc: "\f15a"; + +$file: "\f15b"; + +$file-text: "\f15c"; + +$sort-by-alphabet: "\f15d"; + +$sort-by-alphabet-alt: "\f15e"; + +$sort-by-attributes: "\f160"; + +$sort-by-attributes-alt: "\f161"; + +$sort-by-order: "\f162"; + +$sort-by-order-alt: "\f163"; + +$thumbs-up: "\f164"; + +$thumbs-down: "\f165"; + +$youtube-sign: "\f166"; + +$youtube: "\f167"; + +$xing: "\f168"; + +$xing-sign: "\f169"; + +$youtube-play: "\f16a"; + +$dropbox: "\f16b"; + +$stackexchange: "\f16c"; + +$instagram: "\f16d"; + +$flickr: "\f16e"; + +$adn: "\f170"; + +$bitbucket: "\f171"; + +$bitbucket-sign: "\f172"; + +$tumblr: "\f173"; + +$tumblr-sign: "\f174"; + +$long-arrow-down: "\f175"; + +$long-arrow-up: "\f176"; + +$long-arrow-left: "\f177"; + +$long-arrow-right: "\f178"; + +$apple: "\f179"; + +$windows: "\f17a"; + +$android: "\f17b"; + +$linux: "\f17c"; + +$dribbble: "\f17d"; + +$skype: "\f17e"; + +$foursquare: "\f180"; + +$trello: "\f181"; + +$female: "\f182"; + +$male: "\f183"; + +$gittip: "\f184"; + +$sun: "\f185"; + +$moon: "\f186"; + +$archive: "\f187"; + +$bug: "\f188"; + +$vk: "\f189"; + +$weibo: "\f18a"; + +$renren: "\f18b"; + diff --git a/sass/inuitcss/CHANGELOG.md b/sass/inuitcss/CHANGELOG.md new file mode 100644 index 00000000000..53949c7eff5 --- /dev/null +++ b/sass/inuitcss/CHANGELOG.md @@ -0,0 +1,26 @@ +# Changelog + +This changelog only exists as of v5.0 onward, for previous inuit.css versions’ +history please browse the commit logs. + +## v5.0.0 + +This major version bump saw the introduction of the +[inuit.css web template](https://github.com/csswizardry/inuit.css-web-template), +a means of including inuit.css as a submodule through which you can easily pull +updates from GitHub whilst avoiding having to touch any library code. + +* Use [beautons](https://github.com/csswizardry/beautons) for button styling +* Use [csswizardry-grids](https://github.com/csswizardry/csswizardry-grids) for + inuit.css’ built-in grid system. +* Removed [Batch](http://adamwhitcroft.com/batch/) +* Moved over to [HTML5 Boilerplate](http://html5boilerplate.com/) style helper + classes. +* Added a few more helper classes and mixins. +* Introduced switches to turn objects and abstractions on/off. + +## v5.1.1 + +* Convert special character to unicode. +* Fix/change the `headings` mixin. +* Fix some typos pertaining to the renaming of the spriting object. diff --git a/sass/inuitcss/CONTRIBUTING.md b/sass/inuitcss/CONTRIBUTING.md new file mode 100644 index 00000000000..e98e6a27404 --- /dev/null +++ b/sass/inuitcss/CONTRIBUTING.md @@ -0,0 +1,42 @@ +# Contributing to inuit.css + +So, you want to contribute to inuit.css? That’s awesome! + +However, I do ask that you follow a few small rules… + +## Bugs and issues + +If you believe you have a bug or issue that needs investigating: + +* Search existing issues to avoid opening a duplicate. +* Please open an issue and be as descriptive as possible. +* If you can, accompany the report with a reduced test case via + [jsFiddle](http://jsfiddle.net/) or similar. + +## Pull requests + +If submitting a pull request: + +* Follow the predefined code style used in the framework (I’m afraid that means + no spaces before opening braces and after colons (I’m weird like that)). +* Read my [Git workflow for inuit.css](http://csswizardry.com/2012/12/my-git-workflow-for-inuit-css/) + and try and keep as close to that as possible. +* Carry out all your work in a topic branch with a suitable name, e.g. + `fix/grids`, `feature/new-object` etc. +* Commit sensibly and, if needs be, rebase your branch to tidy your commits up. +* Ensure inuit.css still compiles without error through both the standalone + library and the web template. +* Submit all pull requests against the `incoming` branch. Any pull requests + submitted against `master` **will** be declined. +* Advise on versioning if possible; if the changes require a version bump or + merely a patch bump, please let me know. + +## Feature requests + +I am open to requests for adding new features, but please bear in mind: + +* Make sure it fits in the with ideals and scope of the project; inuit.css has a + very specific purpose and all features need tp tie in with this. +* Have a go at adding the new functionality yourself and opening a pull request. +* **Discuss any features before attempting to develop them yourself;** I would + hate for anyone to spend a tonne of time on something that I end up rejecting. diff --git a/sass/inuitcss/LICENSE b/sass/inuitcss/LICENSE new file mode 100644 index 00000000000..00c3fc50230 --- /dev/null +++ b/sass/inuitcss/LICENSE @@ -0,0 +1,13 @@ +Copyright 2012 Harry Roberts + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/sass/inuitcss/README.md b/sass/inuitcss/README.md new file mode 100644 index 00000000000..3a9ba747017 --- /dev/null +++ b/sass/inuitcss/README.md @@ -0,0 +1,368 @@ +![inuit.css](http://inuitcss.com/img/content/logo.png) + +# inuit.css – v5.0 + +inuit.css is a powerful little framework designed for _serious_ developers. + +It is a Sass based, Object Oriented framework that is full of objects and +abstractions. inuit.css provides little-to-no design which means no undoing +things, no deleting CSS and no adhering to other peoples’ design decisions. + +inuit.css is built on a [BEM](http://bem.info/)-style naming convention and +honed based on [work done by Nicolas Gallagher](https://gist.github.com/1309546). + +inuit.css is ideally suited to designers who want to focus on the creative and +not code, and developers who understand the need for abstraction and an OO +approach. + +inuit.css gives you design patterns, not design decisions. It features nestable, +fluid grids; a double-stranded heading hierarchy; sprites; buttons and a lot, +_lot_ more. + + +**Use inuit.css if:** + +* You need a powerful library of objects and abstractions. +* You understand/appreciate the value of OO code and the need for scalability + and reuse. +* You are a confident/competent developer comfortable with OOCSS and Sass, as + well as familiarity with OO principles in general. + +**Do not use inuit.css if:** + +* You need a framework that supplies design (I’d recommend + [Bootstrap](http://twitter.github.com/bootstrap/) for that). + +## Browser support + +inuit.css is a modern framework for modern browsers. It takes advantage of +[normalize.css](http://necolas.github.com/normalize.css/) and global +`box-sizing:border-box;` (optional). As such, inuit.css is intended for **IE8** +and above only. The last release to support IE7 was +[v4.1.5](https://github.com/csswizardry/inuit.css/archive/v4.1.5.zip). + +## The developer + +There are a million-and-one different CSS frameworks out there so this rather +cringeworthy section is an attempt to validate inuit.css and give it some +credibility… + +I am [Harry Roberts](http://hry.rbrts.me), I am a 22 year old developer and +front-end architect from the UK. I work as a Senior UI Developer for +[BSkyB](http://en.wikipedia.org/wiki/BSkyB) where it is my job to build scalable +front-ends, write internally used CSS frameworks and libraries, and to architect +CSS and front-end builds. + +I [write](http://csswizardry.com), [tweet](http://twitter.com/csswizardry) and +[speak](http://speakerdeck.com/u/csswizardry/) about OOCSS, scalable CSS, +maintainability, working in large teams, CSS performance, CSS architecture and a +whole lot more. + +inuit.css is the result of years of my specialism in CSS (as CSS is all I do). +It is a collection of design patterns, objects, and abstractions that have been +refined and bulletproofed over hours of development across an array of projects +of varying sizes. inuit.css is the result of hundreds of hours of work all +condensed into one powerful little framework. + +## Installation + +**Requires Sass 3.2** + +inuit.css v5.0+ is designed to be even more advanced than previous versions of +your favourite CSS framework! inuit.css’ core library is now intended to be used +as a submodule which means you can always get inuit.css’ latest updates without +ever having to touch a line of library code. + +This works by having this, the inuit.css core library, and the +[inuit.css-web-template](https://github.com/csswizardry/inuit.css-web-template). +The web template is very un-opinionated and simply houses your site, however +you wish to build it. It has a `css/` directory which contains your +project-specific variables and any stylesheets that extend inuit.css, as well as +housing inuit.css as an updatable submodule. Any of inuit.css’ default settings +can be simply overridden from the web template which means you no longer have to +edit a single line of the framework (which in turn means that incorporating +inuit.css updates is as simple as a `$ git pull`). + +### Install via command line (recommended) + +The command line install of inuit.css is _incredibly_ simple: + + $ git clone --recursive git@github.com:csswizardry/inuit.css-web-template.git your-project-folder + $ cd your-project-folder + $ ./go + +What we are doing here is cloning an instance of the inuit.css-web-template and +its submodules (that’s what the `--recursive` does) into a directory which you +specify. Next we `cd` into that directory and run [our `go` script](https://github.com/csswizardry/inuit.css-web-template/blob/master/go). +This script (courtesy of [Nick Payne](http://twitter.com/makeusabrew)) simply +removes the web template’s Git instance and replaces it with a fresh one for +your project, whilst also maintaining your inuit.css submodule. + +### Install via zip + +Though not tested, using inuit.css from its GitHub zip _should_ be fairly +simple. Using inuit.css from zipped source does mean that you can’t update +inuit.css as a submodule, but you may well be able to drop fresh zip files into +the `css/inuit.css/` directory provided you don’t edit any library code. + +Firstly you need to download [the web template](https://github.com/csswizardry/inuit.css-web-template) +zip and unpack it to a location of your choosing. Next you need to download the +inuit.css core zip and unpack that into `css/inuit.css/` in your new project. + +## Getting started + +Once you have your project set up, you should be looking at a directory +structure a little like this: + + your-project-folder/ + css/ + inuit.css/ + _vars.scss + style.scss + watch + index.html + +Your CSS directory holds everything you need to get building: + +* Everything in `css/inuit.css/` is library code which **should not** be edited. + If you `cd` into here you should see that this submodule will initially be on + `(no branch)`, this is because the submodule points at a specific commit and + not a branch. You can treat this directory like any other Git project which + means you can `$ git checkout master` to get your submodule on the most + up-to-date stable version of inuit.css. To grab any new changes simply run + `$ git pull` on the `master` branch. +* `_vars.scss` contains any project variables you need, as well as any overrides + you wish to make to the inuit.css library. It also houses feature switches to + turn inuit.css’ objects and abstractions on and off as you need them. +* `style.scss` is your master Sass stylesheet which will concatenate any other + stylesheets from inuit.css and your extensions when it is compiled. +* `watch` is a handy little script which makes it easier for you to watch your + Sass from the command line; instead of the `$ sass --watch ...` command, you + now need only type `$ ./watch` and the script will do the rest. Running this + will compile your project into `style[.min].css`. + +## How inuit.css works + +inuit.css works in ‘layers’, not dissimilar to [SMACSS](http://smacss.com/). The +principle of inuit.css’ architecture is levels of extension; each layer of code +extends the layer below. + +We start in `inuit.css/generic/`, with our most generic, low-level styling, +things like a clearfix, [normalize.css](http://necolas.github.com/normalize.css/), +our reset and any shared styling like margins (for vertical rythmn). + +On top of that we lay our base styles, found in `inuit.css/base/`; these are +things like unclassed headings, what our basic forms look like, how simple +tables appear. These are all design-free HTML elements that you can extend with +your own styles later on. + +Next up, in `inuit.css/objects/`, we have our objects and abstractions; these +are all scaffolding type constructs that hold no styling, but do heavy lifting. +In here we have things like +[the media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/), +[the nav abstraction](http://csswizardry.com/2011/09/the-nav-abstraction/) and +other unstyled objects that you can use to construct design patterns _without_ +design (that bit is left up to you). + +Finally we have our helper classes (though these live back in the `inuit.css/generic/` +directory); these are things like margin helper classes, width classes and other +‘style trumps’ which need to take precedence over any things that have gone +before them. These classes are used to modify your objects and abstractions on a +case-by-case basis. + +## Overriding inuit.css’ defaults + +inuit.css has a file called `_defaults.scss` which contains all the Sass +variables required for the library to compile without failing. These variables +are preset because Sass will error without them, however they are **not** set in +stone, and you are encouranged to override and experiment with them. + +It is tempting to modify their vaules in the inuit.css submodule but this is +**not** the correct method for modifying inuit.css, and in doing so you will +prevent yourself from being able to update inuit.css’ core library. The correct +proceedure is to redefine that variable in `_vars.scss` found in the inuit.css +web template. Let’s take an example… + +In inuit.css’ `_defaults.scss` we find the following: + + $h1-size: 36px!default; // .alpha + $h2-size: 30px!default; // .beta + $h3-size: 24px!default; // .gamma + $h4-size: 20px!default; // .delta + $h5-size: 16px!default; // .epsilon + $h6-size: 14px!default; // .zeta + +Let’s say we want our `h1`s to be `48px` and not `36px`; instead of modifying +the value of `$h1-size` here, pop open your `_vars.scss` file and add this in +the overrides section: + + /*------------------------------------*\ + $OVERRIDES + \*------------------------------------*/ + /** + * Place any variables that should override inuit.css’ defaults here. + */ + $h1-size:48px; + +Now when you compile your CSS, inuit.css will know to ignore its preset value +(that is what `!default` is for) in favour of your own. By doing things this way +you can change the values that inuit.css uses without having to modify inuit.css +itself, thus leaving it free to be updated. + +In this file you will also see your feature switches needed to turn objects and +abstractions on and off. Feature switches are only preset for objects and +abstractions; you will **not** initially find switches for things like +`$debug-mode` in here, but they can be turned on and off by adding an override +as outlined above, e.g.: + + /*------------------------------------*\ + $OVERRIDES + \*------------------------------------*/ + /** + * Place any variables that should override inuit.css’ defaults here. + */ + $h1-size:48px; + $push:true; + $palm-push:true; + +This file can also house any custom variables that you wish to use in extending +inuit.css, as covered in the next section. + +## Extending inuit.css + +inuit.css is, by design, a very design-free framework. This means that the +style and design of your site is left entirely up to you (as it should be). +Because inuit.css gives you lots of customisable foundations, you need to add +the final layer: UI. + +How you go about this step is largely left up to you, but it is common practice +to create another directory in `css/` called `ui/`, leaving you with: + + your-project-folder/ + css/ + inuit.css/ + ui/ + _vars.scss + style.scss + watch + index.html + +In here you can place your own Sass files which hold your UI’s CSS, for example: + + ui/ + _contact-form.scss + _footer.scss + _pricing-table.scss + +You then include these from `style.scss`, like so: + + /** + * She’s all yours, cap’n... Begin importing your stuff here. + */ + //@import "ui/example"; + @import "ui/footer"; + @import "ui/contact-form"; + @import "ui/pricing-table"; + +Now, when you run `$ ./watch`, `style.scss` will be calling: + +1. Your variables +2. The inuit.css core library (as outlined above) +3. Your custom/UI CSS + +…and building a concatenated stylesheet out of it all. Neat, huh?! + +## Footprint + +Out of the box, inuit.css is very small, however it is **imperative** that you +only ever deploy a minified version of your compiled stylesheet to your live +environment. inuit.css compiles stright to minified output by default, but you +can change this in `watch` if you have a build process in place. + +It is also **highly** recommended that you enable gzip compression on any text +assets being served from your site; doing so will further reduce the footprint +of inuit.css and greatly help your site’s performance. + +## Documentation + +There are no official docs for inuit.css because the code _is_ the +documentation. Everything is heavily commented with example HTML. If you +struggle with anything please tweet at [@inuitcss](http://twitter.com/inuitcss) +and/or [open an issue](https://github.com/csswizardry/inuit.css/issues) and I’ll +try help out and use your feedback to improve the documentation. + +It is strongly encouraged that you thoroughly read the source of inuit.css’ +files, particularly `_inuit.scss`. + +### Demos + +Although there are no docs as such, there is [a dedicated inuit.css jsFiddle +account](http://jsfiddle.net/user/inuitcss/fiddles/) which houses plenty of +demos of various aspects of the framework. + +### Development + +You can keep up-to-date with upcoming features, suggestions and fixes by looking +at the [inuit.css Trello board](https://trello.com/board/inuit-css/50a16487543dea585502f3d2). + +## Looking for a little LESS? + +[Peter Wilson](http://twitter.com/pwcc) and +[Nicolas Carlo](https://twitter.com/nicoespeon) are maintaining a LESS port of +inuit.css: check [the GitHub repo](https://github.com/peterwilsoncc/inuit.css). + +## Using Compass? + +[Stephen Way](http://github.com/stephenway) is maintaining a Compass port of +inuit.css: check [the GitHub repo](https://github.com/stephenway/compass-inuit). + +## Test-drive + +If you would like to try inuit.css out before you download anything there is a +compiled version [on jsFiddle](http://jsfiddle.net/inuitcss/a6yS3/) that you +are encouraged to fork and play with. Refer back to +[the source here on GitHub](https://github.com/csswizardry/inuit.css/blob/master/inuit.css/_inuit.scss) +for documentation. + +## As used by + +* [BSkyB](http://en.wikipedia.org/wiki/BSkyB) +* [pr.ofile.me](http://pr.ofile.me) +* [Lukas Bestle](http://lu-x.me) +* [Matthew Tyas](http://matthewtyas.com/) + +### Using inuit.css? + +If you use inuit.css on a live project then [tweet at me](http://twitter.com/inuitcss) +and I’ll send you some inuit.css stickers! + +## Support inuit.css + +If you use and/or like inuit.css, perhaps you might consider [supporting it +through Gumroad](http://gum.co/nOoht). + +## Credits + +inuit.css, although produced and maintained by one developer, could not have +been possible without inspiration and work from an array of other people. + +* **[Nicole Sullivan](https://twitter.com/stubbornella)** for her work on OOCSS +* **[Jonathan Snook](https://twitter.com/snookca)** for his work on SMACSS +* **[Nicolas Gallagher](https://twitter.com/necolas)** for his work on numerous + CSS things +* **[Bryan James](https://twitter.com/WengersToyBus)** for the inuit.css logo +* **[Nick Payne](https://twitter.com/makeusabrew)** for helping with v5.0’s + submodule architecture. + +And probably more… + +## License + +Copyright 2013 Harry Roberts + +Licensed under the Apache License, Version 2.0. + +--- + +**inuit.css is the most powerful little framework out there, and it’s ready to +go!** diff --git a/sass/inuitcss/_defaults.scss b/sass/inuitcss/_defaults.scss new file mode 100644 index 00000000000..37b47eca3d4 --- /dev/null +++ b/sass/inuitcss/_defaults.scss @@ -0,0 +1,226 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $DEFAULTS +\*------------------------------------*/ +/** + * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found + * in the inuit.css-web-template) to override them. + */ + + + + + +/*------------------------------------*\ + $DEBUG +\*------------------------------------*/ +/** + * Debug mode will visually highlight any potential markup/accessibility quirks + * in the browser. Set to `true` or `false`. + */ +$debug-mode: false!default; + + + + + +/*------------------------------------*\ + $BORDER-BOX +\*------------------------------------*/ +/** + * Do you want all elements to adopt `box-sizing:border-box;` as per + * paulirish.com/2012/box-sizing-border-box-ftw ? + */ +$global-border-box: true!default; + + + + + +/*------------------------------------*\ + $BASE +\*------------------------------------*/ +/** + * Base stuff + */ +$base-font-size: 16px!default; +$base-line-height: 24px!default; + +/** + * Base font-family. + */ +$base-font-family: sans-serif!default; + +/** + * Default colour for objects’ borders etc. + */ +$base-ui-color: #ccc!default; + + + + + +/*------------------------------------*\ + $RESPONSIVE +\*------------------------------------*/ +/** + * Responsiveness? + */ +$responsive: true!default; + +/** + * Responsiveness for widescreen/high resolution desktop monitors and beyond? + * Note: `$responsive` variable above must be set to true before enabling this. + */ +$responsive-extra: false!default; + +/** + * Responsive push and pull produce a LOT of code, only turn them on if you + * definitely need them. + */ +$push: false!default; +/** + * Note: `$push` variable above must be set to true before enabling these. + */ +$palm-push: false!default; +$lap-push: false!default; +$lap-and-up-push: false!default; +$portable-push: false!default; +$desk-push: false!default; + +$pull: false!default; +/** + * Note: `$pull` variable above must be set to true before enabling these. + */ +$palm-pull: false!default; +$lap-pull: false!default; +$lap-and-up-pull: false!default; +$portable-pull: false!default; +$desk-pull: false!default; + +/** + * Tell inuit.css when breakpoints start. + */ +$lap-start: 481px!default; +$desk-start: 1024px!default; +$desk-wide-start: 1200px!default; + + + + + +/*------------------------------------*\ + $FONT-SIZES +\*------------------------------------*/ +/** + * Font-sizes (in pixels). Refer to relevant sections for their implementations. + */ +$giga-size: 96px!default; +$mega-size: 72px!default; +$kilo-size: 48px!default; + +$h1-size: 36px!default; // .alpha +$h2-size: 30px!default; // .beta +$h3-size: 24px!default; // .gamma +$h4-size: 20px!default; // .delta +$h5-size: 16px!default; // .epsilon +$h6-size: 14px!default; // .zeta + +$milli-size: 12px!default; +$micro-size: 10px!default; + + + + + +/*------------------------------------*\ + $QUOTES +\*------------------------------------*/ +/** + * English quote marks? + */ +$english-quotes: true!default; + +/** + * If you want English quotes then please do not edit these; they’re only here + * because Sass needs them. + */ +$open-quote: null; +$close-quote: null; + +/** + * If you need non-English quotes, please alter the following values accordingly: + */ +@if $english-quotes != true{ + $open-quote: \00AB; + $close-quote: \00BB; +} + + + + + +/*------------------------------------*\ + $BRAND +\*------------------------------------*/ +/** + * Brand stuff + */ +$brand-color: #4a8ec2!default; +$brand-face: "Helvetica Neue", sans-serif!default; + +/** + * How big would you like round corners to be by default? + */ +$brand-round: 4px!default; + + + + + +/*------------------------------------*\ + $OBJECTS AND ABSTRACTIONS +\*------------------------------------*/ +/** + * Which objects and abstractions would you like to use? + */ +$use-grids: false!default; +$use-flexbox: false!default; +$use-columns: false!default; +$use-nav: false!default; +$use-options: false!default; +$use-pagination: false!default; +$use-breadcrumb: false!default; +$use-media: false!default; +$use-marginalia: false!default; +$use-island: false!default; +$use-block-list: false!default; +$use-matrix: false!default; +$use-split: false!default; +$use-this-or-this: false!default; +$use-link-complex: false!default; +$use-flyout: false!default; +$use-arrows: false!default; +$use-sprite: false!default; +$use-icon-text: false!default; +$use-beautons: false!default; +$use-lozenges: false!default; +$use-rules: false!default; +$use-stats: false!default; +$use-greybox: false!default; + + + + + +/*------------------------------------*\ + $FRAMEWORK +\*------------------------------------*/ +/** + * inuit.css will work these next ones out for use within the framework. + * + * Assign our `$base-line-height` to a new spacing var for more transparency. + */ +$base-spacing-unit: $base-line-height!default; +$half-spacing-unit: $base-spacing-unit / 2!default; +$line-height-ratio: $base-line-height / $base-font-size; diff --git a/sass/inuitcss/_inuit.scss b/sass/inuitcss/_inuit.scss new file mode 100644 index 00000000000..ee0160f0509 --- /dev/null +++ b/sass/inuitcss/_inuit.scss @@ -0,0 +1,214 @@ +@charset "UTF-8"; +/*------------------------------------*\ + INUIT.CSS +\*------------------------------------*/ +/*!* + * + * inuitcss.com -- @inuitcss -- @csswizardry + * + */ +/** + * inuit.css acts as a base stylesheet which you should extend with your own + * theme stylesheet. + * + * inuit.css aims to do the heavy lifting; sorting objects and abstractions, + * design patterns and fiddly bits of CSS, whilst leaving as much design as + * possible to you. inuit.css is the scaffolding to your decorator. + * + * This stylesheet is heavily documented and contains lots of comments, please + * take care to read and refer to them as you build. For further support please + * tweet at @inuitcss. + * + * Owing to the amount of comments please only ever use minified CSS in + * production. This file is purely a dev document. + * + * The table of contents below maps to section titles of the same name, to jump + * to any section simply run a find for $[SECTION-TITLE]. + * + * Most objects and abstractions come with a chunk of markup that you should be + * able to paste into any view to quickly see how the CSS works in conjunction + * with the correct HTML. + * + * inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines + * + * LICENSE + * + * Copyright 2013 Harry Roberts + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Thank you for choosing inuit.css. May your web fonts render perfectly. + */ + + + + + +/*------------------------------------*\ + $CONTENTS +\*------------------------------------*/ +/** + * CONTENTS............You’re reading it! + * WARNING.............Here be dragons! + * IMPORTS.............Begin importing the sections below + * + * MIXINS..............Super-simple Sass stuff + * NORMALIZE...........normalize.css + * RESET...............Set some defaults + * CLEARFIX............ + * SHARED..............Shared declarations + * + * MAIN................High-level elements like `html`, `body`, etc. + * HEADINGS............Double-stranded heading hierarchy + * PARAGRAPHS.......... + * SMALLPRINT..........Smaller text elements like `small` + * QUOTES.............. + * CODE................ + * LISTS............... + * IMAGES.............. + * TABLES.............. + * FORMS............... + * + * GRIDS...............Fluid, proportional and nestable grids + * FLEXBOX.............Crudely emulate flexbox + * COLUMNS.............CSS3 columns + * NAV.................A simple abstraction to put a list in horizontal nav mode + * OPTIONS.............Grouped nav items + * PAGINATION..........Very stripped back, basic paginator + * BREADCRUMB..........Simple breadcrumb trail object + * MEDIA...............Media object + * MARGINALIA..........Simple marginalia content + * ISLAND..............Boxed off content + * BLOCK-LIST..........Blocky lists of content + * MATRIX..............Gridded lists + * SPLIT...............A simple split-in-two object + * THIS-OR-THIS........Options object + * LINK-COMPLEX........ + * FLYOUT..............Flyout-on-hover object + * ARROWS..............CSS arrows + * SPRITE..............Generic spriting element + * ICON-TEXT...........Icon and text couplings + * BEAUTONS............Use the beautons micro library + * LOZENGES............Basic lozenge styles + * RULES...............Horizontal rules + * STATS...............Simple stats object + * GREYBOX.............Wireframing styles + * + * WIDTHS..............Width classes for use alongside the grid system etc. + * PUSH................Push classes for manipulating grids + * PULL................Pull classes for manipulating grids + * BRAND...............Helper class to apply brand treatment to elements + * HELPER..............A series of helper classes to use arbitrarily + * DEBUG...............Enable to add visual flags for debugging purposes + */ + + + + + +/*------------------------------------*\ + $WARNING +\*------------------------------------*/ +/* + * inuit.css, being an OO framework, works in keeping with the open/closed + * principle. The variables you set previously are now being used throughout + * inuit.css to style everything we need for a base. Any custom styles SHOULD + * NOT be added or modified in inuit.css directly, but added via your theme + * stylesheet as per the open/closed principle: + * + * csswizardry.com/2012/06/the-open-closed-principle-applied-to-css + * + * Try not to edit any CSS beyond this point; if you find you need to do so + * it is a failing of the framework so please tweet at @inuitcss. + */ + + + + + +/*------------------------------------*\ + $IMPORTS +\*------------------------------------*/ +/** + * Generic utility styles etc. + */ +@import "defaults"; +@import "generic/mixins"; +@import "generic/normalize"; +@import "generic/reset"; +@import "generic/clearfix"; +@import "generic/shared"; + + + + + +/** + * Base styles; unclassed HTML elements etc. + */ +@import "base/main"; +@import "base/headings"; +@import "base/paragraphs"; +@import "base/smallprint"; +@import "base/quotes"; +@import "base/code"; +@import "base/images"; +@import "base/lists"; +@import "base/tables"; +@import "base/forms"; + + + + + +/** + * Objects and abstractions + */ +@import "objects/grids"; +@import "objects/flexbox"; +@import "objects/columns"; +@import "objects/nav"; +@import "objects/options"; +@import "objects/pagination"; +@import "objects/breadcrumb"; +@import "objects/media"; +@import "objects/marginalia"; +@import "objects/island"; +@import "objects/block-list"; +@import "objects/matrix"; +@import "objects/split"; +@import "objects/this-or-this"; +@import "objects/link-complex"; +@import "objects/flyout"; +@import "objects/arrows"; +@import "objects/sprite"; +@import "objects/icon-text"; +@import "objects/beautons"; +@import "objects/lozenges"; +@import "objects/rules"; +@import "objects/stats"; +@import "objects/greybox"; + + + + + +/** + * Style trumps; helper and brand classes + */ +@import "generic/widths"; +@import "generic/push"; +@import "generic/pull"; +@import "generic/brand"; +@import "generic/helper"; +@import "generic/debug"; diff --git a/sass/inuitcss/base/_code.scss b/sass/inuitcss/base/_code.scss new file mode 100644 index 00000000000..017d57dd645 --- /dev/null +++ b/sass/inuitcss/base/_code.scss @@ -0,0 +1,64 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $CODE +\*------------------------------------*/ +/** + * Use an explicit font stack to ensure browsers render correct `line-height`. + */ +pre{ + overflow:auto; +} + pre mark{ + background:none; + border-bottom:1px solid; + color:inherit; + } + + +/** + * Add comments to your code examples, e.g.: + * + </div><!-- /wrapper --> + * + */ +.code-comment{ + /** + * Override this setting in your theme stylesheet + */ + opacity:0.75; + filter:alpha(opacity=75); +} + + +/** + * You can add line numbers to your code examples but be warned, it requires + * some pretty funky looking markup, e.g.: + * +
    +
  1. .nav{
    2. +
  2. list-style:none;
    3. +
  3. margin-left:0;
    4. +
  4. }
    5. +
  5. .nav > li,
    6. +
  6. .nav > li > a{
    7. +
  7. display:inline-block;
    8. +
  8. *display:inline-block;
    9. +
  9. zoom:1;
    10. +
  10. }
    11. +
+ * + * 1. Make the list look like code. + * 2. Give the list flush numbers with a leading zero. + * 3. Make sure lines of code don’t wrap. + * 4. Give the code form by forcing the `code` to honour white-space. + */ +.line-numbers{ + font-family:monospace, serif; /* [1] */ + list-style:decimal-leading-zero inside; /* [2] */ + white-space:nowrap; /* [3] */ + overflow:auto; /* [3] */ + margin-left:0; +} + .line-numbers code{ + white-space:pre; /* [4] */ + } diff --git a/sass/inuitcss/base/_forms.scss b/sass/inuitcss/base/_forms.scss new file mode 100644 index 00000000000..6ac305dc71b --- /dev/null +++ b/sass/inuitcss/base/_forms.scss @@ -0,0 +1,175 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $FORMS +\*------------------------------------*/ +/** + * + * Demo: jsfiddle.net/inuitcss/MhHHU + * + */ +fieldset{ + padding:$base-spacing-unit; +} + + +/** + * Text inputs + * + * Instead of a `[type]` selector for each kind of form input, we just use a + * class to target any/every one, e.g.: + + + + * + */ +.text-input, +textarea{ + /** + * Style these via your theme stylesheet. + */ +} + + +/** + * Group sets of form fields in a list, e.g.: + * + + * + */ +.form-fields{ + list-style:none; + margin:0; +} + .form-fields > li{ + @extend %sass-margin-bottom; + } + .form-fields > li:last-child{ + margin-bottom:0; + } + + +/** + * Labels + * + * Define a `.label` class as well as a `label` element. This means we can apply + * label-like styling to meta-labels for groups of options where a `label` + * element is not suitable, e.g.: + * +
  • + Select an option below: + +
    • + * + */ +label, +.label{ + display:block; +} + /** + * Extra help text in `label`s, e.g.: + * + + * + */ + .additional{ + display:block; + font-weight:normal; + } + + +/* + * Groups of checkboxes and radios, e.g.: + * +
  • + +
    • + * + */ +.check-list{ + list-style:none; + margin:0; +} + /* + * Labels in check-lists + */ + .check-label, + .check-list label, + .check-list .label{ + display:inline-block; + } + + +/** + * Spoken forms are for forms that read like spoken word, e.g.: + * +
  • + Hello, my is + . My home + is + +
    • + * + */ +.spoken-form label{ + display:inline-block; + font:inherit; +} + + +/** + * Extra help text displayed after a field when that field is in focus, e.g.: + * + + + .edu emails only + * + * We leave the help text in the document flow and merely set it to + * `visibility:hidden;`. This means that it won’t interfere with anything once + * it reappears. + * + */ +/*small*/.extra-help{ + display:inline-block; + visibility:hidden; +} +.text-input:active + .extra-help, +.text-input:focus + .extra-help{ + visibility:visible; +} diff --git a/sass/inuitcss/base/_headings.scss b/sass/inuitcss/base/_headings.scss new file mode 100644 index 00000000000..d834871f8fe --- /dev/null +++ b/sass/inuitcss/base/_headings.scss @@ -0,0 +1,61 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $HEADINGS +\*------------------------------------*/ +/** + * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css + * + * When we define a heading we also define a corresponding class to go with it. + * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded + * heading hierarchy. + */ +h1,.alpha{ + @include font-size($h1-size); +} +h2,.beta{ + @include font-size($h2-size); +} +h3,.gamma{ + @include font-size($h3-size); +} +h4,.delta{ + @include font-size($h4-size); +} +h5,.epsilon{ + @include font-size($h5-size); +} +h6,.zeta{ + @include font-size($h6-size); +} + + +/** + * Heading groups and generic any-heading class. + * To target any heading of any level simply apply a class of `.hN`, e.g.: + * +
    +

    inuit.css

    +

    Best. Framework. Ever!

    +
    + * + */ +.hN{ +} +hgroup .hN{ + margin-bottom:0; +} + + +/** + * A series of classes for setting massive type; for use in heroes, mastheads, + * promos, etc. + */ +.giga{ + @include font-size($giga-size); +} +.mega{ + @include font-size($mega-size); +} +.kilo{ + @include font-size($kilo-size); +} diff --git a/sass/inuitcss/base/_images.scss b/sass/inuitcss/base/_images.scss new file mode 100644 index 00000000000..59efcbb986b --- /dev/null +++ b/sass/inuitcss/base/_images.scss @@ -0,0 +1,74 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $IMAGES +\*------------------------------------*/ +/** + * Demo: jsfiddle.net/inuitcss/yMtur + */ +/** + * Fluid images. + */ +img{ + max-width:100%; +} + + +/** + * Non-fluid images if you specify `width` and/or `height` attributes. + */ +img[width], +img[height]{ + max-width:none; +} + + +/** + * Rounded images. + */ +.img--round { border-radius:$brand-round; } + + +/** + * Image placement variations. + */ +.img--right{ + float:right; + margin-bottom:$base-spacing-unit; + margin-left:$base-spacing-unit; +} +.img--left{ + float:left; + margin-right:$base-spacing-unit; + margin-bottom:$base-spacing-unit; +} +.img--center{ + display:block; + margin-right:auto; + margin-bottom:$base-spacing-unit; + margin-left:auto; +} + + +/** + * Keep your images on your baseline. + * + * Please note, these will not work too nicely with fluid images and will + * distort when resized below a certain width. Use with caution. + */ +.img--short{ + height:5 * $base-spacing-unit; +} +.img--medium{ + height:10 * $base-spacing-unit; +} +.img--tall{ + height:15 * $base-spacing-unit; +} + + +/** + * Images in `figure` elements. + */ +figure > img{ + display:block; +} diff --git a/sass/inuitcss/base/_lists.scss b/sass/inuitcss/base/_lists.scss new file mode 100644 index 00000000000..29ffc4cc57c --- /dev/null +++ b/sass/inuitcss/base/_lists.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $LISTS +\*------------------------------------*/ +/** + * Remove vertical spacing from nested lists. + */ +li{ + > ul, + > ol{ + margin-bottom:0; + } +} + +/** + * Have a numbered `ul` without the semantics implied by using an `ol`. + */ +/*ul*/.numbered-list{ + list-style-type:decimal; +} diff --git a/sass/inuitcss/base/_main.scss b/sass/inuitcss/base/_main.scss new file mode 100644 index 00000000000..12c7f111c68 --- /dev/null +++ b/sass/inuitcss/base/_main.scss @@ -0,0 +1,9 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $MAIN +\*------------------------------------*/ +html{ + font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family; + overflow-y:scroll; + min-height:100%; +} diff --git a/sass/inuitcss/base/_paragraphs.scss b/sass/inuitcss/base/_paragraphs.scss new file mode 100644 index 00000000000..5dcdfe79deb --- /dev/null +++ b/sass/inuitcss/base/_paragraphs.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $PARAGRAPHS +\*------------------------------------*/ +/** + * The `.lede` class is used to make the introductory text (usually a paragraph) + * of a document slightly larger. + */ +.lede, +.lead{ + @include font-size($base-font-size * 1.125); +} diff --git a/sass/inuitcss/base/_quotes.scss b/sass/inuitcss/base/_quotes.scss new file mode 100644 index 00000000000..490948ec44e --- /dev/null +++ b/sass/inuitcss/base/_quotes.scss @@ -0,0 +1,97 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $QUOTES +\*------------------------------------*/ +/** + * If English quotes are set in `_vars.scss`, define them here. + */ +@if $english-quotes == true{ + $open-quote: \201C; + $close-quote: \201D; +} + + +/** + * Big up @boblet: html5doctor.com/blockquote-q-cite + */ + +/** + * Inline quotes. + */ +q{ + quotes:"\2018" "\2019" "#{$open-quote}" "#{$close-quote}"; + + &:before{ + content:"\2018"; + content:open-quote; + } + &:after{ + content:"\2019"; + content:close-quote; + } + + q:before{ + content:"\201C"; + content:open-quote; + } + q:after{ + content:"\201D"; + content:close-quote; + } +} + +blockquote{ + quotes:"#{$open-quote}" "#{$close-quote}"; + + p:before{ + content:"#{$open-quote}"; + content:open-quote; + } + p:after{ + content:""; + content:no-close-quote; + } + p:last-of-type:after{ + content:"#{$close-quote}"; + content:close-quote; + } + + q:before{ + content:"\2018"; + content:open-quote; + } + q:after{ + content:"\2019"; + content:close-quote; + } +} + + +/** + * +
    +

    Insanity: doing the same thing over and over again and expecting + different results.

    + Albert Einstein +
    + * + */ +blockquote{ + /** + * .4em is roughly equal to the width of the opening “ that we wish to hang. + */ + text-indent:-0.41em; + + p:last-of-type{ + margin-bottom:0; + } +} + +.source{ + display:block; + text-indent:0; + + &:before{ + content:"\2014"; + } +} diff --git a/sass/inuitcss/base/_smallprint.scss b/sass/inuitcss/base/_smallprint.scss new file mode 100644 index 00000000000..dc57e798e25 --- /dev/null +++ b/sass/inuitcss/base/_smallprint.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $SMALLPRINT +\*------------------------------------*/ +/** + * A series of classes for setting tiny type; for use in smallprint etc. + */ +.smallprint, +.milli{ + @include font-size($milli-size); +} +.micro{ + @include font-size($micro-size); +} diff --git a/sass/inuitcss/base/_tables.scss b/sass/inuitcss/base/_tables.scss new file mode 100644 index 00000000000..bd223ba833a --- /dev/null +++ b/sass/inuitcss/base/_tables.scss @@ -0,0 +1,164 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $TABLES +\*------------------------------------*/ +/** + * We have a lot at our disposal for making very complex table constructs, e.g.: + * + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FooBar
    LoremIpsumDolorSit
    SitDolor03.788Lorem
    Dolor32.210Lorem
    Dolor47.797Lorem
    SitDolor09.640Lorem
    Dolor12.117Lorem
    + * + */ +table{ + width:100%; +} +th, +td{ + padding:$base-spacing-unit / 4; + @media screen and (min-width:480px){ + padding:$half-spacing-unit; + } + text-align:left; +} + + +/** + * Cell alignments + */ +[colspan]{ + text-align:center; +} +[colspan="1"]{ + text-align:left; +} +[rowspan]{ + vertical-align:middle; +} +[rowspan="1"]{ + vertical-align:top; +} +.numerical{ + text-align:right; +} + +/** + * In the HTML above we see several `col` elements with classes whose numbers + * represent a percentage width for that column. We leave one column free of a + * class so that column can soak up the effects of any accidental breakage in + * the table. + */ +.t5 { width: 5% } +.t10 { width:10% } +.t12 { width:12.5% } /* 1/8 */ +.t15 { width:15% } +.t20 { width:20% } +.t25 { width:25% } /* 1/4 */ +.t30 { width:30% } +.t33 { width:33.333% } /* 1/3 */ +.t35 { width:35% } +.t37 { width:37.5% } /* 3/8 */ +.t40 { width:40% } +.t45 { width:45% } +.t50 { width:50% } /* 1/2 */ +.t55 { width:55% } +.t60 { width:60% } +.t62 { width:62.5% } /* 5/8 */ +.t65 { width:65% } +.t66 { width:66.666% } /* 2/3 */ +.t70 { width:70% } +.t75 { width:75% } /* 3/4*/ +.t80 { width:80% } +.t85 { width:85% } +.t87 { width:87.5% } /* 7/8 */ +.t90 { width:90% } +.t95 { width:95% } + + +/** + * Bordered tables + */ +.table--bordered{ + + th, + td{ + border:1px solid $base-ui-color; + + &:empty{ + border:none; + } + } + + thead tr:last-child th{ + border-bottom-width:2px; + } + + tbody tr th:last-of-type{ + border-right-width:2px; + } +} + + +/** + * Striped tables + */ +.table--striped{ + + tbody tr:nth-of-type(odd){ + background-color:#ffc; /* Override this color in your theme stylesheet */ + } +} + + +/** + * Data table + */ +.table--data{ + font:12px/1.5 sans-serif; +} diff --git a/sass/inuitcss/component.json b/sass/inuitcss/component.json new file mode 100644 index 00000000000..d746826dcf5 --- /dev/null +++ b/sass/inuitcss/component.json @@ -0,0 +1,5 @@ +{ + "name": "inuit.css", + "version": "5.0.1", + "dependencies": {} +} diff --git a/sass/inuitcss/generic/_brand.scss b/sass/inuitcss/generic/_brand.scss new file mode 100644 index 00000000000..2da6001e776 --- /dev/null +++ b/sass/inuitcss/generic/_brand.scss @@ -0,0 +1,19 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $BRAND +\*------------------------------------*/ +/** + * `.brand` is a quick and simple way to apply your brand face and/or color to + * any element using a handy helper class. + */ +.brand{ + font-family:$brand-face +!important; + color:$brand-color +!important; +} +.brand-face{ + font-family:$brand-face +!important; +} +.brand-color, +.brand-colour{ + color:$brand-color +!important; +} \ No newline at end of file diff --git a/sass/inuitcss/generic/_clearfix.scss b/sass/inuitcss/generic/_clearfix.scss new file mode 100644 index 00000000000..e02390ba2b5 --- /dev/null +++ b/sass/inuitcss/generic/_clearfix.scss @@ -0,0 +1,16 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $CLEARFIX +\*------------------------------------*/ +/** + * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php + * Extend the clearfix class with Sass to avoid the `.cf` class appearing over + * and over in your markup. + */ +.cf{ + &:after{ + content:""; + display:table; + clear:both; + } +} diff --git a/sass/inuitcss/generic/_debug.scss b/sass/inuitcss/generic/_debug.scss new file mode 100644 index 00000000000..0f1d83f858b --- /dev/null +++ b/sass/inuitcss/generic/_debug.scss @@ -0,0 +1,169 @@ +@charset "UTF-8"; +@if $debug-mode == true{ +/*------------------------------------*\ + $DEBUG +\*------------------------------------*/ +/** + * Enable this stylesheet to visually detect any improperly nested or + * potentially invalid markup, or any potentially inaccessible code. + * + * Red == definite error + * Yellow == double-check + * None == should be fine + * + * Please note that this method of checking markup quality should not be relied + * upon entirely. Validate your markup! + */ + + +/** + * Are there any empty elements in your page? + */ +:empty{ + outline:5px solid yellow; +} + + +/** + * Images require `alt` attributes, empty `alt`s are fine but should be + * double-checked, no `alt` is bad and is flagged red. + */ +img{ + outline:5px solid red; +} +img[alt]{ + outline:none; +} +img[alt=""]{ + outline:5px solid yellow; +} + + +/** + * Links sometimes, though not always, benefit from `title` attributes. Links + * without are never invalid but it’s a good idea to check. + */ +a{ + outline:5px solid yellow; +} +a[title]{ + outline:none; +} + + +/** + * Double-check any links whose `href` is something questionable. + */ +a[href="#"], +a[href*="javascript"]{ + outline:5px solid yellow; +} + + +/** + * The `target` attribute ain’t too nice... + */ +a[target]{ + outline:5px solid yellow; +} + + +/** + * Ensure any lists only contain `li`s as children. + */ +ul, +ol{ + > *:not(li){ + outline:5px solid red; + } +} + + +/** + * It’s always nice to give `th`s `scope` attributes. + */ +th{ + outline:5px solid yellow; +} +th[scope]{ + outline:none; +} + + +/** + * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`? + */ +table > tr{ + outline:5px solid yellow; +} + + +/** + * `tfoot` needs to come *before* `tbody`. + */ +tbody + tfoot{ + outline:5px solid yellow; +} + + +/** + * Forms require `action` attributes + */ +form{ + outline:5px solid red; +} +form[action]{ + outline:none; +} + + +/** + * Various form-field types have required attributes. `input`s need `type` + * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons + * need a `value` attribute. + */ +textarea, +input{ + outline:5px solid red; +} +input[type]{ + outline:none; +} +textarea[rows][cols]{ + outline:none; +} +input[type=submit]{ + outline:5px solid red; +} +input[type=submit][value]{ + outline:none; +} + + +/** + * Avoid inline styles where possible. + */ +[style]{ + outline:5px solid yellow; +} + + +/** + * You should avoid using IDs for CSS, is this doing any styling? + */ +[id]{ + outline:5px solid yellow; +} + + +/** + * Are you using the grid system correctly? + */ +.gw > :not(.g), +.grid-wrapper > :not(.grid), +.gw--rev > :not(.g), +.grid-wrapper--rev > :not(.grid){ + outline:5px solid red; +} + +}/* endif */ diff --git a/sass/inuitcss/generic/_helper.scss b/sass/inuitcss/generic/_helper.scss new file mode 100644 index 00000000000..3a488142bae --- /dev/null +++ b/sass/inuitcss/generic/_helper.scss @@ -0,0 +1,185 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $HELPER +\*------------------------------------*/ +/** + * A series of helper classes to use arbitrarily. Only use a helper class if an + * element/component doesn’t already have a class to which you could apply this + * styling, e.g. if you need to float `.main-nav` left then add `float:left;` to + * that ruleset as opposed to adding the `.float--left` class to the markup. + * + * A lot of these classes carry `!important` as you will always want them to win + * out over other selectors. + */ + + +/** + * Add/remove floats + */ +.float--right { float:right!important; } +.float--left { float:left !important; } +.float--none { float:none !important; } + + +/** + * Text alignment + */ +.text--left { text-align:left !important; } +.text--center { text-align:center!important; } +.text--right { text-align:right !important; } + + +/** + * Font weights + */ +.weight--light { font-weight:300!important; } +.weight--normal { font-weight:400!important; } +.weight--semibold { font-weight:600!important; } + + +/** + * Add/remove margins + */ +.push { margin: $base-spacing-unit!important; } +.push--top { margin-top: $base-spacing-unit!important; } +.push--right { margin-right: $base-spacing-unit!important; } +.push--bottom { margin-bottom:$base-spacing-unit!important; } +.push--left { margin-left: $base-spacing-unit!important; } +.push--ends { margin-top: $base-spacing-unit!important; margin-bottom:$base-spacing-unit!important; } +.push--sides { margin-right: $base-spacing-unit!important; margin-left: $base-spacing-unit!important; } + +.push-half { margin: $half-spacing-unit!important; } +.push-half--top { margin-top: $half-spacing-unit!important; } +.push-half--right { margin-right: $half-spacing-unit!important; } +.push-half--bottom { margin-bottom:$half-spacing-unit!important; } +.push-half--left { margin-left: $half-spacing-unit!important; } +.push-half--ends { margin-top: $half-spacing-unit!important; margin-bottom:$half-spacing-unit!important; } +.push-half--sides { margin-right: $half-spacing-unit!important; margin-left: $half-spacing-unit!important; } + +.flush { margin: 0!important; } +.flush--top { margin-top: 0!important; } +.flush--right { margin-right: 0!important; } +.flush--bottom { margin-bottom:0!important; } +.flush--left { margin-left: 0!important; } +.flush--ends { margin-top: 0!important; margin-bottom:0!important; } +.flush--sides { margin-right: 0!important; margin-left: 0!important; } + + +/** + * Add/remove paddings + */ +.soft { padding: $base-spacing-unit!important; } +.soft--top { padding-top: $base-spacing-unit!important; } +.soft--right { padding-right: $base-spacing-unit!important; } +.soft--bottom { padding-bottom:$base-spacing-unit!important; } +.soft--left { padding-left: $base-spacing-unit!important; } +.soft--ends { padding-top: $base-spacing-unit!important; padding-bottom:$base-spacing-unit!important; } +.soft--sides { padding-right: $base-spacing-unit!important; padding-left: $base-spacing-unit!important; } + +.soft-half { padding: $half-spacing-unit!important; } +.soft-half--top { padding-top: $half-spacing-unit!important; } +.soft-half--right { padding-right: $half-spacing-unit!important; } +.soft-half--bottom { padding-bottom:$half-spacing-unit!important; } +.soft-half--left { padding-left: $half-spacing-unit!important; } +.soft-half--ends { padding-top: $half-spacing-unit!important; padding-bottom:$half-spacing-unit!important; } +.soft-half--sides { padding-right: $half-spacing-unit!important; padding-left: $half-spacing-unit!important; } + +.hard { padding: 0!important; } +.hard--top { padding-top: 0!important; } +.hard--right { padding-right: 0!important; } +.hard--bottom { padding-bottom:0!important; } +.hard--left { padding-left: 0!important; } +.hard--ends { padding-top: 0!important; padding-bottom:0!important; } +.hard--sides { padding-right: 0!important; padding-left: 0!important; } + + +/** + * Pull items full width of `.island` parents. + */ +.full-bleed{ + margin-right:-$base-spacing-unit!important; + margin-left: -$base-spacing-unit!important; + + .islet &{ + margin-right:-($half-spacing-unit)!important; + margin-left: -($half-spacing-unit)!important; + } +} + + +/** + * Add a help cursor to any element that gives the user extra information on + * `:hover`. + */ +.informative{ + cursor:help!important; +} + + +/** + * Mute an object by reducing its opacity. + */ +.muted{ + opacity:0.5!important; + filter:alpha(opacity = 50)!important; +} + + +/** + * Align items to the right where they imply progression/movement forward, e.g.: + * +

    Read more...

    + * + */ +.proceed{ + text-align:right!important; +} + + +/** + * Add a right-angled quote to links that imply movement, e.g.: + * + Read more + * + */ +.go:after{ + content:"\00A0" "\00BB"!important; +} + + +/** + * Apply capital case to an element (usually a `strong`). + */ +.caps{ + text-transform:uppercase!important; +} + + +/** + * Hide content off-screen without resorting to `display:none;`, also provide + * breakpoint specific hidden elements. + */ +@mixin accessibility{ + border:0!important; + clip:rect(0 0 0 0)!important; + height:1px!important; + margin:-1px!important; + overflow:hidden!important; + padding:0!important; + position: absolute!important; + width:1px!important; +} +.accessibility, +.visuallyhidden{ + @include accessibility; +} +@if $responsive{ + @each $state in palm, lap, lap-and-up, portable, desk, desk-wide{ + @include media-query(#{$state}){ + .accessibility--#{$state}, + .visuallyhidden--#{$state}{ + @include accessibility; + } + } + } +} diff --git a/sass/inuitcss/generic/_mixins.scss b/sass/inuitcss/generic/_mixins.scss new file mode 100644 index 00000000000..6815c2f4698 --- /dev/null +++ b/sass/inuitcss/generic/_mixins.scss @@ -0,0 +1,329 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $MIXINS +\*------------------------------------*/ +/** + * Create a fully formed type style (sizing and vertical rhythm) by passing in a + * single value, e.g.: + * + `@include font-size(10px);` + * + * Thanks to @redclov3r for the `line-height` Sass: + * twitter.com/redclov3r/status/250301539321798657 + */ +@mixin font-size($font-size, $line-height:true){ + font-size:$font-size; + font-size:($font-size / $base-font-size)*1rem; + @if $line-height == true{ + line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size); + } +} + + +/** + * Style any number of headings in one fell swoop, e.g.: + * + .foo{ + @include headings(1, 3){ + color:#BADA55; + } + } + * + * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately + * @thierrylemoulec for refining and improving my initial mixin. + */ +@mixin headings($from: 1, $to: 6){ + %base-heading { + @content + } + + @if $from >= 1 and $to <= 6{ + @for $i from $from through $to{ + h#{$i}{ + @extend %base-heading; + } + } + } +} + + +/** + * Create vendor-prefixed CSS in one go, e.g. + * + `@include vendor(border-radius, 4px);` + * + */ +@mixin vendor($property, $value...){ + -webkit-#{$property}:$value; + -moz-#{$property}:$value; + -ms-#{$property}:$value; + -o-#{$property}:$value; + #{$property}:$value; +} + + +/** + * Create CSS keyframe animations for all vendors in one go, e.g.: + * + .foo{ + @include vendor(animation, shrink 3s); + } + + @include keyframe(shrink){ + from{ + font-size:5em; + } + } + * + * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569 + */ +@mixin keyframe ($animation-name){ + @-webkit-keyframes $animation-name{ + @content; + } + + @-moz-keyframes $animation-name{ + @content; + } + + @-ms-keyframes $animation-name{ + @content; + } + + @-o-keyframes $animation-name{ + @content; + } + + @keyframes $animation-name{ + @content; + } +} + + +/** + * Force overly long spans of text to truncate, e.g.: + * + `@include truncate(100%);` + * + * Where `$truncation-boundary` is a united measurement. + */ +@mixin truncate($truncation-boundary){ + max-width:$truncation-boundary; + white-space:nowrap; + overflow:hidden; + text-overflow:ellipsis; +} + + +/** + * CSS arrows!!! But... before you read on, you might want to grab a coffee... + * + * This mixin creates a CSS arrow on a given element. We can have the arrow + * appear in one of 12 locations, thus: + * + * 01 02 03 + * +------------------+ + * 12 | | 04 + * | | + * 11 | | 05 + * | | + * 10 | | 06 + * +------------------+ + * 09 08 07 + * + * You pass this position in along with a desired arrow color and optional + * border color, for example: + * + * `@include arrow(top, left, red)` + * + * for just a single, red arrow, or: + * + * `@include arrow(bottom, center, red, black)` + * + * which will create a red triangle with a black border which sits at the bottom + * center of the element. Call the mixin thus: + * + .foo{ + background-color:#BADA55; + border:1px solid #ACE; + @include arrow(top, left, #BADA55, #ACE); + } + * + */ +@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){ + + @if $arrow-edge == top{ + + @extend %arrow--top; + + &:before{ + border-bottom-color:$border-color!important; + } + + &:after{ + border-bottom-color:$arrow-color!important; + } + + @if $arrow-location == left{ + @extend %arrow--left; + } + + @if $arrow-location == center{ + @extend %arrow--center; + } + + @if $arrow-location == right{ + @extend %arrow--right; + } + + } + + @if $arrow-edge == right{ + + @extend %arrow--far; + + &:before{ + border-left-color:$border-color!important; + } + + &:after{ + border-left-color:$arrow-color!important; + } + + @if $arrow-location == top{ + @extend %arrow--upper; + } + + @if $arrow-location == center{ + @extend %arrow--middle; + } + + @if $arrow-location == bottom{ + @extend %arrow--lower; + } + + } + + @if $arrow-edge == bottom{ + + @extend %arrow--bottom; + + &:before{ + border-top-color:$border-color!important; + } + + &:after{ + border-top-color:$arrow-color!important; + } + + @if $arrow-location == left{ + @extend %arrow--left; + } + + @if $arrow-location == center{ + @extend %arrow--center; + } + + @if $arrow-location == right{ + @extend %arrow--right; + } + + } + + @if $arrow-edge == left{ + + @extend %arrow--near; + + &:before{ + border-right-color:$border-color!important; + } + + &:after{ + border-right-color:$arrow-color!important; + } + + @if $arrow-location == top{ + @extend %arrow--upper; + } + + @if $arrow-location == center{ + @extend %arrow--middle; + } + + @if $arrow-location == bottom{ + @extend %arrow--lower; + } + + } + +} + + +/** + * Media query mixin. + * + * It’s not great practice to define solid breakpoints up-front, preferring to + * modify your design when it needs it, rather than assuming you’ll want a + * change at ‘mobile’. However, as inuit.css is required to take a hands off + * approach to design decisions, this is the closest we can get to baked-in + * responsiveness. It’s flexible enough to allow you to set your own breakpoints + * but solid enough to be frameworkified. + * + * We define some broad breakpoints in our vars file that are picked up here + * for use in a simple media query mixin. Our options are: + * + * palm + * lap + * lap-and-up + * portable + * desk + * desk-wide + * + * Not using a media query will, naturally, serve styles to all devices. + * + * `@include media-query(palm){ [styles here] }` + * + * We work out your end points for you: + */ +$palm-end: $lap-start - 1px; +$lap-end: $desk-start - 1px; + +@mixin media-query($media-query){ + + @if $media-query == palm{ + + @media only screen and (max-width:$palm-end) { @content; } + + } + + @if $media-query == lap{ + + @media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; } + + } + + @if $media-query == lap-and-up{ + + @media only screen and (min-width:$lap-start) { @content; } + + } + + @if $media-query == portable{ + + @media only screen and (max-width:$lap-end) { @content; } + + } + + @if $media-query == desk{ + + @media only screen and (min-width:$desk-start) { @content; } + + } + + @if $media-query == desk-wide{ + + @media only screen and (min-width: $desk-wide-start) { @content; } + + } + +} diff --git a/sass/inuitcss/generic/_normalize.scss b/sass/inuitcss/generic/_normalize.scss new file mode 100644 index 00000000000..f32dd188767 --- /dev/null +++ b/sass/inuitcss/generic/_normalize.scss @@ -0,0 +1,397 @@ +@charset "UTF-8"; +/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/* + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/* + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/* + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/* + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/* + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/* + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/* + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/* + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/sass/inuitcss/generic/_pull.scss b/sass/inuitcss/generic/_pull.scss new file mode 100644 index 00000000000..2a273524427 --- /dev/null +++ b/sass/inuitcss/generic/_pull.scss @@ -0,0 +1,148 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $PULL +\*------------------------------------*/ +/** + * Pull classes, to move grid items over to the right by certain amounts. + */ + +@mixin pull-setup($namespace: "") { + + /** + * Whole + */ + .pull--#{$namespace}one-whole { right:100%; } + + + /** + * Halves + */ + .pull--#{$namespace}one-half { right:50%; } + + + /** + * Thirds + */ + .pull--#{$namespace}one-third { right:33.333%; } + .pull--#{$namespace}two-thirds { right:66.666%; } + + + /** + * Quarters + */ + .pull--#{$namespace}one-quarter { right:25%; } + .pull--#{$namespace}two-quarters { @extend .pull--#{$namespace}one-half; } + .pull--#{$namespace}three-quarters { right:75%; } + + + /** + * Fifths + */ + .pull--#{$namespace}one-fifth { right:20%; } + .pull--#{$namespace}two-fifths { right:40%; } + .pull--#{$namespace}three-fifths { right:60%; } + .pull--#{$namespace}four-fifths { right:80%; } + + + /** + * Sixths + */ + .pull--#{$namespace}one-sixth { right:16.666%; } + .pull--#{$namespace}two-sixths { @extend .pull--#{$namespace}one-third; } + .pull--#{$namespace}three-sixths { @extend .pull--#{$namespace}one-half; } + .pull--#{$namespace}four-sixths { @extend .pull--#{$namespace}two-thirds; } + .pull--#{$namespace}five-sixths { right:83.333%; } + + + /** + * Eighths + */ + .pull--#{$namespace}one-eighth { right:12.5%; } + .pull--#{$namespace}two-eighths { @extend .pull--#{$namespace}one-quarter; } + .pull--#{$namespace}three-eighths { right:37.5%; } + .pull--#{$namespace}four-eighths { @extend .pull--#{$namespace}one-half; } + .pull--#{$namespace}five-eighths { right:62.5%; } + .pull--#{$namespace}six-eighths { @extend .pull--#{$namespace}three-quarters; } + .pull--#{$namespace}seven-eighths { right:87.5%; } + + + /** + * Tenths + */ + .pull--#{$namespace}one-tenth { right:10%; } + .pull--#{$namespace}two-tenths { @extend .pull--#{$namespace}one-fifth; } + .pull--#{$namespace}three-tenths { right:30%; } + .pull--#{$namespace}four-tenths { @extend .pull--#{$namespace}two-fifths; } + .pull--#{$namespace}five-tenths { @extend .pull--#{$namespace}one-half; } + .pull--#{$namespace}six-tenths { @extend .pull--#{$namespace}three-fifths; } + .pull--#{$namespace}seven-tenths { right:70%; } + .pull--#{$namespace}eight-tenths { @extend .pull--#{$namespace}four-fifths; } + .pull--#{$namespace}nine-tenths { right:90%; } + + + /** + * Twelfths + */ + .pull--#{$namespace}one-twelfth { right:8.333%; } + .pull--#{$namespace}two-twelfths { @extend .pull--#{$namespace}one-sixth; } + .pull--#{$namespace}three-twelfths { @extend .pull--#{$namespace}one-quarter; } + .pull--#{$namespace}four-twelfths { @extend .pull--#{$namespace}one-third; } + .pull--#{$namespace}five-twelfths { right:41.666% } + .pull--#{$namespace}six-twelfths { @extend .pull--#{$namespace}one-half; } + .pull--#{$namespace}seven-twelfths { right:58.333%; } + .pull--#{$namespace}eight-twelfths { @extend .pull--#{$namespace}two-thirds; } + .pull--#{$namespace}nine-twelfths { @extend .pull--#{$namespace}three-quarters; } + .pull--#{$namespace}ten-twelfths { @extend .pull--#{$namespace}five-sixths; } + .pull--#{$namespace}eleven-twelfths { right:91.666%; } +} + +@if $pull == true{ + +/** + * Not a particularly great selector, but the DRYest way to do things. + */ +[class*="pull--"]{ position:relative; } + +@include pull-setup(); + +@if $palm-pull == true{ + + @include media-query(palm){ + @include pull-setup("palm-"); + } + +} + +@if $lap-pull == true{ + + @include media-query(lap){ + @include pull-setup("lap-"); + } + +} + +@if $lap-and-up-pull == true{ + + @include media-query(lap-and-up){ + @include pull-setup("lap-and-up-"); + } + +} + +@if $portable-pull == true{ + + @include media-query(portable){ + @include pull-setup("portable-"); + } + +} + +@if $desk-pull == true{ + + @include media-query(desk){ + @include pull-setup("desk-"); + } + +} + +}//endif diff --git a/sass/inuitcss/generic/_push.scss b/sass/inuitcss/generic/_push.scss new file mode 100644 index 00000000000..2921d65e749 --- /dev/null +++ b/sass/inuitcss/generic/_push.scss @@ -0,0 +1,148 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $PUSH +\*------------------------------------*/ +/** + * Push classes, to move grid items over to the right by certain amounts. + */ + +@mixin push-setup($namespace: "") { + + /** + * Whole + */ + .push--#{$namespace}one-whole { left:100%; } + + + /** + * Halves + */ + .push--#{$namespace}one-half { left:50%; } + + + /** + * Thirds + */ + .push--#{$namespace}one-third { left:33.333%; } + .push--#{$namespace}two-thirds { left:66.666%; } + + + /** + * Quarters + */ + .push--#{$namespace}one-quarter { left:25%; } + .push--#{$namespace}two-quarters { @extend .push--#{$namespace}one-half; } + .push--#{$namespace}three-quarters { left:75%; } + + + /** + * Fifths + */ + .push--#{$namespace}one-fifth { left:20%; } + .push--#{$namespace}two-fifths { left:40%; } + .push--#{$namespace}three-fifths { left:60%; } + .push--#{$namespace}four-fifths { left:80%; } + + + /** + * Sixths + */ + .push--#{$namespace}one-sixth { left:16.666%; } + .push--#{$namespace}two-sixths { @extend .push--#{$namespace}one-third; } + .push--#{$namespace}three-sixths { @extend .push--#{$namespace}one-half; } + .push--#{$namespace}four-sixths { @extend .push--#{$namespace}two-thirds; } + .push--#{$namespace}five-sixths { left:83.333%; } + + + /** + * Eighths + */ + .push--#{$namespace}one-eighth { left:12.5%; } + .push--#{$namespace}two-eighths { @extend .push--#{$namespace}one-quarter; } + .push--#{$namespace}three-eighths { left:37.5%; } + .push--#{$namespace}four-eighths { @extend .push--#{$namespace}one-half; } + .push--#{$namespace}five-eighths { left:62.5%; } + .push--#{$namespace}six-eighths { @extend .push--#{$namespace}three-quarters; } + .push--#{$namespace}seven-eighths { left:87.5%; } + + + /** + * Tenths + */ + .push--#{$namespace}one-tenth { left:10%; } + .push--#{$namespace}two-tenths { @extend .push--#{$namespace}one-fifth; } + .push--#{$namespace}three-tenths { left:30%; } + .push--#{$namespace}four-tenths { @extend .push--#{$namespace}two-fifths; } + .push--#{$namespace}five-tenths { @extend .push--#{$namespace}one-half; } + .push--#{$namespace}six-tenths { @extend .push--#{$namespace}three-fifths; } + .push--#{$namespace}seven-tenths { left:70%; } + .push--#{$namespace}eight-tenths { @extend .push--#{$namespace}four-fifths; } + .push--#{$namespace}nine-tenths { left:90%; } + + + /** + * Twelfths + */ + .push--#{$namespace}one-twelfth { left:8.333%; } + .push--#{$namespace}two-twelfths { @extend .push--#{$namespace}one-sixth; } + .push--#{$namespace}three-twelfths { @extend .push--#{$namespace}one-quarter; } + .push--#{$namespace}four-twelfths { @extend .push--#{$namespace}one-third; } + .push--#{$namespace}five-twelfths { left:41.666% } + .push--#{$namespace}six-twelfths { @extend .push--#{$namespace}one-half; } + .push--#{$namespace}seven-twelfths { left:58.333%; } + .push--#{$namespace}eight-twelfths { @extend .push--#{$namespace}two-thirds; } + .push--#{$namespace}nine-twelfths { @extend .push--#{$namespace}three-quarters; } + .push--#{$namespace}ten-twelfths { @extend .push--#{$namespace}five-sixths; } + .push--#{$namespace}eleven-twelfths { left:91.666%; } +} + +@if $push == true{ + +@include push-setup(); + +/** + * Not a particularly great selector, but the DRYest way to do things. + */ +[class*="push--"]{ position:relative; } + +@if $palm-push == true{ + + @include media-query(palm){ + @include push-setup("palm-"); + } + +} + +@if $lap-push == true{ + + @include media-query(lap){ + @include push-setup("lap-"); + } + +} + +@if $lap-and-up-push == true{ + + @include media-query(lap-and-up){ + @include push-setup("lap-and-up-"); + } + +} + +@if $portable-push == true{ + + @include media-query(portable){ + @include push-setup("portable-"); + } + +} + +@if $desk-push == true{ + + @include media-query(desk){ + @include push-setup("desk-"); + } + +} + +}//endif diff --git a/sass/inuitcss/generic/_reset.scss b/sass/inuitcss/generic/_reset.scss new file mode 100644 index 00000000000..660a1def97e --- /dev/null +++ b/sass/inuitcss/generic/_reset.scss @@ -0,0 +1,81 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $RESET +\*------------------------------------*/ +/** + * A more considered reset; more of a restart... + * As per: csswizardry.com/2011/10/reset-restarted + */ + +@if $global-border-box == true{ + /** + * Let’s make the box model all nice, shall we...? + */ + *{ + &, + &:before, + &:after{ + @include vendor(box-sizing, border-box); + } + } +} + +/** + * The usual... + */ +h1,h2,h3,h4,h5,h6, +p,blockquote,pre, +dl,dd,ol,ul, +form,fieldset,legend, +table,th,td,caption, +hr{ + margin:0; + padding:0; +} + +/** + * Give a help cursor to elements that give extra info on `:hover`. + */ +abbr[title],dfn[title]{ + cursor:help; +} + +/** + * Remove underlines from potentially troublesome elements. + */ +u,ins{ + text-decoration:none; +} + +/** + * Apply faux underline via `border-bottom`. + */ +ins{ + border-bottom:1px solid; +} + +/** + * So that `alt` text is visually offset if images don’t load. + */ +img{ + font-style:italic; +} + +/** + * Give form elements some cursor interactions... + */ +label, +input, +textarea, +button, +select, +option{ + cursor:pointer; +} + .text-input:active, + .text-input:focus, + textarea:active, + textarea:focus{ + cursor:text; + outline:none; + } diff --git a/sass/inuitcss/generic/_shared.scss b/sass/inuitcss/generic/_shared.scss new file mode 100644 index 00000000000..450238578aa --- /dev/null +++ b/sass/inuitcss/generic/_shared.scss @@ -0,0 +1,62 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $SHARED +\*------------------------------------*/ +/** + * Where `margin-bottom` is concerned, this value will be the same as the + * base line-height. This allows us to keep a consistent vertical rhythm. + * As per: csswizardry.com/2012/06/single-direction-margin-declarations + */ +/** + * Base elements + */ +h1,h2,h3,h4,h5,h6,hgroup, +ul,ol,dl, +blockquote,p,address, +table, +fieldset,figure, +pre, +/** + * Objects and abstractions + */ +%sass-margin-bottom, +.media, +.island, +.islet{ + margin-bottom:$base-spacing-unit; + margin-bottom:($base-spacing-unit / $base-font-size)*1rem; + + .islet &{ + margin-bottom:$base-spacing-unit / 2; + margin-bottom:(($base-spacing-unit / $base-font-size) / 2)*1rem; + } +} + + +/** + * Doubled up `margin-bottom` helper class. + */ +.landmark{ + margin-bottom:2 * $base-spacing-unit; + margin-bottom:(2 * $base-spacing-unit / $base-font-size)*1rem; +} + + +/** + * `hr` elements only take up a few pixels, so we need to give them special + * treatment regarding vertical rhythm. + */ +hr{ + margin-bottom:$base-spacing-unit - 2px; + margin-bottom:(($base-spacing-unit - 2px) / $base-font-size)*1rem; +} + + +/** + * Where `margin-left` is concerned we want to try and indent certain elements + * by a consistent amount. Define that amount once, here. + */ +ul,ol,dd{ + margin-left:2 * $base-spacing-unit; + margin-left:(2 * $base-spacing-unit / $base-font-size)*1rem; +} diff --git a/sass/inuitcss/generic/_widths.scss b/sass/inuitcss/generic/_widths.scss new file mode 100644 index 00000000000..66d76f1a610 --- /dev/null +++ b/sass/inuitcss/generic/_widths.scss @@ -0,0 +1,159 @@ +@charset "UTF-8"; +/*------------------------------------*\ + $WIDTHS +\*------------------------------------*/ +/** + * Sizes in human readable format. These are used in conjunction with other + * objects and abstractions found in inuit.css, most commonly the grid system + * and faux flexbox. + * + * We have a mixin to generate our widths and their breakpoint-specific + * variations. + */ + +@mixin grid-setup($namespace: "") { + /** + * Whole + */ + .#{$namespace}one-whole { width:100%; } + + + /** + * Halves + */ + .#{$namespace}one-half { width:50%; } + + + /** + * Thirds + */ + .#{$namespace}one-third { width:33.333%; } + .#{$namespace}two-thirds { width:66.666%; } + + + /** + * Quarters + */ + .#{$namespace}one-quarter { width:25%; } + .#{$namespace}two-quarters { @extend .#{$namespace}one-half; } + .#{$namespace}three-quarters { width:75%; } + + + /** + * Fifths + */ + .#{$namespace}one-fifth { width:20%; } + .#{$namespace}two-fifths { width:40%; } + .#{$namespace}three-fifths { width:60%; } + .#{$namespace}four-fifths { width:80%; } + + + /** + * Sixths + */ + .#{$namespace}one-sixth { width:16.666%; } + .#{$namespace}two-sixths { @extend .#{$namespace}one-third; } + .#{$namespace}three-sixths { @extend .#{$namespace}one-half; } + .#{$namespace}four-sixths { @extend .#{$namespace}two-thirds; } + .#{$namespace}five-sixths { width:83.333%; } + + + /** + * Eighths + */ + .#{$namespace}one-eighth { width:12.5%; } + .#{$namespace}two-eighths { @extend .#{$namespace}one-quarter; } + .#{$namespace}three-eighths { width:37.5%; } + .#{$namespace}four-eighths { @extend .#{$namespace}one-half; } + .#{$namespace}five-eighths { width:62.5%; } + .#{$namespace}six-eighths { @extend .#{$namespace}three-quarters; } + .#{$namespace}seven-eighths { width:87.5%; } + + + /** + * Tenths + */ + .#{$namespace}one-tenth { width:10%; } + .#{$namespace}two-tenths { @extend .#{$namespace}one-fifth; } + .#{$namespace}three-tenths { width:30%; } + .#{$namespace}four-tenths { @extend .#{$namespace}two-fifths; } + .#{$namespace}five-tenths { @extend .#{$namespace}one-half; } + .#{$namespace}six-tenths { @extend .#{$namespace}three-fifths; } + .#{$namespace}seven-tenths { width:70%; } + .#{$namespace}eight-tenths { @extend .#{$namespace}four-fifths; } + .#{$namespace}nine-tenths { width:90%; } + + + /** + * Twelfths + */ + .#{$namespace}one-twelfth { width:8.333%; } + .#{$namespace}two-twelfths { @extend .#{$namespace}one-sixth; } + .#{$namespace}three-twelfths { @extend .#{$namespace}one-quarter; } + .#{$namespace}four-twelfths { @extend .#{$namespace}one-third; } + .#{$namespace}five-twelfths { width:41.666% } + .#{$namespace}six-twelfths { @extend .#{$namespace}one-half; } + .#{$namespace}seven-twelfths { width:58.333%; } + .#{$namespace}eight-twelfths { @extend .#{$namespace}two-thirds; } + .#{$namespace}nine-twelfths { @extend .#{$namespace}three-quarters; } + .#{$namespace}ten-twelfths { @extend .#{$namespace}five-sixths; } + .#{$namespace}eleven-twelfths { width:91.666%; } +} + +@include grid-setup(); + + + +/** + * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have + * access to these classes. You can define at which breakpoint you’d like an + * element to be a certain size, e.g.: + * + * `
    ...
    ` + * + * This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the + * horizontal space, a half of that space at ‘tablet’ sizes, and goes full width + * at ‘mobile’ sizes. + * + * Demo: jsfiddle.net/inuitcss/WS4Ge + * + */ + +@if $responsive == true{ + +@include media-query(palm){ + @include grid-setup("palm-"); +} + +@include media-query(lap){ + @include grid-setup("lap-"); +} + +@include media-query(lap-and-up){ + @include grid-setup("lap-and-up-"); +} + +@include media-query(portable){ + @include grid-setup("portable-"); +} + +@include media-query(desk){ + @include grid-setup("desk-"); +} + + +/** + * If you have set the additional `$responsive-extra` variable to ‘true’ in + * `_vars.scss` then you now have access to the following class available to + * accomodate much larger screen resolutions. + */ + +@if $responsive-extra == true{ + +@include media-query(desk-wide){ + @include grid-setup("desk-wide-"); +} + +} + +} /* endif */ diff --git a/sass/inuitcss/objects/_arrows.scss b/sass/inuitcss/objects/_arrows.scss new file mode 100644 index 00000000000..ff813975236 --- /dev/null +++ b/sass/inuitcss/objects/_arrows.scss @@ -0,0 +1,148 @@ +@charset "UTF-8"; +@if $use-arrows == true{ + +/*------------------------------------*\ + $ARROWS +\*------------------------------------*/ +/** + * It is a common design treatment to give an element a triangular points-out + * arrow, we typically build these with CSS. These following classes allow us to + * generate these arbitrarily with a mixin, `@arrow()`. + */ + +$arrow-size: $half-spacing-unit!default; +$arrow-border: 1!default; +$border: $arrow-size; +$arrow: $arrow-size - $arrow-border; + +/** + * Forms the basis for any/all CSS arrows. + */ +%arrow{ + position:relative; + + &:before, + &:after{ + content:""; + position:absolute; + border-collapse:separate; + } + &:before{ + border:$border solid transparent; + } + &:after{ + border:$arrow solid transparent; + } +} + + +/** + * Define individual edges so we can combine what we need, when we need. + */ +%arrow--top{ + @extend %arrow; + + &:before, + &:after{ + bottom:100%; + } +} + +%arrow--upper{ + @extend %arrow; + + &:before{ + top:$arrow; + } + &:after{ + top:$border; + } +} + +%arrow--middle{ + @extend %arrow; + + &:before, + &:after{ + top:50%; + margin-top:-$border; + } + &:after{ + margin-top:-$arrow; + } +} + +%arrow--lower{ + @extend %arrow; + + &:before{ + bottom:$arrow; + } + &:after{ + bottom:$border; + } +} + +%arrow--bottom{ + @extend %arrow; + + &:before, + &:after{ + top:100%; + } +} + +%arrow--near{ + @extend %arrow; + + &:before, + &:after{ + right:100%; + } +} + +%arrow--left{ + @extend %arrow; + + &:before{ + left:$arrow; + } + &:after{ + left:$border; + } +} + +%arrow--center{ + @extend %arrow; + + &:before, + &:after{ + left:50%; + margin-left:-$border; + } + &:after{ + margin-left:-$arrow; + } +} + +%arrow--right{ + @extend %arrow; + + &:before{ + right:$arrow; + } + &:after{ + right:$border; + } +} + +%arrow--far{ + @extend %arrow; + + &:before, + &:after{ + left:100%; + } +} + +}//endif diff --git a/sass/inuitcss/objects/_beautons.scss b/sass/inuitcss/objects/_beautons.scss new file mode 100644 index 00000000000..cdb9a3becf2 --- /dev/null +++ b/sass/inuitcss/objects/_beautons.scss @@ -0,0 +1,227 @@ +@charset "UTF-8"; +@if $use-beautons == true{ + +/*------------------------------------*\ + $BEAUTONS.CSS +\*------------------------------------*/ +/** + * beautons is a beautifully simple button toolkit. + * + * LICENSE + * + * Copyright 2013 Harry Roberts + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + + +/*!* + * + * @csswizardry -- csswizardry.com/beautons + * + */ + + + + + +/*------------------------------------*\ + $BASE +\*------------------------------------*/ +/** + * Base button styles. + * + * 1. Allow us to better style box model properties. + * 2. Line different sized buttons up a little nicer. + * 3. Stop buttons wrapping and looking broken. + * 4. Make buttons inherit font styles. + * 5. Force all elements using beautons to appear clickable. + * 6. Normalise box model styles. + * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then + * there is 1em of space above and below that text. We therefore apply 1em + * of space to the left and right, as padding, to keep consistent spacing. + * 8. Basic cosmetics for default buttons. Change or override at will. + * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion. + */ +.btn{ + display:inline-block; /* [1] */ + vertical-align:middle; /* [2] */ + white-space:nowrap; /* [3] */ + font-family:inherit; /* [4] */ + font-size:100%; /* [4] */ + cursor:pointer; /* [5] */ + border:none; /* [6] */ + margin:0; /* [6] */ + padding-top: 0; /* [6] */ + padding-bottom:0; /* [6] */ + line-height:3; /* [7] */ + padding-right:1em; /* [7] */ + padding-left: 1em; /* [7] */ + border-radius:$brand-round; /* [8] */ +} + +.btn{ + + &, + &:hover{ + text-decoration:none; /* [9] */ + } + + &:active, + &:focus{ + outline:none; + } +} + + + + + +/*------------------------------------*\ + $SIZES +\*------------------------------------*/ +/** + * Button size modifiers. + * + * These all follow the same sizing rules as above; text is 1em, space around it + * remains uniform. + */ +.btn--small{ + padding-right:0.5em; + padding-left: 0.5em; + line-height:2; +} + +.btn--large{ + padding-right:1.5em; + padding-left: 1.5em; + line-height:4; +} + +.btn--huge{ + padding-right:2em; + padding-left: 2em; + line-height:5; +} + +/** + * These buttons will fill the entirety of their container. + * + * 1. Remove padding so that widths and paddings don’t conflict. + */ +.btn--full{ + width:100%; + padding-right:0; /* [1] */ + padding-left: 0; /* [1] */ + text-align:center; +} + + + + + +/*------------------------------------*\ + $FONT-SIZES +\*------------------------------------*/ +/** + * Button font-size modifiers. + */ +.btn--alpha{ + font-size:3rem; +} + +.btn--beta{ + font-size:2rem; +} + +.btn--gamma{ + font-size:1rem; +} + +/** + * Make the button inherit sizing from its parent. + */ +.btn--natural{ + vertical-align:baseline; + font-size:inherit; + line-height:inherit; + padding-right:0.5em; + padding-left: 0.5em; +} + + + + + +/*------------------------------------*\ + $FUNCTIONS +\*------------------------------------*/ +/** + * Button function modifiers. + */ +.btn--primary{} +.btn--secondary{} +.btn--tertiary{} + +/** + * Positive actions; e.g. sign in, purchase, submit, etc. + */ +.btn--positive{ + background-color:#4A993E; + color:#fff; +} + +/** + * Negative actions; e.g. close account, delete photo, remove friend, etc. + */ +.btn--negative{ + background-color:#b33630; + color:#fff; +} + +/** + * Inactive, disabled buttons. + * + * 1. Make the button look like normal text when hovered. + */ +.btn--inactive, + .btn--inactive:hover, + .btn--inactive:active, + .btn--inactive:focus{ + background-color:#ddd; + color:#777; + cursor:text; /* [1] */ + } + + + + + +/*------------------------------------*\ + $STYLES +\*------------------------------------*/ +/** + * Button style modifiers. + * + * 1. Use an overly-large number to ensure completely rounded, pill-like ends. + */ +.btn--soft{ + border-radius:200px; /* [1] */ +} + +.btn--hard{ + border-radius:0; +} + +}//endif diff --git a/sass/inuitcss/objects/_block-list.scss b/sass/inuitcss/objects/_block-list.scss new file mode 100644 index 00000000000..d1a414b5d8f --- /dev/null +++ b/sass/inuitcss/objects/_block-list.scss @@ -0,0 +1,45 @@ +@charset "UTF-8"; +@if $use-block-list == true or $use-matrix == true{ + +/*------------------------------------*\ + $BLOCK-LIST +\*------------------------------------*/ +/** + * Create big blocky lists of content, e.g.: + * + + * + * Extend this object in your theme stylesheet. + * + * Demo: jsfiddle.net/inuitcss/hR57q + * + */ +.block-list{ + + &, + > li{ + border:0 solid $base-ui-color; + } +} +.block-list{ + list-style:none; + margin-left:0; + border-top-width:1px; + + > li{ + border-bottom-width:1px; + padding:$half-spacing-unit; + } +} + .block-list__link{ + display:block; + padding:$half-spacing-unit; + margin:-$half-spacing-unit; + } + +}//endif diff --git a/sass/inuitcss/objects/_breadcrumb.scss b/sass/inuitcss/objects/_breadcrumb.scss new file mode 100644 index 00000000000..1741b952ea7 --- /dev/null +++ b/sass/inuitcss/objects/_breadcrumb.scss @@ -0,0 +1,64 @@ +@charset "UTF-8"; +@if $use-breadcrumb == true{ + +/*------------------------------------*\ + $BREADCRUMB +\*------------------------------------*/ +/** + * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.: + * +
      +
    1. Home
      2. +
    2. About
      3. +
    3. The Board
      4. +
    4. Directors
      5. +
    + * + * Demo: jsfiddle.net/inuitcss/rkAY9 + * + */ +.breadcrumb > li + li:before{ + content:"\00BB" "\00A0"; +} + + +/** + * For denoting a path-like structure, GitHub style, e.g.: + * +
      +
    1. inuit.css
      2. +
    2. inuit.css
      3. +
    3. partials
      4. +
    4. objects
      5. +
    + * + */ +.breadcrumb--path > li + li:before{ + content:"\002F" "\00A0"; +} + + +/** + * Assign a delimiter on the fly through a data attribute, e.g.: + * +
      +
    1. Home
      2. +
    2. About
      3. +
    3. The Board
      4. +
    4. Directors
      5. +
    + * + */ +.breadcrumb > li + li[data-breadcrumb]:before{ + content:attr(data-breadcrumb) "\00A0"; +} + + +/** + * Denote the root of the tree. + */ +.breadcrumb__root{ + font-weight:bold; +} + +}//endif diff --git a/sass/inuitcss/objects/_columns.scss b/sass/inuitcss/objects/_columns.scss new file mode 100644 index 00000000000..07ff09ab909 --- /dev/null +++ b/sass/inuitcss/objects/_columns.scss @@ -0,0 +1,23 @@ +@charset "UTF-8"; +@if $use-columns == true{ + +/*------------------------------------*\ + $COLUMNS +\*------------------------------------*/ +/** + * Here we can set elements in columns of text using CSS3, e.g.: + * +

    + * + * Demo: jsfiddle.net/inuitcss/E26Yd + * + */ +%text-cols{ + @include vendor(column-gap, $base-spacing-unit); +} +.text-cols--2 { @extend %text-cols; @include vendor(column-count, 2); } +.text-cols--3 { @extend %text-cols; @include vendor(column-count, 3); } +.text-cols--4 { @extend %text-cols; @include vendor(column-count, 4); } +.text-cols--5 { @extend %text-cols; @include vendor(column-count, 5); } + +}//endif diff --git a/sass/inuitcss/objects/_flexbox.scss b/sass/inuitcss/objects/_flexbox.scss new file mode 100644 index 00000000000..7675a5a1950 --- /dev/null +++ b/sass/inuitcss/objects/_flexbox.scss @@ -0,0 +1,56 @@ +@charset "UTF-8"; +@if $use-flexbox == true{ + +/*------------------------------------*\ + $FLEXBOX +\*------------------------------------*/ +/** + * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate + * it, in a way... e.g.: + * +

    + +
    + Welcome to +
    + +
    + inuit.css +
    + +
    + * + * We can also combine our grid system classes with `.flexbox__item` classes, + * e.g.: + * +
    +
    +
    +
    +
    +
    + * + * It’s pretty poorly named I’m afraid, but it works... + * + * Demo: jsfiddle.net/inuitcss/ufUh2 + * + */ +.flexbox{ + display:table; + width:100%; +} + +/** + * Nasty hack to circumvent Modernizr conflicts. + */ +html.flexbox{ + display:block; + width:auto; +} + + .flexbox__item{ + display:table-cell; + vertical-align:middle; + } + +}//endif diff --git a/sass/inuitcss/objects/_flyout.scss b/sass/inuitcss/objects/_flyout.scss new file mode 100644 index 00000000000..ed53c7eef69 --- /dev/null +++ b/sass/inuitcss/objects/_flyout.scss @@ -0,0 +1,64 @@ +@charset "UTF-8"; +@if $use-flyout == true{ + +/*------------------------------------*\ + $FLYOUT +\*------------------------------------*/ +/** + * Flyouts are pieces of content that fly out of a parent when said parent is + * hovered. They typically appear bottom-left of the parent. + * +
    + Foo +
    +

    Lorem

    +

    Ipsum

    +
    +
    + * + * Extend these objects in your theme stylesheet. + * + * Demo: jsfiddle.net/inuitcss/B52HG + * + */ +.flyout, +.flyout--alt{ + position:relative; + overflow:hidden; +} + .flyout__content{ + /** + * Position the flyouts off-screen. This is typically better than + * `display:none;`. + */ + position:absolute; + top:100%; + left:-99999px; + } + + /** + * Bring the flyouts into view when you hover their parents. + * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’ + * (`.flyout--alt`). + */ + .flyout:hover, + .flyout--alt:hover{ + overflow:visible; + } + + /** + * Regular flyouts sit all the way from the top, flush left. + */ + .flyout:hover > .flyout__content{ + left:0; + } + + /** + * Alternative flyouts sit all the way from the left, flush top. + */ + .flyout--alt:hover > .flyout__content{ + top:0; + left:100%; + } + +}//endif diff --git a/sass/inuitcss/objects/_greybox.scss b/sass/inuitcss/objects/_greybox.scss new file mode 100644 index 00000000000..b824a5db639 --- /dev/null +++ b/sass/inuitcss/objects/_greybox.scss @@ -0,0 +1,59 @@ +@charset "UTF-8"; +@if $use-greybox == true{ + +/*------------------------------------*\ + $GREYBOX +\*------------------------------------*/ +/** + * Quickly throw together greybox wireframes. Use in conjunction with other + * inuit.css objects to create simple greybox prototypes, e.g.: + * +
    Header
    + + + * + * The beauty of combining the greyboxing with inuit.css objects is that any + * prototyping can quickly be converted into/used as production code. + * + * For a more complete prototyping framework, consider Adam Whitcroft’s Proto: + * adamwhitcroft.com/proto + * + * Demo: jsfiddle.net/inuitcss/qCXfh/ + * + */ +.greybox, +.graybox{ + @include font-size(12px); + font-family:sans-serif; + text-align:center; + background-color:rgba(0,0,0,0.2); + color:#fff; +} + .greybox a, + .graybox a{ + color:#fff; + text-decoration:underline; + } + + +/** + * All greyboxes will occupy 100% of their parent’s width, but to alter their + * heights we apply incrementally larger line-heights: + */ +.greybox--small, +.graybox--small { line-height: 2 * $base-line-height; } +.greybox--medium, +.graybox--medium { line-height: 4 * $base-line-height; } +.greybox--large, +.graybox--large { line-height: 8 * $base-line-height; } +.greybox--huge, +.graybox--huge { line-height:16 * $base-line-height; } +.greybox--gigantic, +.graybox--gigantic { line-height:32 * $base-line-height; } + +}//endif diff --git a/sass/inuitcss/objects/_grids.scss b/sass/inuitcss/objects/_grids.scss new file mode 100644 index 00000000000..9499e5ed612 --- /dev/null +++ b/sass/inuitcss/objects/_grids.scss @@ -0,0 +1,69 @@ +@if $use-grids == true{ + +/*------------------------------------*\ + $GRIDS +\*------------------------------------*/ +/** + * Fluid and nestable grid system, e.g.: + * +
    + +
    +

    One third grid

    +
    +

    Two thirds grid

    +
    +

    One half grid

    +
    +

    One quarter grid

    +
    +

    One quarter grid

    +
    + +
    + * + * Demo: jsfiddle.net/inuitcss/CLYUC + * + */ + + +/** + * Grid wrapper + */ +.grid{ + margin-left:-$base-spacing-unit; + list-style:none; + margin-bottom:0; +} + + + /** + * Very infrequently occuring grid wrappers as children of grid wrappers. + */ + .grid > .grid{ + margin-left:0; + } + + + /** + * Grid + */ + .grid__item{ + display:inline-block; + width:100%; + padding-left:$base-spacing-unit; + vertical-align:top; + @if $global-border-box == false{ + @include vendor(box-sizing, border-box); + } + } + +}//endif diff --git a/sass/inuitcss/objects/_icon-text.scss b/sass/inuitcss/objects/_icon-text.scss new file mode 100644 index 00000000000..0f8250ff3b8 --- /dev/null +++ b/sass/inuitcss/objects/_icon-text.scss @@ -0,0 +1,40 @@ +@if $use-icon-text == true{ + +/*------------------------------------*\ + $ICON-TEXT +\*------------------------------------*/ +/** + * For text-links etc that have an icon with them. Sometimes whitespace would + * suffice in creating a gap between the icon and text, for example: + * + + Help & support + + * + * However we will sometimes want a larger, explicity set gap: + + Help & support + + * + * Demo: jsfiddle.net/inuitcss/Q6Lbf + * + */ +.icon-text > .icon-text__icon{ + margin-right:$half-spacing-unit / 2; +} + + +/** + * We can also reverse the direction of the margin for icons that appear to the + * right of the text content, thus: + * + + Help & support + + * + */ +.icon-text--rev > .icon-text__icon{ + margin-left:$half-spacing-unit / 2; +} + +}//endif diff --git a/sass/inuitcss/objects/_island.scss b/sass/inuitcss/objects/_island.scss new file mode 100644 index 00000000000..0b2c3ec1cf4 --- /dev/null +++ b/sass/inuitcss/objects/_island.scss @@ -0,0 +1,38 @@ +@if $use-island == true{ + +/*------------------------------------*\ + $ISLAND +\*------------------------------------*/ +/** + * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object + * E.g.: + * +
    + I am boxed off. +
    + * + * Demo: jsfiddle.net/inuitcss/u8pV3 + * + */ +.island, +.islet{ + display:block; + @extend .cf; +} +.island{ + padding:$base-spacing-unit; +} + .island > :last-child, + .islet > :last-child{ + margin-bottom:0; + } + + +/** + * Just like `.island`, only smaller. + */ +.islet{ + padding:$half-spacing-unit; +} + +}//endif diff --git a/sass/inuitcss/objects/_link-complex.scss b/sass/inuitcss/objects/_link-complex.scss new file mode 100644 index 00000000000..d2ef9c03d72 --- /dev/null +++ b/sass/inuitcss/objects/_link-complex.scss @@ -0,0 +1,32 @@ +@if $use-link-complex == true{ + +/*------------------------------------*\ + $LINK-COMPLEX +\*------------------------------------*/ +/** + * As inspired by @necolas: + * github.com/necolas/suit-utils/blob/master/link.css#L18 + * + * Add hover behaviour to only selected items within links, e.g.: + * + + + Log in + + * + * Demo: jsfiddle.net/inuitcss/rt9M3 + * + */ +.link-complex, +.link-complex:hover, +.link-complex:active, +.link-complex:focus{ + text-decoration:none; +} + .link-complex:hover .link-complex__target, + .link-complex:active .link-complex__target, + .link-complex:focus .link-complex__target{ + text-decoration:underline; + } + +}//endif diff --git a/sass/inuitcss/objects/_lozenges.scss b/sass/inuitcss/objects/_lozenges.scss new file mode 100644 index 00000000000..ecfdf11db89 --- /dev/null +++ b/sass/inuitcss/objects/_lozenges.scss @@ -0,0 +1,47 @@ +@charset "UTF-8"; +@if $use-lozenges == true{ + +/*------------------------------------*\ + $LOZENGES +\*------------------------------------*/ +/** + * Create pill- and lozenge-like runs of text, e.g.: + * +

    This here is a pill!

    + * +

    This here is also a lozenge!

    + * + * Pills have fully rounded ends, lozenges have only their corners rounded. + * + * Demo: jsfiddle.net/inuitcss/N3pGm + * + */ +.pill{ + display:inline-block; + /** + * These numbers set in ems mean that, at its narrowest, a lozenge will be + * the same width as the `line-height` set on the `html` element. + * This allows us to use the `.loz` in almost any `font-size` we wish. + */ + min-width: ($line-height-ratio * 0.666667) * 1em; + padding-right:($line-height-ratio * 0.166667) * 1em; + padding-left: ($line-height-ratio * 0.166667) * 1em; + /* =1.50em */ + text-align:center; + background-color:$base-ui-color; + color:#fff; /* Override this color in your theme stylesheet */ + + /** + * Normally we’d use border-radius:100%; but instead here we just use an + * overly large number; `border-radius:100%;` would create an oval on + * non-square elements whereas we just want to round the ends of an element. + */ + border-radius:100px; +} + +.loz{ + @extend .pill; + border-radius:$brand-round; +} + +}//endif diff --git a/sass/inuitcss/objects/_marginalia.scss b/sass/inuitcss/objects/_marginalia.scss new file mode 100644 index 00000000000..b61bce31c42 --- /dev/null +++ b/sass/inuitcss/objects/_marginalia.scss @@ -0,0 +1,53 @@ +@charset "UTF-8"; +@if $use-marginalia == true{ + +/*------------------------------------*\ + $MARGINALIA +\*------------------------------------*/ +/** + * Marginalia are, per definition, notes in the margin of a document. The + * `marginalia__body` class can be applied to all kinds of content, like text or + * images, and is joined by a width class: + * +
    +
    +
    + * + * Demo: jsfiddle.net/inuitcss/AemkH + * + */ +.marginalia{ + @include font-size($milli-size); +} + +/** + * Wait for a certain breakpoint to trigger ‘proper' marginalia. Up to this point, + * marginalia are inline with the other text. + */ +@media (min-width: $desk-start){ + .marginalia{ + position:relative; + } + + .marginalia__body, + .marginalia__body--right{ + position:absolute; + } + + .marginalia__body{ + right:100%; + padding-right:$base-spacing-unit; + text-align:right; + } + + /** + * Align marginalia to the right of the text. + */ + .marginalia__body--right{ + left:100%; + padding-left:$base-spacing-unit; + text-align:left; + } +} + +}//endif diff --git a/sass/inuitcss/objects/_matrix.scss b/sass/inuitcss/objects/_matrix.scss new file mode 100644 index 00000000000..cbf5cad8322 --- /dev/null +++ b/sass/inuitcss/objects/_matrix.scss @@ -0,0 +1,89 @@ +@if $use-matrix == true{ + +/*------------------------------------*\ + $MATRIX +\*------------------------------------*/ +/** + * Create a grid of items out of a single list, e.g.: + * + + * + * Extend this object in your theme stylesheet. + * + * Demo: jsfiddle.net/inuitcss/Y2zrU + * + */ +.matrix{ + @extend .block-list; + border-left-width:1px; + @extend .cf; + + > li{ + float:left; + border-right-width:1px; + @if $global-border-box == false{ + @include vendor(box-sizing, border-box); + } + } +} + .matrix__link{ + @extend .block-list__link; + } + + +/** + * The `.multi-list` object is a lot like the `.matrix` object only without the + * blocky borders and padding. + * + + * + * Demo: jsfiddle.net/inuitcss/Y2zrU + * + */ +.multi-list{ + list-style:none; + margin-left:0; + @extend .cf; +} + .multi-list > li{ + float:left; + } + + + /** + * Apply these classes alongside the `.matrix` or `.multi-list` classes on + * lists to determine how wide their columns are. + */ + .two-cols > li{ + width:50%; + } + .three-cols > li{ + width:33.333%; + } + .four-cols > li{ + width:25%; + } + .five-cols > li{ + width:20%; + } + /** + * Unfortunately we have to qualify this selector in order to bring its + * specificity above the `.[number]-cols > li` selectors above. + */ + .matrix > .all-cols, + .multi-list > .all-cols{ + width:100%; + } + +}//endif diff --git a/sass/inuitcss/objects/_media.scss b/sass/inuitcss/objects/_media.scss new file mode 100644 index 00000000000..a88cd0bad85 --- /dev/null +++ b/sass/inuitcss/objects/_media.scss @@ -0,0 +1,60 @@ +@if $use-media == true{ + +/*------------------------------------*\ + $MEDIA +\*------------------------------------*/ +/** + * Place any image- and text-like content side-by-side, as per: + * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code + * E.g.: + * +
    + +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +
    + * + * Demo: jsfiddle.net/inuitcss/cf4Qs + * + */ +.media{ + display:block; + @extend .cf; +} + .media__img{ + float:left; + margin-right:$base-spacing-unit; + } + /** + * Reversed image location (right instead of left). + */ + .media__img--rev{ + float:right; + margin-left:$base-spacing-unit; + } + + .media__img img, + .media__img--rev img{ + display:block; + } + + .media__body{ + overflow:hidden; + } + .media__body, + .media__body > :last-child{ + margin-bottom:0; + } + + + /** + * `.img`s in `.islet`s need an appropriately sized margin. + */ + .islet .media__img{ + margin-right:$half-spacing-unit; + } + .islet .media__img--rev{ + margin-left:$half-spacing-unit; + } + +}//endif diff --git a/sass/inuitcss/objects/_nav.scss b/sass/inuitcss/objects/_nav.scss new file mode 100644 index 00000000000..67d4835c399 --- /dev/null +++ b/sass/inuitcss/objects/_nav.scss @@ -0,0 +1,155 @@ +@if $use-nav == true or $use-options == true or $use-pagination == true or $use-breadcrumb == true{ + +/*------------------------------------*\ + $NAV +\*------------------------------------*/ +/** + * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction + * When used on an `ol` or `ul`, this class throws the list into horizontal mode + * e.g.: + * + + * + * Demo: jsfiddle.net/inuitcss/Vnph4 + * + */ +.nav{ + list-style:none; + margin-left:0; + @extend .cf; + + > li{ + + &, + > a{ + display:inline-block; + *display:inline; + zoom:1; + } + } +} + + +/** + * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.: + * + + * + */ +.nav--stacked{ + + > li{ + display:list-item; + + > a{ + display:block; + } + } +} + + +/** + * `.nav--banner` extends `.nav` and centres the list, e.g.: + * + + * + */ +.nav--banner{ + text-align:center; +} + + +/** + * Give nav links a big, blocky hit area. Extends `.nav`, e.g.: + * + + * + */ +.nav--block{ + line-height:1; + /** + * Remove whitespace caused by `inline-block`. + */ + letter-spacing:-0.31em; + word-spacing:-0.43em; + white-space:nowrap; + + > li{ + letter-spacing:normal; + word-spacing:normal; + + > a{ + padding:$half-spacing-unit; + } + } +} + + +/** + * Force a nav to occupy 100% of the available width of its parent. Extends + * `.nav`, e.g.: + * + + * + * Thanks to @pimpl for this idea! + */ +.nav--fit{ + display:table; + width:100%; + + > li{ + display:table-cell; + + > a{ + display:block; + } + } +} + + +/** + * Make a list of keywords. Extends `.nav`, e.g.: + * + ` + * + * Demo: jsfiddle.net/inuitcss/vwfaf + * + */ +.options{ + @extend .nav--block; + + > li{ + + > a{ + border:0 solid $base-ui-color; + border-width:1px; + border-left-width:0; + } + + &:first-child > a{ + border-left-width:1px; + border-top-left-radius:$brand-round; + border-bottom-left-radius:$brand-round; + } + + &:last-child > a{ + border-top-right-radius:$brand-round; + border-bottom-right-radius:$brand-round; + } + } +} + +}//endif diff --git a/sass/inuitcss/objects/_pagination.scss b/sass/inuitcss/objects/_pagination.scss new file mode 100644 index 00000000000..999f94f6e27 --- /dev/null +++ b/sass/inuitcss/objects/_pagination.scss @@ -0,0 +1,50 @@ +@if $use-pagination == true{ + +/*------------------------------------*\ + $PAGINATION +\*------------------------------------*/ +/** + * Basic pagination object, extends `.nav`. + * Requires some funky commenting to collapse any white-space caused by the + * `display:inline-block;` rules. + * +
      +
    1. First
      2. +
    2. Previous
      3. +
    3. 1
      4. +
    4. 2
      5. +
    5. 3
      6. +
    6. 4
      7. +
    7. 5
      8. +
    8. Next
      9. +
    9. Last
      10. +
    + * + * Demo: jsfiddle.net/inuitcss/9Y6PU + * + */ +.pagination{ + text-align:center; + /** + * Remove whitespace caused by `inline-block`. + */ + letter-spacing:-0.31em; + word-spacing:-0.43em; +} + .pagination > li{ + padding:$base-spacing-unit / 2; + letter-spacing:normal; + word-spacing:normal; + } + .pagination > li > a{ + padding:$base-spacing-unit / 2; + margin:-$base-spacing-unit / 2; + } + .pagination__first a:before{ + content:"\00AB" "\00A0"; + } + .pagination__last a:after{ + content:"\00A0" "\00BB"; + } + +}//endif diff --git a/sass/inuitcss/objects/_rules.scss b/sass/inuitcss/objects/_rules.scss new file mode 100644 index 00000000000..12844f7bdad --- /dev/null +++ b/sass/inuitcss/objects/_rules.scss @@ -0,0 +1,66 @@ +@charset "UTF-8"; +@if $use-rules == true{ + +/*------------------------------------*\ + $RULES +\*------------------------------------*/ +/** + * Horizontal rules, extend `hr`. + * + * Demo: jsfiddle.net/inuitcss/L6GuZ + * + */ +.rule{ + color:$base-ui-color; + border:none; + border-bottom-width:1px; + border-bottom-style:solid; + margin-bottom:$base-spacing-unit - 1px; + margin-bottom:(($base-spacing-unit - 1px) / $base-font-size)*1rem; +} + + +/** + * Dotted rules + */ +.rule--dotted{ + border-bottom-style:dotted; +} + + +/** + * Dashed rules + */ +.rule--dashed{ + border-bottom-style:dashed; +} + + +/** + * Ornamental rules. Places a § over the rule. + */ +.rule--ornament{ + position:relative; + + &:after{ + content:"\00A7"; + position:absolute; + top: 0; + right: 0; + left: 0; + line-height:0; + text-align:center; + } + + /** + * Pass in an arbitrary ornament though a data attribute, e.g.: + * +
    + * + */ + &[data-ornament]:after{ + content:attr(data-ornament); + } +} + +}//endif diff --git a/sass/inuitcss/objects/_split.scss b/sass/inuitcss/objects/_split.scss new file mode 100644 index 00000000000..6023bafb39e --- /dev/null +++ b/sass/inuitcss/objects/_split.scss @@ -0,0 +1,40 @@ +@charset "UTF-8"; +@if $use-split == true{ + +/*------------------------------------*\ + $SPLIT +\*------------------------------------*/ +/** + * Simple split item for creating two elements floated away from one another, + * e.g.: + * +
    +
    Burger and fries
    +
    £5.99
    +
    Fillet steak
    +
    £19.99
    +
    Ice cream
    +
    £2.99
    +
    + * +
      +
    1. 1st place Bob
      2. +
    2. 2nd place Lilly
      3. +
    3. 3rd place Ted
      4. +
    ​ + * + * Demo: jsfiddle.net/inuitcss/9gZW7 + * + */ +.split{ + text-align:right; + list-style:none; + margin-left:0; +} + .split__title{ + text-align:left; + float:left; + clear:left; + } + +}//endif diff --git a/sass/inuitcss/objects/_sprite.scss b/sass/inuitcss/objects/_sprite.scss new file mode 100644 index 00000000000..898646bc7cf --- /dev/null +++ b/sass/inuitcss/objects/_sprite.scss @@ -0,0 +1,99 @@ +@charset "UTF-8"; +@if $use-sprite == true{ + +/*------------------------------------*\ + $SPRITE +\*------------------------------------*/ +/** + * Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply + * a background image e.g.: + * + More info… + * + * or + * + Help and FAQ + * + * Giving an element a class of `.icon` will throw it into ‘icon’ mode and will + * not add a background, but should be used for icon fonts and is populated + * through a `data-icon` attribute and the `:after` pseudo-element, e.g.: + * + View your favourites + * + * Where ‘’ might map to a star in your particular icon font. + * + * These all require extension in your theme stylesheet, e.g. in your own CSS: + * + .sprite{ + background-image:url(path/to/your/sprite.png); + } + .sprite--link{ background-position:0 0 ; } + .sprite--star{ background-position:0 -16px; } + * + * Demo: jsfiddle.net/inuitcss/6TKuS + * + */ +.sprite, +.icon{ + display:inline-block; + line-height:1; + position:relative; + vertical-align:middle; + zoom:1; + /** + * So using `.icon` on certain elements doesn’t make a visual difference. + */ + font-style:normal; + font-weight:normal; + /** + * So icons added using `.icon` sit in the centre of the element. + */ + text-align:center; +} +.sprite{ + /** + * The typical size of most icons. Override in your theme stylesheet. + */ + width: 16px; + height:16px; + top:-1px; + + /* + * H5BP method image replacement: + * github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2 + */ + overflow:hidden; + *text-indent:-9999px; + + &:before{ + content:""; + display:block; + width:0; + height:100%; + } +} + +/** + * Set up icon font + */ +.icon{ + font-size:16px; + /** + * Place the icon in a box the exact same dimensions as the icon itself. + */ + width:1em; + height:1em; + + &:before{ + content:attr(data-icon); + } +} + +/** + * Icon size modifiers. + */ +.icon--large { font-size:32px; } +.icon--huge { font-size:64px; } +.icon--natural { font-size:inherit; } + +}//endif diff --git a/sass/inuitcss/objects/_stats.scss b/sass/inuitcss/objects/_stats.scss new file mode 100644 index 00000000000..9445ca8129a --- /dev/null +++ b/sass/inuitcss/objects/_stats.scss @@ -0,0 +1,53 @@ +@charset "UTF-8"; +@if $use-stats == true{ + + /*------------------------------------*\ + $STATS + \*------------------------------------*/ + /** + * Simple object to display key–value statistic-like information, e.g.: + * +
    +
    +
    Tweets
    +
    27,740
    +
    + +
    +
    Following
    +
    11,529
    +
    + +
    +
    Followers
    +
    12,105
    +
    +
    + * + * Demo: jsfiddle.net/inuitcss/Bpwu6 + * + */ + .stat-group{ + @extend .cf; + margin-left:-$base-spacing-unit; +} + .stat{ + float:left; + margin-left:$base-spacing-unit; + display:-ms-flexbox; + display:-webkit-flex; + display: -moz-flex; + display: flex; + @include vendor(flex-direction, column); + } + .stat__title{ + @include vendor(order, 2); + -ms-flex-order:2; + } + .stat__value{ + margin-left:0; + @include vendor(order, 1); + -ms-flex-order:1; + } + +}//endif diff --git a/sass/inuitcss/objects/_this-or-this.scss b/sass/inuitcss/objects/_this-or-this.scss new file mode 100644 index 00000000000..62a2413b647 --- /dev/null +++ b/sass/inuitcss/objects/_this-or-this.scss @@ -0,0 +1,38 @@ +@if $use-this-or-this == true{ + +/*------------------------------------*\ + $THIS-OR-THIS +\*------------------------------------*/ +/** + * Simple options object to provide multiple choices, e.g.: + * +

    + + Free + + + or + + + Pro + +

    + * + * The `.this-or-this__this` and `.this-or-this__or` objects can be sized using + * the grid-system classes. + * + * Demo: jsfiddle.net/inuitcss/R3sks + * + */ +.this-or-this{ + display:table; + width:100%; + text-align:center; +} + .this-or-this__this, + .this-or-this__or{ + display:table-cell; + vertical-align:middle; + } + +}//endif diff --git a/sass/oscailte/_mixins.scss b/sass/oscailte/_mixins.scss new file mode 100644 index 00000000000..01885fe6b54 --- /dev/null +++ b/sass/oscailte/_mixins.scss @@ -0,0 +1,57 @@ +@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) { + -webkit-column-count: $columnCount; + -moz-column-count: $columnCount; + column-count: $columnCount; + -webkit-column-gap: $columnGap; + -moz-column-gap: $columnGap; + column-gap: $columnGap; +} + +@mixin transition($transition...) { + -webkit-transition: $transition; + -moz-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +@mixin box-sizing($boxmodel) { + -webkit-box-sizing: $boxmodel; + -moz-box-sizing: $boxmodel; + box-sizing: $boxmodel; +} + +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +@mixin box-shadow($shadow...) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + -ms-box-shadow: $shadow; + -o-box-shadow: $shadow; + box-shadow: $shadow; +} + +@mixin gradient-horizontal($startColor: $button-color, $endColor: darken($button-color, 5%)) { + background-color: $endColor; + background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ + 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: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down +} + +@mixin gradient-vertical($startColor: $button-color, $endColor: darken($button-color, 5%)) { + background-color: mix($startColor, $endColor, 60%); + background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ + 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-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down +} \ No newline at end of file diff --git a/sass/oscailte/_oscailte.scss b/sass/oscailte/_oscailte.scss new file mode 100644 index 00000000000..972226c6fad --- /dev/null +++ b/sass/oscailte/_oscailte.scss @@ -0,0 +1,28 @@ +@import "variables"; +@import "mixins"; + +@import "../inuitcss/_inuit"; +@import "../fontawesome/font-awesome"; + +@import "base/global"; +@import "base/grid"; +@import "base/header"; +@import "base/navigation"; +@import "base/footer"; +@import "base/post"; +@import "base/archive_list"; +@import "base/solarized"; + +@import "base/sidebar"; +@import "aside/recent_posts"; +@import "aside/github"; +@import "aside/pinboard"; +@import "aside/social"; + +@import "homepage/home"; +@import "homepage/hero_unit"; + +@import "helpers/classes"; +@import "helpers/grid-fix"; + +@import "custom/**/*" diff --git a/sass/oscailte/_variables.scss b/sass/oscailte/_variables.scss new file mode 100644 index 00000000000..3d629649b74 --- /dev/null +++ b/sass/oscailte/_variables.scss @@ -0,0 +1,64 @@ +$use-grids: true; +$site-width: 1100px; +$responsive: true; +$use-gridfix: true; + +// Fonts & Font Families +$serif: Georgia, 'Times New Roman', Times, serif !default; +$sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; + +// Grays +// ------------------------- +$black: #000 !default; +$grayDarker: #222 !default; +$grayDark: #333 !default; +$gray: #555 !default; +$grayLight: #999 !default; +$grayLighter: #eee !default; +$white: #fff !default; + +// Accent colors +// ------------------------- +$blue: #049cdb !default; +$blueDark: #0064cd !default; +$green: #46a546 !default; +$red: #9d261d !default; +$yellow: #ffc40d !default; +$orange: #f89406 !default; +$pink: #c3325f !default; +$purple: #7a43b6 !default; + +// Social network colors +// Organised in a key-value pair list for dynamic SASS +// Can be infinitely extended by adding more as required +// ------------------------- +$sites: + adn #4A484C, + dribbble #EA4C89, + facebook #3B5998, + github #333333, + gplus #db4a39, + linkedin #4875b4, + pinterest #CC2127, + stackoverflow #FE7A15, + twitter #00a0d1, + youtube #CC181E; + +// Site footer +// ------------------------- +$footer-height: 100px; + +// Site colors +// ------------------------- +$primary-color: $blue; +$secondary-color: $green; +// ------------------------- +$site-background: #F5F5F5; +$header-background: $white; +$footer-background: $header-background; +$text-color: $grayDarker; +$title-color: $primary-color; +$link-color: $primary-color; +$button-color: $primary-color; +$button-text: $white; +$navigation-color: $link-color; diff --git a/sass/oscailte/aside/_github.scss b/sass/oscailte/aside/_github.scss new file mode 100644 index 00000000000..1bc1a29b332 --- /dev/null +++ b/sass/oscailte/aside/_github.scss @@ -0,0 +1,8 @@ +#github-repos { + li { + p { + font-size: 0.6em; + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/sass/oscailte/aside/_pinboard.scss b/sass/oscailte/aside/_pinboard.scss new file mode 100644 index 00000000000..16936079c49 --- /dev/null +++ b/sass/oscailte/aside/_pinboard.scss @@ -0,0 +1,16 @@ +#pinboard { + .pin-item > p { + margin-bottom: 0; + a { + &:hover { + text-decoration: underline; + } + &::after { + content: ","; + } + &:last-child::after { + content: ""; + } + } + } +} \ No newline at end of file diff --git a/sass/oscailte/aside/_recent_posts.scss b/sass/oscailte/aside/_recent_posts.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/sass/oscailte/aside/_social.scss b/sass/oscailte/aside/_social.scss new file mode 100644 index 00000000000..c8b8d682398 --- /dev/null +++ b/sass/oscailte/aside/_social.scss @@ -0,0 +1,76 @@ +.social { + ul { + @media only screen and (min-width: $lap-start){ + @include content-columns(2, 10px); + } + } + + a { + @include box-sizing(border-box); + background-color: darken($site-background, 5%); + border: 1px solid darken($site-background, 10%); + border-radius: 4px; + color: #222; + display: inline-block; + font-size: 0.8em; + margin-bottom: 7px; + padding: 1em; + padding-right: 0.5em; + position: relative; + text-decoration: none; + width: 100%; + z-index: 5; + @include transition( + box-shadow 200ms, + color 400ms, + transform 400ms + ); + + &:hover { + color: $white !important; + text-decoration: none; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); + z-index: 7; + &::before { + border: 1px solid #000; + height: 100%; + top: 0; + width: 100%; + } + } + + &::before { + background-color: #222; + border-radius: 4px; + content: ""; + height: 1px; + position: absolute; + top: 50%; left: 0%; + width: 0; + z-index: -1; + @include transition( + border 200ms, + height 200ms 200ms, + top 200ms 200ms, + width 200ms + ); + } + + i { + font-size: 2em; + line-height: 0.8em; + margin-right: 0.35em; + } + + @each $kvp in $sites { + &.#{nth($kvp, 1)} { + color: nth($kvp, 2); + &::before { + background-color: nth($kvp, 2); + border-color: darken(nth($kvp, 2), 5%); + } + } + } + + } +} \ No newline at end of file diff --git a/sass/oscailte/base/_archive_list.scss b/sass/oscailte/base/_archive_list.scss new file mode 100644 index 00000000000..8523372ff02 --- /dev/null +++ b/sass/oscailte/base/_archive_list.scss @@ -0,0 +1,7 @@ +#archive-list { + article { + h1 { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/sass/oscailte/base/_footer.scss b/sass/oscailte/base/_footer.scss new file mode 100644 index 00000000000..3fa34d72ea5 --- /dev/null +++ b/sass/oscailte/base/_footer.scss @@ -0,0 +1,21 @@ +#page-wrap { + min-height: 100%; + margin-bottom: -$footer-height; + &::after { + content: ""; + display: block; + height: $footer-height; + } +} + +body > footer { + @include box-shadow(0 0 3px rgba(0, 0, 0, 0.25)); + background-color: $footer-background; + height: $footer-height; + margin-top: 3em; +} + +.copyright { + margin: 0; + padding: 20px 0; +} \ No newline at end of file diff --git a/sass/oscailte/base/_global.scss b/sass/oscailte/base/_global.scss new file mode 100644 index 00000000000..e29efaafbb8 --- /dev/null +++ b/sass/oscailte/base/_global.scss @@ -0,0 +1,57 @@ +body, html { + background-color: $site-background; + color: $text-color; + font-family: $sans-serif; + height: 100%; +} + +a { + color: $link-color; + text-decoration: none; + &:visited { + color: darken($link-color, 10%); + } + .menu & { + color: $link-color; + } +} + +.gist { + font-size: 0.75em; +} + +.title.indent { + @media only screen and (max-width: $palm-end){ + &::before { + display: none; + } + } + &::before { + content: "// "; + color: $primary-color; + } +} + +.divider { + border: none; + border-bottom: 2px solid $primary-color; + clear: both; + margin: 2em 0; +} + +article.post, +article.page { + img { + border: 5px solid #fff; + border-radius: 3px; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); + &.right { + float: right; + margin: 0 0 10px 20px; + } + &.left { + float: left; + margin: 0 20px 10px 0; + } + } +} diff --git a/sass/oscailte/base/_grid.scss b/sass/oscailte/base/_grid.scss new file mode 100644 index 00000000000..17a08c7c78a --- /dev/null +++ b/sass/oscailte/base/_grid.scss @@ -0,0 +1,12 @@ +.grid-wrapper { + margin: auto; + max-width: $site-width; + padding: 0 25px; +} + +.grid-center { + text-align: center; + > .grid__item { + text-align: left; + } +} \ No newline at end of file diff --git a/sass/oscailte/base/_header.scss b/sass/oscailte/base/_header.scss new file mode 100644 index 00000000000..08043bdac6a --- /dev/null +++ b/sass/oscailte/base/_header.scss @@ -0,0 +1,12 @@ +body > header { + @include box-shadow(0 0 3px rgba(0, 0, 0, 0.25)); + background-color: $header-background; + margin-bottom: 2em; + + .site-title { + color: $grayDarker; + font-size: 1.7em; + font-weight: bold; + line-height: 2.5em; + } +} \ No newline at end of file diff --git a/sass/oscailte/base/_navigation.scss b/sass/oscailte/base/_navigation.scss new file mode 100644 index 00000000000..b8ef3430eeb --- /dev/null +++ b/sass/oscailte/base/_navigation.scss @@ -0,0 +1,106 @@ +/* + * Navigataur: A pure CSS responsive navigation menu + * Author: Mike King (@micjamking) + */ + +/*-------------------------------- + Functional Styles (Required) +---------------------------------*/ +/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */ +body{ -webkit-animation: bugfix infinite 1s; } +@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } + +.header { position: relative; } +#toggle, .toggle { display: none; } +.menu > li { list-style: none; float:left; } + +@media only screen and (max-width: $lap-end){ + .menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; } + .menu > li { display: block; width: 100%; margin: 0; } + .menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } + .toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } + #toggle:checked ~ .menu { display: block; opacity: 1; z-index: 999; } +} + + +/*-------------------------------- + Presentation Styles (Editable) +---------------------------------*/ +.menu { + margin: 0; +} + +.menu > li > a{ + @include box-sizing(border-box); + @include transition(all 0.25s linear); + display: block; + padding: 32px 20px; + text-decoration: none; + font-weight: normal; + font-size: 16px; + line-height: 1; +} + +.menu > li > a:hover, .menu > li > a:focus{ + background: $site-background; + box-shadow: inset 0px 5px $navigation-color; + color: $navigation-color; + padding: 40px 20px 24px; +} + +.toggle{ + z-index: 20; +} + +@media only screen and (max-width: $lap-end){ + .menu{ + background: $white; + border-top: 1px solid $navigation-color; + border-bottom: 4px solid $navigation-color; + } + + .menu, .menu > li, .menu > li > a{ + height: auto; + } + + .menu > li > a{ + padding: 15px 15px; + } + + .menu > li > a:hover, .menu > li > a:focus{ + background: $grayLighter; + box-shadow: inset 5px 0px $navigation-color; + padding: 15px 15px 15px 25px; + } + + .toggle::after { + @include border-radius(2px); + @include box-sizing(border-box); + @include transition(all 0.5s linear); + content: attr(data-open); + display: block; + width: 100%; + margin: 20px 0; + padding: 10px 50px; + background: $navigation-color; + text-align: center; + font-size: 12px; + color: $white; + } + + .toggle:hover::after{ + background: darken($navigation-color, 7%); + } + + #toggle:checked + .toggle::after{ + content: attr(data-close); + } +} + +@media only screen and (max-width: 479px){ + .toggle::after { + margin: 0 0 20px; + text-align: center; + width: 100%; + } +} \ No newline at end of file diff --git a/sass/oscailte/base/_post.scss b/sass/oscailte/base/_post.scss new file mode 100644 index 00000000000..2b577fbe4d6 --- /dev/null +++ b/sass/oscailte/base/_post.scss @@ -0,0 +1,111 @@ +$meta-color: lighten($text-color, 20%); + +article { + + blockquote { + @extend .clearfix; + border-left: 2px solid $primary-color; + color: lighten($text-color, 15%); + font-family: $serif; + font-size: 1.25em; + font-style: italic; + padding-left: 15px; + + footer { + float: right; + font-family: $sans-serif; + font-size: 0.8em; + strong::after { + content: " \2014 "; + } + a { + text-decoration: underline; + } + } + } + + .pullquote-left::before, .pullquote-right::before { + @media only screen and (max-width: $palm-end){ + border-top: 1px dotted $primary-color; + border-bottom: 1px dotted $primary-color; + padding: 0 10px; + width: 100%; + } + border: medium none; + color: $primary-color; + content: "\201C" attr(data-pullquote) "\201D"; + float: right; + font-family: $serif; + font-size: 1.4em; + font-style: italic; + line-height: 1.45em; + margin: 0.3em 0 1em 1.5em; + padding: 0; + position: relative; + top: 7px; + width: 45%; + } + + .tags { + @extend .inline; + display: inline; + li { + margin-right: 2px; + &::after { + content: ","; + } + &:last-child::after { + content: ""; + } + a { + color: $meta-color; + text-decoration: none; + &:hover {text-decoration: underline;} + } + } + } + + .meta { + $meta-color: $site-background; + font-size: 12px; + padding: 0 0 5px; + > time { + margin-right: 20px; + } + } + + // Blog listings, index page + &.listing { + margin-bottom: 20px; + h1 { + margin-bottom: 0; + a { + color: $title-color; + text-decoration: none; + } + } + .entry-content { + margin: 10px 0; + } + + hr { + border: none; + border-bottom: 1px solid $primary-color; + } + } + + &.post { + @media only screen and (max-width: $palm-end){ + .tags { + clear: both; + margin-top: 7px; + } + } + h1 { + margin-bottom: 0; + } + .meta { + border-bottom: 1px solid $primary-color; + margin-bottom: 20px; + } + } +} diff --git a/sass/oscailte/base/_sidebar.scss b/sass/oscailte/base/_sidebar.scss new file mode 100644 index 00000000000..ea35944aef5 --- /dev/null +++ b/sass/oscailte/base/_sidebar.scss @@ -0,0 +1,46 @@ +// #sidebar { +// .title { +// border-bottom: 1px solid $blue; +// color: $grayDark; +// margin: 1em 0 0.5em; +// padding-bottom: 5px; +// } +// .social { +// ul { +// @include content-columns(2, 10px); +// } +// } + +// @media only screen and (min-width: $desk-start){ +// section:first-child { +// h3 {margin-top: 0;} +// } +// } +// } + +.aside-module { + @media only screen and (min-width: $desk-start){ + &:first-child { + .title {margin-top: 0;} + } + } + .title { + border-bottom: 1px solid $blue; + color: $grayDark; + margin: 1em 0 0.5em; + padding-bottom: 5px; + + .btn { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 5px 10px; + text-decoration: none; + } + } + + .loading { + display: block; + font-size: 2em; + text-align: center; + } +} \ No newline at end of file diff --git a/sass/oscailte/base/_solarized.scss b/sass/oscailte/base/_solarized.scss new file mode 100644 index 00000000000..255880157ce --- /dev/null +++ b/sass/oscailte/base/_solarized.scss @@ -0,0 +1,333 @@ +// This file is just a butchered version fo the one included in the default Octopress theme. +// It could most definitely do with some cleaning up in the future. + +@mixin selection($bg, $color: inherit, $text-shadow: none){ + * { + &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; } + &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; } + &::selection { background: $bg; color: $color; text-shadow: $text-shadow; } + } +} + +$base03: #002b36 !default; //darkest blue +$base02: #073642 !default; //dark blue +$base01: #586e75 !default; //darkest gray +$base00: #657b83 !default; //dark gray +$base0: #839496 !default; //medium gray +$base1: #93a1a1 !default; //medium light gray +$base2: #eee8d5 !default; //cream +$base3: #fdf6e3 !default; //white +$solar-yellow: #b58900 !default; +$solar-orange: #cb4b16 !default; +$solar-red: #dc322f !default; +$solar-magenta: #d33682 !default; +$solar-violet: #6c71c4 !default; +$solar-blue: #268bd2 !default; +$solar-cyan: #2aa198 !default; +$solar-green: #859900 !default; + +$solarized: dark !default; + +@if $solarized == light { + + $_base03: $base03; + $_base02: $base02; + $_base01: $base01; + $_base00: $base00; + $_base0: $base0; + $_base1: $base1; + $_base2: $base2; + $_base3: $base3; + + $base03: $_base3; + $base02: $_base2; + $base01: $_base1; + $base00: $_base0; + $base0: $_base00; + $base1: $_base01; + $base2: $_base02; + $base3: $_base03; +} + +/* non highlighted code colors */ +$pre-bg: $base03 !default; +$pre-border: darken($base02, 5) !default; +$pre-color: $base1 !default; + +$noise-bg: image-url('noise.png') top left !default; +$sans: "Helvetica Neue", Arial, sans-serif !default; +$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; +.sans { font-family: $sans; } +.mono { font-family: $mono; } + +.highlight { + table {margin-bottom: 0;} + .gutter, .code { + padding: 0; + } + .gutter { + .line-number { + display: block; + } + } +} + +.highlight, html .gist .gist-file .gist-syntax .gist-highlight { + table td.code { width: 100%; } + border: 1px solid $pre-border !important; +} +.highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers { + text-align: right; + font-size: 13px; + line-height: 1.45em; + @if $solarized == light { + background: lighten($base03, 1) $noise-bg !important; + border-right: 1px solid darken($base02, 2) !important; + @include box-shadow(lighten($base03, 2) -1px 0 inset); + text-shadow: lighten($base02, 2) 0 -1px; + } @else { + background: $base02 $noise-bg !important; + border-right: 1px solid darken($base03, 2) !important; + @include box-shadow(lighten($base02, 2) -1px 0 inset); + text-shadow: darken($base02, 10) 0 -1px; + } + span { color: $base01 !important; } + padding: .8em !important; + @include border-radius(0); +} + +figure.code, .gist-file, pre { + @include box-shadow(rgba(#000, .06) 0 0 10px); + .highlight pre { @include box-shadow(none); } +} + +.gist .highlight, figure.code .highlight { + @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); +} +html .gist .gist-file { + margin-bottom: 1.8em; + position: relative; + border: none; + padding-top: image-height("code_bg.png") !important; + .highlight { + margin-bottom: 0; + } + .gist-syntax { + border-bottom: 0 !important; + background: none !important; + .gist-highlight { + background: $base03 !important; + } + .highlight pre { + @extend .pre-code; + padding: 0; + } + } + .gist-meta { + padding: .6em 0.8em; + border: 1px solid lighten($base02, 2) !important; + color: $base01; + font-size: .7em !important; + @if $solarized == light { + background: lighten($base03, 2) $noise-bg; + border: 1px solid $pre-border !important; + border-top: 1px solid lighten($base03, 2) !important; + } @else { + background: $base02 $noise-bg; + } + @extend .sans; + line-height: 1.5em; + a { + color: mix($base1, $base01) !important; + &:hover { color: $base1 !important; } + } + a[href*='#file'] { + position: absolute; top: 0; left:0; right:-10px; + color: #474747 !important; + @extend .code-title; + &:hover { color: $link-color !important; } + } + a[href*=raw]{ + @extend .download-source; + top: .4em; + } + } +} +pre { + background: $pre-bg $noise-bg; + @include border-radius(.4em); + @extend .mono; + border: 1px solid $pre-border; + line-height: 1.45em; + font-size: 13px; + margin-bottom: 2.1em; + padding: .8em 1em; + color: $pre-color; + overflow: auto; +} +h3.filename { + @extend .code-title; + + pre { @include border-radius(0px); } +} + +p, li { + code { + @extend .mono; + display: inline-block; + white-space: no-wrap; + background: #fff; + font-size: .8em; + line-height: 1.5em; + color: #555; + border: 1px solid #ddd; + @include border-radius(.4em); + padding: 0 .3em; + margin: -1px 0; + } + pre code { font-size: 1em !important; background: none; border: none; } +} + +.pre-code { + font-family: $mono !important; + overflow: scroll; + overflow-y: hidden; + display: block; + padding: .8em; + overflow-x: auto; + line-height: 1.45em; + background: $base03 $noise-bg !important; + color: $base1 !important; + span { color: $base1 !important; } + span { font-style: normal !important; font-weight: normal !important; } + + .c { color: $base01 !important; font-style: italic !important; } /* Comment */ + .cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */ + .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */ + .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */ + .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */ + .err { color: $solar-red !important; background: none !important; } /* Error */ + .k { color: $solar-orange !important; } /* Keyword */ + .o { color: $base1 !important; font-weight: bold !important; } /* Operator */ + .p { color: $base1 !important; } /* Operator */ + .ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */ + .gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */ + .gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */ + .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */ + //.gr { color: #aa0000 } /* Generic.Error */ + .gh { color: $base01 !important; } /* Generic.Heading */ + .gi { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */ + .gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */ + //.go { color: #888888 } /* Generic.Output */ + //.gp { color: #555555 } /* Generic.Prompt */ + .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */ + .gu { color: $solar-violet !important; } /* Generic.Subheading */ + //.gt { color: #aa0000 } /* Generic.Traceback */ + .kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */ + .kd { color: $solar-blue !important; } /* Keyword.Declaration */ + .kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */ + .kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */ + .kt { color: $solar-cyan !important; } /* Keyword.Type */ + .n { color: $solar-blue !important; } + .na { color: $solar-blue !important; } /* Name.Attribute */ + .nb { color: $solar-green !important; } /* Name.Builtin */ + .nc { color: $solar-magenta !important;} /* Name.Class */ + .no { color: $solar-yellow !important; } /* Name.Constant */ + //.ni { color: #800080 } /* Name.Entity */ + .nl { color: $solar-green !important; } + .ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */ + .nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */ + .nn { color: $solar-yellow !important; } /* Name.Namespace */ + .nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */ + .nx { color: $solar-yellow !Important; } + //.bp { color: #999999 } /* Name.Builtin.Pseudo */ + //.vc { color: #008080 } /* Name.Variable.Class */ + .vg { color: $solar-blue !important; } /* Name.Variable.Global */ + .vi { color: $solar-blue !important; } /* Name.Variable.Instance */ + .nv { color: $solar-blue !important; } /* Name.Variable */ + //.w { color: #bbbbbb } /* Text.Whitespace */ + .mf { color: $solar-cyan !important; } /* Literal.Number.Float */ + .m { color: $solar-cyan !important; } /* Literal.Number */ + .mh { color: $solar-cyan !important; } /* Literal.Number.Hex */ + .mi { color: $solar-cyan !important; } /* Literal.Number.Integer */ + //.mo { color: #009999 } /* Literal.Number.Oct */ + .s { color: $solar-cyan !important; } /* Literal.String */ + //.sb { color: #d14 } /* Literal.String.Backtick */ + //.sc { color: #d14 } /* Literal.String.Char */ + .sd { color: $solar-cyan !important; } /* Literal.String.Doc */ + .s2 { color: $solar-cyan !important; } /* Literal.String.Double */ + .se { color: $solar-red !important; } /* Literal.String.Escape */ + //.sh { color: #d14 } /* Literal.String.Heredoc */ + .si { color: $solar-blue !important; } /* Literal.String.Interpol */ + //.sx { color: #d14 } /* Literal.String.Other */ + .sr { color: $solar-cyan !important; } /* Literal.String.Regex */ + .s1 { color: $solar-cyan !important; } /* Literal.String.Single */ + //.ss { color: #990073 } /* Literal.String.Symbol */ + //.il { color: #009999 } /* Literal.Number.Integer.Long */ + div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }} +} + +.highlight, .gist-highlight { + pre { background: none; @include border-radius(0px); border: none; padding: 0; margin-bottom: 0; } + margin-bottom: 1.8em; + background: $base03; + overflow-y: hidden; + overflow-x: auto; +} + +$solar-scroll-bg: rgba(#fff, .15); +$solar-scroll-thumb: rgba(#fff, .2); +@if $solarized == light { + $solar-scroll-bg: rgba(#000, .15); + $solar-scroll-thumb: rgba(#000, .15); +} + +pre, .highlight, .gist-highlight { + &::-webkit-scrollbar { height: .5em; background: $solar-scroll-bg; } + &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px } +} + +.highlight code { + @extend .pre-code; background: #000; +} +figure.code { + background: none; + padding: 0; + border: 0; + margin-bottom: 1.5em; + pre { margin-bottom: 0; } + figcaption { + position: relative; + @extend .code-title; + a { @extend .download-source; } + } + .highlight { + margin-bottom: 0; + } +} + +.code-title { + text-align: center; + font-size: 13px; + line-height: 2em; + text-shadow: #cbcccc 0 1px 0; + color: #474747; + font-weight: normal; + margin-bottom: 0; + @include border-radius(5px 5px 0 0); + font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; + background: #aaaaaa image-url("code_bg.png") top repeat-x; + border: 1px solid #565656; + border-top-color: #cbcbcb; + border-left-color: #a5a5a5; + border-right-color: #a5a5a5; + border-bottom: 0; +} + +.download-source { + position: absolute; right: .8em; + color: #666 !important; + z-index: 1; + font-size: 13px; + text-shadow: #cbcccc 0 1px 0; + padding-left: 3em; +} diff --git a/sass/oscailte/custom/_README.scss b/sass/oscailte/custom/_README.scss new file mode 100644 index 00000000000..8f1caadd6c0 --- /dev/null +++ b/sass/oscailte/custom/_README.scss @@ -0,0 +1,6 @@ +// You can freely create SCSS files within this Custom directory +// and they will be imported into the end of the theme's output CSS. +// The directory is loaded to increase abstraction and reduce the amount of +// changes to be made to the Oscailte theme itself. + +// THESE FILES AREA LOADED ALPHABETICALLY \ No newline at end of file diff --git a/sass/oscailte/helpers/_classes.scss b/sass/oscailte/helpers/_classes.scss new file mode 100644 index 00000000000..8f71f33ed30 --- /dev/null +++ b/sass/oscailte/helpers/_classes.scss @@ -0,0 +1,60 @@ +.pull-left {float: left;} +.pull-right {float: right;} + +.clearfix { + *zoom: 1; + &::before, + &::after { + display: table; + content: ""; + line-height: 0; + } + &::after { + clear: both; + } +} + +ul, ol { + &.unstyled { + list-style-type: none; + margin: 0; + } + + &.inline { + @extend .unstyled; + list-style-type: none; + > li {display: inline;} + } + + &.divided { + @extend .unstyled; + > li { + border-top: 1px solid lighten($site-background, 5%); + border-bottom: 1px solid darken($site-background, 5%); + padding: 0.5em 0; + + &:first-child { + border-top: none; + padding-top: 0; + } + &:last-child {border-bottom: none;} + } + } +} + +.btn { + @include gradient-vertical; + @include box-shadow(0 0 3px rgba(0, 0, 0, 0.25)); + border-radius: 3px; + color: $button-text; + display: inline-block; + padding: 7px 15px; + text-decoration: none; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); + &:hover { + text-decoration: underline; + } + &:visited { + color: $button-text; + } +} \ No newline at end of file diff --git a/sass/oscailte/helpers/_grid-fix.scss b/sass/oscailte/helpers/_grid-fix.scss new file mode 100644 index 00000000000..8b98103e5bf --- /dev/null +++ b/sass/oscailte/helpers/_grid-fix.scss @@ -0,0 +1,76 @@ +/* + * A modified version of @kevva solution https://github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371 + * Letter spacing hack to remove the necessity of using empty HTML comments between columns. + * + */ + +@if $use-gridfix == true { + .grid { + letter-spacing: -1rem; + } + + /* Opera hack */ + .opera:-o-prefocus, + .grid { + word-spacing: -1rem; + } + + .grid__item { + letter-spacing: normal; + word-spacing: normal; + } +} + +/* + * An implementation of flexbox which can be applied to the grid items + * + */ + +@media only screen and (min-width: $lap-start){ + .flex { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-direction: normal; + -moz-box-direction: normal; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -moz-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-box-align: start; + -moz-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + } + + .flex__item { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-box-flex: 0; + -moz-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + } +} \ No newline at end of file diff --git a/sass/oscailte/homepage/_hero_unit.scss b/sass/oscailte/homepage/_hero_unit.scss new file mode 100644 index 00000000000..469c057a3d9 --- /dev/null +++ b/sass/oscailte/homepage/_hero_unit.scss @@ -0,0 +1,76 @@ +.hero { + background-color: $grayDarker; + background-position: 0 50%; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + border-bottom: 1px solid $white; + color: $white; + font-weight: bold; + margin-top: -2em; + margin-bottom: 1.5em; + padding: 50px 0; + position: relative; + + &::before { + background: url("../images/matrix.png") 0 0 rgba(0, 0, 0, 0.35); + box-shadow: inset 0 0 5px $black; + content: ""; + display: block; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + z-index: 5; + } + + > .grid-wrapper { + position: relative; + z-index: 7; + } + + .credit { + font-size: 0.75em; + font-style: italic; + position: absolute; + bottom: 0; right: 10px; + z-index: 7; + a { + border-bottom: 1px solid; + color: $white; + text-decoration: none; + } + .licence { + border: none; + } + } + + .avatar { + @media only screen and (max-width: $lap-end){ + margin-bottom: 30px; + } + text-align: center; + img { + @include border-radius(100%); + border: 10px solid $primary-color; + } + } + + h1 { + font-size: 3.5em; + line-height: 1em; + text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75); + } + + hr { + @extend .divider; + box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); + } + + p { + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); + small { + color: $grayLighter; + font-size: .65em; + } + } +} \ No newline at end of file diff --git a/sass/oscailte/homepage/_home.scss b/sass/oscailte/homepage/_home.scss new file mode 100644 index 00000000000..2b8228fd74e --- /dev/null +++ b/sass/oscailte/homepage/_home.scss @@ -0,0 +1,44 @@ +.usp { + text-align: center; + + @media only screen and (min-width: $lap-start) and (max-width: $lap-end){ + margin-bottom: 25px; + } + + .icon { + i { + @include border-radius(50%); + border: 10px solid $blue; + color: $grayDarker; + display: inline-block; + font-size: 6em; + height: 1.85em; + line-height: normal; + padding: 0.3em; + width: 1.85em; + } + } + + .title { + color: $grayDarker; + font-size: 1.1em; + line-height: 3em; + margin: 0; + text-align: center; + text-transform: capitalize; + + + hr { + margin: 0; + margin-bottom: 1em; + } + } + + hr { + @extend .divider; + margin-bottom: 1em; + } + + p { + text-align: left; + } +} \ No newline at end of file diff --git a/sass/partials/_archive.scss b/sass/partials/_archive.scss new file mode 100644 index 00000000000..9ef1e824492 --- /dev/null +++ b/sass/partials/_archive.scss @@ -0,0 +1,72 @@ +#archive { + #content > div { &, > article { padding-top: 0; } } +} +#blog-archives { + article { + padding: 1em 0 1em; + position: relative; + background: $img-border bottom left repeat-x; + &:last-child { + background: none; + } + footer { padding: 0; margin: 0;} + } + h1 { color: $text-color; margin-bottom: .3em; } + h2 { display: none; } + h1 { + font-size: 1.5em; + a { + @include hover-link; + color: inherit; + &:hover { color: $link-color-hover; } + font-weight: normal; + display: inline-block; + } + } + a.category, time { + @extend .sans; + color: $text-color-light; + } + color: $text-color-light; + .entry-content { display: none; } + time { + font-size: .9em; + line-height: 1.2em; + .month, .day { display: inline-block; } + .month { text-transform: uppercase; } + } + p { margin-bottom: 1em; } + &, .entry-content { a { @include link-colors(inherit, $link-color-hover); }} + a:hover { color: $link-color-hover; } + @media only screen and (min-width: 550px) { + article { margin-left: 5em; } + h2 { + margin-bottom: .3em; + font-weight: normal; + display: inline-block; + position: relative; top: -1px; + float: left; + &:first-child { padding-top: .75em; } + } + time { + position: absolute; + text-align: right; + left: 0em; + top: 1.8em; + } + .year { display: none; } + article { + padding:{left: 4.5em; bottom: .7em;} + } + a.category { + line-height: 1.1em; + } + } +} +#content > .category { + article { + margin-left: 0; + padding-left: 6.8em; + } + .year { display: inline; } +} diff --git a/sass/partials/_blog.scss b/sass/partials/_blog.scss new file mode 100644 index 00000000000..57fe7a8aec1 --- /dev/null +++ b/sass/partials/_blog.scss @@ -0,0 +1,141 @@ +article { + padding-top: 1em; + a { @extend .force-wrap; } + header { + position: relative; + padding-top: 2em; + padding-bottom: 1em; + margin-bottom: 1em; + background: $img-border bottom left repeat-x; + h1 { + margin: 0; + a { text-decoration: none; + &:hover { text-decoration: underline; } } + } + p { + font-size: .9em; + color: $text-color-light; + margin: 0; + &.meta { + @extend .sans; + text-transform: uppercase; + position: absolute; top: 0; + } + } + @media only screen and (min-width: 768px) { + margin-bottom: 1.5em; + padding-bottom: 1em; + background: $img-border bottom left repeat-x; + } + } + h2 { + padding-top: 0.8em; + background: $img-border top left repeat-x; + } + .entry-content & h2:first-child, header + h2 { padding-top: 0; } + h2:first-child, header + h2 { background: none; } + .feature { + padding-top: .5em; + margin-bottom: 1em; + padding-bottom: 1em; + background: $img-border bottom left repeat-x; + font-size: 2.0em; font-style: italic; + line-height: 1.3em; + } + img, video, .flash-video { + @extend .flex-content; + @extend .basic-alignment; + @include shadow-box; + } + video, .flash-video { margin: 0 auto 1.5em; } + video { display: block; width: 100%; } + .flash-video { + > div { + position: relative; + display: block; + padding-bottom: 56.25%; + padding-top: 1px; + height: 0; + overflow: hidden; + iframe, object, embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + } + > footer { + padding-bottom: 2.5em; + margin-top: 2em; + @extend .sans; + p.meta { + margin-bottom: .8em; + font-size: .85em; + clear: both; + overflow: hidden; + } + .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before { + @extend .separator; + } + } + +} +article + article { + .blog-index & { + background: $img-border top left repeat-x; + } +} +#content .blog-index { + padding: { top: 0; bottom: 0; } + article { padding-top: 2em; } + article header { background: none; padding-bottom: 0; } + article h1 { + font-size: 2.2em; + a { color: inherit; &:hover { color: $link-color-hover; } } + } + a[rel=full-article] { + background: darken($main-bg, 5); + display: inline-block; + padding: .4em .8em; + margin-right: .5em; + text-decoration: none; + color: mix($text-color, $text-color-light); + @extend .serif; + @include transition(background-color .5s); + &:hover { + background: $link-color-hover; + text-shadow: none; + color: $main-bg; + } + } + footer { + @extend .sans; + margin-top: 1em; + } +} + +.separator { + content: "\2022 "; + padding: 0 .4em 0 .2em; + display: inline-block; +} + +#content div.pagination { + text-align: center; + font-size: .95em; + position: relative; + background: $img-border top left repeat-x; + padding: {top: 1.5em; bottom: 1.5em;} + a { + text-decoration: none; + color: $text-color-light; + &.prev { position: absolute; left: 0; } + &.next { position: absolute; right: 0; } + &:hover { color: $link-color-hover; } + &[href*=archive] { + &:before, &:after { content: '\2014'; padding: 0 .3em; } + } + } +} diff --git a/sass/partials/_footer.scss b/sass/partials/_footer.scss new file mode 100644 index 00000000000..37411225120 --- /dev/null +++ b/sass/partials/_footer.scss @@ -0,0 +1,19 @@ +body > footer { + @extend .sans; + font-size: .8em; + color: $footer-color; + text-shadow: lighten($footer-bg, 5) 0 1px; + background-color: $footer-bg; + @include background($footer-bg-front, $footer-bg-back); + border-top: 1px solid $footer-border-top; + position: relative; + padding-top: 1em; + padding-bottom: 1em; + margin-bottom: 3em; + @include border-bottom-radius(.4em); + z-index: 1; + a { + @include link-colors($footer-link-color, $footer-link-color-hover, $visited: $footer-link-color); + } + p:last-child { margin-bottom: 0; } +} diff --git a/sass/partials/_header.scss b/sass/partials/_header.scss new file mode 100644 index 00000000000..e3c6c020c2c --- /dev/null +++ b/sass/partials/_header.scss @@ -0,0 +1,18 @@ +body > header { + background: $header-bg; + h1 { + display: inline-block; + margin: 0; + a, a:visited, a:hover { + color: $title_color; + text-decoration: none; + } + } + h2 { + margin: .2em 0 0; + @extend .sans; + font-size: 1em; + color: $subtitle-color; + font-weight: normal; + } +} diff --git a/sass/partials/_navigation.scss b/sass/partials/_navigation.scss new file mode 100644 index 00000000000..30fa011d18c --- /dev/null +++ b/sass/partials/_navigation.scss @@ -0,0 +1,137 @@ +body > nav { + position: relative; + background-color: $nav-bg; + @include background($nav-bg-front, $nav-bg-back); + border: { + top: 1px solid $nav-border-top; + bottom: 1px solid $nav-border-bottom; } + padding-top: .35em; + padding-bottom: .35em; + form { + @include background-clip(padding-box); + margin: 0; padding: 0; + .search { + padding: .3em .5em 0; + font-size: .85em; + font-family: $sans; + line-height: 1.1em; + width: 95%; + @include border-radius(.5em); + @include background-clip(padding-box); + @include box-shadow(lighten($nav-bg, 2) 0 1px); + background-color: lighten($nav-bg, 15); + border: 1px solid $nav-border; + color: #888; + &:focus { + color: #444; + border-color: #80b1df; + @include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset); + background-color: #fff; + outline: none; + } + } + } + fieldset[role=search]{ float: right; width: 48%; } + fieldset.mobile-nav{ float: left; width: 48%; + select{ width: 100%; font-size: .8em; border: 1px solid #888;} + } + ul { display: none; } + @media only screen and (min-width: 550px) { + font-size: .9em; + ul { + @include horizontal-list(0); + float: left; + display: block; + padding-top: .15em; + } + ul.subscription { + margin-left: .8em; + float: right; + li:last-child a { padding-right: 0; } + } + ul li { + margin: 0; + } + a { + @include link-colors($nav-color, $nav-color-hover, $visited: $nav-color); + font-family: $sans; + text-shadow: lighten($nav-bg, 12) 0 1px; + float: left; + text-decoration: none; + font-size: 1.1em; + padding: .1em 0; + line-height: 1.5em; + } + li + li { + border-left: 1px solid $nav-border-left; + margin-left: .8em; + a { + padding-left: .8em; + border-left: 1px solid $nav-border-right; + } + } + form { + float: right; + text-align: left; + padding-left: .8em; + width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 20px; + .search { + width: 93%; + font-size: .95em; + line-height: 1.2em; + } + } + ul[data-subscription$=email] + form { + width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px; + .search { width: 91%; } + } + fieldset.mobile-nav { display: none; } + fieldset[role=search]{ width: 99%; } + } + @media only screen and (min-width: 992px) { + form { + width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px; + } + ul[data-subscription$=email] + form { + width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px; + } + } +} +.no-placeholder { + body > nav .search { + background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat; + text-indent: 1.3em; + } +} +@mixin mask-subscription-nav($feed: 'rss.png'){ + position: relative; top: 0px; + text-indent: -999999em; + background-color: $nav-border-right; + border: 0; + padding: 0; + &,&:after { @include mask-image($feed); } + &:after { + content: ""; + position: absolute; top: -1px; left: 0; + background-color: lighten($nav-color, 25); + } + &:hover:after { background-color: lighten($nav-color, 20); } +} +.maskImage { + body > nav { + @media only screen and (min-width: 550px) { + ul[data-subscription$=email] + form { + width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px; + } + } + @media only screen and (min-width: 992px) { + ul[data-subscription$=email] + form { + width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px; + } + } + } + ul.subscription { position: relative; top: .2em; li, a { border: 0; padding: 0; }} + a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); } + a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); } +} + diff --git a/sass/partials/_sharing.scss b/sass/partials/_sharing.scss new file mode 100644 index 00000000000..3eecb488e82 --- /dev/null +++ b/sass/partials/_sharing.scss @@ -0,0 +1,8 @@ +.sharing { + p.meta + & { + padding: { top: 1em; left: 0; } + background: $img-border top left repeat-x; + } +} + +#fb-root { display: none; } diff --git a/sass/partials/_sidebar.scss b/sass/partials/_sidebar.scss new file mode 100644 index 00000000000..cd8c1ca2632 --- /dev/null +++ b/sass/partials/_sidebar.scss @@ -0,0 +1,4 @@ +@import "sidebar/base"; +@import "sidebar/googleplus"; +@import "sidebar/pinboard"; +@import "sidebar/delicious"; diff --git a/sass/partials/_syntax.scss b/sass/partials/_syntax.scss new file mode 100644 index 00000000000..416de7fb678 --- /dev/null +++ b/sass/partials/_syntax.scss @@ -0,0 +1,261 @@ +.highlight, html .gist .gist-file .gist-syntax .gist-highlight { + table td.code { width: 100%; } + border: 1px solid $pre-border !important; +} +.highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers { + text-align: right; + font-size: 13px; + line-height: 1.45em; + @if $solarized == light { + background: lighten($base03, 1) $noise-bg !important; + border-right: 1px solid darken($base02, 2) !important; + @include box-shadow(lighten($base03, 2) -1px 0 inset); + text-shadow: lighten($base02, 2) 0 -1px; + } @else { + background: $base02 $noise-bg !important; + border-right: 1px solid darken($base03, 2) !important; + @include box-shadow(lighten($base02, 2) -1px 0 inset); + text-shadow: darken($base02, 10) 0 -1px; + } + span { color: $base01 !important; } + padding: .8em !important; + @include border-radius(0); +} + +figure.code, .gist-file, pre { + @include box-shadow(rgba(#000, .06) 0 0 10px); + .highlight pre { @include box-shadow(none); } +} + +.gist .highlight, figure.code .highlight { + @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); +} +html .gist .gist-file { + margin-bottom: 1.8em; + position: relative; + border: none; + padding-top: image-height("code_bg.png") !important; + .highlight { + margin-bottom: 0; + } + .gist-syntax { + border-bottom: 0 !important; + background: none !important; + .gist-highlight { + background: $base03 !important; + } + .highlight pre { + @extend .pre-code; + padding: 0; + } + } + .gist-meta { + padding: .6em 0.8em; + border: 1px solid lighten($base02, 2) !important; + color: $base01; + font-size: .7em !important; + @if $solarized == light { + background: lighten($base03, 2) $noise-bg; + border: 1px solid $pre-border !important; + border-top: 1px solid lighten($base03, 2) !important; + } @else { + background: $base02 $noise-bg; + } + @extend .sans; + line-height: 1.5em; + a { + color: mix($base1, $base01) !important; + @include hover-link; + &:hover { color: $base1 !important; } + } + a[href*='#file'] { + position: absolute; top: 0; left:0; right:-10px; + color: #474747 !important; + @extend .code-title; + &:hover { color: $link-color !important; } + } + a[href*=raw]{ + @extend .download-source; + top: .4em; + } + } +} +pre { + background: $pre-bg $noise-bg; + @include border-radius(.4em); + @extend .mono; + border: 1px solid $pre-border; + line-height: 1.45em; + font-size: 13px; + margin-bottom: 2.1em; + padding: .8em 1em; + color: $pre-color; + overflow: auto; +} +h3.filename { + @extend .code-title; + + pre { @include border-top-radius(0px); } +} + +p, li { + code { + @extend .mono; + display: inline-block; + white-space: no-wrap; + background: #fff; + font-size: .8em; + line-height: 1.5em; + color: #555; + border: 1px solid #ddd; + @include border-radius(.4em); + padding: 0 .3em; + margin: -1px 0; + } + pre code { font-size: 1em !important; background: none; border: none; } +} + +.pre-code { + font-family: $mono !important; + overflow: scroll; + overflow-y: hidden; + display: block; + padding: .8em; + overflow-x: auto; + line-height: 1.45em; + background: $base03 $noise-bg !important; + color: $base1 !important; + span { color: $base1 !important; } + span { font-style: normal !important; font-weight: normal !important; } + + .c { color: $base01 !important; font-style: italic !important; } /* Comment */ + .cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */ + .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */ + .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */ + .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */ + .err { color: $solar-red !important; background: none !important; } /* Error */ + .k { color: $solar-orange !important; } /* Keyword */ + .o { color: $base1 !important; font-weight: bold !important; } /* Operator */ + .p { color: $base1 !important; } /* Operator */ + .ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */ + .gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */ + .gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */ + .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */ + //.gr { color: #aa0000 } /* Generic.Error */ + .gh { color: $base01 !important; } /* Generic.Heading */ + .gi { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */ + .gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */ + //.go { color: #888888 } /* Generic.Output */ + //.gp { color: #555555 } /* Generic.Prompt */ + .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */ + .gu { color: $solar-violet !important; } /* Generic.Subheading */ + //.gt { color: #aa0000 } /* Generic.Traceback */ + .kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */ + .kd { color: $solar-blue !important; } /* Keyword.Declaration */ + .kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */ + .kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */ + .kt { color: $solar-cyan !important; } /* Keyword.Type */ + .n { color: $solar-blue !important; } + .na { color: $solar-blue !important; } /* Name.Attribute */ + .nb { color: $solar-green !important; } /* Name.Builtin */ + .nc { color: $solar-magenta !important;} /* Name.Class */ + .no { color: $solar-yellow !important; } /* Name.Constant */ + //.ni { color: #800080 } /* Name.Entity */ + .nl { color: $solar-green !important; } + .ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */ + .nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */ + .nn { color: $solar-yellow !important; } /* Name.Namespace */ + .nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */ + .nx { color: $solar-yellow !Important; } + //.bp { color: #999999 } /* Name.Builtin.Pseudo */ + //.vc { color: #008080 } /* Name.Variable.Class */ + .vg { color: $solar-blue !important; } /* Name.Variable.Global */ + .vi { color: $solar-blue !important; } /* Name.Variable.Instance */ + .nv { color: $solar-blue !important; } /* Name.Variable */ + //.w { color: #bbbbbb } /* Text.Whitespace */ + .mf { color: $solar-cyan !important; } /* Literal.Number.Float */ + .m { color: $solar-cyan !important; } /* Literal.Number */ + .mh { color: $solar-cyan !important; } /* Literal.Number.Hex */ + .mi { color: $solar-cyan !important; } /* Literal.Number.Integer */ + //.mo { color: #009999 } /* Literal.Number.Oct */ + .s { color: $solar-cyan !important; } /* Literal.String */ + //.sb { color: #d14 } /* Literal.String.Backtick */ + //.sc { color: #d14 } /* Literal.String.Char */ + .sd { color: $solar-cyan !important; } /* Literal.String.Doc */ + .s2 { color: $solar-cyan !important; } /* Literal.String.Double */ + .se { color: $solar-red !important; } /* Literal.String.Escape */ + //.sh { color: #d14 } /* Literal.String.Heredoc */ + .si { color: $solar-blue !important; } /* Literal.String.Interpol */ + //.sx { color: #d14 } /* Literal.String.Other */ + .sr { color: $solar-cyan !important; } /* Literal.String.Regex */ + .s1 { color: $solar-cyan !important; } /* Literal.String.Single */ + //.ss { color: #990073 } /* Literal.String.Symbol */ + //.il { color: #009999 } /* Literal.Number.Integer.Long */ + div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }} +} + +.highlight, .gist-highlight { + pre { background: none; @include border-radius(0px); border: none; padding: 0; margin-bottom: 0; } + margin-bottom: 1.8em; + background: $base03; + overflow-y: hidden; + overflow-x: auto; +} + +$solar-scroll-bg: rgba(#fff, .15); +$solar-scroll-thumb: rgba(#fff, .2); +@if $solarized == light { + $solar-scroll-bg: rgba(#000, .15); + $solar-scroll-thumb: rgba(#000, .15); +} + +pre, .highlight, .gist-highlight { + &::-webkit-scrollbar { height: .5em; background: $solar-scroll-bg; } + &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px } +} + +.highlight code { + @extend .pre-code; background: #000; +} +figure.code { + background: none; + padding: 0; + border: 0; + margin-bottom: 1.5em; + pre { margin-bottom: 0; } + figcaption { + position: relative; + @extend .code-title; + a { @extend .download-source; } + } + .highlight { + margin-bottom: 0; + } +} + +.code-title { + text-align: center; + font-size: 13px; + line-height: 2em; + text-shadow: #cbcccc 0 1px 0; + color: #474747; + font-weight: normal; + margin-bottom: 0; + @include border-top-radius(5px); + font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; + background: #aaaaaa image-url("code_bg.png") top repeat-x; + border: 1px solid #565656; + border-top-color: #cbcbcb; + border-left-color: #a5a5a5; + border-right-color: #a5a5a5; + border-bottom: 0; +} + +.download-source { + position: absolute; right: .8em; + @include hover-link; + color: #666 !important; + z-index: 1; + font-size: 13px; + text-shadow: #cbcccc 0 1px 0; + padding-left: 3em; +} diff --git a/sass/partials/sidebar/_base.scss b/sass/partials/sidebar/_base.scss new file mode 100644 index 00000000000..5441304e279 --- /dev/null +++ b/sass/partials/sidebar/_base.scss @@ -0,0 +1,106 @@ +.side-shadow-border { + @include box-shadow(lighten($sidebar-bg, 5) 0 1px); +} +aside.sidebar { + overflow: hidden; + color: $sidebar-color; + text-shadow: lighten($sidebar-bg, 8) 0 1px; + a { @extend .force-wrap; } + section { + @extend .sans; + font-size: .8em; + line-height: 1.4em; + margin-bottom: 1.5em; + h1 { + margin: 1.5em 0 0; + padding-bottom: .2em; + border-bottom: 1px solid $sidebar-border; + @extend .side-shadow-border; + + p { + padding-top: .4em; + } + } + } + img { + @extend .flex-content; + @extend .basic-alignment; + @include shadow-box($border: #fff .3em solid); + } + ul { + margin-bottom: 0.5em; + margin-left: 0; + } + li { + list-style: none; + padding: .5em 0; + margin: 0; + border-bottom: 1px solid $sidebar-border; + @extend .side-shadow-border; + p:last-child { + margin-bottom: 0; + } + } + a { + color: inherit; + @include transition(color .5s); + } + &:hover a { + color: $sidebar-link-color; + &:hover { color: $sidebar-link-color-hover; } + } +} +.aside-alt-link { + color: $sidebar-link-color-subdued; + &:hover { + color: $sidebar-link-color-subdued-hover; + } +} + +@media only screen and (min-width: 768px) { + .toggle-sidebar { + outline: none; + position: absolute; right: -10px; top: 0; bottom: 0; + display: inline-block; + text-decoration: none; + color: mix($text-color-light, $sidebar-bg); + width: 9px; + cursor: pointer; + &:hover { + background: mix($sidebar-border, $sidebar-bg); + @include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0))); + } + &:after { + position: absolute; right: -11px; top: 0; + width: 20px; + font-size: 1.2em; + line-height: 1.1em; + padding-bottom: .15em; + @include border-bottom-right-radius(.3em); + text-align: center; + background: $main-bg $noise-bg; + border-bottom: 1px solid $sidebar-border; + border-right: 1px solid $sidebar-border; + content: "\00BB"; + text-indent: -1px; + } + .collapse-sidebar & { + text-indent: 0px; + right: -20px; + width: 19px; + &:hover { + background: mix($sidebar-border, $sidebar-bg); + } + &:after { + border-left: 1px solid $sidebar-border; + text-shadow: #fff 0 1px; + content: "\00AB"; + left: 0px; right: 0; + text-align: center; + text-indent: 0; + border: 0; + border-right-width: 0; + background: none; + } + } + } +} diff --git a/sass/partials/sidebar/_delicious.scss b/sass/partials/sidebar/_delicious.scss new file mode 100644 index 00000000000..e962702e5fa --- /dev/null +++ b/sass/partials/sidebar/_delicious.scss @@ -0,0 +1,4 @@ +.delicious-posts { + a.delicious-link { margin-bottom: .5em; display: block; } + p { font-size: 1em; } +} diff --git a/sass/partials/sidebar/_googleplus.scss b/sass/partials/sidebar/_googleplus.scss new file mode 100644 index 00000000000..c2a693ee7f2 --- /dev/null +++ b/sass/partials/sidebar/_googleplus.scss @@ -0,0 +1,26 @@ +.googleplus { + h1 { + -moz-box-shadow: none !important; + -webkit-box-shadow: none !important; + -o-box-shadow: none !important; + box-shadow: none !important; + border-bottom: 0px none !important; + } + a { + text-decoration: none; + white-space: normal !important; + line-height: 32px; + + img { + float: left; + margin-right: 0.5em; + border: 0 none; + } + } +} + +.googleplus-hidden { + position: absolute; + top: -1000em; + left: -1000em; +} diff --git a/sass/partials/sidebar/_pinboard.scss b/sass/partials/sidebar/_pinboard.scss new file mode 100644 index 00000000000..9f9ab46114d --- /dev/null +++ b/sass/partials/sidebar/_pinboard.scss @@ -0,0 +1,12 @@ +#pinboard_linkroll { + .pin-title, .pin-description { + display: block; + margin-bottom: .5em; + } + .pin-tag { + @include hover-link; + @extend .aside-alt-link; + &:after { content: ','; } + &:last-child:after { content: ''; } + } +} diff --git a/sass/plugins/_plugins.scss b/sass/plugins/_plugins.scss new file mode 100644 index 00000000000..3b4ba0b8a80 --- /dev/null +++ b/sass/plugins/_plugins.scss @@ -0,0 +1,6 @@ +/* + Add plugin stylesheets to this directory and they will be automatically + Imported. Load order is alphabetical and styles can be overriden in + custom/_style.scss which is loaded after all plugin stylesheets. +*/ + diff --git a/sass/screen.scss b/sass/screen.scss new file mode 100644 index 00000000000..9390e0e72de --- /dev/null +++ b/sass/screen.scss @@ -0,0 +1,2 @@ +@import 'oscailte/oscailte'; +@import 'custom/paulus'; diff --git a/source/CNAME b/source/CNAME new file mode 100644 index 00000000000..e237f86884b --- /dev/null +++ b/source/CNAME @@ -0,0 +1 @@ +home-assistant.io diff --git a/source/_includes/after_footer.html b/source/_includes/after_footer.html new file mode 100644 index 00000000000..08b8e3400a8 --- /dev/null +++ b/source/_includes/after_footer.html @@ -0,0 +1,5 @@ +{% include disqus.html %} +{% include facebook_like.html %} +{% include google_plus_one.html %} +{% include twitter_sharing.html %} +{% include custom/after_footer.html %} diff --git a/source/_includes/archive_post.html b/source/_includes/archive_post.html new file mode 100644 index 00000000000..210dbbbe734 --- /dev/null +++ b/source/_includes/archive_post.html @@ -0,0 +1,8 @@ +{% capture category %}{{ post.categories | size }}{% endcapture %} +

    {% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

    + +{% if category != '0' %} + +{% endif %} diff --git a/source/_includes/article.html b/source/_includes/article.html new file mode 100644 index 00000000000..842799773e8 --- /dev/null +++ b/source/_includes/article.html @@ -0,0 +1,29 @@ +{% unless page.no_header %} +
    + {% if index %} +

    {% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

    + {% else %} +

    {% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

    + {% endif %} + {% unless page.meta == false %} +

    + {% include post/date.html %}{{ time }} + {% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %} + | Comments + {% endif %} +

    + {% endunless %} +
    +{% endunless %} +{% if index %} +
    {{ content | excerpt }}
    + {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} + {% if excerpted == 'true' %} + + {% endif %} +{% else %} +
    {{ content }}
    +{% endif %} diff --git a/source/_includes/aside.html b/source/_includes/aside.html new file mode 100644 index 00000000000..94244aa052c --- /dev/null +++ b/source/_includes/aside.html @@ -0,0 +1,15 @@ + diff --git a/source/_includes/asides/delicious.html b/source/_includes/asides/delicious.html new file mode 100644 index 00000000000..b76f2623dd0 --- /dev/null +++ b/source/_includes/asides/delicious.html @@ -0,0 +1,17 @@ +{% if site.delicious_user %} +
    +

    + Delicious + + + + + +

    +
    + + + +
    +
    +{% endif %} \ No newline at end of file diff --git a/source/_includes/asides/github.html b/source/_includes/asides/github.html new file mode 100644 index 00000000000..c5041b25e05 --- /dev/null +++ b/source/_includes/asides/github.html @@ -0,0 +1,19 @@ +{% if site.social.github.user %} +
    +

    + GitHub Repos + {% if site.social.github.show_profile_link or site.github_show_profile_link %} + + + + + + {% endif %} +

    + +
    +{% endif %} diff --git a/source/_includes/asides/googleplus.html b/source/_includes/asides/googleplus.html new file mode 100644 index 00000000000..d24547941fb --- /dev/null +++ b/source/_includes/asides/googleplus.html @@ -0,0 +1,3 @@ +{% comment %} + This section intentionally blank. +{% endcomment %} \ No newline at end of file diff --git a/source/_includes/asides/pinboard.html b/source/_includes/asides/pinboard.html new file mode 100644 index 00000000000..9c789debf02 --- /dev/null +++ b/source/_includes/asides/pinboard.html @@ -0,0 +1,17 @@ +{% if site.pinboard_user %} +
    +

    + My Pinboard + + + + + +

    + +
    +{% endif %} diff --git a/source/_includes/asides/recent_posts.html b/source/_includes/asides/recent_posts.html new file mode 100644 index 00000000000..71aa825d0af --- /dev/null +++ b/source/_includes/asides/recent_posts.html @@ -0,0 +1,10 @@ +
    +

    Recent Posts

    + +
    diff --git a/source/_includes/asides/social.html b/source/_includes/asides/social.html new file mode 100644 index 00000000000..b2834a7af81 --- /dev/null +++ b/source/_includes/asides/social.html @@ -0,0 +1,19 @@ +{% unless site.social.visible == false %} +
    +

    + {% if site.social.title %}{{ site.social.title }}{% else %}Follow me!{% endif %} +

    + +
    +{% endunless %} diff --git a/source/_includes/asides/twitter.html b/source/_includes/asides/twitter.html new file mode 100644 index 00000000000..c4f34ae8c4f --- /dev/null +++ b/source/_includes/asides/twitter.html @@ -0,0 +1,17 @@ +{% if site.social.twitter.user and site.social.twitter.widget.is_shown %} +
    +

    + Latest Tweets + {% if site.social.twitter.widget.show_profile_link %} + + + + + + {% endif %} +

    + + Tweets by @{{ site.social.twitter.user }} + +
    +{% endif %} diff --git a/source/_includes/blog/archive_post.html b/source/_includes/blog/archive_post.html new file mode 100644 index 00000000000..8846fb5f759 --- /dev/null +++ b/source/_includes/blog/archive_post.html @@ -0,0 +1,20 @@ +{% capture category %}{{ post.categories | size }}{% endcapture %} + +
    + +
    + +
    +
    +

    {{post.title}}

    + {% if category != '0' %} +
    + {% include blog/post/tags.html %} +
    + {% endif %} +
    +
    + +
    \ No newline at end of file diff --git a/source/_includes/blog/post/article.html b/source/_includes/blog/post/article.html new file mode 100644 index 00000000000..4aa799ec947 --- /dev/null +++ b/source/_includes/blog/post/article.html @@ -0,0 +1,32 @@ +
    + {% if index %} +

    + {{ post.title }} +

    + {% else %} +

    {{ page.title }}

    + {% endif %} + + {% unless post.meta == false %} +
    + {% include blog/post/date.html %}{{ time }} + {% include blog/post/tags.html %} + {% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %} + + Comments + + {% endif %} +
    + {% endunless %} +
    + +{% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} + +{% if excerpted == 'true' and index %} +
    + {{ content | excerpt }} + {{ site.excerpt_link }} +
    +{% else %} + {{ content }} +{% endif %} \ No newline at end of file diff --git a/source/_includes/blog/post/date.html b/source/_includes/blog/post/date.html new file mode 100644 index 00000000000..cf91e6bad51 --- /dev/null +++ b/source/_includes/blog/post/date.html @@ -0,0 +1,15 @@ +{% capture date %}{{ page.date }}{{ post.date }}{% endcapture %} +{% capture date_formatted %}{{ page.date_formatted }}{{ post.date_formatted }}{% endcapture %} +{% capture has_date %}{{ date | size }}{% endcapture %} + +{% capture updated %}{{ page.updated }}{{ post.updated }}{% endcapture %} +{% capture updated_formatted %}{{ page.updated_formatted }}{{ post.updated_formatted }}{% endcapture %} +{% capture was_updated %}{{ updated | size }}{% endcapture %} + +{% if has_date != '0' %} + {% capture time %}{% endcapture %} +{% endif %} + +{% if was_updated != '0' %} + {% capture updated %}{% endcapture %} +{% else %}{% assign updated = false %}{% endif %} \ No newline at end of file diff --git a/source/_includes/blog/post/disqus_thread.html b/source/_includes/blog/post/disqus_thread.html new file mode 100644 index 00000000000..b1acd8cca8d --- /dev/null +++ b/source/_includes/blog/post/disqus_thread.html @@ -0,0 +1 @@ + diff --git a/source/_includes/blog/post/tags.html b/source/_includes/blog/post/tags.html new file mode 100644 index 00000000000..d1a69de9a71 --- /dev/null +++ b/source/_includes/blog/post/tags.html @@ -0,0 +1,17 @@ +{% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %} +{% unless category == '0' %} +
    + + +
    +{% endunless %} \ No newline at end of file diff --git a/source/_includes/custom/after_footer.html b/source/_includes/custom/after_footer.html new file mode 100644 index 00000000000..5714d201d92 --- /dev/null +++ b/source/_includes/custom/after_footer.html @@ -0,0 +1,24 @@ +{% comment %} + Add content to be output at the bottom of each page. (You might use this for analytics scripts, for example) +{% endcomment %} + diff --git a/source/_includes/custom/asides/about.html b/source/_includes/custom/asides/about.html new file mode 100644 index 00000000000..59d309e4d8b --- /dev/null +++ b/source/_includes/custom/asides/about.html @@ -0,0 +1,4 @@ +
    +

    About Me

    +

    A little something about me.

    +
    diff --git a/source/_includes/custom/category_feed.xml b/source/_includes/custom/category_feed.xml new file mode 100644 index 00000000000..6d7b9f61b37 --- /dev/null +++ b/source/_includes/custom/category_feed.xml @@ -0,0 +1,26 @@ +--- +--- + + + + <![CDATA[{{ page.title }} | {{ site.title }}]]> + + + {{ site.time | date_to_xmlschema }} + {{ site.url }}/ + + + {% if site.email %}{% endif %} + + Octopress + + {% for post in site.categories[page.category] limit: 5 %} + + <![CDATA[{{ post.title | cdata_escape }}]]> + + {{ post.date | date_to_xmlschema }} + {{ site.url }}{{ post.id }} + + + {% endfor %} + diff --git a/source/_includes/custom/footer.html b/source/_includes/custom/footer.html new file mode 100644 index 00000000000..526d2f4c514 --- /dev/null +++ b/source/_includes/custom/footer.html @@ -0,0 +1,4 @@ +

    + All content by {{ site.author }} and licenced under Creative Commons.
    + Code under MIT Licence. Site powered by Octopress +

    \ No newline at end of file diff --git a/source/_includes/custom/grid_item_left.html b/source/_includes/custom/grid_item_left.html new file mode 100644 index 00000000000..166e389a084 --- /dev/null +++ b/source/_includes/custom/grid_item_left.html @@ -0,0 +1,14 @@ +

    Observe

    +
    +

    +Home Assistant will track the state of all the devices in your home, so you don't have to. +

    +

    The following devices are supported:

    + diff --git a/source/_includes/custom/grid_item_middle.html b/source/_includes/custom/grid_item_middle.html new file mode 100644 index 00000000000..4f599cca1a8 --- /dev/null +++ b/source/_includes/custom/grid_item_middle.html @@ -0,0 +1,6 @@ +

    Control

    +
    +

    Control all your devices from a single, mobile-friendly, interface.

    +

    + Home Assistant allows you to control all your devices without storing any of your data in the cloud. We like to keep your privacy private. +

    \ No newline at end of file diff --git a/source/_includes/custom/grid_item_right.html b/source/_includes/custom/grid_item_right.html new file mode 100644 index 00000000000..a765ee97b54 --- /dev/null +++ b/source/_includes/custom/grid_item_right.html @@ -0,0 +1,10 @@ +

    Automate

    +
    +

    Setup advanced rules to control devices and bring your home alive.

    +

    Do you want to have…

    + +

    We've got you covered.

    diff --git a/source/_includes/custom/header.html b/source/_includes/custom/header.html new file mode 100644 index 00000000000..c95bd73bec2 --- /dev/null +++ b/source/_includes/custom/header.html @@ -0,0 +1,11 @@ +
    + + {{ site.title }} + +
    + +
    + +
    diff --git a/source/_includes/custom/navigation.html b/source/_includes/custom/navigation.html new file mode 100644 index 00000000000..08654378117 --- /dev/null +++ b/source/_includes/custom/navigation.html @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/source/_includes/custom/unused_head.html b/source/_includes/custom/unused_head.html new file mode 100644 index 00000000000..b861f922304 --- /dev/null +++ b/source/_includes/custom/unused_head.html @@ -0,0 +1,5 @@ + + + + + diff --git a/source/_includes/custom/welcome.html b/source/_includes/custom/welcome.html new file mode 100644 index 00000000000..1e5b7d70008 --- /dev/null +++ b/source/_includes/custom/welcome.html @@ -0,0 +1,9 @@ +

    Awaken your home

    +
    +

    +Home Assistant is an open-source home automation platform running on Python 3. Track and control all devices at home and automate control. Installation in less then a minute. +

    +

    + Get started + Browse code on GitHub +

    \ No newline at end of file diff --git a/source/_includes/disqus.html b/source/_includes/disqus.html new file mode 100644 index 00000000000..49c6a29cdb7 --- /dev/null +++ b/source/_includes/disqus.html @@ -0,0 +1,21 @@ +{% comment %} Load script if disquss comments are enabled and `page.comments` is either empty (index) or set to true {% endcomment %} +{% if site.disqus_short_name and page.comments != false %} + +{% endif %} diff --git a/source/_includes/facebook_like.html b/source/_includes/facebook_like.html new file mode 100644 index 00000000000..d263e6d2942 --- /dev/null +++ b/source/_includes/facebook_like.html @@ -0,0 +1,10 @@ +{% if site.facebook_like %} +
    + +{% endif %} diff --git a/source/_includes/footer.html b/source/_includes/footer.html new file mode 100644 index 00000000000..3a8c7687474 --- /dev/null +++ b/source/_includes/footer.html @@ -0,0 +1 @@ +{% include custom/footer.html %} diff --git a/source/_includes/google_analytics.html b/source/_includes/google_analytics.html new file mode 100644 index 00000000000..4d4d5969060 --- /dev/null +++ b/source/_includes/google_analytics.html @@ -0,0 +1,13 @@ +{% if site.google_analytics_tracking_id %} + +{% endif %} diff --git a/source/_includes/google_plus_one.html b/source/_includes/google_plus_one.html new file mode 100644 index 00000000000..b69ddaeb49b --- /dev/null +++ b/source/_includes/google_plus_one.html @@ -0,0 +1,9 @@ +{% if site.google_plus_one %} + +{% endif %} diff --git a/source/_includes/header.html b/source/_includes/header.html new file mode 100644 index 00000000000..524de6514b0 --- /dev/null +++ b/source/_includes/header.html @@ -0,0 +1 @@ +{% include custom/header.html %} diff --git a/source/_includes/javascripts/delicious.html b/source/_includes/javascripts/delicious.html new file mode 100644 index 00000000000..34a4d5fec92 --- /dev/null +++ b/source/_includes/javascripts/delicious.html @@ -0,0 +1,16 @@ +{% if site.delicious_user %} + +{% endif %} +{% if site.pinboard_user %} + +{% endif %} \ No newline at end of file diff --git a/source/_includes/javascripts/disqus.html b/source/_includes/javascripts/disqus.html new file mode 100644 index 00000000000..9dc9e55e587 --- /dev/null +++ b/source/_includes/javascripts/disqus.html @@ -0,0 +1,20 @@ +{% if site.disqus_short_name and page.comments != false %} + +{% endif %} \ No newline at end of file diff --git a/source/_includes/javascripts/github.html b/source/_includes/javascripts/github.html new file mode 100644 index 00000000000..63d529d42f9 --- /dev/null +++ b/source/_includes/javascripts/github.html @@ -0,0 +1,21 @@ +{% if site.github_user %} + + +{% endif %} diff --git a/source/_includes/javascripts/google_analytics.html b/source/_includes/javascripts/google_analytics.html new file mode 100644 index 00000000000..f7a420ab26b --- /dev/null +++ b/source/_includes/javascripts/google_analytics.html @@ -0,0 +1,8 @@ +{% if site.google_analytics_tracking_id %} + +{% endif %} diff --git a/source/_includes/javascripts/scripts.html b/source/_includes/javascripts/scripts.html new file mode 100644 index 00000000000..3c82a307581 --- /dev/null +++ b/source/_includes/javascripts/scripts.html @@ -0,0 +1,12 @@ +{% comment %} + + +{% endcomment %} + +{% include javascripts/google_analytics.html %} +{% include javascripts/disqus.html %} + +{% if page.sidebar != false %} +{% include javascripts/github.html %} +{% include javascripts/delicious.html %} +{% endif %} \ No newline at end of file diff --git a/source/_includes/navigation.html b/source/_includes/navigation.html new file mode 100644 index 00000000000..051dd7211ae --- /dev/null +++ b/source/_includes/navigation.html @@ -0,0 +1,19 @@ + +{% comment %} + {% if site.simple_search %} +
    +
    + + +
    +
    + {% endif %} +{% endcomment %} +{% include custom/navigation.html %} diff --git a/source/_includes/post/author.html b/source/_includes/post/author.html new file mode 100644 index 00000000000..83dd6a89a71 --- /dev/null +++ b/source/_includes/post/author.html @@ -0,0 +1,8 @@ +{% if post.author %} + {% assign author = post.author %} +{% elsif page.author %} + {% assign author = page.author %} +{% else %} + {% assign author = site.author %} +{% endif %} +{% if author %}Posted by {{ author }}{% endif %} diff --git a/source/_includes/post/categories.html b/source/_includes/post/categories.html new file mode 100644 index 00000000000..4a98b29d5de --- /dev/null +++ b/source/_includes/post/categories.html @@ -0,0 +1,10 @@ +{% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %} +{% unless category == '0' %} + + {% if post %} + {{ post.categories | category_links }} + {% else %} + {{ page.categories | category_links }} + {% endif %} + +{% endunless %} diff --git a/source/_includes/post/date.html b/source/_includes/post/date.html new file mode 100644 index 00000000000..ecf1ad71cf0 --- /dev/null +++ b/source/_includes/post/date.html @@ -0,0 +1,15 @@ +{% capture date %}{{ page.date }}{{ post.date }}{% endcapture %} +{% capture date_formatted %}{{ page.date_formatted }}{{ post.date_formatted }}{% endcapture %} +{% capture has_date %}{{ date | size }}{% endcapture %} + +{% capture updated %}{{ page.updated }}{{ post.updated }}{% endcapture %} +{% capture updated_formatted %}{{ page.updated_formatted }}{{ post.updated_formatted }}{% endcapture %} +{% capture was_updated %}{{ updated | size }}{% endcapture %} + +{% if has_date != '0' %} + {% capture time %}{% endcapture %} +{% endif %} + +{% if was_updated != '0' %} + {% capture updated %}{% endcapture %} +{% else %}{% assign updated = false %}{% endif %} \ No newline at end of file diff --git a/source/_includes/post/disqus_thread.html b/source/_includes/post/disqus_thread.html new file mode 100644 index 00000000000..b1acd8cca8d --- /dev/null +++ b/source/_includes/post/disqus_thread.html @@ -0,0 +1 @@ + diff --git a/source/_includes/post/sharing.html b/source/_includes/post/sharing.html new file mode 100644 index 00000000000..d639faa1f2f --- /dev/null +++ b/source/_includes/post/sharing.html @@ -0,0 +1,11 @@ +
    + {% if site.twitter_tweet_button %} + Tweet + {% endif %} + {% if site.google_plus_one %} +
    + {% endif %} + {% if site.facebook_like %} +
    + {% endif %} +
    diff --git a/source/_includes/site/footer.html b/source/_includes/site/footer.html new file mode 100644 index 00000000000..bb8a410e896 --- /dev/null +++ b/source/_includes/site/footer.html @@ -0,0 +1,7 @@ +
    +
    +
    + {% include custom/footer.html %} +
    +
    +
    diff --git a/source/_includes/site/head.html b/source/_includes/site/head.html new file mode 100644 index 00000000000..4cb6cb6eee9 --- /dev/null +++ b/source/_includes/site/head.html @@ -0,0 +1,33 @@ + + + + + + + {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %} + {% if page.description %} {% capture fb_description %}{{ page.description }}{% endcapture %} {% else %} {% capture fb_description %}{{ content | raw_content }}{% endcapture %} {% endif %} + + + + {% if page.title %}{{ page.title }} - {% endif %}{{ site.title }} + + {% capture description %}{% if page.description %}{{ page.description }}{% elsif site.description %}{{ site.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %} + + {% if page.keywords %}{% endif %} + + + {% if site.social.facebook.app_id %} + + + + + + + {% if site.social.facebook.user %}{% endif %} + {% if page.facebook.image %}{% endif %} + {% endif %} + + + + + diff --git a/source/_includes/site/header.html b/source/_includes/site/header.html new file mode 100644 index 00000000000..b3aace5b8ca --- /dev/null +++ b/source/_includes/site/header.html @@ -0,0 +1,7 @@ +
    +
    + + {% include custom/header.html %} + +
    +
    \ No newline at end of file diff --git a/source/_includes/site/hero_unit.html b/source/_includes/site/hero_unit.html new file mode 100644 index 00000000000..f51eb9f9bdc --- /dev/null +++ b/source/_includes/site/hero_unit.html @@ -0,0 +1,14 @@ +
    +
    +
    +
    + + Home Assistant screenshot + +
    +
    + {% include custom/welcome.html %} +
    +
    +
    +
    diff --git a/source/_includes/site/navigation.html b/source/_includes/site/navigation.html new file mode 100644 index 00000000000..eeb27f6a96a --- /dev/null +++ b/source/_includes/site/navigation.html @@ -0,0 +1,3 @@ + + +{% include custom/navigation.html %} \ No newline at end of file diff --git a/source/_includes/site/sidebar.html b/source/_includes/site/sidebar.html new file mode 100644 index 00000000000..477c03ab757 --- /dev/null +++ b/source/_includes/site/sidebar.html @@ -0,0 +1,7 @@ +
    + + {% include asides/social.html %} + + {% include_array default_asides %} + +
    diff --git a/source/_includes/twitter_sharing.html b/source/_includes/twitter_sharing.html new file mode 100644 index 00000000000..7cd5fbc2888 --- /dev/null +++ b/source/_includes/twitter_sharing.html @@ -0,0 +1,11 @@ +{% if site.twitter_follow_button or site.twitter_tweet_button %} + +{% endif %} diff --git a/source/_includes/unused_head.html b/source/_includes/unused_head.html new file mode 100644 index 00000000000..98a5897b9e6 --- /dev/null +++ b/source/_includes/unused_head.html @@ -0,0 +1,29 @@ + + + + + + + {% if page.title %}{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %} - {% endif %}{{ site.title }} + + + {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %} + + {% if page.keywords %}{% endif %} + + + + + + + {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %} + + + + + + + + {% include custom/head.html %} + {% include google_analytics.html %} + diff --git a/source/_layouts/category_index.html b/source/_layouts/category_index.html new file mode 100644 index 00000000000..770900ba361 --- /dev/null +++ b/source/_layouts/category_index.html @@ -0,0 +1,17 @@ +--- +layout: page +title: "Blog index" +--- + +
    + {% for post in site.categories[page.category] %} + {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} + {% unless year == this_year %} + {% assign year = this_year %} +

    {{ year }}

    + {% endunless %} +
    + {% include blog/archive_post.html %} +
    + {% endfor %} +
    diff --git a/source/_layouts/default.html b/source/_layouts/default.html new file mode 100644 index 00000000000..5869ebe920b --- /dev/null +++ b/source/_layouts/default.html @@ -0,0 +1,46 @@ +{% capture root_url %}{{ site.root | strip_slash }}{% endcapture %}{% include site/head.html %} + + + +
    + {% include site/header.html %} +
    + + {% if page.hero_unit %} + {% include site/hero_unit.html %} + {% endif %} + +
    +
    + {% if page.is_post and page.sidebar == false %} +
    + {% elsif page.is_homepage %} +
    + {% else %} +
    + {% endif %} + + {{ content | expand_urls: root_url }} + +
    + + {% unless page.sidebar == false %} + + {% endunless %} +
    +
    + +
    + {% include site/footer.html %} +
    + + + + {% include javascripts/scripts.html %} + + + \ No newline at end of file diff --git a/source/_layouts/page.html b/source/_layouts/page.html new file mode 100644 index 00000000000..d05fea2feee --- /dev/null +++ b/source/_layouts/page.html @@ -0,0 +1,18 @@ +--- +layout: default +--- + +
    + + {% if page.title and page.show_title != false %} +
    +

    + {% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %} +

    +
    +
    + {% endif %} + + {{ content }} + +
    diff --git a/source/_layouts/post.html b/source/_layouts/post.html new file mode 100644 index 00000000000..788953843a5 --- /dev/null +++ b/source/_layouts/post.html @@ -0,0 +1,15 @@ +--- +layout: default +is_post: true +--- + +
    + {% include blog/post/article.html %} +
    + +{% if site.disqus_short_name and page.comments == true %} +
    +

    Comments

    +
    {% include blog/post/disqus_thread.html %}
    +
    +{% endif %} \ No newline at end of file diff --git a/source/_posts/2014-12-18-website-launched.markdown b/source/_posts/2014-12-18-website-launched.markdown new file mode 100644 index 00000000000..2baf1bd20c7 --- /dev/null +++ b/source/_posts/2014-12-18-website-launched.markdown @@ -0,0 +1,10 @@ +--- +layout: post +title: "Website launched!" +date: 2014-12-18 23:24:45 -0800 +comments: true +categories: website +author: Paulus +--- + +I finally took the time to setup a simple website to help people getting started with Home Assistant. This will make sure that the README on GitHub can be purely focussed on developers. \ No newline at end of file diff --git a/source/architecture/index.markdown b/source/architecture/index.markdown new file mode 100644 index 00000000000..45a06cebc86 --- /dev/null +++ b/source/architecture/index.markdown @@ -0,0 +1,39 @@ +--- +layout: page +title: "architecture" +date: 2014-12-18 21:49 +sidebar: false +comments: true +sharing: true +footer: true +--- + + + +The core of Home Assistant exists of the following parts. + +The Event Bus facilitates the firing and listening of events. This is the beating heart of Home Assistant. + +The State Machine keeps track of the states of things. Fires a state_changed event when a state has been changed. + +The Service Registry listens on the event bus for call_service events and allows other code to register services. + +The Timer will send every 10 seconds a time_changed event on the event bus. + +Take for example the device_tracker component. This component is responsible for keeping track which devices are home. It checks which devices are home every time a time_changed event is fired on the event bus. It will then update the state machine with the information for each device. + +This setup allows us to create simple yet powerful logic for controlling your home: + + In the event that the state of device 'Paulus Nexus 5' changes to the 'Home' state: + If the sun has set and the lights are not on: + Turn on the lights + + In the event that the combined state of all tracked devices changes to 'Not Home': + If the lights are on: + Turn off the lights + + In the event of the sun setting: + If the lights are off and the combined state of all tracked device equals 'Home': + Turn on the lights + +By using the Bus as a central communication hub between components it is easy to replace components or add functionality. If you would want to change the way devices are detected you only have to write a component that updates the device states in the State Machine. diff --git a/source/assets/jwplayer/glow/controlbar/background.png b/source/assets/jwplayer/glow/controlbar/background.png new file mode 100644 index 00000000000..c2824cc432c Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/background.png differ diff --git a/source/assets/jwplayer/glow/controlbar/blankButton.png b/source/assets/jwplayer/glow/controlbar/blankButton.png new file mode 100644 index 00000000000..010159f3eb7 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/blankButton.png differ diff --git a/source/assets/jwplayer/glow/controlbar/divider.png b/source/assets/jwplayer/glow/controlbar/divider.png new file mode 100644 index 00000000000..77cd829a4b5 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/divider.png differ diff --git a/source/assets/jwplayer/glow/controlbar/fullscreenButton.png b/source/assets/jwplayer/glow/controlbar/fullscreenButton.png new file mode 100644 index 00000000000..e06aa50ca29 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/fullscreenButton.png differ diff --git a/source/assets/jwplayer/glow/controlbar/fullscreenButtonOver.png b/source/assets/jwplayer/glow/controlbar/fullscreenButtonOver.png new file mode 100644 index 00000000000..d2bc4fc75a8 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/fullscreenButtonOver.png differ diff --git a/source/assets/jwplayer/glow/controlbar/muteButton.png b/source/assets/jwplayer/glow/controlbar/muteButton.png new file mode 100644 index 00000000000..40c40ab2734 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/muteButton.png differ diff --git a/source/assets/jwplayer/glow/controlbar/muteButtonOver.png b/source/assets/jwplayer/glow/controlbar/muteButtonOver.png new file mode 100644 index 00000000000..96fe7bb0242 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/muteButtonOver.png differ diff --git a/source/assets/jwplayer/glow/controlbar/normalscreenButton.png b/source/assets/jwplayer/glow/controlbar/normalscreenButton.png new file mode 100644 index 00000000000..22295074029 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/normalscreenButton.png differ diff --git a/source/assets/jwplayer/glow/controlbar/normalscreenButtonOver.png b/source/assets/jwplayer/glow/controlbar/normalscreenButtonOver.png new file mode 100644 index 00000000000..15db44d4e66 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/normalscreenButtonOver.png differ diff --git a/source/assets/jwplayer/glow/controlbar/pauseButton.png b/source/assets/jwplayer/glow/controlbar/pauseButton.png new file mode 100644 index 00000000000..e399bf34cb9 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/pauseButton.png differ diff --git a/source/assets/jwplayer/glow/controlbar/pauseButtonOver.png b/source/assets/jwplayer/glow/controlbar/pauseButtonOver.png new file mode 100644 index 00000000000..409d89d29a3 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/pauseButtonOver.png differ diff --git a/source/assets/jwplayer/glow/controlbar/playButton.png b/source/assets/jwplayer/glow/controlbar/playButton.png new file mode 100644 index 00000000000..f8d9a0079af Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/playButton.png differ diff --git a/source/assets/jwplayer/glow/controlbar/playButtonOver.png b/source/assets/jwplayer/glow/controlbar/playButtonOver.png new file mode 100644 index 00000000000..3fe284845fa Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/playButtonOver.png differ diff --git a/source/assets/jwplayer/glow/controlbar/timeSliderBuffer.png b/source/assets/jwplayer/glow/controlbar/timeSliderBuffer.png new file mode 100644 index 00000000000..73b371abbca Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/timeSliderBuffer.png differ diff --git a/source/assets/jwplayer/glow/controlbar/timeSliderCapLeft.png b/source/assets/jwplayer/glow/controlbar/timeSliderCapLeft.png new file mode 100644 index 00000000000..72322171bd5 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/timeSliderCapLeft.png differ diff --git a/source/assets/jwplayer/glow/controlbar/timeSliderCapRight.png b/source/assets/jwplayer/glow/controlbar/timeSliderCapRight.png new file mode 100644 index 00000000000..626444a66a7 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/timeSliderCapRight.png differ diff --git a/source/assets/jwplayer/glow/controlbar/timeSliderProgress.png b/source/assets/jwplayer/glow/controlbar/timeSliderProgress.png new file mode 100644 index 00000000000..132a8e7dc90 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/timeSliderProgress.png differ diff --git a/source/assets/jwplayer/glow/controlbar/timeSliderRail.png b/source/assets/jwplayer/glow/controlbar/timeSliderRail.png new file mode 100644 index 00000000000..27851dfdf36 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/timeSliderRail.png differ diff --git a/source/assets/jwplayer/glow/controlbar/unmuteButton.png b/source/assets/jwplayer/glow/controlbar/unmuteButton.png new file mode 100644 index 00000000000..3658453cfc1 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/unmuteButton.png differ diff --git a/source/assets/jwplayer/glow/controlbar/unmuteButtonOver.png b/source/assets/jwplayer/glow/controlbar/unmuteButtonOver.png new file mode 100644 index 00000000000..138ebb35ba8 Binary files /dev/null and b/source/assets/jwplayer/glow/controlbar/unmuteButtonOver.png differ diff --git a/source/assets/jwplayer/glow/display/background.png b/source/assets/jwplayer/glow/display/background.png new file mode 100644 index 00000000000..391152f5e2f Binary files /dev/null and b/source/assets/jwplayer/glow/display/background.png differ diff --git a/source/assets/jwplayer/glow/display/bufferIcon.png b/source/assets/jwplayer/glow/display/bufferIcon.png new file mode 100644 index 00000000000..a3819c1ef19 Binary files /dev/null and b/source/assets/jwplayer/glow/display/bufferIcon.png differ diff --git a/source/assets/jwplayer/glow/display/muteIcon.png b/source/assets/jwplayer/glow/display/muteIcon.png new file mode 100644 index 00000000000..e0408bbda5e Binary files /dev/null and b/source/assets/jwplayer/glow/display/muteIcon.png differ diff --git a/source/assets/jwplayer/glow/display/playIcon.png b/source/assets/jwplayer/glow/display/playIcon.png new file mode 100644 index 00000000000..cb384278722 Binary files /dev/null and b/source/assets/jwplayer/glow/display/playIcon.png differ diff --git a/source/assets/jwplayer/glow/dock/button.png b/source/assets/jwplayer/glow/dock/button.png new file mode 100644 index 00000000000..391152f5e2f Binary files /dev/null and b/source/assets/jwplayer/glow/dock/button.png differ diff --git a/source/assets/jwplayer/glow/glow.xml b/source/assets/jwplayer/glow/glow.xml new file mode 100644 index 00000000000..71bdced0100 --- /dev/null +++ b/source/assets/jwplayer/glow/glow.xml @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + +