23 |
24 |
25 |
26 | {% include header.html %}
27 |
28 |
29 |
30 | {{page.title}}
31 | {{ content }}
32 |
33 |
34 |
35 | {% include footer.html %}
36 |
37 | {% include scripts.html %}
38 |
39 |
--------------------------------------------------------------------------------
/_sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Font-face mixin
2 | @mixin font-face($name, $path, $weight: normal, $style: normal){
3 |
4 | @font-face {
5 | font-family: $name;
6 | src: url('#{$path}.eot');
7 | src: url('#{$path}.eot?#iefix') format('embedded-opentype'),
8 | url('#{$path}.woff') format('woff'),
9 | url('#{$path}.ttf') format('truetype'),
10 | url('#{$path}.svg#BariolRegularRegular') format('svg');
11 | font-weight: $weight;
12 | font-style: $style;
13 | }
14 |
15 | }
16 |
17 | // Keyframes mixin
18 | @mixin keyframes($animation-name) {
19 | @-webkit-keyframes $animation-name {
20 | @content;
21 | }
22 |
23 | @-moz-keyframes $animation-name {
24 | @content;
25 | }
26 |
27 | @-ms-keyframes $animation-name {
28 | @content;
29 | }
30 |
31 | @-o-keyframes $animation-name {
32 | @content;
33 | }
34 |
35 | @keyframes $animation-name {
36 | @content;
37 | }
38 | }
39 |
40 | // IE7 hack
41 | @mixin ie7 {
42 | * + html & {
43 | @content;
44 | }
45 | }
46 |
47 | // IE styles using Paul Irish's conditional comments
48 | @mixin ie7 {
49 | html.ie7 & {
50 | @content;
51 | }
52 | }
53 |
54 | @mixin ie8 {
55 | html.ie8 & {
56 | @content;
57 | }
58 | }
59 |
60 | @mixin ie9 {
61 | html.ie9 & {
62 | @content;
63 | }
64 | }
65 |
66 | // Retina (based on https://gist.github.com/3446599)
67 | @mixin retina {
68 | @media only screen and (-Webkit-min-device-pixel-ratio: 1.3),
69 | only screen and (-moz-min-device-pixel-ratio: 1.3),
70 | only screen and (-o-min-device-pixel-ratio: 13/10),
71 | only screen and (min-resolution: 1.3dppx) {
72 | @content;
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/_sass/_reset.scss:
--------------------------------------------------------------------------------
1 | html, body, div, span, object, iframe,
2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 | abbr, address, cite, code,
4 | del, dfn, em, img, ins, kbd, q, samp,
5 | small, strong, sub, sup, var,
6 | b, i,
7 | dl, dt, dd, ol, ul, li,
8 | fieldset, form, label, legend,
9 | table, caption, tbody, tfoot, thead, tr, th, td,
10 | article, aside, canvas, details, figcaption, figure,
11 | footer, header, hgroup, menu, nav, section, summary,
12 | time, mark, audio, video {
13 | margin:0;
14 | padding:0;
15 | border:0;
16 | outline:0;
17 | vertical-align:baseline;
18 | background:transparent;
19 | }
20 |
21 | html,body {
22 | font-size: 100%;
23 | }
24 |
25 | // Corrects block display not defined in IE8/9 & FF3
26 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
27 | display: block;
28 | }
29 |
30 | // Corrects inline-block display not defined in IE8/9 & FF3
31 | audio, canvas, video {
32 | display: inline-block;
33 | }
34 |
35 | // Prevents modern browsers from displaying 'audio' without controls
36 | audio:not([controls]) {
37 | display: none;
38 | }
39 |
40 | // Addresses styling for 'hidden' attribute not present in IE8/9, FF3, S4
41 | [hidden] {
42 | display: none;
43 | }
44 |
45 | // Prevents iOS text size adjust after orientation change, without disabling user zoom
46 | // www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
47 | html {
48 | font-size: 100%;
49 | -webkit-text-size-adjust: 100%;
50 | -ms-text-size-adjust: 100%;
51 | }
52 |
53 | // Addresses font-family inconsistency between 'textarea' and other form elements.
54 | html, button, input, select, textarea {
55 | font-family: sans-serif;
56 | }
57 |
58 | a {
59 | // Addresses outline displayed oddly in Chrome
60 | &:focus {
61 | outline: thin dotted;
62 | // Webkit
63 | outline: 5px auto -webkit-focus-ring-color;
64 | outline-offset: -2px;
65 | }
66 |
67 | // Improves readability when focused and also mouse hovered in all browsers
68 | // people.opera.com/patrickl/experiments/keyboard/test
69 | &:hover, &:active {
70 | outline: 0;
71 | }
72 | }
73 |
74 | // Addresses styling not present in IE8/9, S5, Chrome
75 | abbr[title] {
76 | border-bottom: 1px dotted;
77 | }
78 |
79 | // Addresses style set to 'bolder' in FF3+, S4/5, Chrome
80 | b, strong {
81 | font-weight: bold;
82 | }
83 |
84 | blockquote {
85 | margin: 1em 40px;
86 | }
87 |
88 | // Addresses styling not present in S5, Chrome
89 | dfn {
90 | font-style: italic;
91 | }
92 |
93 | // Addresses styling not present in IE8/9
94 | mark {
95 | background: #ff0;
96 | color: #000;
97 | }
98 |
99 | // Corrects font family set oddly in S4/5, Chrome
100 | // en.wikipedia.org/wiki/User:Davidgothberg/Test59
101 | pre, code, kbd, samp {
102 | font-family: monospace, serif;
103 | _font-family: 'courier new', monospace;
104 | font-size: 1em;
105 | }
106 |
107 | // Improves readability of pre-formatted text in all browsers
108 | pre {
109 | white-space: pre;
110 | white-space: pre-wrap;
111 | word-wrap: break-word;
112 | }
113 |
114 | // Addresses quote property not supported in S4
115 | blockquote, q {
116 | quotes: none;
117 | &:before, &:after {
118 | content: '';
119 | content: none;
120 | }
121 | }
122 |
123 | small {
124 | font-size: 75%;
125 | }
126 |
127 | sub, sup {
128 | font-size: 75%;
129 | line-height: 0;
130 | position: relative;
131 | vertical-align: baseline;
132 | }
133 |
134 | sup {
135 | top: -0.5em;
136 | }
137 |
138 | sub {
139 | bottom: -0.25em;
140 | }
141 |
142 | nav {
143 | ul, ol {
144 | list-style: none;
145 | list-style-image: none;
146 | }
147 | }
148 |
149 | // Removes border when inside 'a' element in IE8/9, FF3
150 | img {
151 | border: 0;
152 | height: auto;
153 | max-width: 100%;
154 | -ms-interpolation-mode: bicubic;
155 | }
156 |
157 | // Corrects overflow displayed oddly in IE9
158 | svg:not(:root) {
159 | overflow: hidden;
160 | }
161 |
162 | // Define consistent border, margin, and padding
163 | fieldset {
164 | border: 1px solid #c0c0c0;
165 | margin: 0 2px;
166 | padding: 0.35em 0.625em 0.75em;
167 | }
168 |
169 | legend {
170 | border: 0; // Corrects color not being inherited in IE8/9
171 | padding: 0;
172 | white-space: normal; // Corrects text not wrapping in FF3
173 | }
174 |
175 | button, input, select, textarea {
176 | font-size: 100%; // Corrects font size not being inherited in all browsers
177 | margin: 0; // Addresses margins set differently in FF3+, S5, Chrome
178 | vertical-align: baseline; // Improves appearance and consistency in all browsers
179 | }
180 |
181 | // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
182 | button, input {
183 | line-height: normal;
184 | }
185 |
186 | button, input[type="button"], input[type="reset"], input[type="submit"] {
187 | cursor: pointer; // Improves usability and consistency of cursor style between image-type 'input' and others
188 | -webkit-appearance: button; // Corrects inability to style clickable 'input' types in iOS
189 | }
190 |
191 | // Re-set default cursor for disabled elements
192 | button[disabled], input[disabled] {
193 | cursor: default;
194 | }
195 |
196 | input[type="checkbox"], input[type="radio"] {
197 | box-sizing: border-box; // Addresses box sizing set to content-box in IE8/9
198 | padding: 0; //Removes excess padding in IE8/9
199 | }
200 |
201 | input[type="search"] {
202 | -webkit-appearance: textfield; // Addresses appearance set to searchfield in S5, Chrome
203 | -moz-box-sizing: content-box;
204 | -webkit-box-sizing: content-box; // Addresses box-sizing set to border-box in S5, Chrome (-moz to future-proof)
205 | box-sizing: content-box;
206 | }
207 |
208 | // Removes inner padding and search cancel button in S5, Chrome on OS X
209 | input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
210 | -webkit-appearance: none;
211 | }
212 |
213 | // Removes inner padding and border in FF3+
214 | // www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
215 | button::-moz-focus-inner, input::-moz-focus-inner {
216 | border: 0;
217 | padding: 0;
218 | }
219 |
220 | textarea {
221 | overflow: auto; // Removes default vertical scrollbar in IE8/9
222 | vertical-align: top; // Improves readability and alignment in all browsers
223 | }
224 |
225 | // Remove most spacing between table cells
226 | table {
227 | border-collapse: collapse;
228 | border-spacing: 0;
229 | }
230 |
--------------------------------------------------------------------------------
/_sass/bourbon/_bourbon-deprecated-upcoming.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // These mixins/functions will be deprecated in the next MAJOR version release
3 | //************************************************************************//
4 |
--------------------------------------------------------------------------------
/_sass/bourbon/_bourbon.scss:
--------------------------------------------------------------------------------
1 | // Custom Functions
2 | @import "functions/deprecated-webkit-gradient";
3 | @import "functions/flex-grid";
4 | @import "functions/grid-width";
5 | @import "functions/linear-gradient";
6 | @import "functions/modular-scale";
7 | @import "functions/radial-gradient";
8 | @import "functions/render-gradients";
9 | @import "functions/tint-shade";
10 | @import "functions/transition-property-name";
11 |
12 | // CSS3 Mixins
13 | @import "css3/animation";
14 | @import "css3/appearance";
15 | @import "css3/background";
16 | @import "css3/background-image";
17 | @import "css3/background-size";
18 | @import "css3/border-image";
19 | @import "css3/border-radius";
20 | @import "css3/box-shadow";
21 | @import "css3/box-sizing";
22 | @import "css3/columns";
23 | @import "css3/flex-box";
24 | @import "css3/image-rendering";
25 | @import "css3/inline-block";
26 | @import "css3/linear-gradient";
27 | @import "css3/prefixer";
28 | @import "css3/radial-gradient";
29 | @import "css3/transform";
30 | @import "css3/transition";
31 | @import "css3/user-select";
32 |
33 | // Addons & other mixins
34 | @import "addons/button";
35 | @import "addons/clearfix";
36 | @import "addons/font-face";
37 | @import "addons/font-family";
38 | @import "addons/hide-text";
39 | @import "addons/html5-input-types";
40 | @import "addons/position";
41 | @import "addons/timing-functions";
42 | @import "addons/hidpi-media-query";
43 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_button.scss:
--------------------------------------------------------------------------------
1 | @mixin button ($style: simple, $base-color: #4294f0) {
2 |
3 | @if type-of($style) == color {
4 | $base-color: $style;
5 | $style: simple;
6 | }
7 |
8 | // Grayscale button
9 | @if $base-color == grayscale($base-color) {
10 | @if $style == simple {
11 | @include simple($base-color, $grayscale: true);
12 | }
13 |
14 | @else if $style == shiny {
15 | @include shiny($base-color, $grayscale: true);
16 | }
17 |
18 | @else if $style == pill {
19 | @include pill($base-color, $grayscale: true);
20 | }
21 | }
22 |
23 | // Colored button
24 | @else {
25 | @if $style == simple {
26 | @include simple($base-color);
27 | }
28 |
29 | @else if $style == shiny {
30 | @include shiny($base-color);
31 | }
32 |
33 | @else if $style == pill {
34 | @include pill($base-color);
35 | }
36 | }
37 |
38 | &:disabled {
39 | opacity: 0.5;
40 | cursor: not-allowed;
41 | }
42 | }
43 |
44 |
45 | // Simple Button
46 | //************************************************************************//
47 | @mixin simple($base-color, $grayscale: false) {
48 | $color: hsl(0, 0, 100%);
49 | $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
50 | $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
51 | $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
52 | $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
53 |
54 | @if lightness($base-color) > 70% {
55 | $color: hsl(0, 0, 20%);
56 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
57 | }
58 |
59 | @if $grayscale == true {
60 | $border: grayscale($border);
61 | $inset-shadow: grayscale($inset-shadow);
62 | $stop-gradient: grayscale($stop-gradient);
63 | $text-shadow: grayscale($text-shadow);
64 | }
65 |
66 | border: 1px solid $border;
67 | border-radius: 3px;
68 | @include box-shadow (inset 0 1px 0 0 $inset-shadow);
69 | color: $color;
70 | display: inline-block;
71 | font-size: 11px;
72 | font-weight: bold;
73 | @include linear-gradient ($base-color, $stop-gradient);
74 | padding: 7px 18px;
75 | text-decoration: none;
76 | text-shadow: 0 1px 0 $text-shadow;
77 | -webkit-background-clip: padding-box;
78 |
79 | &:hover:not(:disabled) {
80 | $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
81 | $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
82 | $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
83 |
84 | @if $grayscale == true {
85 | $base-color-hover: grayscale($base-color-hover);
86 | $inset-shadow-hover: grayscale($inset-shadow-hover);
87 | $stop-gradient-hover: grayscale($stop-gradient-hover);
88 | }
89 |
90 | @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
91 | cursor: pointer;
92 | @include linear-gradient ($base-color-hover, $stop-gradient-hover);
93 | }
94 |
95 | &:active:not(:disabled) {
96 | $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
97 | $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
98 |
99 | @if $grayscale == true {
100 | $border-active: grayscale($border-active);
101 | $inset-shadow-active: grayscale($inset-shadow-active);
102 | }
103 |
104 | border: 1px solid $border-active;
105 | @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
106 | }
107 | }
108 |
109 |
110 | // Shiny Button
111 | //************************************************************************//
112 | @mixin shiny($base-color, $grayscale: false) {
113 | $color: hsl(0, 0, 100%);
114 | $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
115 | $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
116 | $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
117 | $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
118 | $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
119 | $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
120 | $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
121 |
122 | @if lightness($base-color) > 70% {
123 | $color: hsl(0, 0, 20%);
124 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
125 | }
126 |
127 | @if $grayscale == true {
128 | $border: grayscale($border);
129 | $border-bottom: grayscale($border-bottom);
130 | $fourth-stop: grayscale($fourth-stop);
131 | $inset-shadow: grayscale($inset-shadow);
132 | $second-stop: grayscale($second-stop);
133 | $text-shadow: grayscale($text-shadow);
134 | $third-stop: grayscale($third-stop);
135 | }
136 |
137 | border: 1px solid $border;
138 | border-bottom: 1px solid $border-bottom;
139 | border-radius: 5px;
140 | @include box-shadow(inset 0 1px 0 0 $inset-shadow);
141 | color: $color;
142 | display: inline-block;
143 | font-size: 14px;
144 | font-weight: bold;
145 | @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
146 | padding: 8px 20px;
147 | text-align: center;
148 | text-decoration: none;
149 | text-shadow: 0 -1px 1px $text-shadow;
150 |
151 | &:hover:not(:disabled) {
152 | $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
153 | $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
154 | $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
155 | $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
156 |
157 | @if $grayscale == true {
158 | $first-stop-hover: grayscale($first-stop-hover);
159 | $second-stop-hover: grayscale($second-stop-hover);
160 | $third-stop-hover: grayscale($third-stop-hover);
161 | $fourth-stop-hover: grayscale($fourth-stop-hover);
162 | }
163 |
164 | cursor: pointer;
165 | @include linear-gradient(top, $first-stop-hover 0%,
166 | $second-stop-hover 50%,
167 | $third-stop-hover 50%,
168 | $fourth-stop-hover 100%);
169 | }
170 |
171 | &:active:not(:disabled) {
172 | $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
173 |
174 | @if $grayscale == true {
175 | $inset-shadow-active: grayscale($inset-shadow-active);
176 | }
177 |
178 | @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
179 | }
180 | }
181 |
182 |
183 | // Pill Button
184 | //************************************************************************//
185 | @mixin pill($base-color, $grayscale: false) {
186 | $color: hsl(0, 0, 100%);
187 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
188 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
189 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
190 | $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
191 | $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
192 | $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
193 |
194 | @if lightness($base-color) > 70% {
195 | $color: hsl(0, 0, 20%);
196 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
197 | }
198 |
199 | @if $grayscale == true {
200 | $border-bottom: grayscale($border-bottom);
201 | $border-sides: grayscale($border-sides);
202 | $border-top: grayscale($border-top);
203 | $inset-shadow: grayscale($inset-shadow);
204 | $stop-gradient: grayscale($stop-gradient);
205 | $text-shadow: grayscale($text-shadow);
206 | }
207 |
208 | border: 1px solid $border-top;
209 | border-color: $border-top $border-sides $border-bottom;
210 | border-radius: 16px;
211 | @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
212 | color: $color;
213 | display: inline-block;
214 | font-size: 11px;
215 | font-weight: normal;
216 | line-height: 1;
217 | @include linear-gradient ($base-color, $stop-gradient);
218 | padding: 5px 16px;
219 | text-align: center;
220 | text-decoration: none;
221 | text-shadow: 0 -1px 1px $text-shadow;
222 | -webkit-background-clip: padding-box;
223 |
224 | &:hover:not(:disabled) {
225 | $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
226 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
227 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
228 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
229 | $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
230 | $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
231 | $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
232 |
233 | @if $grayscale == true {
234 | $base-color-hover: grayscale($base-color-hover);
235 | $border-bottom: grayscale($border-bottom);
236 | $border-sides: grayscale($border-sides);
237 | $border-top: grayscale($border-top);
238 | $inset-shadow-hover: grayscale($inset-shadow-hover);
239 | $stop-gradient-hover: grayscale($stop-gradient-hover);
240 | $text-shadow-hover: grayscale($text-shadow-hover);
241 | }
242 |
243 | border: 1px solid $border-top;
244 | border-color: $border-top $border-sides $border-bottom;
245 | @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
246 | cursor: pointer;
247 | @include linear-gradient ($base-color-hover, $stop-gradient-hover);
248 | text-shadow: 0 -1px 1px $text-shadow-hover;
249 | -webkit-background-clip: padding-box;
250 | }
251 |
252 | &:active:not(:disabled) {
253 | $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
254 | $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
255 | $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
256 | $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
257 | $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
258 |
259 | @if $grayscale == true {
260 | $active-color: grayscale($active-color);
261 | $border-active: grayscale($border-active);
262 | $border-bottom-active: grayscale($border-bottom-active);
263 | $inset-shadow-active: grayscale($inset-shadow-active);
264 | $text-shadow-active: grayscale($text-shadow-active);
265 | }
266 |
267 | background: $active-color;
268 | border: 1px solid $border-active;
269 | border-bottom: 1px solid $border-bottom-active;
270 | @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
271 | text-shadow: 0 -1px 1px $text-shadow-active;
272 | }
273 | }
274 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // Micro clearfix provides an easy way to contain floats without adding additional markup
2 | //
3 | // Example usage:
4 | //
5 | // // Contain all floats within .wrapper
6 | // .wrapper {
7 | // @include clearfix;
8 | // .content,
9 | // .sidebar {
10 | // float : left;
11 | // }
12 | // }
13 |
14 | @mixin clearfix {
15 | zoom: 1;
16 |
17 | &:before,
18 | &:after {
19 | content: "";
20 | display: table;
21 | }
22 |
23 | &:after {
24 | clear: both;
25 | }
26 | }
27 |
28 | // Acknowledgements
29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
30 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_font-face.scss:
--------------------------------------------------------------------------------
1 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
2 | @font-face {
3 | font-family: $font-family;
4 | font-weight: $weight;
5 | font-style: $style;
6 |
7 | @if $asset-pipeline == true {
8 | src: font-url('#{$file-path}.eot');
9 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
10 | font-url('#{$file-path}.woff') format('woff'),
11 | font-url('#{$file-path}.ttf') format('truetype'),
12 | font-url('#{$file-path}.svg##{$font-family}') format('svg');
13 | } @else {
14 | src: url('#{$file-path}.eot');
15 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
16 | url('#{$file-path}.woff') format('woff'),
17 | url('#{$file-path}.ttf') format('truetype'),
18 | url('#{$file-path}.svg##{$font-family}') format('svg');
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_font-family.scss:
--------------------------------------------------------------------------------
1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5 | $verdana: Verdana, Geneva, sans-serif;
6 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_hide-text.scss:
--------------------------------------------------------------------------------
1 | @mixin hide-text {
2 | background-color: transparent;
3 | border: 0;
4 | color: transparent;
5 | font: 0/0 a;
6 | text-shadow: none;
7 | }
8 |
9 | // A CSS image replacement method that does not require the use of text-indent.
10 | //
11 | // Examples
12 | //
13 | // .ir {
14 | // @include hide-text;
15 | // }
16 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_hidpi-media-query.scss:
--------------------------------------------------------------------------------
1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2 | @mixin hidpi($ratio: 1.3) {
3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
4 | only screen and (min--moz-device-pixel-ratio: $ratio),
5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
6 | only screen and (min-resolution: #{round($ratio*96)}dpi),
7 | only screen and (min-resolution: #{$ratio}dppx) {
8 | @content;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_html5-input-types.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Generate a variable ($all-text-inputs) with a list of all html5
3 | // input types that have a text-based input, excluding textarea.
4 | // http://diveintohtml5.org/forms.html
5 | //************************************************************************//
6 | $inputs-list: 'input[type="email"]',
7 | 'input[type="number"]',
8 | 'input[type="password"]',
9 | 'input[type="search"]',
10 | 'input[type="tel"]',
11 | 'input[type="text"]',
12 | 'input[type="url"]',
13 |
14 | // Webkit & Gecko may change the display of these in the future
15 | 'input[type="color"]',
16 | 'input[type="date"]',
17 | 'input[type="datetime"]',
18 | 'input[type="datetime-local"]',
19 | 'input[type="month"]',
20 | 'input[type="time"]',
21 | 'input[type="week"]';
22 |
23 | $unquoted-inputs-list: ();
24 |
25 | @each $input-type in $inputs-list {
26 | $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
27 | }
28 |
29 | $all-text-inputs: $unquoted-inputs-list;
30 |
31 | // You must use interpolation on the variable:
32 | // #{$all-text-inputs}
33 | //************************************************************************//
34 | // #{$all-text-inputs}, textarea {
35 | // border: 1px solid red;
36 | // }
37 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_position.scss:
--------------------------------------------------------------------------------
1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) {
2 |
3 | @if type-of($position) == list {
4 | $coordinates: $position;
5 | $position: relative;
6 | }
7 |
8 | $top: nth($coordinates, 1);
9 | $right: nth($coordinates, 2);
10 | $bottom: nth($coordinates, 3);
11 | $left: nth($coordinates, 4);
12 |
13 | position: $position;
14 |
15 | @if $top == auto {
16 | top: $top;
17 | }
18 | @else if not(unitless($top)) {
19 | top: $top;
20 | }
21 |
22 | @if $right == auto {
23 | right: $right;
24 | }
25 | @else if not(unitless($right)) {
26 | right: $right;
27 | }
28 |
29 | @if $bottom == auto {
30 | bottom: $bottom;
31 | }
32 | @else if not(unitless($bottom)) {
33 | bottom: $bottom;
34 | }
35 |
36 | @if $left == auto {
37 | left: $left;
38 | }
39 | @else if not(unitless($left)) {
40 | left: $left;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_prefixer.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3 | //************************************************************************//
4 | @mixin prefixer ($property, $value, $prefixes) {
5 |
6 | @each $prefix in $prefixes {
7 |
8 | @if $prefix == webkit {
9 | -webkit-#{$property}: $value;
10 | }
11 | @else if $prefix == moz {
12 | -moz-#{$property}: $value;
13 | }
14 | @else if $prefix == ms {
15 | -ms-#{$property}: $value;
16 | }
17 | @else if $prefix == o {
18 | -o-#{$property}: $value;
19 | }
20 | @else if $prefix == spec {
21 | #{$property}: $value;
22 | }
23 | @else {
24 | @warn "Unrecognized prefix: #{$prefix}";
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/_sass/bourbon/addons/_timing-functions.scss:
--------------------------------------------------------------------------------
1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3 |
4 | // EASE IN
5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13 |
14 | // EASE OUT
15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
23 |
24 | // EASE IN OUT
25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
33 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_animation.scss:
--------------------------------------------------------------------------------
1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3 |
4 | // Official animation shorthand property.
5 | @mixin animation ($animation-1,
6 | $animation-2: false, $animation-3: false,
7 | $animation-4: false, $animation-5: false,
8 | $animation-6: false, $animation-7: false,
9 | $animation-8: false, $animation-9: false)
10 | {
11 | $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
12 | $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
13 |
14 | @include prefixer(animation, $full);
15 | }
16 |
17 | // Individual Animation Properties
18 | @mixin animation-name ($name-1,
19 | $name-2: false, $name-3: false,
20 | $name-4: false, $name-5: false,
21 | $name-6: false, $name-7: false,
22 | $name-8: false, $name-9: false)
23 | {
24 | $full: compact($name-1, $name-2, $name-3, $name-4,
25 | $name-5, $name-6, $name-7, $name-8, $name-9);
26 |
27 | @include prefixer(animation-name, $full);
28 | }
29 |
30 |
31 | @mixin animation-duration ($time-1: 0,
32 | $time-2: false, $time-3: false,
33 | $time-4: false, $time-5: false,
34 | $time-6: false, $time-7: false,
35 | $time-8: false, $time-9: false)
36 | {
37 | $full: compact($time-1, $time-2, $time-3, $time-4,
38 | $time-5, $time-6, $time-7, $time-8, $time-9);
39 |
40 | @include prefixer(animation-duration, $full);
41 | }
42 |
43 |
44 | @mixin animation-timing-function ($motion-1: ease,
45 | // ease | linear | ease-in | ease-out | ease-in-out
46 | $motion-2: false, $motion-3: false,
47 | $motion-4: false, $motion-5: false,
48 | $motion-6: false, $motion-7: false,
49 | $motion-8: false, $motion-9: false)
50 | {
51 | $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
52 | $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
53 |
54 | @include prefixer(animation-timing-function, $full);
55 | }
56 |
57 |
58 | @mixin animation-iteration-count ($value-1: 1,
59 | // infinite |
60 | $value-2: false, $value-3: false,
61 | $value-4: false, $value-5: false,
62 | $value-6: false, $value-7: false,
63 | $value-8: false, $value-9: false)
64 | {
65 | $full: compact($value-1, $value-2, $value-3, $value-4,
66 | $value-5, $value-6, $value-7, $value-8, $value-9);
67 |
68 | @include prefixer(animation-iteration-count, $full);
69 | }
70 |
71 |
72 | @mixin animation-direction ($direction-1: normal,
73 | // normal | alternate
74 | $direction-2: false, $direction-3: false,
75 | $direction-4: false, $direction-5: false,
76 | $direction-6: false, $direction-7: false,
77 | $direction-8: false, $direction-9: false)
78 | {
79 | $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
80 | $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
81 |
82 | @include prefixer(animation-direction, $full);
83 | }
84 |
85 |
86 | @mixin animation-play-state ($state-1: running,
87 | // running | paused
88 | $state-2: false, $state-3: false,
89 | $state-4: false, $state-5: false,
90 | $state-6: false, $state-7: false,
91 | $state-8: false, $state-9: false)
92 | {
93 | $full: compact($state-1, $state-2, $state-3, $state-4,
94 | $state-5, $state-6, $state-7, $state-8, $state-9);
95 |
96 | @include prefixer(animation-play-state, $full);
97 | }
98 |
99 |
100 | @mixin animation-delay ($time-1: 0,
101 | $time-2: false, $time-3: false,
102 | $time-4: false, $time-5: false,
103 | $time-6: false, $time-7: false,
104 | $time-8: false, $time-9: false)
105 | {
106 | $full: compact($time-1, $time-2, $time-3, $time-4,
107 | $time-5, $time-6, $time-7, $time-8, $time-9);
108 |
109 | @include prefixer(animation-delay, $full);
110 | }
111 |
112 |
113 | @mixin animation-fill-mode ($mode-1: none,
114 | // http://goo.gl/l6ckm
115 | // none | forwards | backwards | both
116 | $mode-2: false, $mode-3: false,
117 | $mode-4: false, $mode-5: false,
118 | $mode-6: false, $mode-7: false,
119 | $mode-8: false, $mode-9: false)
120 | {
121 | $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
122 | $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
123 |
124 | @include prefixer(animation-fill-mode, $full);
125 | }
126 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_appearance.scss:
--------------------------------------------------------------------------------
1 | @mixin appearance ($value) {
2 | @include prefixer(appearance, $value, webkit, moz, ms, o);
3 | }
4 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_background-image.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background-image property for adding multiple background images with
3 | // gradients, or for stringing multiple gradients together.
4 | //************************************************************************//
5 |
6 | @mixin background-image(
7 | $image-1 , $image-2: false,
8 | $image-3: false, $image-4: false,
9 | $image-5: false, $image-6: false,
10 | $image-7: false, $image-8: false,
11 | $image-9: false, $image-10: false
12 | ) {
13 | $images: compact($image-1, $image-2,
14 | $image-3, $image-4,
15 | $image-5, $image-6,
16 | $image-7, $image-8,
17 | $image-9, $image-10);
18 |
19 | background-image: add-prefix($images, webkit);
20 | background-image: add-prefix($images, moz);
21 | background-image: add-prefix($images, ms);
22 | background-image: add-prefix($images, o);
23 | background-image: add-prefix($images);
24 | }
25 |
26 |
27 | @function add-prefix($images, $vendor: false) {
28 | $images-prefixed: ();
29 |
30 | @for $i from 1 through length($images) {
31 | $type: type-of(nth($images, $i)); // Get type of variable - List or String
32 |
33 | // If variable is a list - Gradient
34 | @if $type == list {
35 | $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
36 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
37 |
38 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
39 | $images-prefixed: append($images-prefixed, $gradient, comma);
40 | }
41 |
42 | // If variable is a string - Image
43 | @else if $type == string {
44 | $images-prefixed: join($images-prefixed, nth($images, $i), comma);
45 | }
46 | }
47 | @return $images-prefixed;
48 | }
49 |
50 |
51 |
52 | //Examples:
53 | //@include background-image(linear-gradient(top, orange, red));
54 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
55 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
56 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
57 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
58 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_background-size.scss:
--------------------------------------------------------------------------------
1 | @mixin background-size ($length-1,
2 | $length-2: false, $length-3: false,
3 | $length-4: false, $length-5: false,
4 | $length-6: false, $length-7: false,
5 | $length-8: false, $length-9: false)
6 | {
7 | $full: compact($length-1, $length-2, $length-3, $length-4,
8 | $length-5, $length-6, $length-7, $length-8, $length-9);
9 |
10 | @include prefixer(background-size, $full, webkit, moz, ms, o);
11 | }
12 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_background.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background property for adding multiple backgrounds using shorthand
3 | // notation.
4 | //************************************************************************//
5 |
6 | @mixin background(
7 | $background-1 , $background-2: false,
8 | $background-3: false, $background-4: false,
9 | $background-5: false, $background-6: false,
10 | $background-7: false, $background-8: false,
11 | $background-9: false, $background-10: false,
12 | $fallback: false
13 | ) {
14 | $backgrounds: compact($background-1, $background-2,
15 | $background-3, $background-4,
16 | $background-5, $background-6,
17 | $background-7, $background-8,
18 | $background-9, $background-10);
19 |
20 | $fallback-color: false;
21 | @if (type-of($fallback) == color) or ($fallback == "transparent") {
22 | $fallback-color: $fallback;
23 | }
24 | @else {
25 | $fallback-color: extract-background-color($backgrounds);
26 | }
27 |
28 | @if $fallback-color {
29 | background-color: $fallback-color;
30 | }
31 | background: background-add-prefix($backgrounds, webkit);
32 | background: background-add-prefix($backgrounds, moz);
33 | background: background-add-prefix($backgrounds, ms);
34 | background: background-add-prefix($backgrounds, o);
35 | background: background-add-prefix($backgrounds);
36 | }
37 |
38 | @function extract-background-color($backgrounds) {
39 | $final-bg-layer: nth($backgrounds, length($backgrounds));
40 | @if type-of($final-bg-layer) == list {
41 | @for $i from 1 through length($final-bg-layer) {
42 | $value: nth($final-bg-layer, $i);
43 | @if type-of($value) == color {
44 | @return $value;
45 | }
46 | }
47 | }
48 | @return false;
49 | }
50 |
51 |
52 | @function background-add-prefix($backgrounds, $vendor: false) {
53 | $backgrounds-prefixed: ();
54 |
55 | @for $i from 1 through length($backgrounds) {
56 | $shorthand: nth($backgrounds, $i); // Get member for current index
57 | $type: type-of($shorthand); // Get type of variable - List or String
58 |
59 | // If shorthand is a list
60 | @if $type == list {
61 | $first-member: nth($shorthand, 1); // Get first member of shorthand
62 |
63 | // Linear Gradient
64 | @if index(linear radial, nth($first-member, 1)) {
65 | $gradient-type: nth($first-member, 1); // linear || radial
66 |
67 | // Get actual gradient (red, blue)
68 | $gradient-args: false;
69 | $shorthand-start: false;
70 | // Linear gradient and positioning, repeat, etc. values
71 | @if type-of($first-member) == list {
72 | $gradient-args: nth($first-member, 2);
73 | $shorthand-start: 2;
74 | }
75 | // Linear gradient only
76 | @else {
77 | $gradient-args: nth($shorthand, 2); // Get actual gradient (red, blue)
78 | $shorthand-start: 3;
79 | }
80 |
81 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
82 | @for $j from $shorthand-start through length($shorthand) {
83 | $gradient: join($gradient, nth($shorthand, $j), space);
84 | }
85 | $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
86 | }
87 |
88 | // Image with additional properties
89 | @else {
90 | $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
91 | }
92 |
93 | }
94 |
95 | // If shorthand is a simple string, color or image
96 | @else if $type == string {
97 | $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
98 | }
99 | }
100 | @return $backgrounds-prefixed;
101 | }
102 |
103 | //Examples:
104 | //@include background(linear-gradient(top, orange, red));
105 | //@include background(radial-gradient(50% 50%, cover circle, orange, red));
106 | //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
107 | //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
108 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_border-image.scss:
--------------------------------------------------------------------------------
1 | @mixin border-image($images) {
2 | -webkit-border-image: border-add-prefix($images, webkit);
3 | -moz-border-image: border-add-prefix($images, moz);
4 | -o-border-image: border-add-prefix($images, o);
5 | border-image: border-add-prefix($images);
6 | }
7 |
8 | @function border-add-prefix($images, $vendor: false) {
9 | $border-image: ();
10 | $images-type: type-of(nth($images, 1));
11 | $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
12 |
13 | // If input is a gradient
14 | @if $images-type == string {
15 | @if ($first-var == "linear") or ($first-var == "radial") {
16 | @for $i from 2 through length($images) {
17 | $gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
18 | $gradient-args: nth($images, $i); // Get actual gradient (red, blue)
19 | $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
20 | }
21 | }
22 |
23 | // If input is a URL
24 | @else {
25 | $border-image: $images;
26 | }
27 | }
28 |
29 | // If input is gradient or url + additional args
30 | @else if $images-type == list {
31 | @for $i from 1 through length($images) {
32 | $type: type-of(nth($images, $i)); // Get type of variable - List or String
33 |
34 | // If variable is a list - Gradient
35 | @if $type == list {
36 | $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
37 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
38 | $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
39 | }
40 |
41 | // If variable is a string - Image or number
42 | @else if ($type == string) or ($type == number) {
43 | $border-image: append($border-image, nth($images, $i));
44 | }
45 | }
46 | }
47 | @return $border-image;
48 | }
49 |
50 | //Examples:
51 | // @include border-image(url("image.png"));
52 | // @include border-image(url("image.png") 20 stretch);
53 | // @include border-image(linear-gradient(45deg, orange, yellow));
54 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
55 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
56 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
57 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_border-radius.scss:
--------------------------------------------------------------------------------
1 | @mixin border-radius ($radii) {
2 | @include prefixer(border-radius, $radii, webkit, not moz);
3 | @warn "border-radius mixin is deprecated and will be removed in the next major version release.";
4 | }
5 |
6 | @mixin border-top-left-radius($radii) {
7 | @include prefixer(border-top-left-radius, $radii, webkit, not moz);
8 | @warn "border-top-left-radius mixin is deprecated and will be removed in the next major version release.";
9 | }
10 |
11 | @mixin border-top-right-radius($radii) {
12 | @include prefixer(border-top-right-radius, $radii, webkit, not moz);
13 | @warn "border-top-right-radius mixin is deprecated and will be removed in the next major version release.";
14 | }
15 |
16 | @mixin border-bottom-left-radius($radii) {
17 | @include prefixer(border-bottom-left-radius, $radii, webkit, not moz);
18 | @warn "border-bottom-left-radius mixin is deprecated and will be removed in the next major version release.";
19 | }
20 |
21 | @mixin border-bottom-right-radius($radii) {
22 | @include prefixer(border-bottom-right-radius, $radii, webkit, not moz);
23 | @warn "border-bottom-right-radius mixin is deprecated and will be removed in the next major version release.";
24 | }
25 |
26 | @mixin border-top-radius($radii) {
27 | @include border-top-left-radius($radii);
28 | @include border-top-right-radius($radii);
29 | }
30 |
31 | @mixin border-right-radius($radii) {
32 | @include border-top-right-radius($radii);
33 | @include border-bottom-right-radius($radii);
34 | }
35 |
36 | @mixin border-bottom-radius($radii) {
37 | @include border-bottom-left-radius($radii);
38 | @include border-bottom-right-radius($radii);
39 | }
40 |
41 | @mixin border-left-radius($radii) {
42 | @include border-top-left-radius($radii);
43 | @include border-bottom-left-radius($radii);
44 | }
45 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | // Box-Shadow Mixin Requires Sass v3.1.1+
2 | @mixin box-shadow ($shadow-1,
3 | $shadow-2: false, $shadow-3: false,
4 | $shadow-4: false, $shadow-5: false,
5 | $shadow-6: false, $shadow-7: false,
6 | $shadow-8: false, $shadow-9: false)
7 | {
8 | $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
9 | $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
10 |
11 | @include prefixer(box-shadow, $full, webkit, not moz);
12 | }
13 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_box-sizing.scss:
--------------------------------------------------------------------------------
1 | @mixin box-sizing ($box) {
2 | // content-box | border-box | inherit
3 | @include prefixer(box-sizing, $box);
4 | }
5 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_columns.scss:
--------------------------------------------------------------------------------
1 | @mixin columns($arg: auto) {
2 | // ||
3 | @include prefixer(columns, $arg);
4 | }
5 |
6 | @mixin column-count($int: auto) {
7 | // auto || integer
8 | @include prefixer(column-count, $int);
9 | }
10 |
11 | @mixin column-gap($length: normal) {
12 | // normal || length
13 | @include prefixer(column-gap, $length);
14 | }
15 |
16 | @mixin column-fill($arg: auto) {
17 | // auto || length
18 | @include prefixer(columns-fill, $arg);
19 | }
20 |
21 | @mixin column-rule($arg) {
22 | // || ||
23 | @include prefixer(column-rule, $arg);
24 | }
25 |
26 | @mixin column-rule-color($color) {
27 | @include prefixer(column-rule-color, $color);
28 | }
29 |
30 | @mixin column-rule-style($style: none) {
31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
32 | @include prefixer(column-rule-style, $style);
33 | }
34 |
35 | @mixin column-rule-width ($width: none) {
36 | @include prefixer(column-rule-width, $width);
37 | }
38 |
39 | @mixin column-span($arg: none) {
40 | // none || all
41 | @include prefixer(column-span, $arg);
42 | }
43 |
44 | @mixin column-width($length: auto) {
45 | // auto || length
46 | @include prefixer(column-width, $length);
47 | }
48 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_flex-box.scss:
--------------------------------------------------------------------------------
1 | // CSS3 Flexible Box Model and property defaults
2 |
3 | // Custom shorthand notation for flexbox
4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) {
5 | @include display-box;
6 | @include box-orient($orient);
7 | @include box-pack($pack);
8 | @include box-align($align);
9 | }
10 |
11 | @mixin display-box {
12 | display: -webkit-box;
13 | display: -moz-box;
14 | display: box;
15 | }
16 |
17 | @mixin box-orient($orient: inline-axis) {
18 | // horizontal|vertical|inline-axis|block-axis|inherit
19 | @include prefixer(box-orient, $orient);
20 | }
21 |
22 | @mixin box-pack($pack: start) {
23 | // start|end|center|justify
24 | @include prefixer(box-pack, $pack);
25 | }
26 |
27 | @mixin box-align($align: stretch) {
28 | // start|end|center|baseline|stretch
29 | @include prefixer(box-align, $align);
30 | }
31 |
32 | @mixin box-direction($direction: normal) {
33 | // normal|reverse|inherit
34 | @include prefixer(box-direction, $direction);
35 | }
36 |
37 | @mixin box-lines($lines: single) {
38 | // single|multiple
39 | @include prefixer(box-lines, $lines);
40 | }
41 |
42 | @mixin box-ordinal-group($int: 1) {
43 | @include prefixer(box-ordinal-group, $int);
44 | }
45 |
46 | @mixin box-flex($value: 0.0) {
47 | @include prefixer(box-flex, $value);
48 | }
49 |
50 | @mixin box-flex-group($int: 1) {
51 | @include prefixer(box-flex-group, $int);
52 | }
53 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_font-face.scss:
--------------------------------------------------------------------------------
1 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
2 | @font-face {
3 | font-family: $font-family;
4 | font-weight: $weight;
5 | font-style: $style;
6 |
7 | @if $asset-pipeline == true {
8 | src: font-url('#{$file-path}.eot');
9 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
10 | font-url('#{$file-path}.woff') format('woff'),
11 | font-url('#{$file-path}.ttf') format('truetype'),
12 | font-url('#{$file-path}.svg##{$font-family}') format('svg');
13 | } @else {
14 | src: url('#{$file-path}.eot');
15 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
16 | url('#{$file-path}.woff') format('woff'),
17 | url('#{$file-path}.ttf') format('truetype'),
18 | url('#{$file-path}.svg##{$font-family}') format('svg');
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_hidpi-media-query.scss:
--------------------------------------------------------------------------------
1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2 | @mixin hidpi($ratio: 1.3) {
3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
4 | only screen and (min--moz-device-pixel-ratio: $ratio),
5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
6 | only screen and (min-resolution: #{round($ratio*96)}dpi),
7 | only screen and (min-resolution: #{$ratio}dppx) {
8 | @content;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_image-rendering.scss:
--------------------------------------------------------------------------------
1 | @mixin image-rendering ($mode:optimizeQuality) {
2 |
3 | @if ($mode == optimize-contrast) {
4 | image-rendering: -moz-crisp-edges;
5 | image-rendering: -o-crisp-edges;
6 | image-rendering: -webkit-optimize-contrast;
7 | image-rendering: optimize-contrast;
8 | }
9 |
10 | @else {
11 | image-rendering: $mode;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_inline-block.scss:
--------------------------------------------------------------------------------
1 | // Legacy support for inline-block in IE7 (maybe IE6)
2 | @mixin inline-block {
3 | display: inline-block;
4 | vertical-align: baseline;
5 | zoom: 1;
6 | *display: inline;
7 | *vertical-align: auto;
8 | }
9 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_linear-gradient.scss:
--------------------------------------------------------------------------------
1 | @mixin linear-gradient($pos, $G1, $G2: false,
2 | $G3: false, $G4: false,
3 | $G5: false, $G6: false,
4 | $G7: false, $G8: false,
5 | $G9: false, $G10: false,
6 | $deprecated-pos1: left top,
7 | $deprecated-pos2: left bottom,
8 | $fallback: false) {
9 | // Detect what type of value exists in $pos
10 | $pos-type: type-of(nth($pos, 1));
11 |
12 | // If $pos is missing from mixin, reassign vars and add default position
13 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
14 | $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
15 | $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
16 | $pos: top; // Default position
17 | }
18 |
19 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
20 |
21 | // Set $G1 as the default fallback color
22 | $fallback-color: nth($G1, 1);
23 |
24 | // If $fallback is a color use that color as the fallback color
25 | @if (type-of($fallback) == color) or ($fallback == "transparent") {
26 | $fallback-color: $fallback;
27 | }
28 |
29 | background-color: $fallback-color;
30 | background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
31 | background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
32 | background-image: -moz-linear-gradient($pos, $full);
33 | background-image: -ms-linear-gradient($pos, $full);
34 | background-image: -o-linear-gradient($pos, $full);
35 | background-image: unquote("linear-gradient(#{$pos}, #{$full})");
36 | }
37 |
38 |
39 | // Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
40 | // @include linear-gradient(#1e5799, #2989d8);
41 | // @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
42 | // @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
43 | // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
44 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_perspective.scss:
--------------------------------------------------------------------------------
1 | @mixin perspective($depth: none) {
2 | // none |
3 | @include prefixer(perspective, $depth, webkit moz o spec);
4 | }
5 |
6 | @mixin perspective-origin($value: 50% 50%) {
7 | @include prefixer(perspective-origin, $value, webkit moz o spec);
8 | }
9 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_prefixer.scss:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Default: Webkit, moz, spec
3 | // Example: @include prefixer(border-radius, $radii, $o: true);
4 | //************************************************************************//
5 | @mixin prefixer ($property, $value,
6 | $webkit: true,
7 | $moz: true,
8 | $ms: false,
9 | $o: false,
10 | $spec: true) {
11 | @if $webkit { -webkit-#{$property}: $value; }
12 | @if $moz { -moz-#{$property}: $value; }
13 | @if $ms { -ms-#{$property}: $value; }
14 | @if $o { -o-#{$property}: $value; }
15 | @if $spec { #{$property}: $value; }
16 | }
17 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_radial-gradient.scss:
--------------------------------------------------------------------------------
1 | // Requires Sass 3.1+
2 | @mixin radial-gradient($G1, $G2,
3 | $G3: false, $G4: false,
4 | $G5: false, $G6: false,
5 | $G7: false, $G8: false,
6 | $G9: false, $G10: false,
7 | $pos: 50% 50%,
8 | $shape-size: ellipse cover,
9 | $deprecated-pos1: center center,
10 | $deprecated-pos2: center center,
11 | $deprecated-radius1: 0,
12 | $deprecated-radius2: 460,
13 | $fallback: false) {
14 |
15 | @each $value in $G1, $G2 {
16 | $first-val: nth($value, 1);
17 | $pos-type: type-of($first-val);
18 |
19 | @if ($pos-type != color) or ($first-val != "transparent") {
20 | @if ($pos-type == number)
21 | or ($first-val == "center")
22 | or ($first-val == "top")
23 | or ($first-val == "right")
24 | or ($first-val == "bottom")
25 | or ($first-val == "left") {
26 |
27 | $pos: $value;
28 |
29 | @if $pos == $G1 {
30 | $G1: false;
31 | }
32 | }
33 |
34 | @else if
35 | ($first-val == "ellipse")
36 | or ($first-val == "circle")
37 | or ($first-val == "closest-side")
38 | or ($first-val == "closest-corner")
39 | or ($first-val == "farthest-side")
40 | or ($first-val == "farthest-corner")
41 | or ($first-val == "contain")
42 | or ($first-val == "cover") {
43 |
44 | $shape-size: $value;
45 |
46 | @if $value == $G1 {
47 | $G1: false;
48 | }
49 |
50 | @else if $value == $G2 {
51 | $G2: false;
52 | }
53 | }
54 | }
55 | }
56 |
57 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
58 |
59 | $fallback-color: nth($G1, 1);
60 |
61 | @if (type-of($fallback) == color) or ($fallback == "transparent") {
62 | $fallback-color: $fallback;
63 | }
64 |
65 | background-color: $fallback-color;
66 | background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
67 | background-image: -webkit-radial-gradient($pos, $shape-size, $full);
68 | background-image: -moz-radial-gradient($pos, $shape-size, $full);
69 | background-image: -ms-radial-gradient($pos, $shape-size, $full);
70 | background-image: -o-radial-gradient($pos, $shape-size, $full);
71 | background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
72 | }
73 |
74 | // Usage: Gradient position and shape-size are required. Color stops are optional.
75 | // @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
76 | // @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
77 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_transform.scss:
--------------------------------------------------------------------------------
1 | @mixin transform($property: none) {
2 | // none |
3 | @include prefixer(transform, $property, webkit, moz, ms, o);
4 | }
5 |
6 | @mixin transform-origin($axes: 50%) {
7 | // x-axis - left | center | right | length | %
8 | // y-axis - top | center | bottom | length | %
9 | // z-axis - length
10 | @include prefixer(transform-origin, $axes, webkit, moz, ms, o);
11 | }
12 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_transition.scss:
--------------------------------------------------------------------------------
1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2 | // Example: @include transition (all, 2.0s, ease-in-out);
3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
5 |
6 | @mixin transition ($prop-1: all 0.15s ease-out 0,
7 | $prop-2: false, $prop-3: false,
8 | $prop-4: false, $prop-5: false,
9 | $prop-6: false, $prop-7: false,
10 | $prop-8: false, $prop-9: false)
11 | {
12 | $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
13 | $prop-6, $prop-7, $prop-8, $prop-9);
14 |
15 | @include prefixer(transition, $full, webkit, moz, ms, o);
16 | }
17 |
18 |
19 |
20 | @mixin transition-property ($prop-1: all,
21 | $prop-2: false, $prop-3: false,
22 | $prop-4: false, $prop-5: false,
23 | $prop-6: false, $prop-7: false,
24 | $prop-8: false, $prop-9: false)
25 | {
26 | $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
27 | $prop-6, $prop-7, $prop-8, $prop-9);
28 |
29 | -webkit-transition-property: transition-property-names($full, 'webkit');
30 | -moz-transition-property: transition-property-names($full, 'moz');
31 | -ms-transition-property: transition-property-names($full, 'ms');
32 | -o-transition-property: transition-property-names($full, 'o');
33 | transition-property: transition-property-names($full, false);
34 | }
35 |
36 | @mixin transition-duration ($time-1: 0,
37 | $time-2: false, $time-3: false,
38 | $time-4: false, $time-5: false,
39 | $time-6: false, $time-7: false,
40 | $time-8: false, $time-9: false)
41 | {
42 | $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
43 | $time-6, $time-7, $time-8, $time-9);
44 |
45 | @include prefixer(transition-duration, $full, webkit, moz, ms, o);
46 | }
47 |
48 | @mixin transition-timing-function ($motion-1: ease,
49 | $motion-2: false, $motion-3: false,
50 | $motion-4: false, $motion-5: false,
51 | $motion-6: false, $motion-7: false,
52 | $motion-8: false, $motion-9: false)
53 | {
54 | $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
55 | $motion-6, $motion-7, $motion-8, $motion-9);
56 |
57 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
58 | @include prefixer(transition-timing-function, $full, webkit, moz, ms, o);
59 | }
60 |
61 | @mixin transition-delay ($time-1: 0,
62 | $time-2: false, $time-3: false,
63 | $time-4: false, $time-5: false,
64 | $time-6: false, $time-7: false,
65 | $time-8: false, $time-9: false)
66 | {
67 | $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
68 | $time-6, $time-7, $time-8, $time-9);
69 |
70 | @include prefixer(transition-delay, $full, webkit, moz, ms, o);
71 | }
72 |
73 |
--------------------------------------------------------------------------------
/_sass/bourbon/css3/_user-select.scss:
--------------------------------------------------------------------------------
1 | @mixin user-select($arg: none) {
2 | @include prefixer(user-select, $arg, webkit, moz, ms);
3 | }
4 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_compact.scss:
--------------------------------------------------------------------------------
1 | // Remove `false` values from a list
2 |
3 | @function compact($vars...) {
4 | $list: ();
5 | @each $var in $vars {
6 | @if $var {
7 | $list: append($list, $var, comma);
8 | }
9 | }
10 | @return $list;
11 | }
12 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_deprecated-webkit-gradient.scss:
--------------------------------------------------------------------------------
1 | // Render Deprecated Webkit Gradient - Linear || Radial
2 | //************************************************************************//
3 | @function deprecated-webkit-gradient($type,
4 | $deprecated-pos1, $deprecated-pos2,
5 | $full,
6 | $deprecated-radius1: false, $deprecated-radius2: false) {
7 | $gradient-list: ();
8 | $gradient: false;
9 | $full-length: length($full);
10 | $percentage: false;
11 | $gradient-type: $type;
12 |
13 | @for $i from 1 through $full-length {
14 | $gradient: nth($full, $i);
15 |
16 | @if length($gradient) == 2 {
17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
18 | $gradient-list: join($gradient-list, $color-stop, comma);
19 | }
20 |
21 | @else {
22 | @if $i == $full-length {
23 | $percentage: 100%;
24 | }
25 |
26 | @else {
27 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
28 | }
29 |
30 | $color-stop: color-stop(unquote($percentage), $gradient);
31 | $gradient-list: join($gradient-list, $color-stop, comma);
32 | }
33 | }
34 |
35 | @if $type == radial {
36 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
37 | }
38 |
39 | @else if $type == linear {
40 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
41 | }
42 |
43 | @return $gradient;
44 | }
45 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_flex-grid.scss:
--------------------------------------------------------------------------------
1 | // Flexible grid
2 | @function flex-grid($columns, $container-columns: $fg-max-columns) {
3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
5 | @return percentage($width / $container-width);
6 | }
7 |
8 | // Flexible gutter
9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
11 | @return percentage($gutter / $container-width);
12 | }
13 |
14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16 | //
17 | // $fg-column: 60px; // Column Width
18 | // $fg-gutter: 25px; // Gutter Width
19 | // $fg-max-columns: 12; // Total Columns For Main Container
20 | //
21 | // div {
22 | // width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
23 | // margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
24 | //
25 | // p {
26 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
27 | // float: left;
28 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
29 | // }
30 | //
31 | // blockquote {
32 | // float: left;
33 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
34 | // }
35 | // }
36 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_grid-width.scss:
--------------------------------------------------------------------------------
1 | @function grid-width($n) {
2 | @return $n * $gw-column + ($n - 1) * $gw-gutter;
3 | }
4 |
5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
6 | //
7 | // $gw-column: 100px; // Column Width
8 | // $gw-gutter: 40px; // Gutter Width
9 | //
10 | // div {
11 | // width: grid-width(4); // returns 520px;
12 | // margin-left: $gw-gutter; // returns 40px;
13 | // }
14 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_linear-gradient.scss:
--------------------------------------------------------------------------------
1 | @function linear-gradient($pos: top, $G1: false, $G2: false,
2 | $G3: false, $G4: false,
3 | $G5: false, $G6: false,
4 | $G7: false, $G8: false,
5 | $G9: false, $G10: false) {
6 |
7 | // Detect what type of value exists in $pos
8 | $pos-type: type-of(nth($pos, 1));
9 |
10 | // If $pos is missing from mixin, reassign vars and add default position
11 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
12 | $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
13 | $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
14 | $pos: top; // Default position
15 | }
16 |
17 | $type: linear;
18 | $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
19 | $type-gradient: append($type, $gradient, comma);
20 |
21 | @return $type-gradient;
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_modular-scale.scss:
--------------------------------------------------------------------------------
1 | @function modular-scale($value, $increment, $ratio) {
2 | @if $increment > 0 {
3 | @for $i from 1 through $increment {
4 | $value: ($value * $ratio);
5 | }
6 | }
7 |
8 | @if $increment < 0 {
9 | $increment: abs($increment);
10 | @for $i from 1 through $increment {
11 | $value: ($value / $ratio);
12 | }
13 | }
14 |
15 | @return $value;
16 | }
17 |
18 | // div {
19 | // Increment Up GR with positive value
20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
21 | //
22 | // Increment Down GR with negative value
23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
24 | //
25 | // Can be used with ceil(round up) or floor(round down)
26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
28 | // }
29 | //
30 | // modularscale.com
31 |
32 | @function golden-ratio($value, $increment) {
33 | @return modular-scale($value, $increment, 1.618)
34 | }
35 |
36 | // div {
37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px
38 | // }
39 | //
40 | // goldenratiocalculator.com
41 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_radial-gradient.scss:
--------------------------------------------------------------------------------
1 | // This function is required and used by the background-image mixin.
2 | @function radial-gradient($G1, $G2,
3 | $G3: false, $G4: false,
4 | $G5: false, $G6: false,
5 | $G7: false, $G8: false,
6 | $G9: false, $G10: false,
7 | $pos: 50% 50%,
8 | $shape-size: ellipse cover,
9 | $deprecated-pos1: center center,
10 | $deprecated-pos2: center center,
11 | $deprecated-radius1: 0,
12 | $deprecated-radius2: 50,
13 | $fallback: false) {
14 |
15 | @each $value in $G1, $G2 {
16 | $first-val: nth($value, 1);
17 | $pos-type: type-of($first-val);
18 |
19 | @if ($pos-type != color) or ($first-val != "transparent") {
20 | @if ($pos-type == number)
21 | or ($first-val == "center")
22 | or ($first-val == "top")
23 | or ($first-val == "right")
24 | or ($first-val == "bottom")
25 | or ($first-val == "left") {
26 |
27 | $pos: $value;
28 |
29 | @if $pos == $G1 {
30 | $G1: false;
31 | }
32 | }
33 |
34 | @else if
35 | ($first-val == "ellipse")
36 | or ($first-val == "circle")
37 | or ($first-val == "closest-side")
38 | or ($first-val == "closest-corner")
39 | or ($first-val == "farthest-side")
40 | or ($first-val == "farthest-corner")
41 | or ($first-val == "contain")
42 | or ($first-val == "cover") {
43 |
44 | $shape-size: $value;
45 |
46 | @if $value == $G1 {
47 | $G1: false;
48 | }
49 |
50 | @else if $value == $G2 {
51 | $G2: false;
52 | }
53 | }
54 | }
55 | }
56 |
57 | $type: radial;
58 | $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
59 | $type-gradient: append($type, $gradient, comma);
60 |
61 | @return $type-gradient;
62 | }
63 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_render-gradients.scss:
--------------------------------------------------------------------------------
1 | // User for linear and radial gradients within background-image or border-image properties
2 |
3 | @function render-gradients($gradients, $gradient-type, $vendor: false) {
4 | $vendor-gradients: false;
5 | @if $vendor {
6 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
7 | }
8 |
9 | @else if $vendor == false {
10 | $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
11 | $vendor-gradients: unquote($vendor-gradients);
12 | }
13 | @return $vendor-gradients;
14 | }
15 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_tint-shade.scss:
--------------------------------------------------------------------------------
1 | // Add percentage of white to a color
2 | @function tint($color, $percent){
3 | @return mix(white, $color, $percent);
4 | }
5 |
6 | // Add percentage of black to a color
7 | @function shade($color, $percent){
8 | @return mix(black, $color, $percent);
9 | }
10 |
--------------------------------------------------------------------------------
/_sass/bourbon/functions/_transition-property-name.scss:
--------------------------------------------------------------------------------
1 | // Return vendor-prefixed property names if appropriate
2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
3 | //************************************************************************//
4 | @function transition-property-names($props, $vendor: false) {
5 | $new-props: ();
6 |
7 | @each $prop in $props {
8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
9 | }
10 |
11 | @return $new-props;
12 | }
13 |
14 | @function transition-property-name($prop, $vendor: false) {
15 | // put other properties that need to be prefixed here aswell
16 | @if $vendor and $prop == transform {
17 | @return unquote('-'+$vendor+'-'+$prop);
18 | }
19 | @else {
20 | @return $prop;
21 | }
22 | }
--------------------------------------------------------------------------------
/_sass/bourbon/lib/bourbon.rb:
--------------------------------------------------------------------------------
1 | require "bourbon/generator"
2 |
3 | module Bourbon
4 | if defined?(Rails) && defined?(Rails::Engine)
5 | class Engine < ::Rails::Engine
6 | require 'bourbon/engine'
7 | end
8 |
9 | module Rails
10 | class Railtie < ::Rails::Railtie
11 | rake_tasks do
12 | load "tasks/install.rake"
13 | end
14 | end
15 | end
16 | end
17 | end
18 |
19 | require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
20 |
--------------------------------------------------------------------------------
/_sass/bourbon/lib/bourbon/sass_extensions.rb:
--------------------------------------------------------------------------------
1 | module Bourbon::SassExtensions
2 | end
3 |
4 | unless defined?(Sass)
5 | require 'sass'
6 | end
7 |
8 | require File.join(File.dirname(__FILE__), '/sass_extensions/functions')
9 |
--------------------------------------------------------------------------------
/_sass/bourbon/lib/bourbon/sass_extensions/functions.rb:
--------------------------------------------------------------------------------
1 | module Bourbon::SassExtensions::Functions
2 | end
3 |
4 | require File.join(File.dirname(__FILE__), "/functions/compact")
5 |
6 | module Sass::Script::Functions
7 | include Bourbon::SassExtensions::Functions::Compact
8 | end
9 |
10 | # Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
11 | class Sass::Script::Functions::EvaluationContext
12 | include Sass::Script::Functions
13 | end
14 |
--------------------------------------------------------------------------------
/_sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb:
--------------------------------------------------------------------------------
1 | # Compact function pulled from compass
2 | module Bourbon::SassExtensions::Functions::Compact
3 |
4 | def compact(*args)
5 | sep = :comma
6 | if args.size == 1 && args.first.is_a?(Sass::Script::List)
7 | list = args.first
8 | args = list.value
9 | sep = list.separator
10 | end
11 | Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
12 | end
13 |
14 | end
15 |
--------------------------------------------------------------------------------
/_sass/desktop.scss:
--------------------------------------------------------------------------------
1 | @import 'bourbon/bourbon';
2 | @import 'neat/neat';
3 |
4 | h1.hero {
5 | font-size: 6.5em;
6 | margin: 0.3em 0 0.1em;
7 | }
8 |
9 | .project {
10 | @include span-columns(6);
11 | }
12 |
13 | .pagination a {
14 | @include span-columns(3);
15 | }
16 |
17 | .project h2 {
18 | font-size: 3.5em;
19 | }
20 |
21 | .github {
22 | @media (min-width: em(1000)) {
23 | display: block;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/_sass/font.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Bebas Neue';
3 | src: url('../font/bebas-neue/BebasNeue-webfont.eot');
4 | src: url('../font/bebas-neue/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
5 | url('../font/bebas-neue/BebasNeue-webfont.woff') format('woff'),
6 | url('../font/bebas-neue/BebasNeue-webfont.ttf') format('truetype'),
7 | url('../font/bebas-neue/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | @font-face {
13 | font-family: 'Source Sans Pro';
14 | src: url('../font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.eot');
15 | src: url('../font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.eot?#iefix') format('embedded-opentype'),
16 | url('../font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.woff') format('woff'),
17 | url('../font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.ttf') format('truetype'),
18 | url('../font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.svg#SourceSansProSemiboldItalic') format('svg');
19 | font-weight: bold;
20 | font-style: italic;
21 | }
22 |
23 | @font-face {
24 | font-family: 'Source Sans Pro';
25 | src: url('../font/source-sans-pro/SourceSansPro-Bold-webfont.eot');
26 | src: url('../font/source-sans-pro/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
27 | url('../font/source-sans-pro/SourceSansPro-Bold-webfont.woff') format('woff'),
28 | url('../font/source-sans-pro/SourceSansPro-Bold-webfont.ttf') format('truetype'),
29 | url('../font/source-sans-pro/SourceSansPro-Bold-webfont.svg#SourceSansProBold') format('svg');
30 | font-weight: 800;
31 | font-style: normal;
32 | }
33 |
34 | @font-face {
35 | font-family: 'Source Sans Pro';
36 | src: url('../font/source-sans-pro/SourceSansPro-BoldIt-webfont.eot');
37 | src: url('../font/source-sans-pro/SourceSansPro-BoldIt-webfont.eot?#iefix') format('embedded-opentype'),
38 | url('../font/source-sans-pro/SourceSansPro-BoldIt-webfont.woff') format('woff'),
39 | url('../font/source-sans-pro/SourceSansPro-BoldIt-webfont.ttf') format('truetype'),
40 | url('../font/source-sans-pro/SourceSansPro-BoldIt-webfont.svg#SourceSansProBoldItalic') format('svg');
41 | font-weight: bold;
42 | font-style: italic;
43 | }
44 |
45 | @font-face {
46 | font-family: 'Source Sans Pro';
47 | src: url('../font/source-sans-pro/SourceSansPro-Black-webfont.eot');
48 | src: url('../font/source-sans-pro/SourceSansPro-Black-webfont.eot?#iefix') format('embedded-opentype'),
49 | url('../font/source-sans-pro/SourceSansPro-Black-webfont.woff') format('woff'),
50 | url('../font/source-sans-pro/SourceSansPro-Black-webfont.ttf') format('truetype'),
51 | url('../font/source-sans-pro/SourceSansPro-Black-webfont.svg#SourceSansProBlack') format('svg');
52 | font-weight: 900;
53 | font-style: normal;
54 | }
55 |
56 | @font-face {
57 | font-family: 'Source Sans Pro';
58 | src: url('../font/source-sans-pro/SourceSansPro-BlackIt-webfont.eot');
59 | src: url('../font/source-sans-pro/SourceSansPro-BlackIt-webfont.eot?#iefix') format('embedded-opentype'),
60 | url('../font/source-sans-pro/SourceSansPro-BlackIt-webfont.woff') format('woff'),
61 | url('../font/source-sans-pro/SourceSansPro-BlackIt-webfont.ttf') format('truetype'),
62 | url('../font/source-sans-pro/SourceSansPro-BlackIt-webfont.svg#SourceSansProBlackItalic') format('svg');
63 | font-weight: 900;
64 | font-style: italic;
65 | }
66 |
67 | @font-face {
68 | font-family: 'Source Sans Pro';
69 | src: url('../font/source-sans-pro/SourceSansPro-ExtraLight-webfont.eot');
70 | src: url('../font/source-sans-pro/SourceSansPro-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
71 | url('../font/source-sans-pro/SourceSansPro-ExtraLight-webfont.woff') format('woff'),
72 | url('../font/source-sans-pro/SourceSansPro-ExtraLight-webfont.ttf') format('truetype'),
73 | url('../font/source-sans-pro/SourceSansPro-ExtraLight-webfont.svg#SourceSansProExtraLight') format('svg');
74 | font-weight: 100;
75 | font-style: normal;
76 | }
77 |
78 | @font-face {
79 | font-family: 'Source Sans Pro';
80 | src: url('../font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.eot');
81 | src: url('../font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.eot?#iefix') format('embedded-opentype'),
82 | url('../font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.woff') format('woff'),
83 | url('../font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.ttf') format('truetype'),
84 | url('../font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.svg#SourceSansProExtraLightItalic') format('svg');
85 | font-weight: 100;
86 | font-style: italic;
87 | }
88 |
89 | @font-face {
90 | font-family: 'Source Sans Pro';
91 | src: url('../font/source-sans-pro/SourceSansPro-Light-webfont.eot');
92 | src: url('../font/source-sans-pro/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
93 | url('../font/source-sans-pro/SourceSansPro-Light-webfont.woff') format('woff'),
94 | url('../font/source-sans-pro/SourceSansPro-Light-webfont.ttf') format('truetype'),
95 | url('../font/source-sans-pro/SourceSansPro-Light-webfont.svg#SourceSansProLight') format('svg');
96 | font-weight: lighter;
97 | font-style: normal;
98 | }
99 |
100 | @font-face {
101 | font-family: 'Source Sans Pro';
102 | src: url('../font/source-sans-pro/SourceSansPro-LightIt-webfont.eot');
103 | src: url('../font/source-sans-pro/SourceSansPro-LightIt-webfont.eot?#iefix') format('embedded-opentype'),
104 | url('../font/source-sans-pro/SourceSansPro-LightIt-webfont.woff') format('woff'),
105 | url('../font/source-sans-pro/SourceSansPro-LightIt-webfont.ttf') format('truetype'),
106 | url('../font/source-sans-pro/SourceSansPro-LightIt-webfont.svg#SourceSansProLightItalic') format('svg');
107 | font-weight: lighter;
108 | font-style: italic;
109 | }
110 |
111 | @font-face {
112 | font-family: 'Source Sans Pro';
113 | src: url('../font/source-sans-pro/SourceSansPro-Regular-webfont.eot');
114 | src: url('../font/source-sans-pro/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
115 | url('../font/source-sans-pro/SourceSansPro-Regular-webfont.woff') format('woff'),
116 | url('../font/source-sans-pro/SourceSansPro-Regular-webfont.ttf') format('truetype'),
117 | url('../font/source-sans-pro/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
118 | font-weight: normal;
119 | font-style: normal;
120 | }
121 |
122 | @font-face {
123 | font-family: 'Source Sans Pro';
124 | src: url('../font/source-sans-pro/SourceSansPro-It-webfont.eot');
125 | src: url('../font/source-sans-pro/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
126 | url('../font/source-sans-pro/SourceSansPro-It-webfont.woff') format('woff'),
127 | url('../font/source-sans-pro/SourceSansPro-It-webfont.ttf') format('truetype'),
128 | url('../font/source-sans-pro/SourceSansPro-It-webfont.svg#SourceSansProItalic') format('svg');
129 | font-weight: normal;
130 | font-style: italic;
131 | }
132 |
133 | @font-face {
134 | font-family: 'Source Sans Pro';
135 | src: url('../font/source-sans-pro/SourceSansPro-Semibold-webfont.eot');
136 | src: url('../font/source-sans-pro/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
137 | url('../font/source-sans-pro/SourceSansPro-Semibold-webfont.woff') format('woff'),
138 | url('../font/source-sans-pro/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
139 | url('../font/source-sans-pro/SourceSansPro-Semibold-webfont.svg#SourceSansProSemibold') format('svg');
140 | font-weight: bold;
141 | font-style: normal;
142 | }
143 |
144 | @font-face {
145 | font-family: 'Source Code Pro';
146 | src: url('../font/source-code-pro/SourceCodePro-Light-webfont.eot');
147 | src: url('../font/source-code-pro/SourceCodePro-Light-webfont.eot?#iefix') format('embedded-opentype'),
148 | url('../font/source-code-pro/SourceCodePro-Light-webfont.woff') format('woff'),
149 | url('../font/source-code-pro/SourceCodePro-Light-webfont.ttf') format('truetype'),
150 | url('../font/source-code-pro/SourceCodePro-Light-webfont.svg#SourceCodeProLight') format('svg');
151 | font-weight: 300;
152 | font-style: normal;
153 | }
154 |
155 | @font-face {
156 | font-family: 'Source Code Pro';
157 | src: url('../font/source-code-pro/SourceCodePro-ExtraLight-webfont.eot');
158 | src: url('../font/source-code-pro/SourceCodePro-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
159 | url('../font/source-code-pro/SourceCodePro-ExtraLight-webfont.woff') format('woff'),
160 | url('../font/source-code-pro/SourceCodePro-ExtraLight-webfont.ttf') format('truetype'),
161 | url('../font/source-code-pro/SourceCodePro-ExtraLight-webfont.svg#SourceCodeProExtraLight') format('svg');
162 | font-weight: lighter;
163 | font-style: normal;
164 | }
165 |
166 | @font-face {
167 | font-family: 'Source Code Pro';
168 | src: url('../font/source-code-pro/SourceCodePro-Regular-webfont.eot');
169 | src: url('../font/source-code-pro/SourceCodePro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
170 | url('../font/source-code-pro/SourceCodePro-Regular-webfont.woff') format('woff'),
171 | url('../font/source-code-pro/SourceCodePro-Regular-webfont.ttf') format('truetype'),
172 | url('../font/source-code-pro/SourceCodePro-Regular-webfont.svg#SourceCodeProRegular') format('svg');
173 | font-weight: normal;
174 | font-style: normal;
175 | }
176 |
177 | @font-face {
178 | font-family: 'Source Code Pro';
179 | src: url('../font/source-code-pro/SourceCodePro-Semibold-webfont.eot');
180 | src: url('../font/source-code-pro/SourceCodePro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
181 | url('../font/source-code-pro/SourceCodePro-Semibold-webfont.woff') format('woff'),
182 | url('../font/source-code-pro/SourceCodePro-Semibold-webfont.ttf') format('truetype'),
183 | url('../font/source-code-pro/SourceCodePro-Semibold-webfont.svg#SourceCodeProSemibold') format('svg');
184 | font-weight: bold;
185 | font-style: normal;
186 | }
187 |
188 | @font-face {
189 | font-family: 'Source Code Pro';
190 | src: url('../font/source-code-pro/SourceCodePro-Bold-webfont.eot');
191 | src: url('../font/source-code-pro/SourceCodePro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
192 | url('../font/source-code-pro/SourceCodePro-Bold-webfont.woff') format('woff'),
193 | url('../font/source-code-pro/SourceCodePro-Bold-webfont.ttf') format('truetype'),
194 | url('../font/source-code-pro/SourceCodePro-Bold-webfont.svg#SourceCodeProBold') format('svg');
195 | font-weight: bolder;
196 | font-style: normal;
197 | }
198 |
--------------------------------------------------------------------------------
/_sass/ie.scss:
--------------------------------------------------------------------------------
1 | @import 'bourbon/bourbon';
2 | @import 'reset';
3 |
--------------------------------------------------------------------------------
/_sass/mobile.scss:
--------------------------------------------------------------------------------
1 | // This file contains shared base styles and will be loaded on all browsers and devices
2 |
3 | @import 'bourbon/bourbon';
4 | @import 'neat/neat';
5 |
6 | $sansFamily: 'Source Sans Pro', Helvetica, Arial, sans-serif;
7 | $headingFamily: 'Bebas Neue', Helvetica, Arial, sans-serif;
8 | $white: #FFFFFF;
9 | $black: #111;
10 | $darkGrey: #222;
11 | $grey: #444;
12 | $lightGrey: #ccc;
13 | $blue: #6EC5FF;
14 | $indigo: #5EA5FF;
15 |
16 | body {
17 | font-family: $sansFamily;
18 | margin: 0;
19 | color: $grey;
20 | font-size: 1.2em;
21 | min-width: 257px;
22 | }
23 |
24 | a {
25 | color: $indigo;
26 | text-decoration: none;
27 | }
28 |
29 | a:hover {
30 | text-decoration: underline;
31 | }
32 |
33 | h1, h2, h3, h4, h5 {
34 | color: $darkGrey;
35 | font-family: $headingFamily;
36 | text-transform: uppercase;
37 | font-weight: normal;
38 | line-height: 0.8em;
39 | margin: 0.4em 0;
40 | a {
41 | color: inherit;
42 | }
43 | a:hover {
44 | text-decoration: none;
45 | }
46 | }
47 |
48 | h1 {
49 | font-size: 4em;
50 | }
51 |
52 | h2 {
53 | font-size: 3.5em;
54 | }
55 |
56 | h3 {
57 | font-size: 3em;
58 | }
59 |
60 | h4 {
61 | font-size: 2.5em;
62 | }
63 |
64 | h5 {
65 | font-size: 2em;
66 | }
67 |
68 | h1.hero {
69 | font-size: 4.5em;
70 | margin: 0.5em 0 0.1em;
71 | }
72 |
73 | p {
74 | line-height: 1.5em;
75 | margin: 1em 0;
76 | }
77 |
78 | .wrapper {
79 | padding: 20px;
80 | }
81 |
82 | .container {
83 | @include outer-container;
84 | max-width: 780px;
85 | position: relative;
86 | }
87 |
88 | header a {
89 | color: inherit;
90 | &:hover {
91 | text-decoration: none;
92 | }
93 | }
94 |
95 | header nav ul {
96 | font-size: 16px;
97 | @include clearfix;
98 | list-style: none;
99 | padding: 0;
100 | margin: 0 0 10px;
101 | }
102 |
103 | header .logo {
104 | font-style: italic;
105 | }
106 |
107 | header nav li {
108 | float: left;
109 | a {
110 | padding-right: 20px;
111 | }
112 | }
113 |
114 | header nav.subnav {
115 | z-index: 2;
116 | margin: 10px 0 -40px;
117 | position: absolute;
118 | right: 0;
119 | }
120 |
121 | header .subnav a {
122 | padding-right: 0;
123 | padding-left: 20px;
124 | }
125 |
126 | header .nav-slider {
127 | height: 10px;
128 | background-color: $black;
129 | position: relative;
130 | }
131 |
132 | header .nav-selection {
133 | position: absolute;
134 | height: 10px;
135 | background-color: $blue;
136 | }
137 |
138 | header .nav-selection.about {
139 | width: 44px;
140 | left: 49px;
141 | }
142 |
143 | header .nav-selection.blog {
144 | width: 33px;
145 | left: 0;
146 | }
147 |
148 | header .nav-selection.projects {
149 | width: 60px;
150 | left: 107px;
151 | }
152 |
153 | header .subnav-selection {
154 | position: absolute;
155 | height: 10px;
156 | background-color: $black;
157 | width: 50px;
158 | }
159 |
160 | header .subnav-selection.exemplar-home {
161 | right: 140px;
162 | width: 42px;
163 | }
164 |
165 | header .subnav-selection.exemplar-docs {
166 | right: 87px;
167 | width: 35px;
168 | }
169 |
170 | header .subnav-selection.download {
171 | right: 0;
172 | width: 69px;
173 | }
174 |
175 | header .profile {
176 | float: right;
177 | height: 58px;
178 | max-width: 84px;
179 | margin-top: 14px;
180 | }
181 |
182 | header .social {
183 | width: 16px;
184 | float: left;
185 | }
186 |
187 | header .social img {
188 | display: block;
189 | margin: 9px 0;
190 | }
191 |
192 | header .avatar {
193 | height: 58px;
194 | width: 58px;
195 | border: 2px solid $black;
196 | float: left;
197 | margin-left: 10px;
198 | img {
199 | width: 100%;
200 | height: 100%;
201 | }
202 | @media (max-width: em(327)) {
203 | display: none;
204 | }
205 | }
206 |
207 | .github {
208 | display: none;
209 | }
210 |
211 | footer {
212 | margin-top: 30px;
213 | }
214 |
215 | footer ul {
216 | padding: 0;
217 | }
218 |
219 | footer nav {
220 | border-width: 10px 0 0;
221 | border-style: solid;
222 | border-color: $black;
223 | padding-top: 20px;
224 | }
225 |
226 | footer nav ul li {
227 | @include span-columns(3);
228 | @include media(max-width 40em) {
229 | @include span-columns(12);
230 | margin-bottom: 10px;
231 | &:nth-child(2n) {
232 | @include omega;
233 | }
234 | }
235 | }
236 |
237 | ul, ol {
238 | line-height: 1.5em;
239 | padding-left: 20px;
240 | font-size: 1em;
241 | }
242 |
243 | ul {
244 | list-style: square;
245 | }
246 |
247 | .post {
248 | border-top: 1px solid $darkGrey;
249 | margin-bottom: 5em;
250 | }
251 |
252 | .post:first-child, .post.no-border {
253 | border-top: none;
254 | }
255 |
256 | .post-header .date {
257 | font-family: $sansFamily;
258 | text-decoration: lowercase;
259 | margin: 1em 0 -1.2em;
260 | }
261 |
262 | #projects {
263 | margin-top: 40px;
264 | }
265 |
266 | .project {
267 | display: block;
268 | border: 1px solid $lightGrey;
269 | margin-bottom: 2.35765%;
270 | @include pad;
271 | color: inherit;
272 | &:hover {
273 | border-color: $indigo;
274 | text-decoration: none;
275 | }
276 | }
277 |
278 | .project h2 {
279 | font-size: 3em;
280 | }
281 |
282 | .project:nth-child(2n) {
283 | @include omega;
284 | }
285 |
286 | .pagination {
287 | margin-top: 30px;
288 | }
289 |
290 | .button, .key-selector a {
291 | background: $darkGrey;
292 | color: $white;
293 | padding: 0.4em 0;
294 | display: block;
295 | text-align: center;
296 | margin-bottom: 10px;
297 | font-family: $headingFamily;
298 | font-size: 1.2em;
299 | }
300 |
301 | .key-selector a {
302 | float: left;
303 | padding: 0.5em 0.4em 0.4em;
304 | margin-right: 0.4em;
305 | font-family: $sansFamily;
306 | font-size: 0.9em;
307 | }
308 |
309 | .key-selector a.active {
310 | background-color: $blue;
311 | }
312 |
313 | .button:hover, .button:active {
314 | @include box-shadow(0 0 1px 2px rgba(0,0,0,1) inset);
315 | }
316 |
317 | .pagination .button span {
318 | position: relative;
319 | }
320 |
321 | .pagination a.previous span:before {
322 | content: "←";
323 | position: absolute;
324 | left: -30px;
325 | }
326 |
327 | .pagination a.next span:after {
328 | content: "→";
329 | position: absolute;
330 | left: 50px;
331 | }
332 |
333 | pre {
334 | font-family: 'Source Code Pro', monospace;
335 | }
336 |
337 | .chords {
338 | color: $white;
339 | }
340 |
341 | .chords strong {
342 | color: $blue;
343 | }
344 |
--------------------------------------------------------------------------------
/_sass/neat/_neat-helpers.scss:
--------------------------------------------------------------------------------
1 | // Functions
2 | @import "functions/private";
3 | @import "functions/new-breakpoint";
4 | @import "functions/px-to-em";
5 |
6 | // Settings
7 | @import "settings/grid";
8 | @import "settings/visual-grid";
9 |
--------------------------------------------------------------------------------
/_sass/neat/_neat-overrides.scss:
--------------------------------------------------------------------------------
1 | @import "settings/default";
2 | @import "functions/helpers";
3 |
--------------------------------------------------------------------------------
/_sass/neat/_neat.scss:
--------------------------------------------------------------------------------
1 | // Bourbon Neat 1.0.1
2 | // MIT Licensed
3 | // Copyright (c) 2011 thoughtbot, inc.
4 |
5 | // Helpers
6 | @import "neat-helpers";
7 |
8 | // Grid
9 | @import "grid/global-variables";
10 | @import "grid/grid";
11 | @import "grid/visual-grid";
12 |
--------------------------------------------------------------------------------
/_sass/neat/functions/_helpers.scss:
--------------------------------------------------------------------------------
1 | @import "helpers/new-breakpoint";
2 | @import "helpers/px-to-em";
3 |
--------------------------------------------------------------------------------
/_sass/neat/functions/_new-breakpoint.scss:
--------------------------------------------------------------------------------
1 | @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
2 |
3 | @if length($query) == 1 {
4 | $query: $default-feature nth($query, 1) $total-columns;
5 | }
6 |
7 | @else if length($query) == 2 or length($query) == 4 {
8 | $query: append($query, $total-columns);
9 | }
10 |
11 | @if not belongs-to($query, $visual-grid-breakpoints) {
12 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
13 | }
14 |
15 | @return $query;
16 | }
17 |
--------------------------------------------------------------------------------
/_sass/neat/functions/_private.scss:
--------------------------------------------------------------------------------
1 | // Checks if a number is even
2 | @function is-even($int) {
3 | @if $int%2 == 0 {
4 | @return true;
5 | }
6 |
7 | @return false;
8 | }
9 |
10 | // Checks if an element belongs to a list
11 | @function belongs-to($tested-item, $list) {
12 | @each $item in $list {
13 | @if $item == $tested-item {
14 | @return true;
15 | }
16 | }
17 |
18 | @return false;
19 | }
20 |
21 | // Parses the first argument of span-columns()
22 | @function container-span($span: $span) {
23 | @if length($span) == 3 {
24 | $container-columns: nth($span, 3);
25 | @return $container-columns;
26 | }
27 |
28 | @else if length($span) == 2 {
29 | $container-columns: nth($span, 2);
30 | @return $container-columns;
31 | }
32 |
33 | @else {
34 | @return $grid-columns;
35 | }
36 | }
37 |
38 | // Generates a striped background
39 | @function gradient-stops($grid-columns, $color: $visual-grid-color) {
40 | $transparent: rgba(0,0,0,0);
41 |
42 | $column-width: flex-grid(1, $grid-columns);
43 | $gutter-width: flex-gutter($grid-columns);
44 | $column-offset: $column-width;
45 |
46 | $values: ($transparent 0, $color 0);
47 |
48 | @for $i from 1 to $grid-columns*2 {
49 | @if is-even($i) {
50 | $values: append($values, $transparent $column-offset);
51 | $values: append($values, $color $column-offset);
52 | $column-offset: $column-offset + $column-width;
53 | }
54 |
55 | @else {
56 | $values: append($values, $color $column-offset);
57 | $values: append($values, $transparent $column-offset);
58 | $column-offset: $column-offset + $gutter-width;
59 | }
60 | }
61 |
62 | @return $values;
63 | }
64 |
--------------------------------------------------------------------------------
/_sass/neat/functions/_px-to-em.scss:
--------------------------------------------------------------------------------
1 | @function em($pxval, $base: 16) {
2 | @return ($pxval / $base) * 1em;
3 | }
4 |
--------------------------------------------------------------------------------
/_sass/neat/functions/helpers/_new-breakpoint.scss:
--------------------------------------------------------------------------------
1 | @import "../private";
2 |
3 | @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
4 |
5 | @if length($query) == 1 {
6 | $query: $default-feature nth($query, 1) $total-columns;
7 | }
8 |
9 | @else if length($query) == 2 or length($query) == 4 {
10 | $query: append($query, $total-columns);
11 | }
12 |
13 | @if not belongs-to($query, $visual-grid-breakpoints) {
14 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
15 | }
16 |
17 | @return $query;
18 | }
19 |
--------------------------------------------------------------------------------
/_sass/neat/functions/helpers/_px-to-em.scss:
--------------------------------------------------------------------------------
1 | @function em($pxval, $base: 16) {
2 | @return #{$pxval / $base}em;
3 | }
4 |
--------------------------------------------------------------------------------
/_sass/neat/grid/_global-variables.scss:
--------------------------------------------------------------------------------
1 | $parent-columns: $grid-columns !default;
2 |
--------------------------------------------------------------------------------
/_sass/neat/grid/_grid.scss:
--------------------------------------------------------------------------------
1 | @if $border-box-sizing == true {
2 | * {
3 | @include box-sizing(border-box);
4 | }
5 | }
6 |
7 | $fg-column: $column;
8 | $fg-gutter: $gutter;
9 | $fg-max-columns: $grid-columns;
10 | $fg-max-width: $max-width;
11 |
12 | // outer wrapper center container
13 | @mixin outer-container() {
14 | @include clearfix;
15 | max-width: $fg-max-width;
16 | margin: {
17 | left: auto;
18 | right: auto;
19 | }
20 | }
21 |
22 | // Grid span columns
23 | @mixin span-columns($span: $columns of $container-columns, $display: block) {
24 |
25 | $columns: nth($span, 1);
26 | $container-columns: container-span($span);
27 |
28 | @if $container-columns != $grid-columns {
29 | $parent-columns: $container-columns;
30 | }
31 |
32 | @else {
33 | $parent-columns: $grid-columns;
34 | }
35 |
36 | @if $display == table {
37 | display: table-cell;
38 | padding-right: flex-gutter($container-columns);
39 | width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
40 |
41 | &:last-child {
42 | padding-right: 0;
43 | }
44 | }
45 |
46 | @else if $display == inline-block {
47 | @include inline-block;
48 | margin-right: flex-gutter($container-columns);
49 | width: flex-grid($columns, $container-columns);
50 |
51 | &:last-child {
52 | margin-right: 0;
53 | }
54 | }
55 |
56 | @else {
57 | display: block;
58 | float: left;
59 | margin-right: flex-gutter($container-columns);
60 | width: flex-grid($columns, $container-columns);
61 |
62 | &:last-child {
63 | margin-right: 0;
64 | }
65 | }
66 | }
67 |
68 | // Clearfix / row container
69 | @mixin row($display: block) {
70 | @include clearfix;
71 | @if $display == table {
72 | display: table;
73 | }
74 |
75 | @else {
76 | display: block;
77 | }
78 | }
79 |
80 | // Shift
81 | @mixin shift($n-columns: 1) {
82 | margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
83 | }
84 |
85 |
86 | // Pad
87 | @mixin pad($padding: flex-gutter()) {
88 | padding: $padding;
89 | }
90 |
91 | // Remove element gutter
92 | @mixin omega($display: block, $direction: right) {
93 | @if $display == table {
94 | padding-#{$direction}: 0;
95 | }
96 |
97 | @else {
98 | margin-#{$direction}: 0;
99 | }
100 | }
101 |
102 | @mixin nth-omega($nth, $display: block, $direction: right) {
103 | @if $display == table {
104 | &:nth-child(#{$nth}) {
105 | padding-#{$direction}: 0;
106 | }
107 | }
108 |
109 | @else {
110 | &:nth-child(#{$nth}) {
111 | margin-#{$direction}: 0;
112 | }
113 | }
114 | }
115 |
116 | // Fill 100% of parent
117 | @mixin fill-parent() {
118 | width: 100%;
119 |
120 | @if $border-box-sizing == false {
121 | @include box-sizing(border-box);
122 | }
123 | }
124 |
125 | // Media Queries
126 | @mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
127 |
128 | @if length($query) == 1 {
129 | @media screen and ($default-feature: nth($query, 1)) {
130 | $default-grid-columns: $grid-columns;
131 | $grid-columns: $total-columns;
132 | @content;
133 | $grid-columns: $default-grid-columns;
134 | }
135 | }
136 |
137 | @else if length($query) == 2 {
138 | @media screen and (nth($query, 1): nth($query, 2)) {
139 | $default-grid-columns: $grid-columns;
140 | $grid-columns: $total-columns;
141 | @content;
142 | $grid-columns: $default-grid-columns;
143 | }
144 | }
145 |
146 | @else if length($query) == 3 {
147 | @media screen and (nth($query, 1): nth($query, 2)) {
148 | $default-grid-columns: $grid-columns;
149 | $grid-columns: nth($query, 3);
150 | @content;
151 | $grid-columns: $default-grid-columns;
152 | }
153 | }
154 |
155 | @else if length($query) == 4 {
156 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
157 | $default-grid-columns: $grid-columns;
158 | $grid-columns: $total-columns;
159 | @content;
160 | $grid-columns: $default-grid-columns;
161 | }
162 | }
163 |
164 | @else if length($query) == 5 {
165 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
166 | $default-grid-columns: $grid-columns;
167 | $grid-columns: nth($query, 5);
168 | @content;
169 | $grid-columns: $default-grid-columns;
170 | }
171 | }
172 |
173 | @else {
174 | @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
175 | }
176 | }
177 |
178 | // Legacy Mixins
179 | @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
180 | @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
181 |
182 | @if length($query) == 1 {
183 | @media screen and ($default-feature: nth($query, 1)) {
184 | $default-grid-columns: $grid-columns;
185 | $grid-columns: $total-columns;
186 | @content;
187 | $grid-columns: $default-grid-columns;
188 | }
189 | }
190 |
191 | @else if length($query) == 2 {
192 | @media screen and (nth($query, 1): nth($query, 2)) {
193 | $default-grid-columns: $grid-columns;
194 | $grid-columns: $total-columns;
195 | @content;
196 | $grid-columns: $default-grid-columns;
197 | }
198 | }
199 |
200 | @else if length($query) == 3 {
201 | @media screen and (nth($query, 1): nth($query, 2)) {
202 | $default-grid-columns: $grid-columns;
203 | $grid-columns: nth($query, 3);
204 | @content;
205 | $grid-columns: $default-grid-columns;
206 | }
207 | }
208 |
209 | @else if length($query) == 4 {
210 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
211 | $default-grid-columns: $grid-columns;
212 | $grid-columns: $total-columns;
213 | @content;
214 | $grid-columns: $default-grid-columns;
215 | }
216 | }
217 |
218 | @else if length($query) == 5 {
219 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
220 | $default-grid-columns: $grid-columns;
221 | $grid-columns: nth($query, 5);
222 | @content;
223 | $grid-columns: $default-grid-columns;
224 | }
225 | }
226 |
227 | @else {
228 | @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
229 | }
230 | }
231 |
--------------------------------------------------------------------------------
/_sass/neat/grid/_visual-grid.scss:
--------------------------------------------------------------------------------
1 | @mixin grid-column-gradient($values...) {
2 | background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
3 | background-image: -webkit-linear-gradient(left, $values);
4 | background-image: -moz-linear-gradient(left, $values);
5 | background-image: -ms-linear-gradient(left, $values);
6 | background-image: -o-linear-gradient(left, $values);
7 | background-image: unquote("linear-gradient(left, #{$values})");
8 | }
9 |
10 | @if $visual-grid == true or $visual-grid == yes {
11 | body:before {
12 | content: '';
13 | display: inline-block;
14 | @include grid-column-gradient(gradient-stops($grid-columns));
15 | height: 100%;
16 | left: 0;
17 | margin: 0 auto;
18 | max-width: $max-width;
19 | opacity: $visual-grid-opacity;
20 | position: fixed;
21 | right: 0;
22 | width: 100%;
23 |
24 | @if $visual-grid-index == back {
25 | z-index: -1;
26 | }
27 |
28 | @else if $visual-grid-index == front {
29 | z-index: 9999;
30 | }
31 |
32 | @each $breakpoint in $visual-grid-breakpoints {
33 | @if $breakpoint != nil {
34 | @include media($breakpoint) {
35 | @include grid-column-gradient(gradient-stops($grid-columns));
36 | }
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/_sass/neat/settings/_default.scss:
--------------------------------------------------------------------------------
1 | @import "default/grid";
2 | @import "default/visual-grid";
3 |
--------------------------------------------------------------------------------
/_sass/neat/settings/_grid.scss:
--------------------------------------------------------------------------------
1 | $column: golden-ratio(1em, 3) !default; // Column width
2 | $gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
3 | $grid-columns: 12 !default; // Total number of columns in the grid
4 | $max-width: em(1088) !default; // Max-width of the outer container
5 | $border-box-sizing: true !default; // Makes all elements have a border-box layout
6 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin
7 |
--------------------------------------------------------------------------------
/_sass/neat/settings/_visual-grid.scss:
--------------------------------------------------------------------------------
1 | $visual-grid: false !default; // Display the base grid
2 | $visual-grid-color: #EEE !default;
3 | $visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
4 | $visual-grid-opacity: 0.4 !default;
5 | $visual-grid-breakpoints: nil !default;
6 |
--------------------------------------------------------------------------------
/_sass/neat/settings/default/_grid.scss:
--------------------------------------------------------------------------------
1 | $column: golden-ratio(1em, 3) !default; // Column width
2 | $gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
3 | $grid-columns: 12 !default; // Total number of columns in the grid
4 | $max-width: em(1088) !default; // Max-width of the outer container
5 | $border-box-sizing: true !default; // Makes all elements have a border-box layout
6 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin
7 |
--------------------------------------------------------------------------------
/_sass/neat/settings/default/_visual-grid.scss:
--------------------------------------------------------------------------------
1 | $visual-grid: false !default; // Display the base grid
2 | $visual-grid-color: #EEE !default;
3 | $visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
4 | $visual-grid-opacity: 0.4 !default;
5 | $visual-grid-breakpoints: nil !default;
6 |
--------------------------------------------------------------------------------
/_sass/pygments.scss:
--------------------------------------------------------------------------------
1 | .highlight { overflow-x: auto;background: #ffffff; color: black; padding: 20px;border: 1px solid #ccc;}
2 | .highlight pre { white-space: pre; font-size: 0.8em;line-height: 1.2em; color: #d0d0d0; }
3 | .highlight pre code {font-family: 'Source Code Pro', monospace;}
4 | .highlight .c { color: #999988; font-style: italic; }
5 | .highlight .err { background-color: #e3d2d2; color: #a61717; }
6 | .highlight .k { font-weight: bold; }
7 | .highlight .o { font-weight: bold; }
8 | .highlight .cm { color: #999988; }
9 | .highlight .cp { color: #999999; font-weight: bold; }
10 | .highlight .c1 { color: #999988; }
11 | .highlight .cs { color: #999999; font-weight: bold; }
12 | .highlight .gd { background-color: #ffdddd; color: #000000; }
13 | .highlight .gd .x { background-color: #ffaaaa; color: #000000; }
14 | .highlight .ge { font-style: italic; }
15 | .highlight .gr { color: #aa0000; }
16 | .highlight .gh { color: #999999; }
17 | .highlight .gi { background-color: #ddffdd; color: #000000; }
18 | .highlight .gi .x { background-color: #aaffaa; color: #000000; }
19 | .highlight .go { color: #888888; }
20 | .highlight .gp { color: #555555; }
21 | .highlight .gs { font-weight: bold; }
22 | .highlight .gu { color: #800080; font-weight: bold; }
23 | .highlight .gt { color: #aa0000; }
24 | .highlight .kc { font-weight: bold; }
25 | .highlight .kd { font-weight: bold; }
26 | .highlight .kn { font-weight: bold; }
27 | .highlight .kp { font-weight: bold; }
28 | .highlight .kr { font-weight: bold; }
29 | .highlight .kt { color: #445588; font-weight: bold; }
30 | .highlight .m { color: #009999; }
31 | .highlight .s { color: #d14; }
32 | .highlight .na { color: #008080; }
33 | .highlight .nb { color: #0086B3; }
34 | .highlight .nc { color: #445588; font-weight: bold; }
35 | .highlight .no { color: #008080; }
36 | .highlight .ni { color: #800080; }
37 | .highlight .ne { color: #990000; font-weight: bold; }
38 | .highlight .nf { color: #990000; font-weight: bold; }
39 | .highlight .nn { color: #555555; }
40 | .highlight .nt { color: #000080; }
41 | .highlight .nv { color: #008080; }
42 | .highlight .ow { font-weight: bold; }
43 | .highlight .w { color: #bbbbbb; }
44 | .highlight .mf { color: #009999; }
45 | .highlight .mh { color: #009999; }
46 | .highlight .mi { color: #009999; }
47 | .highlight .mo { color: #009999; }
48 | .highlight .sb { color: #d14; }
49 | .highlight .sc { color: #d14; }
50 | .highlight .sd { color: #d14; }
51 | .highlight .s2 { color: #d14; }
52 | .highlight .se { color: #d14; }
53 | .highlight .sh { color: #d14; }
54 | .highlight .si { color: #d14; }
55 | .highlight .sx { color: #d14; }
56 | .highlight .sr { color: #009926; }
57 | .highlight .s1 { color: #d14; }
58 | .highlight .ss { color: #990073; }
59 | .highlight .bp { color: #999999; }
60 | .highlight .vc { color: #008080; }
61 | .highlight .vg { color: #008080; }
62 | .highlight .vi { color: #008080; }
63 | .highlight .il { color: #009999; }
64 | .highlight .gc { background-color: #EAF2F5; color: #999; }
65 |
--------------------------------------------------------------------------------
/boxes/this-is-a-box-1/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: This is a box
4 | box: true
5 | summary: Boxes make up a small 2 column grid on larger screens and shrink to single column on smaller screens
6 | ---
7 |
--------------------------------------------------------------------------------
/boxes/this-is-a-box-2/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: This is a box
4 | box: true
5 | summary: Boxes make up a small 2 column grid on larger screens and shrink to single column on smaller screens
6 | ---
7 |
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Docs
3 | nav: projects
4 | subnav: exemplar-docs
5 | layout: default
6 | ---
7 |
8 | Exemplar doesn't have much in the way of documentation. Use git to download, tweak in your favorite editor and "rake -T" to get a list of jekyll/sass/git tasks.
9 |
10 | This is here as more of an example.
11 |
12 | {% highlight ruby %}
13 | class Foo < Bar
14 | def foobar
15 | return "This shows what code snippets look like in Exemplar"
16 | end
17 | end
18 | {% endhighlight %}
19 |
--------------------------------------------------------------------------------
/font/bebas-neue/BebasNeue-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/bebas-neue/BebasNeue-webfont.eot
--------------------------------------------------------------------------------
/font/bebas-neue/BebasNeue-webfont.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG webfont generated by Font Squirrel.
6 | Copyright : Copyright c 2010 by Ryoichi Tsunekawa All rights reserved
7 | Designer : Ryoichi Tsunekawa
8 | Foundry : Ryoichi Tsunekawa
9 |
10 |
11 |
12 |
146 |
--------------------------------------------------------------------------------
/font/bebas-neue/BebasNeue-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/bebas-neue/BebasNeue-webfont.ttf
--------------------------------------------------------------------------------
/font/bebas-neue/BebasNeue-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/bebas-neue/BebasNeue-webfont.woff
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Black-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Black-webfont.eot
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Black-webfont.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG webfont generated by Font Squirrel.
6 | Copyright : Copyright 2010 2012 Adobe Systems Incorporated All Rights Reserved
7 | Designer : Paul D Hunt
8 | Foundry : Adobe Systems Incorporated
9 | Foundry URL : httpwwwadobecomtype
10 |
11 |
12 |
13 |
146 |
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Black-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Black-webfont.ttf
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Black-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Black-webfont.woff
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Bold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Bold-webfont.eot
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Bold-webfont.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG webfont generated by Font Squirrel.
6 | Copyright : Copyright 2010 2012 Adobe Systems Incorporated All Rights Reserved
7 | Designer : Paul D Hunt
8 | Foundry : Adobe Systems Incorporated
9 | Foundry URL : httpwwwadobecomtype
10 |
11 |
12 |
13 |
146 |
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Bold-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Bold-webfont.ttf
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Bold-webfont.woff
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-ExtraLight-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-ExtraLight-webfont.eot
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-ExtraLight-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-ExtraLight-webfont.ttf
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-ExtraLight-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-ExtraLight-webfont.woff
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Light-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Light-webfont.eot
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Light-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Light-webfont.ttf
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Light-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Light-webfont.woff
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Regular-webfont.eot
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Regular-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Regular-webfont.ttf
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Regular-webfont.woff
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Semibold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Semibold-webfont.eot
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Semibold-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Semibold-webfont.ttf
--------------------------------------------------------------------------------
/font/source-code-pro/SourceCodePro-Semibold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-code-pro/SourceCodePro-Semibold-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Black-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Black-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Black-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Black-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Black-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Black-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-BlackIt-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-BlackIt-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-BlackIt-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-BlackIt-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-BlackIt-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-BlackIt-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Bold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Bold-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Bold-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Bold-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Bold-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-BoldIt-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-BoldIt-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-BoldIt-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-BoldIt-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-BoldIt-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-BoldIt-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-ExtraLight-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-ExtraLight-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-ExtraLight-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-ExtraLight-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-ExtraLight-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-ExtraLight-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-ExtraLightIt-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-It-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-It-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-It-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-It-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-It-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-It-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Light-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Light-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Light-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Light-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Light-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Light-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-LightIt-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-LightIt-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-LightIt-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-LightIt-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-LightIt-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-LightIt-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Regular-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Regular-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Regular-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Regular-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Semibold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Semibold-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Semibold-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Semibold-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-Semibold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-Semibold-webfont.woff
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.eot
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.ttf
--------------------------------------------------------------------------------
/font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/font/source-sans-pro/SourceSansPro-SemiboldIt-webfont.woff
--------------------------------------------------------------------------------
/img/octocat16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/img/octocat16.png
--------------------------------------------------------------------------------
/img/octocat32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/img/octocat32.png
--------------------------------------------------------------------------------
/img/twitter16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/img/twitter16.png
--------------------------------------------------------------------------------
/img/twitter32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tybenz/exemplar/c52c6d576c6529e2d2d12b23a43000215439acd7/img/twitter32.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Exemplar
3 | nav: projects
4 | subnav: exemplar-home
5 | layout: default
6 | ---
7 |
8 | This is an example of the default theme I use for my jekyll sites. This
9 | theme is used for my blog and my project sites.
10 |
11 |
12 |
13 | This site uses a combination of the following:
14 |
15 |
16 |
17 | Jekyll : Static site generatorSass : CSS preprocessorBourbon : Set of generic Sass mixinsNeat : Set of grid-based Sass mixins (dependent on Bourbon)Fonts: Bebas Neue , Adobe Source Sans Pro , Adobe Source Code Pro
22 |
23 |
24 |
27 |
31 |
32 |
33 | This is what a post looks like. Straight forward. Date goes above the header. Content goes below the header.
34 |
35 |
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
36 |
38 |
39 | Boxes
40 |
62 |
--------------------------------------------------------------------------------
/js/matchmedia.js:
--------------------------------------------------------------------------------
1 | /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
2 | window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.appendChild(g);return function(h){g.innerHTML='';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);
3 |
--------------------------------------------------------------------------------
/js/picturefill.js:
--------------------------------------------------------------------------------
1 | /*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
2 |
3 | (function( w ){
4 |
5 | // Enable strict mode
6 | "use strict";
7 |
8 | w.picturefill = function() {
9 | var ps = w.document.getElementsByTagName( "div" );
10 |
11 | // Loop the pictures
12 | for( var i = 0, il = ps.length; i < il; i++ ){
13 | if( ps[ i ].getAttribute( "data-picture" ) !== null ){
14 |
15 | var sources = ps[ i ].getElementsByTagName( "div" ),
16 | matches = [];
17 |
18 | // See if which sources match
19 | for( var j = 0, jl = sources.length; j < jl; j++ ){
20 | var media = sources[ j ].getAttribute( "data-media" );
21 | // if there's no media specified, OR w.matchMedia is supported
22 | if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
23 | matches.push( sources[ j ] );
24 | }
25 | }
26 |
27 | // Find any existing img element in the picture element
28 | var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
29 |
30 | if( matches.length ){
31 | if( !picImg ){
32 | picImg = w.document.createElement( "img" );
33 | picImg.alt = ps[ i ].getAttribute( "data-alt" );
34 | ps[ i ].appendChild( picImg );
35 | }
36 |
37 | picImg.src = matches.pop().getAttribute( "data-src" );
38 | }
39 | else if( picImg ){
40 | ps[ i ].removeChild( picImg );
41 | }
42 | }
43 | }
44 | };
45 |
46 | // Run on resize and domready (w.load as a fallback)
47 | if( w.addEventListener ){
48 | w.addEventListener( "resize", w.picturefill, false );
49 | w.addEventListener( "DOMContentLoaded", function(){
50 | w.picturefill();
51 | // Run once only
52 | w.removeEventListener( "load", w.picturefill, false );
53 | }, false );
54 | w.addEventListener( "load", w.picturefill, false );
55 | }
56 | else if( w.attachEvent ){
57 | w.attachEvent( "onload", w.picturefill );
58 | }
59 |
60 | }( this ));
61 |
--------------------------------------------------------------------------------
10 | 
17 | 