mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
boom
This commit is contained in:
Jina Bolton
parent
f38ae003c4
commit
3b465c6ffa
@ -112,6 +112,8 @@ set :js_dir, 'assets/javascripts'
|
||||
|
||||
set :images_dir, 'assets/images'
|
||||
|
||||
activate :cache_buster
|
||||
|
||||
# ----------------------------------------------
|
||||
# Build-specific configuration
|
||||
# ----------------------------------------------
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<IfModule mod_headers.c>
|
||||
Header set X-UA-Compatible "IE=Edge,chrome=1"
|
||||
# mod_headers can't match by content-type, but we don't want to send this header on *everything*...
|
||||
<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
|
||||
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webm|webp|woff|xml|xpi)$">
|
||||
Header unset X-UA-Compatible
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
@ -53,7 +53,7 @@
|
||||
<IfModule mod_setenvif.c>
|
||||
<IfModule mod_headers.c>
|
||||
# mod_headers, y u no match by Content-Type?!
|
||||
<FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
|
||||
<FilesMatch "\.(gif|ico|jpe?g|png|svg|svgz|webp)$">
|
||||
SetEnvIf Origin ":" IS_CORS
|
||||
Header set Access-Control-Allow-Origin "*" env=IS_CORS
|
||||
</FilesMatch>
|
||||
@ -70,7 +70,7 @@
|
||||
# subdomains like "subdomain.example.com".
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
|
||||
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
|
||||
Header set Access-Control-Allow-Origin "*"
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
@ -87,12 +87,12 @@ AddType application/javascript js jsonp
|
||||
AddType application/json json
|
||||
|
||||
# Audio
|
||||
AddType audio/ogg oga ogg
|
||||
AddType audio/mp4 m4a f4a f4b
|
||||
AddType audio/ogg oga ogg
|
||||
|
||||
# Video
|
||||
AddType video/ogg ogv
|
||||
AddType video/mp4 mp4 m4v f4v f4p
|
||||
AddType video/ogg ogv
|
||||
AddType video/webm webm
|
||||
AddType video/x-flv flv
|
||||
|
||||
@ -105,23 +105,23 @@ AddEncoding gzip svgz
|
||||
# Webfonts
|
||||
AddType application/vnd.ms-fontobject eot
|
||||
AddType application/x-font-ttf ttf ttc
|
||||
AddType font/opentype otf
|
||||
AddType application/x-font-woff woff
|
||||
AddType font/opentype otf
|
||||
|
||||
# Assorted types
|
||||
AddType image/x-icon ico
|
||||
AddType image/webp webp
|
||||
AddType text/cache-manifest appcache manifest
|
||||
AddType text/x-component htc
|
||||
AddType application/xml rss atom xml rdf
|
||||
AddType application/octet-stream safariextz
|
||||
AddType application/x-chrome-extension crx
|
||||
AddType application/x-opera-extension oex
|
||||
AddType application/x-xpinstall xpi
|
||||
AddType application/octet-stream safariextz
|
||||
AddType application/x-web-app-manifest+json webapp
|
||||
AddType text/x-vcard vcf
|
||||
AddType application/x-shockwave-flash swf
|
||||
AddType application/x-web-app-manifest+json webapp
|
||||
AddType application/x-xpinstall xpi
|
||||
AddType application/xml rss atom xml rdf
|
||||
AddType image/webp webp
|
||||
AddType image/x-icon ico
|
||||
AddType text/cache-manifest appcache manifest
|
||||
AddType text/vtt vtt
|
||||
AddType text/x-component htc
|
||||
AddType text/x-vcard vcf
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
@ -164,6 +164,9 @@ AddType text/vtt vtt
|
||||
</IfModule>
|
||||
|
||||
# Compress all output labeled with one of the following MIME-types
|
||||
# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
|
||||
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines as
|
||||
# `AddOutputFilterByType` is still in the core directives)
|
||||
<IfModule mod_filter.c>
|
||||
AddOutputFilterByType DEFLATE application/atom+xml \
|
||||
application/javascript \
|
||||
@ -211,39 +214,39 @@ AddType text/vtt vtt
|
||||
ExpiresByType text/html "access plus 0 seconds"
|
||||
|
||||
# Data
|
||||
ExpiresByType text/xml "access plus 0 seconds"
|
||||
ExpiresByType application/xml "access plus 0 seconds"
|
||||
ExpiresByType application/json "access plus 0 seconds"
|
||||
ExpiresByType application/xml "access plus 0 seconds"
|
||||
ExpiresByType text/xml "access plus 0 seconds"
|
||||
|
||||
# Feed
|
||||
ExpiresByType application/rss+xml "access plus 1 hour"
|
||||
ExpiresByType application/atom+xml "access plus 1 hour"
|
||||
ExpiresByType application/rss+xml "access plus 1 hour"
|
||||
|
||||
# Favicon (cannot be renamed)
|
||||
ExpiresByType image/x-icon "access plus 1 week"
|
||||
|
||||
# Media: images, video, audio
|
||||
ExpiresByType image/gif "access plus 1 month"
|
||||
ExpiresByType image/png "access plus 1 month"
|
||||
ExpiresByType image/jpeg "access plus 1 month"
|
||||
ExpiresByType video/ogg "access plus 1 month"
|
||||
ExpiresByType audio/ogg "access plus 1 month"
|
||||
ExpiresByType image/gif "access plus 1 month"
|
||||
ExpiresByType image/jpeg "access plus 1 month"
|
||||
ExpiresByType image/png "access plus 1 month"
|
||||
ExpiresByType video/mp4 "access plus 1 month"
|
||||
ExpiresByType video/ogg "access plus 1 month"
|
||||
ExpiresByType video/webm "access plus 1 month"
|
||||
|
||||
# HTC files (css3pie)
|
||||
ExpiresByType text/x-component "access plus 1 month"
|
||||
|
||||
# Webfonts
|
||||
ExpiresByType application/x-font-ttf "access plus 1 month"
|
||||
ExpiresByType font/opentype "access plus 1 month"
|
||||
ExpiresByType application/x-font-woff "access plus 1 month"
|
||||
ExpiresByType image/svg+xml "access plus 1 month"
|
||||
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
|
||||
ExpiresByType application/x-font-ttf "access plus 1 month"
|
||||
ExpiresByType application/x-font-woff "access plus 1 month"
|
||||
ExpiresByType font/opentype "access plus 1 month"
|
||||
ExpiresByType image/svg+xml "access plus 1 month"
|
||||
|
||||
# CSS and JavaScript
|
||||
ExpiresByType text/css "access plus 1 year"
|
||||
ExpiresByType application/javascript "access plus 1 year"
|
||||
ExpiresByType text/css "access plus 1 year"
|
||||
|
||||
</IfModule>
|
||||
|
||||
@ -326,7 +329,7 @@ FileETag None
|
||||
# 'foo' is your directory.
|
||||
|
||||
# If your web host doesn't allow the FollowSymlinks option, you may need to
|
||||
# comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the
|
||||
# comment it out and use `Options +SymLinksIfOwnerMatch`, but be aware of the
|
||||
# performance impact: http://goo.gl/Mluzd
|
||||
|
||||
<IfModule mod_rewrite.c>
|
||||
@ -385,10 +388,10 @@ FileETag None
|
||||
|
||||
# If you're not using the build script to manage your filename version revving,
|
||||
# you might want to consider enabling this, which will route requests for
|
||||
# /css/style.20110203.css to /css/style.css
|
||||
# `/css/style.20110203.css` to `/css/style.css`.
|
||||
|
||||
# To understand why this is important and a better idea than all.css?v1231,
|
||||
# read: github.com/h5bp/html5-boilerplate/wiki/cachebusting
|
||||
# please refer to the bundled documentation about `.htaccess`.
|
||||
|
||||
# <IfModule mod_rewrite.c>
|
||||
# RewriteCond %{REQUEST_FILENAME} !-f
|
||||
@ -470,7 +473,7 @@ AddCharset utf-8 .atom .css .js .json .rss .vtt .xml
|
||||
# Block access to backup and source files. These files may be left by some
|
||||
# text/html editors and pose a great security danger, when anyone can access
|
||||
# them.
|
||||
<FilesMatch "(\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$">
|
||||
<FilesMatch "(\.(bak|config|dist|fla|inc|ini|log|psd|sh|sql|swp)|~)$">
|
||||
Order allow,deny
|
||||
Deny from all
|
||||
Satisfy All
|
||||
@ -535,6 +538,6 @@ AddCharset utf-8 .atom .css .js .json .rss .vtt .xml
|
||||
# php_value error_append_string " "
|
||||
|
||||
# Increase cookie security
|
||||
<IfModule php5_module>
|
||||
<IfModule mod_php5.c>
|
||||
php_value session.cookie_httponly true
|
||||
</IfModule>
|
||||
</IfModule>
|
||||
@ -154,4 +154,4 @@
|
||||
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
0
source/assets/images/.gitignore
vendored
Normal file
0
source/assets/images/.gitignore
vendored
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 724 B |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
@ -1,28 +0,0 @@
|
||||
// ===========================================================================
|
||||
// FEATURE SLIDESHOW
|
||||
|
||||
|
||||
|
||||
$(function(){
|
||||
// Set starting slide to 1
|
||||
var startSlide = 1;
|
||||
// Get slide number if it exists
|
||||
if (window.location.hash) {
|
||||
startSlide = window.location.hash.replace('#','');
|
||||
}
|
||||
// Initialize Slides
|
||||
$('#slides').slides({
|
||||
preload: true,
|
||||
preloadImage: '/assets/images/slides/loading.gif',
|
||||
generatePagination: true,
|
||||
play: 5000,
|
||||
pause: 2500,
|
||||
hoverPause: true,
|
||||
// Get the starting slide
|
||||
start: startSlide,
|
||||
animationComplete: function(current){
|
||||
// Set the slide number as a hash
|
||||
window.location.hash = '#' + current;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -4,15 +4,15 @@
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Place any jQuery/helper plugins in here.
|
||||
// HTML5 BOILERPLATE
|
||||
|
||||
//= require "vendor/avoid_console_errors"
|
||||
//= require "vendor/slides.jquery"
|
||||
|
||||
// Place any jQuery/helper plugins in here.
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Our Stuff
|
||||
|
||||
//= require "toggle_navigation"
|
||||
//= require "feature_slideshow"
|
||||
//= require "toggle_navigation"
|
||||
@ -1,8 +1,3 @@
|
||||
// ===========================================================================
|
||||
// NAVIGATION SLIDE TOGGLE
|
||||
|
||||
|
||||
|
||||
$(".skip-navigation .icon-button").click(function () {
|
||||
$(".navigation").slideToggle("slow");
|
||||
$('.skip-navigation .button').click(function() {
|
||||
$('.navigation').toggle();
|
||||
});
|
||||
@ -2,7 +2,7 @@
|
||||
// Avoid `console` errors in browsers that lack a console.
|
||||
(function() {
|
||||
var method;
|
||||
var noop = function noop() {};
|
||||
var noop = function () {};
|
||||
var methods = [
|
||||
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
||||
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
||||
|
||||
6
source/assets/javascripts/vendor/jquery.js
vendored
6
source/assets/javascripts/vendor/jquery.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,88 +0,0 @@
|
||||
// ===========================================================================
|
||||
// HELPERS
|
||||
// Useful classes and placeholder selectors for @extend'ing.
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// IMAGE REPLACEMENT
|
||||
|
||||
.image-replacement {
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
*text-indent: -9999em;
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// VISIBILITY
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
|
||||
&.focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// CLEARFIX
|
||||
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:after { clear: both; }
|
||||
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
%clearfix { @include clearfix; }
|
||||
|
||||
@include at-breakpoint($break-iPhone) {
|
||||
%clearfix-iPhone { @include clearfix; }
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
%clearfix-iPhone-wide { @include clearfix; }
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
%clearfix-iPad { @include clearfix; }
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
// ===========================================================================
|
||||
// PRINT
|
||||
// Useful classes and placeholder selectors for @extend'ing.
|
||||
|
||||
|
||||
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: #000 !important; /* Black prints faster: h5bp.com/s */
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
@page { margin: 0.5cm; }
|
||||
|
||||
a {
|
||||
&,
|
||||
&:visited { text-decoration: underline; }
|
||||
|
||||
&[href]:after { content: " (" attr(href) ")"; }
|
||||
|
||||
.ir &,
|
||||
&[href^="javascript:"],
|
||||
&[href^="#"] {
|
||||
&:after { content: ""; }
|
||||
}
|
||||
}
|
||||
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead { display: table-header-group; }
|
||||
|
||||
tr,
|
||||
img { page-break-inside: avoid; }
|
||||
|
||||
img { max-width: 100% !important; }
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 { page-break-after: avoid; }
|
||||
}
|
||||
@ -3,14 +3,26 @@
|
||||
|
||||
|
||||
|
||||
$button-background-color: $hopbush !default;
|
||||
$button-background-hover-color: $bouquet !default;
|
||||
$button-background-active-color: $venus !default;
|
||||
$button-text-color: $white !default;
|
||||
|
||||
|
||||
|
||||
.button {
|
||||
@include tappable-link;
|
||||
@extend %caps;
|
||||
padding: 0 1em;
|
||||
@include tappable;
|
||||
border: 0;
|
||||
@include border-radius(.25em);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: $button-background-color;
|
||||
@include box-shadow(0 -1px 1px $shadow-color inset, 0 1px 1px $highlight-color inset, 0 1px 1px $highlight-color);
|
||||
@include box-shadow-both;
|
||||
@include link($button-text-color, $button-text-color, $button-text-color);
|
||||
@include text-shadow;
|
||||
@include text-shadow-dark;
|
||||
|
||||
#{$hover} { background: $button-background-hover-color; }
|
||||
&:active { background: $button-background-active-color; }
|
||||
|
||||
16
source/assets/stylesheets/components/_current-release.scss
Normal file
16
source/assets/stylesheets/components/_current-release.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// ===========================================================================
|
||||
// CURRENT RELEASE
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone, wide
|
||||
|
||||
@mixin current-release-iPhone {
|
||||
.current-release {
|
||||
@extend %horizontal-list-iPhone;
|
||||
|
||||
dt,
|
||||
dd { display: inline; }
|
||||
}
|
||||
}
|
||||
@ -3,16 +3,27 @@
|
||||
|
||||
|
||||
|
||||
$illustration-size: 4.5em;
|
||||
$illustration-size: 4.5em !default;
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
@include border-radius($illustration-size);
|
||||
padding: 0;
|
||||
width: $illustration-size;
|
||||
height: $illustration-size;
|
||||
background: $callout-background-color;
|
||||
line-height: $illustration-size;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.illustration { text-align: center; }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone, wide
|
||||
|
||||
//@mixin illustrations-iPhone-wide {
|
||||
// .circle {
|
||||
// display: inline-block;
|
||||
// margin: 0 auto;
|
||||
// @include border-radius($illustration-size);
|
||||
// padding: 0;
|
||||
// width: $illustration-size;
|
||||
// height: $illustration-size;
|
||||
// background: $callout-background-color;
|
||||
// line-height: $illustration-size;
|
||||
// text-align: center;
|
||||
// }
|
||||
//}
|
||||
@ -1,11 +0,0 @@
|
||||
// ===========================================================================
|
||||
// INTRODUCTION
|
||||
|
||||
|
||||
|
||||
.introduction {
|
||||
@include at-breakpoint($break-iPad) {
|
||||
@include pad(2, 2, $break-iPad);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -1,107 +0,0 @@
|
||||
// ===========================================================================
|
||||
// JUMP NAVIGATION
|
||||
|
||||
|
||||
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
.jump-navigation {
|
||||
ul {
|
||||
@extend %clearfix-iPhone-wide;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
@include span-columns(4, $break-iPhone-wide);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@include tappable-link;
|
||||
display: block;
|
||||
padding: .375em 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
.jump-navigation {
|
||||
@include span-columns(3, $break-iPad);
|
||||
padding-top: 1.5em;
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.jump-topics {
|
||||
@include span-columns(9 omega, $break-iPad);
|
||||
height: 15em;
|
||||
display: none;
|
||||
background: red;
|
||||
|
||||
.slides-control { background: orange; }
|
||||
}
|
||||
|
||||
#container,
|
||||
#slides { position: relative; }
|
||||
|
||||
.slides_container {
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 45.75em;
|
||||
height: 15em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide {
|
||||
display: block;
|
||||
width: 45.75em;
|
||||
}
|
||||
|
||||
#frame {
|
||||
position:absolute;
|
||||
z-index:0;
|
||||
width:739px;
|
||||
height:341px;
|
||||
top:-3px;
|
||||
left:-80px;
|
||||
}
|
||||
|
||||
#slides .next {
|
||||
left:585px;
|
||||
}
|
||||
|
||||
/*
|
||||
Pagination
|
||||
*/
|
||||
|
||||
.pagination {
|
||||
margin:26px auto 0;
|
||||
width:100px;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
float:left;
|
||||
margin:0 1px;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.pagination li a {
|
||||
display:block;
|
||||
width:12px;
|
||||
height:0;
|
||||
padding-top:12px;
|
||||
@include background(image_url("slides/pagination.png"));
|
||||
background-position:0 0;
|
||||
float:left;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.pagination li.current a {
|
||||
background-position:0 -12px;
|
||||
}
|
||||
}
|
||||
65
source/assets/stylesheets/components/_lists.scss
Normal file
65
source/assets/stylesheets/components/_lists.scss
Normal file
@ -0,0 +1,65 @@
|
||||
// ===========================================================================
|
||||
// LISTS
|
||||
|
||||
|
||||
|
||||
%content-list {
|
||||
@include reset-list;
|
||||
|
||||
li {
|
||||
padding: {
|
||||
top: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin horizontal-list($break-size: false, $container-selector: "ul", $list-selectors: "li", $last-list-selector: $list-selectors) {
|
||||
@if $break-size == false {
|
||||
#{$container-selector} { @extend %clearfix; }
|
||||
|
||||
#{$list-selectors} { @extend %float-left; }
|
||||
|
||||
#{$last-list-selector}:last-child { @extend %float-left-last-child; }
|
||||
}
|
||||
|
||||
@else if $break-size == "iPhone" {
|
||||
#{$container-selector} { @extend %clearfix-iPhone; }
|
||||
|
||||
#{$list-selectors} { @extend %float-left-iPhone; }
|
||||
|
||||
#{$last-list-selector}:last-child { @extend %float-left-last-child-iPhone; }
|
||||
}
|
||||
|
||||
@else if $break-size == "small-tablet" {
|
||||
#{$container-selector} { @extend %clearfix-small-tablet; }
|
||||
|
||||
#{$list-selectors} { @extend %float-left-small-tablet; }
|
||||
|
||||
#{$last-list-selector}:last-child { @extend %float-left-last-child-small-tablet; }
|
||||
}
|
||||
}
|
||||
|
||||
%horizontal-list { @include horizontal-list; }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin components-lists-iPhone {
|
||||
%horizontal-list-iPhone { @include horizontal-list(iPhone); }
|
||||
|
||||
%horizontal-description-list-iPhone { @include horizontal-list(iPhone, "dl", "dt, dd", "dd"); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SMALL TABLET
|
||||
|
||||
@mixin components-lists-small-tablet {
|
||||
%horizontal-list-small-tablet { @include horizontal-list(small-tablet); }
|
||||
}
|
||||
@ -3,24 +3,21 @@
|
||||
|
||||
|
||||
|
||||
$message-background-color: $callout-background-color !default;
|
||||
|
||||
|
||||
|
||||
.message {
|
||||
@extend %chaparral-pro-regular;
|
||||
clear: both;
|
||||
padding: .66666666666667em;
|
||||
background: $callout-background-color;
|
||||
color: $callout-text-color;
|
||||
|
||||
a,
|
||||
strong { @extend %chaparral-pro-semibold; }
|
||||
|
||||
a { @include link(darken($callout-text-color, 5%), darken($callout-text-color, 15%), darken($callout-text-color, 25%)); }
|
||||
|
||||
p,
|
||||
ul {
|
||||
padding: .25em 0;
|
||||
@include font-size($font-size-large);
|
||||
|
||||
&:first-child { padding-top: 0; }
|
||||
&:last-child { padding-bottom: 0; }
|
||||
position: relative;
|
||||
padding: {
|
||||
top: .5em;
|
||||
bottom: .5em;
|
||||
}
|
||||
background: $message-background-color;
|
||||
@include box-shadow-both;
|
||||
|
||||
ul { @include reset-list; }
|
||||
|
||||
strong { @extend %chaparral-pro-semibold; }
|
||||
}
|
||||
18
source/assets/stylesheets/components/_pagination.scss
Normal file
18
source/assets/stylesheets/components/_pagination.scss
Normal file
@ -0,0 +1,18 @@
|
||||
// ===========================================================================
|
||||
// PAGINATION
|
||||
|
||||
|
||||
|
||||
.pagination { display: none; }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
//@mixin pagination-iPhone {
|
||||
// .pagination {
|
||||
// @extend %horizontal-list-iPhone;
|
||||
// display: block;
|
||||
// }
|
||||
//}
|
||||
74
source/assets/stylesheets/components/_quick-starts.scss
Normal file
74
source/assets/stylesheets/components/_quick-starts.scss
Normal file
@ -0,0 +1,74 @@
|
||||
// ===========================================================================
|
||||
// QUICK STARTS
|
||||
|
||||
|
||||
|
||||
.quick-starts {
|
||||
@extend %content-list;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin quick-starts-iPhone {
|
||||
.quick-starts {
|
||||
text-align: left;
|
||||
|
||||
li { @extend %clearfix-iPhone; }
|
||||
|
||||
h3,
|
||||
.description { margin-left: $column-width + $gutter-width; }
|
||||
|
||||
.illustration {
|
||||
@extend %float-left-iPhone;
|
||||
position: relative;
|
||||
top: -1.75em;
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.description { padding-top: 0; }
|
||||
|
||||
pre { text-align: center; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SMALL TABLET
|
||||
|
||||
@mixin quick-starts-small-tablet {
|
||||
.quick-starts {
|
||||
@extend %clearfix-small-tablet;
|
||||
margin: {
|
||||
right: -#{$gutter-width / 2};
|
||||
left: -#{$gutter-width / 2};
|
||||
}
|
||||
|
||||
li {
|
||||
@include float-left;
|
||||
padding: {
|
||||
right: $gutter-width / 2;
|
||||
left: $gutter-width / 2;
|
||||
}
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: .5em;
|
||||
}
|
||||
@include font-size($font-size-large);
|
||||
}
|
||||
|
||||
.illustration { top: -2.125em; }
|
||||
|
||||
.description { min-height: 6.5em; }
|
||||
}
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
// ===========================================================================
|
||||
// QUICK STARTS
|
||||
|
||||
|
||||
|
||||
|
||||
.quick-starts {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone) {
|
||||
.quick-starts {
|
||||
.quick-start-content,
|
||||
li { @extend %clearfix-iPhone; }
|
||||
|
||||
.illustration {
|
||||
@include span-columns(1.5, $break-iPhone);
|
||||
margin-right: 0;
|
||||
padding: {
|
||||
top: 1em;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.description {
|
||||
@include span-columns(3.5 omega, $break-iPhone);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
.quick-starts {
|
||||
.illustration {
|
||||
@include span-columns(1.5, $break-iPhone-wide);
|
||||
margin-right: 0;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
h3,
|
||||
.description,
|
||||
.call-to-action { @include span-columns(6.375 omega, $break-iPhone-wide); }
|
||||
}
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
.quick-starts {
|
||||
@extend %clearfix-iPad;
|
||||
list-style: none;
|
||||
padding-bottom: 2em;
|
||||
|
||||
li {
|
||||
&.command-line { @include span-columns(6, $break-iPad); }
|
||||
&.gui-application { @include span-columns(6 omega, $break-iPad); }
|
||||
}
|
||||
|
||||
.illustration {
|
||||
@include span-columns(3, $break-iPad);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h3,
|
||||
.description,
|
||||
.call-to-action { @include span-columns(9.75 omega, $break-iPad); }
|
||||
|
||||
.description { min-height: 4em; }
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
// ===========================================================================
|
||||
// MESSAGES
|
||||
|
||||
|
||||
|
||||
.release-information {
|
||||
padding: .5em 0;
|
||||
|
||||
.main & .container {
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
ul { @include font-size($font-size, $line-height-alt); }
|
||||
|
||||
strong {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone) {
|
||||
ul { @extend %horizontal-list-iPhone; }
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
padding: 1em 0;
|
||||
|
||||
p,
|
||||
ul {
|
||||
@include float-left;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p { margin-right: 2em; }
|
||||
}
|
||||
}
|
||||
32
source/assets/stylesheets/components/_slides.scss
Normal file
32
source/assets/stylesheets/components/_slides.scss
Normal file
@ -0,0 +1,32 @@
|
||||
// ===========================================================================
|
||||
// SLIDES
|
||||
|
||||
|
||||
|
||||
.slide-navigation li { padding: .25em 0; }
|
||||
|
||||
.slides { @extend %content-list; }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin slides-iPhone {
|
||||
.slide-navigation {
|
||||
@extend %horizontal-list-iPhone;
|
||||
|
||||
li {
|
||||
width: columns(2);
|
||||
|
||||
&:nth-child(even) { @extend %float-left-last-child-iPhone; }
|
||||
}
|
||||
}
|
||||
|
||||
.slides {
|
||||
padding: {
|
||||
top: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
// ===========================================================================
|
||||
// STICKY FOOTER
|
||||
|
||||
|
||||
|
||||
//$footer-height: 10.5em;
|
||||
//
|
||||
//@include at-breakpoint(60em) {
|
||||
// html,
|
||||
// body { height: 100%; }
|
||||
//
|
||||
// .page {
|
||||
// margin-bottom: -$footer-height;
|
||||
// min-height: 100%;
|
||||
// height: auto !important;
|
||||
// height: 100%;
|
||||
// }
|
||||
//
|
||||
// .footer-shim,
|
||||
// .contentinfo {
|
||||
// clear: both;
|
||||
// height: $footer-height;
|
||||
// }
|
||||
//}
|
||||
@ -1,71 +0,0 @@
|
||||
// ===========================================================================
|
||||
// COLOR
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// REFERENCE FOR CLARIFICATION ONLY. USE SEMANTIC NAMES BELOW
|
||||
|
||||
$black: #000 !default;
|
||||
$grey-darkest: lighten($black, 12.5%) !default;
|
||||
$grey-darker: lighten($black, 25%) !default;
|
||||
$grey-dark: lighten($black, 37.5%) !default;
|
||||
$grey: lighten($black, 50%) !default;
|
||||
$grey-light: lighten($black, 62.5%) !default;
|
||||
$grey-lighter: lighten($black, 75%) !default;
|
||||
$grey-lightest: lighten($black, 87.5%) !default;
|
||||
$white: lighten($black, 100%) !default;
|
||||
|
||||
$hopbush: #c69 !default;
|
||||
$bouquet: #b37399 !default;
|
||||
$venus: #998099 !default;
|
||||
$pale-sky: #6b717f !default;
|
||||
$midnight-blue: #036 !default;
|
||||
$regent-grey: #808c99 !default;
|
||||
$iron: #dadbdf !default;
|
||||
$wafer: #e1d7d2 !default;
|
||||
$dawn-pink: #f2ece4 !default;
|
||||
$nebula: #d2e1dd !default;
|
||||
$patina: #699 !default;
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SEMANTIC COLOR NAMES
|
||||
|
||||
$shadow-color: rgba($black, .5) !default;
|
||||
$highlight-color: rgba($white, .5) !default;
|
||||
|
||||
$background-color: $white !default;
|
||||
$background-alt-color: lighten($iron, 10%) !default;
|
||||
$text-color: darken($pale-sky, 10%) !default;
|
||||
$heading-1-text-color: $venus !default;
|
||||
$heading-2-text-color: $pale-sky !default;
|
||||
$heading-3-text-color: $regent-grey !default;
|
||||
$strong-text-color: $grey-darkest !default;
|
||||
$border-color: $grey-lighter !default;
|
||||
|
||||
$link-color: $midnight-blue !default;
|
||||
$link-hover-color: darken($link-color, 10%) !default;
|
||||
$link-active-color: darken($link-color, 20%) !default;
|
||||
|
||||
$button-background-color: $hopbush !default;
|
||||
$button-background-hover-color: $bouquet !default;
|
||||
$button-background-active-color: $venus !default;
|
||||
$button-text-color: $white !default;
|
||||
|
||||
$selection-background-color: $hopbush !default;
|
||||
$selection-text-color: $white !default;
|
||||
|
||||
$callout-background-color: $nebula !default;
|
||||
$callout-text-color: darken($patina, 25%) !default;
|
||||
|
||||
$code-background-color: $iron !default;
|
||||
$code-text-color: $midnight-blue !default;
|
||||
|
||||
$navigation-background-color: $pale-sky !default;
|
||||
$navigation-text-color: $iron !default;
|
||||
$navigation-border-color: $regent-grey !default;
|
||||
|
||||
$contentinfo-background-color: $dawn-pink !default;
|
||||
$contentinfo-border-color: $wafer !default;
|
||||
50
source/assets/stylesheets/dependencies/_colors.scss
Normal file
50
source/assets/stylesheets/dependencies/_colors.scss
Normal file
@ -0,0 +1,50 @@
|
||||
// ===========================================================================
|
||||
// COLOR
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// REFERENCE FOR CLARIFICATION ONLY. USE SEMANTIC NAMES BELOW
|
||||
|
||||
$black: #000 !default;
|
||||
$grey-darkest: lighten($black, 12.5%) !default;
|
||||
$grey-darker: lighten($black, 25%) !default;
|
||||
$grey-dark: lighten($black, 37.5%) !default;
|
||||
$grey: lighten($black, 50%) !default;
|
||||
$grey-light: lighten($black, 62.5%) !default;
|
||||
$grey-lighter: lighten($black, 75%) !default;
|
||||
$grey-lightest: lighten($black, 87.5%) !default;
|
||||
$white: lighten($black, 100%) !default;
|
||||
|
||||
$hopbush: #c69 !default;
|
||||
$bouquet: #b37399 !default;
|
||||
$venus: #998099 !default;
|
||||
$pale-sky: #6b717f !default;
|
||||
$midnight-blue: #036 !default;
|
||||
$regent-grey: #808c99 !default;
|
||||
$iron: #dadbdf !default;
|
||||
$wafer: #e1d7d2 !default;
|
||||
$dawn-pink: #f2ece4 !default;
|
||||
$nebula: #d2e1dd !default;
|
||||
$patina: #699 !default;
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// GENERAL SEMANTIC COLOR NAMES
|
||||
|
||||
$shadow-color: rgba($black, .25) !default;
|
||||
$highlight-color: rgba($white, .75) !default;
|
||||
|
||||
$background-color: $white !default;
|
||||
$background-alt-color: lighten($iron, 10%) !default;
|
||||
|
||||
$text-color: darken($pale-sky, 10%) !default;
|
||||
$strong-text-color: $grey-darkest !default;
|
||||
|
||||
$border-color: $grey-lighter !default;
|
||||
|
||||
$selection-background-color: $hopbush !default;
|
||||
$selection-text-color: $white !default;
|
||||
|
||||
$callout-background-color: $nebula !default;
|
||||
@ -15,19 +15,13 @@
|
||||
|
||||
[data-icon] {
|
||||
&:before {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@include font-size($font-size-large);
|
||||
@include font-size($font-size);
|
||||
font-family: "Pictos";
|
||||
text: {
|
||||
align: center;
|
||||
transform: none;
|
||||
}
|
||||
text-transform: none;
|
||||
vertical-align: middle;
|
||||
content: attr(data-icon);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button { @extend .button; }
|
||||
|
||||
a.icon-button { padding: .375em 0; }
|
||||
}
|
||||
25
source/assets/stylesheets/dependencies/_layout.scss
Normal file
25
source/assets/stylesheets/dependencies/_layout.scss
Normal file
@ -0,0 +1,25 @@
|
||||
// ===========================================================================
|
||||
// MEASUREMENTS
|
||||
|
||||
|
||||
|
||||
$total-columns: 4;
|
||||
$column-width: 48px;
|
||||
$gutter-width: 16px;
|
||||
$grid-padding: $gutter-width;
|
||||
|
||||
|
||||
|
||||
$iPhone: #{320 / $font-size}em;
|
||||
$small-tablet: #{480 / $font-size}em;
|
||||
$iPad: #{768 / $font-size}em;
|
||||
$iPad-wide: #{1024 / $font-size}em;
|
||||
|
||||
|
||||
|
||||
$z-index-dropdown: 1000 !default;
|
||||
$z-index-popover: 1010 !default;
|
||||
$z-index-tooltip: 1020 !default;
|
||||
$z-index-fixed: 1030 !default;
|
||||
$z-index-modal-background: 1040 !default;
|
||||
$z-index-modal: 1050 !default;
|
||||
@ -1,62 +0,0 @@
|
||||
// ===========================================================================
|
||||
// MEASUREMENTS
|
||||
|
||||
|
||||
|
||||
$base-unit: 4;
|
||||
|
||||
$font-size: 16;
|
||||
$font-size-small: $font-size * .75;
|
||||
$font-size-large: $font-size * 1.5;
|
||||
$font-size-larger: $font-size * 2;
|
||||
$font-size-largest: $font-size * 3;
|
||||
|
||||
$line-height: 1.5;
|
||||
$line-height-alt: 1.25;
|
||||
$line-height-heading: 1;
|
||||
|
||||
$baseline: #{$font-size * $line-height}px;
|
||||
|
||||
|
||||
|
||||
$total-columns: 9;
|
||||
$column-width: 2.75em;
|
||||
$gutter-width: 1em;
|
||||
$grid-padding: $gutter-width;
|
||||
|
||||
|
||||
|
||||
$break-iPhone: 5;
|
||||
$break-iPhone-wide: 8;
|
||||
$break-iPad: 13;
|
||||
|
||||
|
||||
|
||||
$z-index-dropdown: 1000 !default;
|
||||
$z-index-popover: 1010 !default;
|
||||
$z-index-tooltip: 1020 !default;
|
||||
$z-index-fixed: 1030 !default;
|
||||
$z-index-modal-background: 1040 !default;
|
||||
$z-index-modal: 1050 !default;
|
||||
|
||||
|
||||
|
||||
@mixin font-size($size-setting: $font-size, $lead-setting: $line-height) {
|
||||
font: {
|
||||
size: #{$size-setting}px;
|
||||
size: #{$size-setting / 10}rem;
|
||||
}
|
||||
line-height: $lead-setting;
|
||||
}
|
||||
|
||||
|
||||
|
||||
%block-text {
|
||||
margin: 0;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
%heading-text {
|
||||
margin: 0;
|
||||
padding: .75em 0 .25em;
|
||||
}
|
||||
@ -3,47 +3,24 @@
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// EASY LINK COLORS
|
||||
|
||||
$hover: "&:hover, &:focus";
|
||||
|
||||
@mixin link($link-setting: $link-color, $hover-setting: $link-hover-color, $active-setting: $link-active-color) {
|
||||
&,
|
||||
&:visited { color: $link-setting; }
|
||||
|
||||
#{$hover} { color: $hover-setting; }
|
||||
|
||||
&:active { color: $active-setting; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// TEXT SHADOWS
|
||||
|
||||
@mixin text-shadow($color-setting: $shadow-color) { text-shadow: 0 -1px 1px $color-setting; }
|
||||
@mixin text-shadow-dark($color-setting: $shadow-color) {
|
||||
@include text-shadow(0 -1px 1px $color-setting);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// ALL CAPS
|
||||
|
||||
@mixin caps {
|
||||
@extend %source-sans-pro-bold;
|
||||
@include font-size($font-size, $line-height-alt);
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
@mixin text-shadow-light($color-setting: $highlight-color) {
|
||||
@include text-shadow(0 1px 1px $color-setting);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// TAPPABLE LINKS
|
||||
// BOX SHADOWS
|
||||
|
||||
@mixin tappable-link {
|
||||
display: inline-block;
|
||||
padding: .875em 2em;
|
||||
text-align: center;
|
||||
@include caps;
|
||||
@mixin box-shadow-both($dark-color-setting: $shadow-color,
|
||||
$light-color-setting: $highlight-color) {
|
||||
@include box-shadow(0 1px 1px $light-color-setting inset,
|
||||
0 1px 1px $dark-color-setting);
|
||||
}
|
||||
@ -3,6 +3,22 @@
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// MEASUREMENTS
|
||||
|
||||
$font-size: 16;
|
||||
|
||||
$font-size-small: $font-size / 1.25;
|
||||
$font-size-large: $font-size * 1.25;
|
||||
$font-size-x-large: $font-size-large * 1.25;
|
||||
$font-size-xx-large: $font-size-x-large * 1.25;
|
||||
|
||||
$line-height: 1.5;
|
||||
$line-height-incremental: 1.25;
|
||||
$line-height-reset: 1;
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FONT STACKS
|
||||
|
||||
@ -25,10 +41,14 @@ $chaparral-pro-semibold: "chaparral-pro-n6", "chaparral-pro", $serif !
|
||||
// ---------------------------------------------------------------------------
|
||||
// FONT SETUP
|
||||
|
||||
@mixin font-face($family-setting: $source-sans-pro-regular, $weight-setting: 400, $style-setting: normal) {
|
||||
@mixin font-face($family-setting: $source-sans-pro-regular, $weight-setting: false, $style-setting: false) {
|
||||
font: {
|
||||
style: $style-setting;
|
||||
weight: $weight-setting;
|
||||
@if $style-setting != false {
|
||||
style: $style-setting;
|
||||
}
|
||||
@if $weight-setting != false {
|
||||
weight: $weight-setting;
|
||||
}
|
||||
family: $family-setting;
|
||||
}
|
||||
}
|
||||
@ -36,12 +56,14 @@ $chaparral-pro-semibold: "chaparral-pro-n6", "chaparral-pro", $serif !
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FONT PLACEHOLDER SELECTORS FOR @EXTEND'ING
|
||||
// FONT SIZES
|
||||
|
||||
%source-code-pro-regular { @include font-face($source-code-pro-regular); }
|
||||
|
||||
%source-sans-pro-regular { @include font-face($source-sans-pro-regular); }
|
||||
%source-sans-pro-bold { @include font-face($source-sans-pro-bold, 600); }
|
||||
|
||||
%chaparral-pro-regular { @include font-face($chaparral-pro-regular); }
|
||||
%chaparral-pro-semibold { @include font-face($chaparral-pro-semibold, 600); }
|
||||
@mixin font-size($size-setting: $font-size, $lead-setting: false) {
|
||||
font: {
|
||||
size: #{$size-setting}px;
|
||||
size: #{$size-setting / 10}rem;
|
||||
}
|
||||
@if $lead-setting != false {
|
||||
line-height: $lead-setting;
|
||||
}
|
||||
}
|
||||
@ -3,21 +3,28 @@
|
||||
|
||||
|
||||
|
||||
$code-background-color: $iron !default;
|
||||
$code-text-color: $midnight-blue !default;
|
||||
|
||||
|
||||
|
||||
pre,
|
||||
code {
|
||||
@extend %source-code-pro-regular;
|
||||
padding: .5em 1em;
|
||||
@include font-size($font-size-small, $line-height-heading);
|
||||
letter-spacing: -0.05em;
|
||||
@include font-size($font-size-small);
|
||||
background: $code-background-color;
|
||||
color: $code-text-color;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .125em .5em;
|
||||
line-height: $line-height-reset;
|
||||
}
|
||||
|
||||
pre {
|
||||
line-height: $line-height;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
margin: .625em 0;
|
||||
padding: 1em;
|
||||
|
||||
code { padding: 0; }
|
||||
}
|
||||
@ -8,10 +8,18 @@ input,
|
||||
select,
|
||||
textarea { color: $text-color; }
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea { resize: vertical; }
|
||||
@ -3,32 +3,48 @@
|
||||
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 { @extend %heading-text; }
|
||||
$heading-1-text-color: $venus !default;
|
||||
$heading-2-text-color: $pale-sky !default;
|
||||
$heading-3-text-color: $regent-grey !default;
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// MOBILE
|
||||
|
||||
#{headings(1, 3)} {
|
||||
@extend %block-text;
|
||||
line-height: $line-height-reset;
|
||||
}
|
||||
|
||||
h1,
|
||||
h3 {
|
||||
@extend %chaparral-pro-regular;
|
||||
@include font-size($font-size-larger, $line-height-heading);
|
||||
letter-spacing: -0.05em;
|
||||
color: $heading-1-text-color;
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
@include font-size($font-size-largest, $line-height-heading);
|
||||
}
|
||||
h1 {
|
||||
@include font-size($font-size-x-large);
|
||||
color: $heading-1-text-color;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include caps;
|
||||
@extend %caps;
|
||||
color: $heading-2-text-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size($font-size-large, $line-height-heading);
|
||||
padding-bottom: 0;
|
||||
@include font-size($font-size-large);
|
||||
color: $heading-3-text-color;
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
@include font-size($font-size-larger, $line-height-heading);
|
||||
}
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin headings-iPhone {
|
||||
h1 { @include font-size($font-size-xx-large); }
|
||||
h3 { @include font-size($font-size-x-large); }
|
||||
}
|
||||
@ -3,8 +3,49 @@
|
||||
|
||||
|
||||
|
||||
$tappable-size: 44px;
|
||||
|
||||
@mixin tappable {
|
||||
display: inline-block;
|
||||
min-width: $tappable-size;
|
||||
min-height: $tappable-size;
|
||||
line-height: $tappable-size;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// EASY LINK COLORS
|
||||
|
||||
$link-color: $midnight-blue !default;
|
||||
$link-hover-color: darken($link-color, 10%) !default;
|
||||
$link-active-color: darken($link-color, 20%) !default;
|
||||
|
||||
$hover: "&:hover, &:focus";
|
||||
|
||||
@mixin link($link-setting: $link-color, $hover-setting: $link-hover-color, $active-setting: $link-active-color) {
|
||||
|
||||
border-color: mix(mix($link-setting, $white), $white);
|
||||
|
||||
&,
|
||||
&:visited { color: $link-setting; }
|
||||
|
||||
#{$hover} { color: $hover-setting; }
|
||||
|
||||
&:active { color: $active-setting; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// LINK STYLES
|
||||
|
||||
a {
|
||||
@extend %source-sans-pro-bold;
|
||||
text-decoration: none;
|
||||
padding-bottom: 1px;
|
||||
border: {
|
||||
bottom-width: 1px;
|
||||
bottom-style: solid;
|
||||
}
|
||||
@include link;
|
||||
}
|
||||
@ -3,39 +3,25 @@
|
||||
|
||||
|
||||
|
||||
@mixin horizontal-list($break-setting: false) {
|
||||
@if $break-setting == $break-iPhone { @extend %clearfix-iPhone; }
|
||||
@if $break-setting == $break-iPhone-wide { @extend %clearfix-iPhone-wide; }
|
||||
@if $break-setting == $break-iPad { @extend %clearfix-iPad; }
|
||||
@else { @extend %clearfix; }
|
||||
|
||||
@mixin reset-list {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
@include float-left;
|
||||
margin: 0 2em 0 0;
|
||||
|
||||
&:last-child { margin-right: 0; }
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%horizontal-list { @include horizontal-list; }
|
||||
|
||||
@include at-breakpoint($break-iPhone) {
|
||||
%horizontal-list-iPhone { @include horizontal-list($break-iPhone); }
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
%horizontal-list-iPhone-wide { @include horizontal-list($break-iPhone-wide); }
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
%horizontal-list-iPad { @include horizontal-list($break-iPad); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
ul {
|
||||
@extend %block-text;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
nav & { @include reset-list; }
|
||||
}
|
||||
|
||||
dl {
|
||||
@extend %block-text;
|
||||
}
|
||||
|
||||
dd { margin: 0; }
|
||||
@ -3,17 +3,22 @@
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
|
||||
&.rule {
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
border: 0 {
|
||||
top: 1px solid $border-color;
|
||||
}
|
||||
height: 1px;
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
border: 0 {
|
||||
top: 1px solid $border-color;
|
||||
}
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
|
||||
*/
|
||||
|
||||
img { vertical-align: middle; }
|
||||
@ -5,19 +5,28 @@
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
text-rendering: optimizelegibility;
|
||||
text: {
|
||||
rendering: optimizelegibility;
|
||||
align: center;
|
||||
}
|
||||
@include background($background-color image_url("textures/light.gif"));
|
||||
color: $text-color;
|
||||
text-shadow: 0 1px 1px $highlight-color;
|
||||
@include text-shadow-light;
|
||||
}
|
||||
|
||||
body {
|
||||
@extend %source-sans-pro-regular;
|
||||
@include font-size;
|
||||
font: 400 #{$font-size}px/#{$line-height} $source-sans-pro-regular {
|
||||
size: #{$font-size / 10}rem;
|
||||
}
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Selections have to be separate so this one is a mixin.
|
||||
/*
|
||||
* Remove text-shadow in selection highlight: h5bp.com/i
|
||||
* These selection declarations have to be separate.
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
@mixin selection {
|
||||
background: $selection-background-color;
|
||||
color: $selection-text-color;
|
||||
@ -25,4 +34,9 @@ body {
|
||||
}
|
||||
|
||||
::-moz-selection { @include selection; }
|
||||
::selection { @include selection; }
|
||||
::selection { @include selection; }
|
||||
|
||||
%block-text {
|
||||
margin: 0;
|
||||
padding: .5em 0;
|
||||
}
|
||||
@ -3,6 +3,8 @@
|
||||
|
||||
|
||||
|
||||
strong { @extend %source-sans-pro-regular; }
|
||||
p { @extend %block-text; }
|
||||
|
||||
p { @extend %block-text; }
|
||||
|
||||
|
||||
strong { @extend %source-sans-pro-regular; }
|
||||
71
source/assets/stylesheets/helpers/_classes.scss
Normal file
71
source/assets/stylesheets/helpers/_classes.scss
Normal file
@ -0,0 +1,71 @@
|
||||
// ===========================================================================
|
||||
// CLASSES
|
||||
// Useful classes for @extend'ing.
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Image replacement
|
||||
*/
|
||||
|
||||
.ir {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
/* IE 6/7 fallback */
|
||||
*text-indent: -9999px;
|
||||
}
|
||||
|
||||
.ir:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide from both screenreaders and browsers: h5bp.com/u
|
||||
*/
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screenreaders: h5bp.com/v
|
||||
*/
|
||||
|
||||
.visuallyhidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .visuallyhidden class to allow the element to be focusable
|
||||
* when navigated to via the keyboard: h5bp.com/p
|
||||
*/
|
||||
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screenreaders, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
116
source/assets/stylesheets/helpers/_placeholder-selectors.scss
Normal file
116
source/assets/stylesheets/helpers/_placeholder-selectors.scss
Normal file
@ -0,0 +1,116 @@
|
||||
// ===========================================================================
|
||||
// PLACEHOLDER SELECTORS
|
||||
// For @extend'ing.
|
||||
|
||||
|
||||
|
||||
%source-sans-pro-regular { @include font-face($source-sans-pro-regular); }
|
||||
%source-sans-pro-bold { @include font-face($source-sans-pro-bold, 600); }
|
||||
|
||||
%chaparral-pro-regular { @include font-face($chaparral-pro-regular, 400); }
|
||||
%chaparral-pro-semibold { @include font-face($chaparral-pro-semibold, 600); }
|
||||
|
||||
%source-code-pro-regular { @include font-face($source-code-pro-regular); }
|
||||
|
||||
|
||||
|
||||
%caps {
|
||||
@extend %source-sans-pro-bold;
|
||||
@include font-size($font-size-small);
|
||||
letter-spacing: .0625em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// CLEARFIX
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " "; /* 1 */
|
||||
display: table; /* 2 */
|
||||
}
|
||||
|
||||
&:after { clear: both; }
|
||||
|
||||
/*
|
||||
* For IE 6/7 only
|
||||
* Include this rule to trigger hasLayout and contain floats.
|
||||
*/
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
%clearfix { @include clearfix; }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FLOATS
|
||||
|
||||
@mixin float-with-margin($direction: left) {
|
||||
@if $direction == "right" {
|
||||
@include float-right;
|
||||
margin-left: $gutter-width;
|
||||
}
|
||||
|
||||
@else {
|
||||
@include float-left;
|
||||
margin-right: $gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin float-last-child($direction: left) {
|
||||
@if $direction == "right" { margin-left: 0; }
|
||||
|
||||
@else { margin-right: 0; }
|
||||
}
|
||||
|
||||
%float-left { @include float-with-margin; }
|
||||
%float-right { @include float-with-margin(right); }
|
||||
|
||||
%float-left-last-child { @include float-last-child; }
|
||||
%float-right-last-child { @include float-last-child(right); }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin placeholder-selectors-iPhone {
|
||||
%clearfix-iPhone { @include clearfix; }
|
||||
|
||||
%float-left-iPhone { @include float-with-margin; }
|
||||
%float-right-iPhone { @include float-with-margin(right); }
|
||||
|
||||
%float-left-last-child-iPhone { @include float-last-child; }
|
||||
%float-right-last-child-iPhone { @include float-last-child(right); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SMALL TABLET
|
||||
|
||||
@mixin placeholder-selectors-small-tablet {
|
||||
%clearfix-small-tablet { @include clearfix; }
|
||||
|
||||
%float-left-small-tablet { @include float-with-margin; }
|
||||
%float-right-small-tablet { @include float-with-margin(right); }
|
||||
|
||||
%float-left-last-child-small-tablet { @include float-last-child; }
|
||||
%float-right-last-child-small-tablet { @include float-last-child(right); }
|
||||
}
|
||||
@ -4,5 +4,28 @@
|
||||
|
||||
|
||||
.container {
|
||||
@include container($total-columns, $break-iPad);
|
||||
padding: {
|
||||
right: $gutter-width * 2;
|
||||
left: $gutter-width * 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin grid-iPhone {
|
||||
.container { @extend %clearfix-iPhone; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SMALL TABLET
|
||||
|
||||
@mixin grid-small-tablet {
|
||||
.container {
|
||||
@include susy-grid-background;
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
// ===========================================================================
|
||||
// RETINA
|
||||
@ -3,48 +3,44 @@
|
||||
|
||||
|
||||
|
||||
$banner-background-color: $background-alt-color !default;
|
||||
|
||||
|
||||
|
||||
.banner {
|
||||
background: $background-alt-color;
|
||||
|
||||
h1 {
|
||||
padding: .5em 0;
|
||||
text-align: center;
|
||||
background: $banner-background-color;
|
||||
|
||||
h1 a {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skip-navigation { display: none; }
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin banner-iPhone {
|
||||
.banner {
|
||||
text-align: left;
|
||||
|
||||
h1 { @include span-columns(2); }
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
h1 img {
|
||||
width: 3.33333333333333em;
|
||||
height: 2.5em;
|
||||
.skip-navigation {
|
||||
@include span-columns(1 omega);
|
||||
padding: {
|
||||
top: 1.375em;
|
||||
bottom: 1.375em;
|
||||
}
|
||||
}
|
||||
|
||||
.skip-navigation { display: none; }
|
||||
|
||||
@include at-breakpoint($break-iPhone) {
|
||||
.skip-navigation {
|
||||
display: block;
|
||||
margin-top: 1.125em;
|
||||
@include span-columns(1 omega, $break-iPhone);
|
||||
.button {
|
||||
@include float-right;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include span-columns(3, $break-iPhone);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
.skip-navigation {
|
||||
@include span-columns(1 omega, $break-iPhone-wide);
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h1 { @include span-columns(6, $break-iPhone-wide); }
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
.skip-navigation { display: none; }
|
||||
|
||||
h1 { @include span-columns(6, $break-iPhone-wide); }
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
// ===========================================================================
|
||||
// CONTENT MIDDLE
|
||||
// CHROMEFRAME
|
||||
|
||||
|
||||
|
||||
.content-middle {
|
||||
.chromeframe {
|
||||
@extend .message;
|
||||
}
|
||||
@ -1,2 +1,11 @@
|
||||
// ===========================================================================
|
||||
// iOS
|
||||
// CONTENT
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
padding: {
|
||||
top: 2em;
|
||||
bottom: 2em;
|
||||
}
|
||||
}
|
||||
@ -3,37 +3,42 @@
|
||||
|
||||
|
||||
|
||||
$contentinfo-background-color: $dawn-pink !default;
|
||||
$contentinfo-border-color: $wafer !default;
|
||||
|
||||
|
||||
|
||||
.contentinfo {
|
||||
border-top: .5em solid $contentinfo-border-color;
|
||||
padding: .5em 0 1em;
|
||||
@include caps;
|
||||
@include font-size($font-size-small, $line-height-incremental);
|
||||
background: $contentinfo-background-color;
|
||||
|
||||
p { padding-bottom: 0; }
|
||||
|
||||
ul { padding-top: 0; }
|
||||
|
||||
span,
|
||||
a { @include font-size($font-size-small, $line-height-alt); }
|
||||
|
||||
@include at-breakpoint($break-iPhone) {
|
||||
ul {
|
||||
@extend %clearfix-iPhone;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
@include span-columns(2.5, $break-iPhone);
|
||||
margin-right: 0;
|
||||
&,
|
||||
ul {
|
||||
padding: {
|
||||
top: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
li {
|
||||
width: auto;
|
||||
margin-right: 2em;
|
||||
|
||||
&:last-child { margin-right: 0; }
|
||||
a { border: 0; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin contentinfo-iPhone {
|
||||
.contentinfo {
|
||||
@extend %horizontal-list-iPhone;
|
||||
text-align: left;
|
||||
|
||||
ul {
|
||||
padding: {
|
||||
top: .5em;
|
||||
bottom: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// ===========================================================================
|
||||
// MAIN
|
||||
|
||||
|
||||
|
||||
.main {
|
||||
.container {
|
||||
padding: {
|
||||
top: 1em;
|
||||
bottom: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,73 +3,78 @@
|
||||
|
||||
|
||||
|
||||
$navigation-background-color: $pale-sky !default;
|
||||
$navigation-text-color: $iron !default;
|
||||
$navigation-border-color: $regent-grey !default;
|
||||
|
||||
|
||||
|
||||
.navigation {
|
||||
padding: {
|
||||
top: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
background: $navigation-background-color;
|
||||
color: $navigation-text-color;
|
||||
@include text-shadow;
|
||||
@include text-shadow-dark;
|
||||
|
||||
a { @include link(lighten($navigation-text-color, 5%), lighten($navigation-text-color, 15%), lighten($navigation-text-color, 25%)); }
|
||||
a {
|
||||
@extend %caps;
|
||||
border: 0;
|
||||
@include link(lighten($navigation-text-color, 5%),
|
||||
lighten($navigation-text-color, 15%),
|
||||
lighten($navigation-text-color, 25%));
|
||||
}
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPhone) {
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// iPhone
|
||||
|
||||
@mixin navigation-iPhone {
|
||||
.navigation {
|
||||
display: none;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid $navigation-border-color;
|
||||
|
||||
&:last-child { border-bottom: 0; }
|
||||
&:last-child { border: 0; }
|
||||
}
|
||||
|
||||
a {
|
||||
@include tappable-link;
|
||||
@include tappable;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SMALL TABLET
|
||||
|
||||
@mixin navigation-small-tablet {
|
||||
.navigation {
|
||||
li { border-bottom: 0; }
|
||||
|
||||
@include at-breakpoint($break-iPhone-wide) {
|
||||
ul {
|
||||
@extend %clearfix-iPhone-wide;
|
||||
list-style: none;
|
||||
margin: {
|
||||
right: -$gutter-width;
|
||||
left: -$gutter-width;
|
||||
}
|
||||
|
||||
li {
|
||||
@include span-columns(2.5, $break-iPhone);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
li { display: inline-block; }
|
||||
}
|
||||
}
|
||||
|
||||
@include at-breakpoint($break-iPad) {
|
||||
position: relative;
|
||||
top: -7em;
|
||||
display: block;
|
||||
margin-bottom: -3em;
|
||||
background: none;
|
||||
|
||||
a {
|
||||
@include link;
|
||||
text-shadow: 0 1px 1px $highlight-color;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: right;
|
||||
|
||||
li {
|
||||
margin-right: 2em;
|
||||
border: 0;
|
||||
width: auto;
|
||||
|
||||
&:last-child { margin-right: 0; }
|
||||
padding: {
|
||||
right: $gutter-width;
|
||||
left: $gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
11
source/assets/stylesheets/responsive/_high-resolution.scss
Normal file
11
source/assets/stylesheets/responsive/_high-resolution.scss
Normal file
@ -0,0 +1,11 @@
|
||||
// ===========================================================================
|
||||
// HIGH RESOLUTION
|
||||
|
||||
|
||||
|
||||
@media print,
|
||||
(-o-min-device-pixel-ratio: 5/4),
|
||||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 120dpi) {
|
||||
/* Style adjustments for high resolution devices */
|
||||
}
|
||||
28
source/assets/stylesheets/responsive/_iPhone.scss
Normal file
28
source/assets/stylesheets/responsive/_iPhone.scss
Normal file
@ -0,0 +1,28 @@
|
||||
// ===========================================================================
|
||||
// iPhone AND UP
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: $iPhone) {
|
||||
// FOUNDATION
|
||||
@include headings-iPhone;
|
||||
|
||||
// LAYOUT
|
||||
@include grid-iPhone;
|
||||
|
||||
// COMPONENTS
|
||||
@include components-lists-iPhone;
|
||||
@include quick-starts-iPhone;
|
||||
@include current-release-iPhone;
|
||||
@include slides-iPhone;
|
||||
|
||||
// REGIONS
|
||||
@include banner-iPhone;
|
||||
@include navigation-iPhone;
|
||||
@include contentinfo-iPhone;
|
||||
|
||||
// PAGES
|
||||
|
||||
// HELPERS
|
||||
@include placeholder-selectors-iPhone;
|
||||
}
|
||||
76
source/assets/stylesheets/responsive/_print.scss
Normal file
76
source/assets/stylesheets/responsive/_print.scss
Normal file
@ -0,0 +1,76 @@
|
||||
// ===========================================================================
|
||||
// PRINT
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid required HTTP connection: h5bp.com/r
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: #000 !important; /* Black prints faster: h5bp.com/s */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links for images, or javascript/internal links
|
||||
*/
|
||||
|
||||
.ir a:after,
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group; /* h5bp.com/t */
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 0.5cm;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
23
source/assets/stylesheets/responsive/_small-tablet.scss
Normal file
23
source/assets/stylesheets/responsive/_small-tablet.scss
Normal file
@ -0,0 +1,23 @@
|
||||
// ===========================================================================
|
||||
// SMALL TABLET AND UP
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: $small-tablet) {
|
||||
// FOUNDATION
|
||||
|
||||
// LAYOUT
|
||||
@include grid-small-tablet;
|
||||
|
||||
// COMPONENTS
|
||||
@include components-lists-small-tablet;
|
||||
@include quick-starts-small-tablet;
|
||||
|
||||
// REGIONS
|
||||
@include navigation-small-tablet;
|
||||
|
||||
// PAGES
|
||||
|
||||
// HELPERS
|
||||
@include placeholder-selectors-small-tablet;
|
||||
}
|
||||
@ -4,6 +4,9 @@
|
||||
|
||||
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// VENDOR
|
||||
|
||||
@ -12,55 +15,36 @@
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// RESET
|
||||
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
* { @include box-sizing(border-box); }
|
||||
|
||||
@import "vendor/normalize";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// DEPENDENCIES
|
||||
|
||||
@import "dependencies/measurements";
|
||||
@import "dependencies/typography";
|
||||
@import "dependencies/icons";
|
||||
@import "dependencies/color";
|
||||
@import "dependencies/layout";
|
||||
@import "dependencies/colors";
|
||||
@import "dependencies/themes";
|
||||
@import "dependencies/icons";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FOUNDATION
|
||||
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
@include border-box-sizing;
|
||||
|
||||
@import "vendor/normalize";
|
||||
|
||||
@import "foundation/site";
|
||||
@import "foundation/links";
|
||||
@import "foundation/headings";
|
||||
@import "foundation/text";
|
||||
@import "foundation/lists";
|
||||
@import "foundation/links";
|
||||
@import "foundation/media";
|
||||
@import "foundation/code";
|
||||
@import "foundation/forms";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// COMPONENTS
|
||||
|
||||
@import "components/buttons";
|
||||
@import "components/messages";
|
||||
@import "components/introduction";
|
||||
@import "components/quick_starts";
|
||||
@import "components/illustrations";
|
||||
@import "components/release_information";
|
||||
@import "components/jump_navigation";
|
||||
@import "components/sticky_footer";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// LAYOUT
|
||||
|
||||
@ -68,25 +52,48 @@
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// COMPONENTS
|
||||
|
||||
@import "components/messages";
|
||||
@import "components/buttons";
|
||||
@import "components/illustrations";
|
||||
@import "components/lists";
|
||||
@import "components/quick-starts";
|
||||
@import "components/current-release";
|
||||
@import "components/slides";
|
||||
@import "components/pagination";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// REGIONS
|
||||
|
||||
@import "regions/chromeframe";
|
||||
@import "regions/banner";
|
||||
@import "regions/navigation";
|
||||
@import "regions/main";
|
||||
@import "regions/content_middle";
|
||||
@import "regions/content";
|
||||
@import "regions/contentinfo";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// PAGES
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// HELPERS
|
||||
|
||||
@import "helpers";
|
||||
@import "helpers/placeholder-selectors";
|
||||
@import "helpers/classes";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// PRINT
|
||||
// RESPONSIVE
|
||||
|
||||
@import "print";
|
||||
@import "responsive/iPhone";
|
||||
@import "responsive/small-tablet";
|
||||
@import "responsive/high-resolution";
|
||||
@import "responsive/print";
|
||||
@ -7,41 +7,20 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
// IMPORTS
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
@import "compass";
|
||||
@import "susy";
|
||||
@import "dependencies/color";
|
||||
|
||||
@import "dependencies/colors";
|
||||
@import "dependencies/themes";
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// VARIABLES
|
||||
// STYLE GUIDE STYLES
|
||||
|
||||
$contrasted-dark-default: $text-color;
|
||||
$contrasted-light-default: $background-color;
|
||||
$contrasted-lightness-threshold: 50%;
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// STYLE GUIDE
|
||||
|
||||
// SWATCHES
|
||||
.swatches {
|
||||
@extend .clearfix;
|
||||
|
||||
li {
|
||||
@include float-left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.black { @include contrasted($black); }
|
||||
.grey-darkest { @include contrasted($grey-darkest); }
|
||||
.grey-darker { @include contrasted($grey-darker); }
|
||||
.grey-dark { @include contrasted($grey-dark); }
|
||||
.grey { @include contrasted($grey); }
|
||||
.grey-light { @include contrasted($grey-light); }
|
||||
.grey-lighter { @include contrasted($grey-lighter); }
|
||||
.grey-lightest { @include contrasted($grey-lightest); }
|
||||
.white { @include contrasted($white); }
|
||||
iframe {
|
||||
border: 0;
|
||||
@include box-shadow-both;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
|
||||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
@ -16,6 +16,7 @@ figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
@ -100,12 +101,13 @@ a:hover {
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font size within `section` and `article` contexts in
|
||||
* Firefox 4+, Safari 5, and Chrome.
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -133,6 +135,16 @@ dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
@ -159,9 +171,7 @@ samp {
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -281,6 +291,18 @@ input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
@ -302,7 +324,7 @@ input[type="submit"] {
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
@ -12,4 +12,4 @@
|
||||
<allow-access-from domain="*" to-ports="*" secure="false"/>
|
||||
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
|
||||
-->
|
||||
</cross-domain-policy>
|
||||
</cross-domain-policy>
|
||||
@ -12,4 +12,4 @@
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
HTML5, CSS3
|
||||
jQuery, Modernizr
|
||||
Normalize.css, jQuery, Modernizr
|
||||
@ -4,12 +4,11 @@ title: Sass | Syntactically Awesome Style Sheets
|
||||
|
||||
|
||||
|
||||
.introduction
|
||||
%h1 CSS with super powers
|
||||
%h1 CSS with super powers
|
||||
|
||||
%p Sass is an extension of CSS 3 with a bunch of added features. Already thought CSS was fun? Wait until you add Sass to the mix!
|
||||
%p Sass is an extension of CSS 3 with a bunch of added features. Already thought CSS was fun? Wait until you add Sass to the mix!
|
||||
|
||||
%h2 Get up and running quickly with:
|
||||
%h2 Get up and running quickly with:
|
||||
|
||||
%ul.quick-starts
|
||||
%li.command-line
|
||||
@ -32,25 +31,25 @@ title: Sass | Syntactically Awesome Style Sheets
|
||||
%p.description Get started quickly by installing a Sass for Linux, Mac or Windows.
|
||||
.call-to-action
|
||||
%p= link_to "GUI Quickstart", '#', :class => 'button'
|
||||
%p= link_to "Download Compass.app", '#', :class => 'button'
|
||||
%p= link_to "Get Compass.app", '#', :class => 'button'
|
||||
|
||||
|
||||
|
||||
- content_for :content_bottom do
|
||||
.message.release-information
|
||||
- content_for :section_2 do
|
||||
.message.current-release
|
||||
.container
|
||||
%p
|
||||
Current Release:
|
||||
%strong Media Mark (3.2.1)
|
||||
%dl
|
||||
%dt Current Release:
|
||||
%dd Media Mark (3.2.1)
|
||||
%ul
|
||||
%li= link_to "Release Notes", "#"
|
||||
%li= link_to "Fork Sass on Github", "#"
|
||||
|
||||
.container
|
||||
%h1 Sass Features
|
||||
.content
|
||||
%h1 Sass Features
|
||||
|
||||
.slides
|
||||
%nav.jump-navigation
|
||||
%nav.slide-navigation
|
||||
%ul
|
||||
%li= link_to "Preprocessing", '#1'
|
||||
%li= link_to "Variables", '#2'
|
||||
@ -61,112 +60,63 @@ title: Sass | Syntactically Awesome Style Sheets
|
||||
%li= link_to "Extend", '#7'
|
||||
%li= link_to "Operators", '#8'
|
||||
|
||||
.jump-topics
|
||||
.slide
|
||||
%h3 Preprocessing
|
||||
%ul.slides
|
||||
%li
|
||||
%h2 Preprocessing
|
||||
%p A prepressor lets you take a Sass file and use features that don’t exist in CSS like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
|
||||
%pre
|
||||
%code
|
||||
example of preprocessing and css output
|
||||
%p= link_to "Variables", "#2", :class => "link"
|
||||
|
||||
.slide
|
||||
%h3 Variables
|
||||
%li
|
||||
%h2 Variables
|
||||
%p Variables definition
|
||||
%pre
|
||||
%code
|
||||
example of preprocessing and css output
|
||||
%p= link_to "Nesting", "#3", :class => "link"
|
||||
|
||||
.slide
|
||||
%h3 Nesting
|
||||
%li
|
||||
%h2 Nesting
|
||||
%p nesting definition
|
||||
%pre
|
||||
%code
|
||||
example of nesting and css output
|
||||
%p= link_to "Mixins", "#4", :class => "link"
|
||||
|
||||
.slide
|
||||
%h3 Mixins
|
||||
%li
|
||||
%h2 Mixins
|
||||
%p mixins definition
|
||||
%pre
|
||||
%code
|
||||
example of mixins and css output
|
||||
%p= link_to "Inheritance", "#5", :class => "link"
|
||||
|
||||
.slide
|
||||
%h3 Inheritance
|
||||
%li
|
||||
%h2 Inheritance
|
||||
%p inheritance definition
|
||||
%pre
|
||||
%code
|
||||
example of inheritance and css output
|
||||
%p= link_to "Import", "#6", :class => "link"
|
||||
|
||||
.slide
|
||||
%h3 Import
|
||||
%li
|
||||
%h2 Import
|
||||
%p import definition
|
||||
%pre
|
||||
%code
|
||||
example of import and css output
|
||||
%p= link_to "Extend", "#7", :class => "link"
|
||||
|
||||
.slide
|
||||
%h3 Extend
|
||||
%li
|
||||
%h2 Extend
|
||||
%p extend definition
|
||||
%pre
|
||||
%code
|
||||
example of extend and css output
|
||||
%p= link_to "Operators", "#8", :class => "link"
|
||||
|
||||
.slide
|
||||
%h3 Operators
|
||||
%li
|
||||
%h2 Operators
|
||||
%p operators definition
|
||||
%pre
|
||||
%code
|
||||
example of operators and css output
|
||||
%p= link_to "Preprocessing", "#1", :class => "link"
|
||||
|
||||
%ul
|
||||
%ul.pagination
|
||||
%li= link_to "Prev", "#", :class => "prev"
|
||||
%li= link_to "Next", "#", :class => "next"
|
||||
|
||||
|
||||
|
||||
#container
|
||||
#example
|
||||
#slides
|
||||
.slides_container
|
||||
.slide
|
||||
%h3 First Slide
|
||||
%p= lorem.paragraph
|
||||
%p= link_to "Check out the fourth slide", "4", :class => "link button"
|
||||
.slide
|
||||
%h3 Second Slide
|
||||
%p= lorem.paragraph
|
||||
%p= link_to "Check out the fifth slide", "5", :class => "link button"
|
||||
.slide
|
||||
%h3 Third Slide
|
||||
%p= lorem.paragraph
|
||||
%p= link_to "Check out the first slide", "1", :class => "link button"
|
||||
.slide
|
||||
%h3 Fourth Slide
|
||||
%p= lorem.paragraph
|
||||
%p= link_to "Check out the sixth slide", "6", :class => "link button"
|
||||
.slide
|
||||
%h3 Fifth Slide
|
||||
%p= lorem.paragraph
|
||||
%p= link_to "Check out the seventh slide", "7", :class => "link button"
|
||||
.slide
|
||||
%h3 Sixth Slide
|
||||
%p= lorem.paragraph
|
||||
%p= link_to "Check out the first slide", "1", :class => "link button"
|
||||
.slide
|
||||
%h3 Seventh Slide
|
||||
%p= lorem.paragraph
|
||||
%p= link_to "Check out the third slide", "3", :class => "link button"
|
||||
<a href="#" class="prev">
|
||||
= image_tag "slides/arrow-prev.png", :width => "24", :height => "43", :alt => "Arrow Prev"
|
||||
</a>
|
||||
<a href="#" class="next">
|
||||
= image_tag "slides/arrow-next.png", :width => "24", :height => "43", :alt => "Arrow Next"
|
||||
</a>
|
||||
%li= link_to "Next", "#", :class => "next"
|
||||
@ -22,15 +22,16 @@
|
||||
|
||||
%body{:class => page_classes}
|
||||
.page
|
||||
= partial "layouts/shared/chrome_frame"
|
||||
= partial "layouts/shared/chromeframe"
|
||||
= partial "layouts/shared/banner"
|
||||
|
||||
.main(role="main")
|
||||
%section.section-1.main(role="main")
|
||||
.container
|
||||
= yield
|
||||
.content= yield
|
||||
= partial "layouts/shared/complementary"
|
||||
|
||||
= yield_content :content_bottom
|
||||
- if content_for?(:section_2)
|
||||
%section.section-2= yield_content :section_2
|
||||
|
||||
.footer-shim
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
%header.banner(role="banner")
|
||||
.container
|
||||
%p.skip-navigation
|
||||
= link_to "#navigation", :class => 'icon-button' do
|
||||
= link_to "#navigation", :class => 'button' do
|
||||
%span(aria-hidden="true" data-icon="l")
|
||||
%span.visually-hidden Skip to Navigation
|
||||
%h1.site-title= link_to image_tag("logo.png", :width => "80", :height => "60", :alt => "Sass"), "/"
|
||||
%span.visuallyhidden Skip to Navigation
|
||||
%h1= link_to image_tag("logo.png", :width => "80", :height => "60", :alt => "Sass"), "/"
|
||||
|
||||
|
||||
|
||||
@ -14,8 +14,4 @@
|
||||
%li= link_to "Home", "/"
|
||||
%li= link_to "Quickstart", "/quickstart"
|
||||
%li= link_to "Documentation", "/docs"
|
||||
%li= link_to "Community", "/community"
|
||||
|
||||
|
||||
|
||||
%hr/
|
||||
%li= link_to "Community", "/community"
|
||||
@ -1,9 +0,0 @@
|
||||
/[if lt IE 7]
|
||||
%p.message.chrome-frame
|
||||
You are using an outdated browser.
|
||||
= link_to "Upgrade your browser today", "http://browsehappy.com/"
|
||||
or
|
||||
= link_to "install Google Chrome Frame", "http://google.com/chromeframe/?redirect=true"
|
||||
to better experience this site.
|
||||
|
||||
%hr/
|
||||
12
source/layouts/shared/_chromeframe.haml
Normal file
12
source/layouts/shared/_chromeframe.haml
Normal file
@ -0,0 +1,12 @@
|
||||
/[if lt IE 7]
|
||||
.chromeframe
|
||||
.container
|
||||
%p
|
||||
You are using an
|
||||
%strong outdated
|
||||
browser.
|
||||
Please
|
||||
= link_to "upgrade your browser", "http://browsehappy.com/"
|
||||
or
|
||||
= link_to "activate Google Chrome Frame", "http://google.com/chromeframe/?redirect=true"
|
||||
to improve your experience.
|
||||
@ -1,17 +1,11 @@
|
||||
%hr/
|
||||
|
||||
%footer.contentinfo(role="contentinfo")
|
||||
.container
|
||||
%p
|
||||
%span Copyright © 2006–2012 Sass
|
||||
= link_to "MIT License", "#"
|
||||
|
||||
%nav
|
||||
%ul
|
||||
%li= link_to "Home", "/"
|
||||
%li= link_to "Quickstart", "/quickstart"
|
||||
%li= link_to "Documentation", "/docs"
|
||||
%li= link_to "Community", "/community"
|
||||
%ul.legal-navigation
|
||||
%li Copyright © 2006–2012 Sass
|
||||
%li= link_to "MIT License", "#"
|
||||
|
||||
%ul.social-navigation
|
||||
%li= link_to "Twitter", "#"
|
||||
%li= link_to "Mailing List", "#"
|
||||
%li= link_to "Github", "#"
|
||||
@ -1,11 +1,11 @@
|
||||
= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
|
||||
= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
|
||||
|
||||
:javascript
|
||||
window.jQuery || document.write('<script src="/javascripts/vendor/jquery.js"><\/script>')
|
||||
window.jQuery || document.write('<script src="/assets/javascripts/vendor/jquery.js"><\/script>')
|
||||
|
||||
|
||||
|
||||
= javascript_include_tag "sass"
|
||||
= javascript_include_tag "sass"
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
= javascript_include_tag "vendor/modernizr"
|
||||
= javascript_include_tag "vendor/modernizr"
|
||||
|
||||
|
||||
|
||||
= javascript_include_tag "//use.typekit.net/twy2ydm.js"
|
||||
= javascript_include_tag "//use.typekit.net/twy2ydm.js"
|
||||
:javascript
|
||||
try{Typekit.load();}catch(e){}
|
||||
@ -1,3 +1,3 @@
|
||||
# robotstxt.org/
|
||||
|
||||
User-agent: *
|
||||
User-agent: *
|
||||
@ -5,29 +5,8 @@
|
||||
|
||||
%h1 Style Guide
|
||||
|
||||
%iframe(src="/" border="0" width="240" height="480")
|
||||
%iframe(src="/" border="0" width="320" height="480")
|
||||
%iframe(src="/" border="0" width="480" height="480")
|
||||
%iframe(src="/" border="0" width="768" height="480")
|
||||
%iframe(src="/" border="0" width="1024" height="480")
|
||||
|
||||
%h2 Color
|
||||
%ul.swatches
|
||||
%li.black
|
||||
%code $black
|
||||
%li.grey-darkest
|
||||
%code $grey-darkest
|
||||
%li.grey-darker
|
||||
%code $grey-darker
|
||||
%li.grey-dark
|
||||
%code $grey-dark
|
||||
%li.grey
|
||||
%code $grey
|
||||
%li.grey-light
|
||||
%code $grey-light
|
||||
%li.grey-lighter
|
||||
%code $grey-lighter
|
||||
%li.grey-lightest
|
||||
%code $grey-lightest
|
||||
%li.white
|
||||
%code $white
|
||||
%iframe(src="/" width="240" height="480")
|
||||
%iframe(src="/" width="320" height="480")
|
||||
%iframe(src="/" width="480" height="480")
|
||||
%iframe(src="/" width="768" height="480")
|
||||
%iframe(src="/" width="1024" height="480")
|
||||
Loading…
Reference in New Issue
Block a user