mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
mobile styling first, will add layout stuff back in later
This commit is contained in:
Jina Bolton
parent
34edc69c8d
commit
942b79da92
@ -8,7 +8,8 @@
|
||||
@extend %callout-theme;
|
||||
padding: .66666666666667em;
|
||||
@include font-size($font-size-large);
|
||||
text-align: center;
|
||||
|
||||
.container { margin: 0; }
|
||||
|
||||
p,
|
||||
ul {
|
||||
@ -19,5 +20,5 @@
|
||||
}
|
||||
|
||||
a,
|
||||
strong { @extend %chaparral-pro-bold; }
|
||||
strong { @extend %chaparral-pro-semibold; }
|
||||
}
|
||||
@ -4,18 +4,6 @@
|
||||
|
||||
|
||||
.release-information {
|
||||
@include float-right;
|
||||
margin-top: .875em;
|
||||
width: 19.3333333333333em;
|
||||
text-align: left;
|
||||
|
||||
p,
|
||||
ul { padding: 0; }
|
||||
|
||||
ul { @extend %horizontal-list; }
|
||||
|
||||
li:last-child {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
padding: 1em;
|
||||
@include font-size($font-size, $line-height-alt);
|
||||
}
|
||||
@ -5,18 +5,20 @@
|
||||
|
||||
$footer-height: 10.5em;
|
||||
|
||||
html,
|
||||
body { height: 100%; }
|
||||
@include at-breakpoint(60em) {
|
||||
html,
|
||||
body { height: 100%; }
|
||||
|
||||
.page {
|
||||
.page {
|
||||
margin-bottom: -$footer-height;
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-shim,
|
||||
.contentinfo {
|
||||
.footer-shim,
|
||||
.contentinfo {
|
||||
clear: both;
|
||||
height: $footer-height;
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,7 @@ $font-size-larger: $font-size * 3;
|
||||
|
||||
$line-height: 1.5;
|
||||
$line-height-alt: 1.25;
|
||||
$line-height-heading: 1;
|
||||
|
||||
$baseline: #{$font-size * $line-height}px;
|
||||
|
||||
@ -31,13 +32,7 @@ $z-index-modal: 1050 !default;
|
||||
size: #{$size-setting}px;
|
||||
size: #{$size-setting / 10}rem;
|
||||
}
|
||||
|
||||
@if $size-setting == ($font-size-large or $font-size-larger) {
|
||||
$lead-setting: $line-height-alt;
|
||||
line-height: $lead-setting;
|
||||
}
|
||||
|
||||
@else { line-height: $lead-setting; }
|
||||
}
|
||||
|
||||
|
||||
@ -49,5 +44,5 @@ $z-index-modal: 1050 !default;
|
||||
|
||||
%heading-text {
|
||||
margin: 0;
|
||||
padding: 1em 0 0;
|
||||
padding: .75em 0 .25em;
|
||||
}
|
||||
@ -23,6 +23,7 @@
|
||||
|
||||
%navigation-theme {
|
||||
background: $navigation-background-color;
|
||||
color: $navigation-text-color;
|
||||
text-shadow: 0 -1px 1px rgba($black, .5);
|
||||
|
||||
a { @include link(lighten($navigation-text-color, 5%), lighten($navigation-text-color, 15%), lighten($navigation-text-color, 25%)); }
|
||||
|
||||
@ -12,11 +12,13 @@ $serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
|
||||
|
||||
|
||||
$source-code-pro-regular: "source-code-pro-n4", "source-code-pro", $monospace !default;
|
||||
|
||||
$source-sans-pro-regular: "source-sans-pro-n4", "source-sans-pro", $sans-serif !default;
|
||||
$source-sans-pro-bold: "source-sans-pro-n7", "source-sans-pro", $sans-serif !default;
|
||||
|
||||
$chaparral-pro-regular: "chaparral-pro-n4", "chaparral-pro", $serif !default;
|
||||
$chaparral-pro-bold: "chaparral-pro-n7", "chaparral-pro", $serif !default;
|
||||
$chaparral-pro-semibold: "chaparral-pro-n6", "chaparral-pro", $serif !default;
|
||||
|
||||
|
||||
|
||||
@ -36,8 +38,10 @@ $chaparral-pro-bold: "chaparral-pro-n7", "chaparral-pro", $serif !
|
||||
// ---------------------------------------------------------------------------
|
||||
// FONT PLACEHOLDER SELECTORS FOR @EXTEND'ING
|
||||
|
||||
%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, 700); }
|
||||
%source-sans-pro-bold { @include font-face($source-sans-pro-bold, 600); }
|
||||
|
||||
%chaparral-pro-regular { @include font-face($chaparral-pro-regular); }
|
||||
%chaparral-pro-bold { @include font-face($chaparral-pro-bold, 700); }
|
||||
%chaparral-pro-semibold { @include font-face($chaparral-pro-semibold, 600); }
|
||||
6
source/assets/stylesheets/foundation/_code.scss
Normal file
6
source/assets/stylesheets/foundation/_code.scss
Normal file
@ -0,0 +1,6 @@
|
||||
// ===========================================================================
|
||||
// CODE
|
||||
|
||||
|
||||
|
||||
code { @extend %source-code-pro-regular; }
|
||||
@ -10,7 +10,7 @@ h3 { @extend %heading-text; }
|
||||
h1,
|
||||
h3 {
|
||||
@extend %chaparral-pro-regular;
|
||||
@include font-size($font-size-larger);
|
||||
@include font-size($font-size-larger, $line-height-heading);
|
||||
letter-spacing: -0.05em;
|
||||
color: $heading-1-text-color;
|
||||
}
|
||||
|
||||
@ -17,4 +17,7 @@
|
||||
|
||||
|
||||
|
||||
ul { @extend %block-text; }
|
||||
ul {
|
||||
@extend %block-text;
|
||||
list-style-position: inside;
|
||||
}
|
||||
@ -14,6 +14,7 @@ html {
|
||||
body {
|
||||
@extend %source-sans-pro-regular;
|
||||
@include font-size;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
@ -3,8 +3,15 @@
|
||||
|
||||
|
||||
|
||||
// Initial set up is just one column for small phones
|
||||
|
||||
$total-columns: 1;
|
||||
$column-width: 2.75em;
|
||||
$gutter-width: 1em;
|
||||
$grid-padding: $gutter-width;
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
@extend %clearfix;
|
||||
margin: 0 auto;
|
||||
width: 62em;
|
||||
margin: 0 1em;
|
||||
}
|
||||
@ -5,11 +5,7 @@
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
padding: {
|
||||
top: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
background: $background-color;
|
||||
}
|
||||
|
||||
.site-title { @include font-size; }
|
||||
h1 { padding: 1em 0; }
|
||||
}
|
||||
@ -5,11 +5,10 @@
|
||||
|
||||
.navigation {
|
||||
@extend %navigation-theme;
|
||||
padding: 1em 0;
|
||||
line-height: $line-height-alt;
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
a { @extend %source-sans-pro-bold; }
|
||||
|
||||
ul { @extend %horizontal-list; }
|
||||
}
|
||||
@ -41,6 +41,7 @@
|
||||
@import "foundation/text";
|
||||
@import "foundation/lists";
|
||||
@import "foundation/media";
|
||||
@import "foundation/code";
|
||||
@import "foundation/forms";
|
||||
|
||||
|
||||
|
||||
@ -10,11 +10,13 @@ title: Sass | Syntactically Awesome Style Sheets
|
||||
|
||||
%h2 Get up and running quickly with:
|
||||
|
||||
.command-line
|
||||
%ul
|
||||
%li
|
||||
%h3 Command Line
|
||||
%p Feel comfortable using a terminal, Ruby & Gems?
|
||||
= link_to "Command Line Quickstart", '#', :class => 'button'
|
||||
%span gem install sass
|
||||
%p= link_to "Command Line Quickstart", '#', :class => 'button'
|
||||
%p
|
||||
%code gem install sass
|
||||
|
||||
.gui
|
||||
%h3 GUI Application
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
%header.banner(role="banner")
|
||||
.container
|
||||
.message.release-information
|
||||
.container
|
||||
%p
|
||||
Current Release:
|
||||
%strong Media Mark (3.2.1)
|
||||
%ul
|
||||
%li= link_to "Release Notes", "#"
|
||||
%li= link_to "Fork Sass on Github", "#"
|
||||
|
||||
.container
|
||||
%h1.site-title= link_to image_tag("logo.png", :width => "160", :height => "120", :alt => "Sass"), "/"
|
||||
|
||||
%nav.navigation(role="navigation")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user