mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-18 23:06:58 +00:00
Update to site
This commit is contained in:
parent
3345fa5897
commit
b0bdfe2fe9
1
.themes/oscailte
Submodule
1
.themes/oscailte
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit 0844f3dd9e1747f1bd6b7b803c04dc3733c36d78
|
6
Rakefile
6
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
|
||||
|
22
_config.yml
22
_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
|
||||
|
5
sass/_base.scss
Normal file
5
sass/_base.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import "base/utilities";
|
||||
@import "base/solarized";
|
||||
@import "base/theme";
|
||||
@import "base/typography";
|
||||
@import "base/layout";
|
8
sass/_partials.scss
Normal file
8
sass/_partials.scss
Normal file
@ -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";
|
192
sass/base/_layout.scss
Normal file
192
sass/base/_layout.scss
Normal file
@ -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; }
|
||||
}
|
||||
}
|
||||
|
46
sass/base/_solarized.scss
Normal file
46
sass/base/_solarized.scss
Normal file
@ -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;
|
||||
|
||||
|
85
sass/base/_theme.scss
Normal file
85
sass/base/_theme.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
164
sass/base/_typography.scss
Normal file
164
sass/base/_typography.scss
Normal file
@ -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;
|
||||
}
|
||||
|
28
sass/base/_utilities.scss
Normal file
28
sass/base/_utilities.scss
Normal file
@ -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;
|
||||
}
|
||||
|
49
sass/custom/_colors.scss
Normal file
49
sass/custom/_colors.scss
Normal file
@ -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;
|
10
sass/custom/_fonts.scss
Normal file
10
sass/custom/_fonts.scss
Normal file
@ -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;
|
21
sass/custom/_layout.scss
Normal file
21
sass/custom/_layout.scss
Normal file
@ -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;
|
48
sass/custom/_paulus.scss
Normal file
48
sass/custom/_paulus.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
142
sass/custom/_styles.scss
Normal file
142
sass/custom/_styles.scss
Normal file
@ -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;
|
||||
}
|
129
sass/fontawesome/_core.scss
vendored
Normal file
129
sass/fontawesome/_core.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
93
sass/fontawesome/_extras.scss
vendored
Normal file
93
sass/fontawesome/_extras.scss
vendored
Normal file
@ -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; }
|
||||
}
|
||||
}
|
32
sass/fontawesome/_font-awesome.scss
vendored
Normal file
32
sass/fontawesome/_font-awesome.scss
vendored
Normal file
@ -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";
|
381
sass/fontawesome/_icons.scss
vendored
Normal file
381
sass/fontawesome/_icons.scss
vendored
Normal file
@ -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; }
|
48
sass/fontawesome/_mixins.scss
vendored
Normal file
48
sass/fontawesome/_mixins.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
14
sass/fontawesome/_path.scss
vendored
Normal file
14
sass/fontawesome/_path.scss
vendored
Normal file
@ -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;
|
||||
}
|
734
sass/fontawesome/_variables.scss
vendored
Normal file
734
sass/fontawesome/_variables.scss
vendored
Normal file
@ -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";
|
||||
|
26
sass/inuitcss/CHANGELOG.md
Normal file
26
sass/inuitcss/CHANGELOG.md
Normal file
@ -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.
|
42
sass/inuitcss/CONTRIBUTING.md
Normal file
42
sass/inuitcss/CONTRIBUTING.md
Normal file
@ -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.
|
13
sass/inuitcss/LICENSE
Normal file
13
sass/inuitcss/LICENSE
Normal file
@ -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.
|
368
sass/inuitcss/README.md
Normal file
368
sass/inuitcss/README.md
Normal file
@ -0,0 +1,368 @@
|
||||

|
||||
|
||||
# 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!**
|
226
sass/inuitcss/_defaults.scss
Normal file
226
sass/inuitcss/_defaults.scss
Normal file
@ -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;
|
214
sass/inuitcss/_inuit.scss
Normal file
214
sass/inuitcss/_inuit.scss
Normal file
@ -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";
|
64
sass/inuitcss/base/_code.scss
Normal file
64
sass/inuitcss/base/_code.scss
Normal file
@ -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.:
|
||||
*
|
||||
<code></div><span class=code-comment><!-- /wrapper --></span></code>
|
||||
*
|
||||
*/
|
||||
.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.:
|
||||
*
|
||||
<ol class=line-numbers>
|
||||
<li><code>.nav{</code></li>
|
||||
<li><code> list-style:none;</code></li>
|
||||
<li><code> margin-left:0;</code></li>
|
||||
<li><code>}</code></li>
|
||||
<li><code> .nav > li,</code></li>
|
||||
<li><code> .nav > li > a{</code></li>
|
||||
<li><code> display:inline-block;</code></li>
|
||||
<li><code> *display:inline-block;</code></li>
|
||||
<li><code> zoom:1;</code></li>
|
||||
<li><code> }</code></li>
|
||||
</ol>
|
||||
*
|
||||
* 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] */
|
||||
}
|
175
sass/inuitcss/base/_forms.scss
Normal file
175
sass/inuitcss/base/_forms.scss
Normal file
@ -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.:
|
||||
<input type=text class=text-input>
|
||||
<input type=email class=text-input>
|
||||
<input type=password class=text-input>
|
||||
*
|
||||
*/
|
||||
.text-input,
|
||||
textarea{
|
||||
/**
|
||||
* Style these via your theme stylesheet.
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Group sets of form fields in a list, e.g.:
|
||||
*
|
||||
<ul class=form-fields>
|
||||
<li>
|
||||
<label />
|
||||
<input />
|
||||
</li>
|
||||
<li>
|
||||
<label />
|
||||
<select />
|
||||
</li>
|
||||
<li>
|
||||
<label />
|
||||
<input />
|
||||
</li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.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.:
|
||||
*
|
||||
<li>
|
||||
<span class=label>Select an option below:</span>
|
||||
<ul class="multi-list four-cols">
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
label,
|
||||
.label{
|
||||
display:block;
|
||||
}
|
||||
/**
|
||||
* Extra help text in `label`s, e.g.:
|
||||
*
|
||||
<label>Card number <small class=additional>No spaces</small></label>
|
||||
*
|
||||
*/
|
||||
.additional{
|
||||
display:block;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Groups of checkboxes and radios, e.g.:
|
||||
*
|
||||
<li>
|
||||
<ul class=check-list>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
.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.:
|
||||
*
|
||||
<li class=spoken-form>
|
||||
Hello, my <label for=spoken-name>name</label> is
|
||||
<input type=text class=text-input id=spoken-name>. My home
|
||||
<label for=country>country</label> is
|
||||
<select id=country>
|
||||
<option>UK</option>
|
||||
<option>US</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
.spoken-form label{
|
||||
display:inline-block;
|
||||
font:inherit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Extra help text displayed after a field when that field is in focus, e.g.:
|
||||
*
|
||||
<label for=email>Email:</label>
|
||||
<input type=email class=text-input id=email>
|
||||
<small class=extra-help>.edu emails only</small>
|
||||
*
|
||||
* 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;
|
||||
}
|
61
sass/inuitcss/base/_headings.scss
Normal file
61
sass/inuitcss/base/_headings.scss
Normal file
@ -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.:
|
||||
*
|
||||
<hgroup>
|
||||
<h1 class=hN>inuit.css</h1>
|
||||
<h2 class=hN>Best. Framework. Ever!</h2>
|
||||
</hgroup>
|
||||
*
|
||||
*/
|
||||
.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);
|
||||
}
|
74
sass/inuitcss/base/_images.scss
Normal file
74
sass/inuitcss/base/_images.scss
Normal file
@ -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;
|
||||
}
|
20
sass/inuitcss/base/_lists.scss
Normal file
20
sass/inuitcss/base/_lists.scss
Normal file
@ -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;
|
||||
}
|
9
sass/inuitcss/base/_main.scss
Normal file
9
sass/inuitcss/base/_main.scss
Normal file
@ -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%;
|
||||
}
|
12
sass/inuitcss/base/_paragraphs.scss
Normal file
12
sass/inuitcss/base/_paragraphs.scss
Normal file
@ -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);
|
||||
}
|
97
sass/inuitcss/base/_quotes.scss
Normal file
97
sass/inuitcss/base/_quotes.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
<blockquote>
|
||||
<p>Insanity: doing the same thing over and over again and expecting
|
||||
different results.</p>
|
||||
<b class=source>Albert Einstein</b>
|
||||
</blockquote>
|
||||
*
|
||||
*/
|
||||
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";
|
||||
}
|
||||
}
|
14
sass/inuitcss/base/_smallprint.scss
Normal file
14
sass/inuitcss/base/_smallprint.scss
Normal file
@ -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);
|
||||
}
|
164
sass/inuitcss/base/_tables.scss
Normal file
164
sass/inuitcss/base/_tables.scss
Normal file
@ -0,0 +1,164 @@
|
||||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$TABLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* We have a lot at our disposal for making very complex table constructs, e.g.:
|
||||
*
|
||||
<table class="table--bordered table--striped table--data">
|
||||
<colgroup>
|
||||
<col class=t10>
|
||||
<col class=t10>
|
||||
<col class=t10>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan=3>Foo</th>
|
||||
<th>Bar</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Lorem</th>
|
||||
<th>Ipsum</th>
|
||||
<th class=numerical>Dolor</th>
|
||||
<th>Sit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th rowspan=3>Sit</th>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>03.788</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>32.210</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>47.797</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan=2>Sit</th>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>09.640</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>12.117</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
*
|
||||
*/
|
||||
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;
|
||||
}
|
5
sass/inuitcss/component.json
Normal file
5
sass/inuitcss/component.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "inuit.css",
|
||||
"version": "5.0.1",
|
||||
"dependencies": {}
|
||||
}
|
19
sass/inuitcss/generic/_brand.scss
Normal file
19
sass/inuitcss/generic/_brand.scss
Normal file
@ -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;
|
||||
}
|
16
sass/inuitcss/generic/_clearfix.scss
Normal file
16
sass/inuitcss/generic/_clearfix.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
169
sass/inuitcss/generic/_debug.scss
Normal file
169
sass/inuitcss/generic/_debug.scss
Normal file
@ -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 */
|
185
sass/inuitcss/generic/_helper.scss
Normal file
185
sass/inuitcss/generic/_helper.scss
Normal file
@ -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.:
|
||||
*
|
||||
<p class=proceed><a href=#>Read more...</a></p>
|
||||
*
|
||||
*/
|
||||
.proceed{
|
||||
text-align:right!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add a right-angled quote to links that imply movement, e.g.:
|
||||
*
|
||||
<a href=# class=go>Read more</a>
|
||||
*
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
329
sass/inuitcss/generic/_mixins.scss
Normal file
329
sass/inuitcss/generic/_mixins.scss
Normal file
@ -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; }
|
||||
|
||||
}
|
||||
|
||||
}
|
397
sass/inuitcss/generic/_normalize.scss
Normal file
397
sass/inuitcss/generic/_normalize.scss
Normal file
@ -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;
|
||||
}
|
148
sass/inuitcss/generic/_pull.scss
Normal file
148
sass/inuitcss/generic/_pull.scss
Normal file
@ -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
|
148
sass/inuitcss/generic/_push.scss
Normal file
148
sass/inuitcss/generic/_push.scss
Normal file
@ -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
|
81
sass/inuitcss/generic/_reset.scss
Normal file
81
sass/inuitcss/generic/_reset.scss
Normal file
@ -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;
|
||||
}
|
62
sass/inuitcss/generic/_shared.scss
Normal file
62
sass/inuitcss/generic/_shared.scss
Normal file
@ -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;
|
||||
}
|
159
sass/inuitcss/generic/_widths.scss
Normal file
159
sass/inuitcss/generic/_widths.scss
Normal file
@ -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.:
|
||||
*
|
||||
* `<div class="g one-quarter lap-one-half palm-one-whole"> ... </div>`
|
||||
*
|
||||
* 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 */
|
148
sass/inuitcss/objects/_arrows.scss
Normal file
148
sass/inuitcss/objects/_arrows.scss
Normal file
@ -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
|
227
sass/inuitcss/objects/_beautons.scss
Normal file
227
sass/inuitcss/objects/_beautons.scss
Normal file
@ -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
|
45
sass/inuitcss/objects/_block-list.scss
Normal file
45
sass/inuitcss/objects/_block-list.scss
Normal file
@ -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.:
|
||||
*
|
||||
<ul class=block-list>
|
||||
<li>Foo</li>
|
||||
<li>Bar</li>
|
||||
<li>Baz</li>
|
||||
<li><a href=# class=block-list__link>Foo Bar Baz</a></li>
|
||||
</ul>
|
||||
*
|
||||
* 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
|
64
sass/inuitcss/objects/_breadcrumb.scss
Normal file
64
sass/inuitcss/objects/_breadcrumb.scss
Normal file
@ -0,0 +1,64 @@
|
||||
@charset "UTF-8";
|
||||
@if $use-breadcrumb == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$BREADCRUMB
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
|
||||
*
|
||||
<ol class="nav breadcrumb">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>The Board</a></li>
|
||||
<li class=current><a href=#>Directors</a></li>
|
||||
</ol>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/rkAY9
|
||||
*
|
||||
*/
|
||||
.breadcrumb > li + li:before{
|
||||
content:"\00BB" "\00A0";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* For denoting a path-like structure, GitHub style, e.g.:
|
||||
*
|
||||
<ol class="nav breadcrumb--path">
|
||||
<li class=breadcrumb__root><a href=#>inuit.css</a></li>
|
||||
<li><a href=#>inuit.css</a></li>
|
||||
<li><a href=#>partials</a></li>
|
||||
<li class=current><a href=#>objects</a></li>
|
||||
</ol>
|
||||
*
|
||||
*/
|
||||
.breadcrumb--path > li + li:before{
|
||||
content:"\002F" "\00A0";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Assign a delimiter on the fly through a data attribute, e.g.:
|
||||
*
|
||||
<ol class="nav breadcrumb">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li data-breadcrumb="|"><a href=#>About</a></li>
|
||||
<li data-breadcrumb="|"><a href=#>The Board</a></li>
|
||||
<li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
|
||||
</ol>
|
||||
*
|
||||
*/
|
||||
.breadcrumb > li + li[data-breadcrumb]:before{
|
||||
content:attr(data-breadcrumb) "\00A0";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Denote the root of the tree.
|
||||
*/
|
||||
.breadcrumb__root{
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
}//endif
|
23
sass/inuitcss/objects/_columns.scss
Normal file
23
sass/inuitcss/objects/_columns.scss
Normal file
@ -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.:
|
||||
*
|
||||
<p class=text-cols--2>
|
||||
*
|
||||
* 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
|
56
sass/inuitcss/objects/_flexbox.scss
Normal file
56
sass/inuitcss/objects/_flexbox.scss
Normal file
@ -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.:
|
||||
*
|
||||
<header class=flexbox>
|
||||
|
||||
<div class=flexbox__item>
|
||||
<b>Welcome to</b>
|
||||
</div>
|
||||
|
||||
<div class=flexbox__item>
|
||||
<img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
*
|
||||
* We can also combine our grid system classes with `.flexbox__item` classes,
|
||||
* e.g.:
|
||||
*
|
||||
<div class=flexbox>
|
||||
<div class="flexbox__item one-quarter">
|
||||
</div>
|
||||
<div class="flexbox__item three-quarters">
|
||||
</div>
|
||||
</div>
|
||||
*
|
||||
* 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
|
64
sass/inuitcss/objects/_flyout.scss
Normal file
64
sass/inuitcss/objects/_flyout.scss
Normal file
@ -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.
|
||||
*
|
||||
<div class=flyout>
|
||||
Foo
|
||||
<div class=flyout__content>
|
||||
<h1>Lorem</h1>
|
||||
<p>Ipsum</p>
|
||||
</div>
|
||||
</div>
|
||||
*
|
||||
* 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
|
59
sass/inuitcss/objects/_greybox.scss
Normal file
59
sass/inuitcss/objects/_greybox.scss
Normal file
@ -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.:
|
||||
*
|
||||
<div class="island greybox greybox--medium">Header</div>
|
||||
|
||||
<ul class="nav nav--fit nav--block greybox">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
* 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
|
69
sass/inuitcss/objects/_grids.scss
Normal file
69
sass/inuitcss/objects/_grids.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@if $use-grids == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$GRIDS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Fluid and nestable grid system, e.g.:
|
||||
*
|
||||
<div class="grid">
|
||||
|
||||
<div class="grid__item one-third">
|
||||
<p>One third grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item two-thirds">
|
||||
<p>Two thirds grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item one-half">
|
||||
<p>One half grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item one-quarter">
|
||||
<p>One quarter grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item one-quarter">
|
||||
<p>One quarter grid</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
*
|
||||
* 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
|
40
sass/inuitcss/objects/_icon-text.scss
Normal file
40
sass/inuitcss/objects/_icon-text.scss
Normal file
@ -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:
|
||||
*
|
||||
<a href=#>
|
||||
<i class="s s--help"></i> Help & support
|
||||
</a>
|
||||
*
|
||||
* However we will sometimes want a larger, explicity set gap:
|
||||
<a href=# class=icon-text>
|
||||
<i class="icon-text__icon s s--help"></i>Help & support
|
||||
</a>
|
||||
*
|
||||
* 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:
|
||||
*
|
||||
<a href=# class=icon-text--rev>
|
||||
Help & support<i class="icon-text__icon s s--help"></i>
|
||||
</a>
|
||||
*
|
||||
*/
|
||||
.icon-text--rev > .icon-text__icon{
|
||||
margin-left:$half-spacing-unit / 2;
|
||||
}
|
||||
|
||||
}//endif
|
38
sass/inuitcss/objects/_island.scss
Normal file
38
sass/inuitcss/objects/_island.scss
Normal file
@ -0,0 +1,38 @@
|
||||
@if $use-island == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$ISLAND
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
|
||||
* E.g.:
|
||||
*
|
||||
<div class=island>
|
||||
I am boxed off.
|
||||
</div>
|
||||
*
|
||||
* 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
|
32
sass/inuitcss/objects/_link-complex.scss
Normal file
32
sass/inuitcss/objects/_link-complex.scss
Normal file
@ -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.:
|
||||
*
|
||||
<a href=log-in class=link-complex>
|
||||
<i class="s s--user"></i>
|
||||
<span class=link-complex__target>Log in</span>
|
||||
</a>
|
||||
*
|
||||
* 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
|
47
sass/inuitcss/objects/_lozenges.scss
Normal file
47
sass/inuitcss/objects/_lozenges.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@charset "UTF-8";
|
||||
@if $use-lozenges == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$LOZENGES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Create pill- and lozenge-like runs of text, e.g.:
|
||||
*
|
||||
<p>This <span class=pill>here</span> is a pill!</p>
|
||||
*
|
||||
<p>This <span class=loz>here</span> is also a lozenge!</p>
|
||||
*
|
||||
* 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
|
53
sass/inuitcss/objects/_marginalia.scss
Normal file
53
sass/inuitcss/objects/_marginalia.scss
Normal file
@ -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:
|
||||
*
|
||||
<div class="marginalia">
|
||||
<div class="marginalia__body desk-one-fifth"></div>
|
||||
</div>
|
||||
*
|
||||
* 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
|
89
sass/inuitcss/objects/_matrix.scss
Normal file
89
sass/inuitcss/objects/_matrix.scss
Normal file
@ -0,0 +1,89 @@
|
||||
@if $use-matrix == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$MATRIX
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Create a grid of items out of a single list, e.g.:
|
||||
*
|
||||
<ul class="matrix three-cols">
|
||||
<li class=all-cols>Lorem</li>
|
||||
<li>Ipsum <a href=#>dolor</a></li>
|
||||
<li><a href=# class=matrix__link>Sit</a></li>
|
||||
<li>Amet</li>
|
||||
<li class=all-cols>Consectetuer</li>
|
||||
</ul>
|
||||
*
|
||||
* 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.
|
||||
*
|
||||
<ul class="multi-list four-cols">
|
||||
<li>Lorem</li>
|
||||
<li>Ipsum</li>
|
||||
<li>Dolor</li>
|
||||
<li>Sit</li>
|
||||
</ul>
|
||||
*
|
||||
* 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
|
60
sass/inuitcss/objects/_media.scss
Normal file
60
sass/inuitcss/objects/_media.scss
Normal file
@ -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.:
|
||||
*
|
||||
<div class=media>
|
||||
<img src=http://placekitten.com/200/300 alt="" class=media__img>
|
||||
<p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
*
|
||||
* 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
|
155
sass/inuitcss/objects/_nav.scss
Normal file
155
sass/inuitcss/objects/_nav.scss
Normal file
@ -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.:
|
||||
*
|
||||
<ul class=nav>
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
* 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.:
|
||||
*
|
||||
<ul class="nav nav--stacked">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.nav--stacked{
|
||||
|
||||
> li{
|
||||
display:list-item;
|
||||
|
||||
> a{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `.nav--banner` extends `.nav` and centres the list, e.g.:
|
||||
*
|
||||
<ul class="nav nav--banner">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.nav--banner{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
|
||||
*
|
||||
<ul class="nav nav--block">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.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.:
|
||||
*
|
||||
<ul class="nav nav--fit">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
* 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.:
|
||||
*
|
||||
`<ul class="nav nav--keywords>`
|
||||
*
|
||||
*/
|
||||
.nav--keywords{
|
||||
|
||||
> li{
|
||||
|
||||
&:after{
|
||||
content:"\002C" "\00A0";
|
||||
}
|
||||
|
||||
&:last-child:after{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
46
sass/inuitcss/objects/_options.scss
Normal file
46
sass/inuitcss/objects/_options.scss
Normal file
@ -0,0 +1,46 @@
|
||||
@charset "UTF-8";
|
||||
@if $use-options == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$OPTIONS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Link-group nav, used for displaying related options. Extends `.nav--block`
|
||||
* but could also extend `.nav--fit`. Extend with colours and ‘current states’
|
||||
* in your theme stylesheet.
|
||||
*
|
||||
<ul class="nav options">
|
||||
<li><a></a></li>
|
||||
<li><a></a></li>
|
||||
<li><a></a></li>
|
||||
<li><a></a></li>
|
||||
</ul>
|
||||
*
|
||||
* 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
|
50
sass/inuitcss/objects/_pagination.scss
Normal file
50
sass/inuitcss/objects/_pagination.scss
Normal file
@ -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.
|
||||
*
|
||||
<ol class="nav pagination">
|
||||
<li class=pagination__first>First</li>
|
||||
<li class=pagination__prev>Previous</li>
|
||||
<li><a href=/page/1>1</a></li>
|
||||
<li><a href=/page/2>2</a></li>
|
||||
<li class=current><a href=/page/3>3</a></li>
|
||||
<li><a href=/page/4>4</a></li>
|
||||
<li><a href=/page/5>5</a></li>
|
||||
<li class=pagination__next><a href=/page/next>Next</a></li>
|
||||
<li class=pagination__last><a href=/page/last>Last</a></li>
|
||||
</ol>
|
||||
*
|
||||
* 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
|
66
sass/inuitcss/objects/_rules.scss
Normal file
66
sass/inuitcss/objects/_rules.scss
Normal file
@ -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.:
|
||||
*
|
||||
<hr class="rule rule--ornament" data-ornament="!">
|
||||
*
|
||||
*/
|
||||
&[data-ornament]:after{
|
||||
content:attr(data-ornament);
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
40
sass/inuitcss/objects/_split.scss
Normal file
40
sass/inuitcss/objects/_split.scss
Normal file
@ -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.:
|
||||
*
|
||||
<dl class=split>
|
||||
<dt class=split__title>Burger and fries</dt>
|
||||
<dd>£5.99</dd>
|
||||
<dt class=split__title>Fillet steak</dt>
|
||||
<dd>£19.99</dd>
|
||||
<dt class=split__title>Ice cream</dt>
|
||||
<dd>£2.99</dd>
|
||||
</dl>
|
||||
*
|
||||
<ol class="split results">
|
||||
<li class=first><b class=split__title>1st place</b> Bob</li>
|
||||
<li class=second><b class=split__title>2nd place</b> Lilly</li>
|
||||
<li class=third><b class=split__title>3rd place</b> Ted</li>
|
||||
</ol>
|
||||
*
|
||||
* 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
|
99
sass/inuitcss/objects/_sprite.scss
Normal file
99
sass/inuitcss/objects/_sprite.scss
Normal file
@ -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.:
|
||||
*
|
||||
<a class="sprite sprite--question-mark">More info…</a>
|
||||
*
|
||||
* or
|
||||
*
|
||||
<a href=#><i class="sprite sprite--question-mark"></i> Help and FAQ</a>
|
||||
*
|
||||
* 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.:
|
||||
*
|
||||
<a href=#><i class=icon data-icon=""></i> View your favourites</a>
|
||||
*
|
||||
* 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
|
53
sass/inuitcss/objects/_stats.scss
Normal file
53
sass/inuitcss/objects/_stats.scss
Normal file
@ -0,0 +1,53 @@
|
||||
@charset "UTF-8";
|
||||
@if $use-stats == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$STATS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple object to display key–value statistic-like information, e.g.:
|
||||
*
|
||||
<div class=stat-group>
|
||||
<dl class=stat>
|
||||
<dt class=stat__title>Tweets</dt>
|
||||
<dd class=stat__value>27,740</dd>
|
||||
</dl>
|
||||
|
||||
<dl class=stat>
|
||||
<dt class=stat__title>Following</dt>
|
||||
<dd class=stat__value>11,529</dd>
|
||||
</dl>
|
||||
|
||||
<dl class=stat>
|
||||
<dt class=stat__title>Followers</dt>
|
||||
<dd class=stat__value>12,105</dd>
|
||||
</dl>
|
||||
</div>
|
||||
*
|
||||
* 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
|
38
sass/inuitcss/objects/_this-or-this.scss
Normal file
38
sass/inuitcss/objects/_this-or-this.scss
Normal file
@ -0,0 +1,38 @@
|
||||
@if $use-this-or-this == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$THIS-OR-THIS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple options object to provide multiple choices, e.g.:
|
||||
*
|
||||
<h1 class=this-or-this>
|
||||
<a href=# class="this-or-this__this two-fifths">
|
||||
Free
|
||||
</a>
|
||||
<span class="this-or-this__or one-fifth">
|
||||
or
|
||||
</span>
|
||||
<a href=# class="this-or-this__this two-fifths">
|
||||
Pro
|
||||
</a>
|
||||
</h1>
|
||||
*
|
||||
* 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
|
57
sass/oscailte/_mixins.scss
Normal file
57
sass/oscailte/_mixins.scss
Normal file
@ -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
|
||||
}
|
28
sass/oscailte/_oscailte.scss
Normal file
28
sass/oscailte/_oscailte.scss
Normal file
@ -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/**/*"
|
64
sass/oscailte/_variables.scss
Normal file
64
sass/oscailte/_variables.scss
Normal file
@ -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;
|
8
sass/oscailte/aside/_github.scss
Normal file
8
sass/oscailte/aside/_github.scss
Normal file
@ -0,0 +1,8 @@
|
||||
#github-repos {
|
||||
li {
|
||||
p {
|
||||
font-size: 0.6em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
16
sass/oscailte/aside/_pinboard.scss
Normal file
16
sass/oscailte/aside/_pinboard.scss
Normal file
@ -0,0 +1,16 @@
|
||||
#pinboard {
|
||||
.pin-item > p {
|
||||
margin-bottom: 0;
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&::after {
|
||||
content: ",";
|
||||
}
|
||||
&:last-child::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
0
sass/oscailte/aside/_recent_posts.scss
Normal file
0
sass/oscailte/aside/_recent_posts.scss
Normal file
76
sass/oscailte/aside/_social.scss
Normal file
76
sass/oscailte/aside/_social.scss
Normal file
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
7
sass/oscailte/base/_archive_list.scss
Normal file
7
sass/oscailte/base/_archive_list.scss
Normal file
@ -0,0 +1,7 @@
|
||||
#archive-list {
|
||||
article {
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
21
sass/oscailte/base/_footer.scss
Normal file
21
sass/oscailte/base/_footer.scss
Normal file
@ -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;
|
||||
}
|
57
sass/oscailte/base/_global.scss
Normal file
57
sass/oscailte/base/_global.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
12
sass/oscailte/base/_grid.scss
Normal file
12
sass/oscailte/base/_grid.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
12
sass/oscailte/base/_header.scss
Normal file
12
sass/oscailte/base/_header.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
106
sass/oscailte/base/_navigation.scss
Normal file
106
sass/oscailte/base/_navigation.scss
Normal file
@ -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%;
|
||||
}
|
||||
}
|
111
sass/oscailte/base/_post.scss
Normal file
111
sass/oscailte/base/_post.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
46
sass/oscailte/base/_sidebar.scss
Normal file
46
sass/oscailte/base/_sidebar.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
333
sass/oscailte/base/_solarized.scss
Normal file
333
sass/oscailte/base/_solarized.scss
Normal file
@ -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;
|
||||
}
|
6
sass/oscailte/custom/_README.scss
Normal file
6
sass/oscailte/custom/_README.scss
Normal file
@ -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
|
60
sass/oscailte/helpers/_classes.scss
Normal file
60
sass/oscailte/helpers/_classes.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
76
sass/oscailte/helpers/_grid-fix.scss
Normal file
76
sass/oscailte/helpers/_grid-fix.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
76
sass/oscailte/homepage/_hero_unit.scss
Normal file
76
sass/oscailte/homepage/_hero_unit.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
44
sass/oscailte/homepage/_home.scss
Normal file
44
sass/oscailte/homepage/_home.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
72
sass/partials/_archive.scss
Normal file
72
sass/partials/_archive.scss
Normal file
@ -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; }
|
||||
}
|
141
sass/partials/_blog.scss
Normal file
141
sass/partials/_blog.scss
Normal file
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
19
sass/partials/_footer.scss
Normal file
19
sass/partials/_footer.scss
Normal file
@ -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; }
|
||||
}
|
18
sass/partials/_header.scss
Normal file
18
sass/partials/_header.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
137
sass/partials/_navigation.scss
Normal file
137
sass/partials/_navigation.scss
Normal file
@ -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'); }
|
||||
}
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user