From d2a3110f41227879ea0444da25541da7b333a55d Mon Sep 17 00:00:00 2001 From: Brad Frost Date: Sun, 16 Mar 2014 01:53:47 -0400 Subject: [PATCH] Added styleguide-specific.css for styles that should only appear within the Pattern Lab context --- .gitignore | 4 + core/styleguide/css/static.css | 0 core/styleguide/css/static.scss | 404 ------------------ core/styleguide/css/styleguide-specific.css | 80 ++++ core/styleguide/css/styleguide-specific.scss | 141 ++++++ core/styleguide/css/styleguide.css | 66 --- core/styleguide/css/styleguide.scss | 99 +---- core/styleguide/html/styleguide.html | 1 + core/templates/index.mustache | 3 +- .../pattern-header-footer/header.html | 1 + public/styleguide/css/states.css | 47 -- public/styleguide/css/static.css | 374 ---------------- public/styleguide/css/static.scss | 404 ------------------ 13 files changed, 231 insertions(+), 1393 deletions(-) delete mode 100644 core/styleguide/css/static.css delete mode 100644 core/styleguide/css/static.scss create mode 100644 core/styleguide/css/styleguide-specific.css create mode 100644 core/styleguide/css/styleguide-specific.scss delete mode 100644 public/styleguide/css/states.css delete mode 100644 public/styleguide/css/static.css delete mode 100644 public/styleguide/css/static.scss diff --git a/.gitignore b/.gitignore index 7836357..9e034b6 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,7 @@ latest-change.txt /public/styleguide/js/annotations-viewer.js /public/styleguide/js/code-viewer.js + +/public/styleguide/css/states.css +/public/styleguide/css/static.css +/public/styleguide/css/static.scss diff --git a/core/styleguide/css/static.css b/core/styleguide/css/static.css deleted file mode 100644 index e69de29..0000000 diff --git a/core/styleguide/css/static.scss b/core/styleguide/css/static.scss deleted file mode 100644 index a22d5d7..0000000 --- a/core/styleguide/css/static.scss +++ /dev/null @@ -1,404 +0,0 @@ -/* -colors -red: $orange; rgb(229,24,55) -gray: #808080; -*/ - -$orange : #bededf; - -$max-width: 60em; - -/************Reset**************/ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -html, body, div, object, iframe, fieldset { - margin: 0; - padding: 0; - border: 0; -} -ol, ul { - list-style: none; - margin: 0; - padding: 0; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -header, footer, nav, section, article, hgroup, figure { - display: block; -} -legend { - display: none; -} -/************End Reset**************/ - -/************Global**************/ -body { - background: #fff; - color: #000; - font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif; - padding: 0; - -webkit-text-size-adjust: 100%; - border-top: 20px solid #000; - border-bottom: 20px solid #000; -} -a { - color: #808080; - text-decoration: none; -} -a:hover, a:focus { - color: $orange; -} -p { - margin: 0 0 1em; -} -img, object, video { - max-width: 100%; - border: 0; -} -a img { - border: 0; - outline: 0; -} -h1 { - font-size: 3em; - line-height: 1; - letter-spacing: -0.02em; - margin-bottom: 0.2em; -} -h2 { - font-size: 2em; - line-height: 1.1; - margin-bottom: 0.2em; -} -h3 { - font-weight: normal; - line-height: 1.1; - padding-bottom: 0.4em; - border-bottom: 1px solid #ccc; -} -h1 a, h2 a, h3 a { - display: block; - color: #000; -} -h1 a:hover, h2 a:hover, h3 a:hover { - color: $orange; -} -blockquote { - border-left: 0.5em solid #ddd; - padding-left: 1em; - margin-left: 1em; -} -small { - color: $orange; -} -input[type=search] { - -webkit-appearance: none; - border-radius: 0; -} -::-webkit-input-placeholder { - color: #808080; -} -:-moz-placeholder { - color: #808080; -} -/************End Global**************/ - -/************Classes**************/ -.inactive { - color: #ddd; -} -/************End Classes**************/ - -/************Structure**************/ -.container { - max-width: $max-width; - margin: 0 auto; - padding: 0 1em; - overflow: hidden; -} - -[role=main] { - padding-bottom: 1em; -} - -/*Footer*/ -[role=contentinfo] { - color: #fff; - background: #000; - margin: 0 -1em; - position: relative; - z-index: 2; - - > div { - max-width: $max-width; - padding: 0 1em; - margin: 0 auto; - overflow: hidden; - } -} -/*End Footer*/ - -/*Grid*/ -.grid { - margin: 0 -1em; - overflow: hidden; -} -.grid:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -.grid > h2 { - margin-left: 0.45em; -} -.grid > section { - padding: 1em 1em 0.5em; -} -.grid > section:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -.grid ul { - overflow: hidden; -} -.grid ul li { - margin-bottom: 0.3em; -} -.featured:after { - content: "*"; - color: $orange; -} - -/*Fluid*/ -.fluid { - display: block; - margin: 0 auto; - max-width: 40em; -} - -/*Homepage*/ -.home h1 { - margin-bottom: 0.2em; -} -.intro { - font-size: 1.8em; - line-height: 1.2; - margin: 0 auto; -} -.intro a:hover ,.intro a:focus { - color: #000; - border-bottom-color: #000; -} - -.ani { - position: relative; - height: 15em; - margin: 1em 0 0; - width: 100%; - z-index: 0; -} -.ani div { - width: 100%; -} -.ani div b { - display: block; - position: absolute; - top: 5%; - right: 5%; - bottom: 5%; - left: 5%; - background: rgba(229,24,55,0.22); -} - - -/*Patterns*/ -.mod { - padding: 1em; -} -.pattern { - background: #f7f7f7; - border-bottom: 1px solid #808080; - margin-bottom: 1em; - overflow: hidden; -} -.pattern-description h1 { - font-size: 3.4em; - margin-bottom: 0.5em; -} -.pattern-description { - max-width: 40em; - margin: 0 auto; -} -.pattern-description ul, .pattern-description ol { - margin-bottom: 2em; -} -.pattern-description li { - margin-bottom: 1em; -} - - -/*Blog*/ -/*Blog Header*/ -.blog .container { - max-width: 62em; -} -.blog header[role=banner] { - overflow: hidden; - margin-bottom: 2em; - padding: 2em 0 1em; - border-bottom: 1px solid #000; -} -.blog-logo { - font-weight: normal; - font-size: 1.2em; - margin: 0 0 1em; -} -.blog-logo img { - width: 3.3em; -} -.blog-logo a { - color: #000; -} -.search-form { - width: 100%; - margin-bottom: 1em; -} -.search-field { - width: 100%; - padding: 0.5em 0; - border: 0; - border-bottom: 1px solid #808080; - outline: none; -} -.search-field:focus { - background: $orange; - color: #fff; -} -.search-field:focus::-webkit-input-placeholder { - color: #fff; -} - -.search-field:focus :-moz-placeholder { - color: #fff; -} - -.blog .nav { - clear: both; -} -.blog .nav a { - display: block; - font-weight: bold; - color: #000; -} -.blog .nav a:hover { - color: $orange; -} - -/*Posts*/ -.posts ol > li { - padding-bottom: 1em; - border-bottom: 1px solid #ccc; - margin-bottom: 1em; - overflow: hidden; -} -.posts h2 { - font-size: 1.4em; - margin: 0.28em 0 0.1em; - font-weight: normal; -} -.posts h2 a { - color: #000; -} -.posts h2 a:hover, .posts h2 a:focus { - color: $orange; -} -.permalink { - display: block; - font-size: 0.8em; - margin-bottom: 1.2em; -} -.post-body a { - border-bottom: 1px solid #ccc; -} -.posts blockquote { - margin: 0 0 1em; - color: #666; - border-left: 0.25em solid #ccc; - padding-left: 1em; -} -.tags { - float: left; -} -.tags li { - display: inline-block; - font-size: 0.8em; - margin-right: 0.5em; -} - -.posts ol > li .tags a, .permalink { - color: #ccc; - -webkit-transition: color 0.3s ease-out; - -moz-transition: color 0.3s ease-out; - -ms-transition: color 0.3s ease-out; - -o-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; -} -.posts ol > li:hover .tags a, .posts ol > li:hover .permalink { - color: #808080; -} -.blog-nav { - text-align: center; - overflow: hidden; - padding: 1em 0; -} -.posts .blog-nav a { - border: 0; -} -.nav-next { - float: right; -} -.nav-prev { - float: left; -} - -/* Sidebar */ -.sidebar { - font-size: 0.8em; - padding-bottom: 1.4em; -} -.sidebar div { - margin-bottom: 2em; -} -.sidebar h3 { - font-weight: bold; - font-size: 0.9em; - line-height: 1; - border-bottom: 1px solid #000; -} -.sidebar a { - color: #808080; -} -.sidebar a:hover, .sidebar a:focus { - color: $orange; -} - - - - -.top { - clear: both; - display: block; - padding: 1em 0; -} -.top:before { - content: '▲'; -} - diff --git a/core/styleguide/css/styleguide-specific.css b/core/styleguide/css/styleguide-specific.css new file mode 100644 index 0000000..5aaf94c --- /dev/null +++ b/core/styleguide/css/styleguide-specific.css @@ -0,0 +1,80 @@ +/*------------------------------------*\ + $PATTERN LAB-SPECIFIC STYLES +\*------------------------------------*/ +/** + * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab. + * This is helpful for displaying demo styles for grids, animations, color swatches, etc + * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements + * These styles will not be your production CSS. + */ +/* Style Guide Interface Colors */ +/* Typography */ +/* Defaults */ +/* Dimensions */ +/* Breakpoints */ +.demo { + overflow: hidden; + margin-bottom: 1rem; } + +.demo .gi, .demo .demo-block { + background: #dddddd; + color: gray; + text-align: center; + margin-bottom: 0.5em; + padding: 1em !important; } + .demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) { + color: #dddddd; + background: gray; } + .demo .gi .gi, .demo .demo-block .gi { + background: rgba(0, 0, 0, 0.1); + color: #dddddd; } + .demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) { + background: rgba(0, 0, 0, 0.3); } + +.demo-animate { + background: #ddd; + padding: 1em; + margin-bottom: 1em; + text-align: center; } + +.animate-move { + position: relative; } + .animate-move .demo-shape { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 20px; + background: gray; } + .animate-move:hover > .demo-shape { + left: 100%; + margin-left: -20px; } + +.sg-colors { + overflow: hidden; } + .sg-colors li { + overflow: hidden; + border: 1px solid #dddddd; + padding: 0.3em; + margin: 0 0.2em 0.2em 0; } + @media all and (min-width: 30em) { + .sg-colors li { + float: left; + width: 5em; } } + +.sg-swatch { + display: block; + height: 1.5em; + width: 50%; } + @media all and (max-width: 30em) { + .sg-swatch { + float: left; + margin-right: 0.3em; } } + @media all and (min-width: 30em) { + .sg-swatch { + width: 100%; + height: 4em; + margin-bottom: 0.2em; } } + +.sg-label { + line-height: 1; } diff --git a/core/styleguide/css/styleguide-specific.scss b/core/styleguide/css/styleguide-specific.scss new file mode 100644 index 0000000..f55a993 --- /dev/null +++ b/core/styleguide/css/styleguide-specific.scss @@ -0,0 +1,141 @@ +/*------------------------------------*\ + $PATTERN LAB-SPECIFIC STYLES +\*------------------------------------*/ +/** + * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab. + * This is helpful for displaying demo styles for grids, animations, color swatches, etc + * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements + * These styles will not be your production CSS. + */ + + +/* Style Guide Interface Colors */ +$sg-primary : #222; +$sg-secondary : #808080; +$sg-tertiary : #ddd; +$sg-quaternary : #fff; +$sg-quinary : #999; +$sg-tint : rgba(255,255,255,0.05); +$sg-tint-2 : rgba(255,255,255,0.25); +$sg-tone : rgba(0,0,0,0.1); +$sg-tone-2 : rgba(0,0,0,0.3); + +/* Typography */ +$sg-font-size-norm : 100%; +$sg-font-size-sm : 70%; +$sg-font-size-large : 120%; + +/* Defaults */ +$sg-space : 1em; +$sg-doublespace : $sg-space*2; +$sg-pad : 1em; +$sg-pad-half : $sg-pad/2; + +/* Dimensions */ +$offset-top: 2em; + +/* Breakpoints */ +$sg-bp-small : 24em; +$sg-bp-small-2 : 30em; +$sg-bp-med : 48em; +$sg-bp-large : 72em; +$sg-bp-xl : 80em; + +$animate-quick: 0.2s; + + +// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles +.demo { + overflow: hidden; + margin-bottom: 1rem; +} + +.demo .gi, .demo .demo-block { + background: $sg-tertiary; + color: $sg-secondary; + text-align: center; + margin-bottom: $sg-pad-half; + padding: 1em !important; + + &:nth-of-type(2n) { + color: $sg-tertiary; + background: $sg-secondary; + } + + .gi { + background: $sg-tone; + color: $sg-tertiary; + + &:nth-of-type(2n) { + background: $sg-tone-2; + } + } +} + +//Demo box for animation +.demo-animate { + background: #ddd; + padding: $sg-pad; + margin-bottom: $sg-space; + text-align: center; +} + +//Animate Demo to show +.animate-move { + position: relative; + + .demo-shape { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 20px; + background: $sg-secondary; + } + + &:hover { + > .demo-shape { + left: 100%; + margin-left: -20px; + } + } +} + +// Style Guide color swatches +.sg-colors { + overflow: hidden; + + li { + overflow: hidden; + border: 1px solid $sg-tertiary; + padding: 0.3em; + margin: 0 0.2em 0.2em 0; + + @media all and (min-width: $sg-bp-small-2) { + float: left; + width: 5em; + } + } +} + +.sg-swatch { + display: block; + height: 1.5em; + width: 50%; + + @media all and (max-width: $sg-bp-small-2) { + float: left; + margin-right: 0.3em; + } + + @media all and (min-width: $sg-bp-small-2) { + width: 100%; + height: 4em; + margin-bottom: 0.2em; + } + +} + +.sg-label { + line-height: 1; +} \ No newline at end of file diff --git a/core/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css index 23b83b1..eac4951 100755 --- a/core/styleguide/css/styleguide.css +++ b/core/styleguide/css/styleguide.css @@ -478,35 +478,6 @@ span.sg-pattern-state:before { .sg-pattern-head a:hover { color: #222222; } -.sg-colors { - overflow: hidden; } - .sg-colors li { - overflow: hidden; - border: 1px solid #dddddd; - padding: 0.3em; - margin: 0 0.2em 0.2em 0; } - @media all and (min-width: 30em) { - .sg-colors li { - float: left; - width: 5em; } } - -.sg-swatch { - display: block; - height: 1.5em; - width: 50%; } - @media all and (max-width: 30em) { - .sg-swatch { - float: left; - margin-right: 0.3em; } } - @media all and (min-width: 30em) { - .sg-swatch { - width: 100%; - height: 4em; - margin-bottom: 0.2em; } } - -.sg-label { - line-height: 1; } - .sg-view-container { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -730,40 +701,3 @@ div.clear { /******************************************************************/ /* End Pattern Lab Interface code */ -.demo { - overflow: hidden; - margin-bottom: 1rem; } - -.demo .gi, .demo .demo-block { - background: #dddddd; - color: gray; - text-align: center; - margin-bottom: 0.5em; - padding: 1em !important; } - .demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) { - color: #dddddd; - background: gray; } - .demo .gi .gi, .demo .demo-block .gi { - background: rgba(0, 0, 0, 0.1); - color: #dddddd; } - .demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) { - background: rgba(0, 0, 0, 0.3); } - -.demo-animate { - background: #dddddd; - padding: 1em; - margin-bottom: 1em; - text-align: center; } - -.animate-move { - position: relative; } - .animate-move .demo-shape { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 20px; - background: gray; } - .animate-move:hover > .demo-shape { - left: 100%; - margin-left: -20px; } diff --git a/core/styleguide/css/styleguide.scss b/core/styleguide/css/styleguide.scss index 7fd533b..b0b38c0 100755 --- a/core/styleguide/css/styleguide.scss +++ b/core/styleguide/css/styleguide.scss @@ -468,7 +468,7 @@ $animate-quick: 0.2s; } //Pattern States (active, inprogress, complete, etc) - + /* basic styling */ .sg-pattern-state:before { margin-right: 4px; @@ -677,45 +677,6 @@ span.sg-pattern-state:before { } } -// Style Guide color swatches -.sg-colors { - overflow: hidden; - - li { - overflow: hidden; - border: 1px solid $sg-tertiary; - padding: 0.3em; - margin: 0 0.2em 0.2em 0; - - @media all and (min-width: $sg-bp-small-2) { - float: left; - width: 5em; - } - } -} - -.sg-swatch { - display: block; - height: 1.5em; - width: 50%; - - @media all and (max-width: $sg-bp-small-2) { - float: left; - margin-right: 0.3em; - } - - @media all and (min-width: $sg-bp-small-2) { - width: 100%; - height: 4em; - margin-bottom: 0.2em; - } - -} - -.sg-label { - line-height: 1; -} - //Annotations and code view container .sg-view-container { -moz-box-sizing: border-box; @@ -989,60 +950,4 @@ div.clear { } /******************************************************************/ -/* End Pattern Lab Interface code */ - -// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles -.demo { - overflow: hidden; - margin-bottom: 1rem; -} -.demo .gi, .demo .demo-block { - background: $sg-tertiary; - color: $sg-secondary; - text-align: center; - margin-bottom: $sg-pad-half; - padding: 1em !important; - - &:nth-of-type(2n) { - color: $sg-tertiary; - background: $sg-secondary; - } - - .gi { - background: $sg-tone; - color: $sg-tertiary; - - &:nth-of-type(2n) { - background: $sg-tone-2; - } - } -} - -//Demo box for animation -.demo-animate { - background: $sg-tertiary; - padding: $sg-pad; - margin-bottom: $sg-space; - text-align: center; -} - -//Animate Demo to show -.animate-move { - position: relative; - - .demo-shape { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 20px; - background: $sg-secondary; - } - - &:hover { - > .demo-shape { - left: 100%; - margin-left: -20px; - } - } -} \ No newline at end of file +/* End Pattern Lab Interface code */ \ No newline at end of file diff --git a/core/styleguide/html/styleguide.html b/core/styleguide/html/styleguide.html index aeae3f1..c62f305 100644 --- a/core/styleguide/html/styleguide.html +++ b/core/styleguide/html/styleguide.html @@ -16,6 +16,7 @@ + diff --git a/core/templates/index.mustache b/core/templates/index.mustache index 31a43da..5312105 100644 --- a/core/templates/index.mustache +++ b/core/templates/index.mustache @@ -13,6 +13,7 @@ + @@ -85,7 +86,7 @@
- + diff --git a/core/templates/pattern-header-footer/header.html b/core/templates/pattern-header-footer/header.html index 5180513..ec9904f 100644 --- a/core/templates/pattern-header-footer/header.html +++ b/core/templates/pattern-header-footer/header.html @@ -6,4 +6,5 @@ + diff --git a/public/styleguide/css/states.css b/public/styleguide/css/states.css deleted file mode 100644 index dfcd118..0000000 --- a/public/styleguide/css/states.css +++ /dev/null @@ -1,47 +0,0 @@ -/* basic styling */ -.sg-pattern-state:before { - margin-right: 4px; - content: "\2022"; - display: inline-block; - margin-bottom: -4px; - font-size: 18px; - vertical-align: bottom; -} - -/* nav styling */ -.sg-nav .sg-pattern-state:before { - margin-top: -4px; - margin-bottom: 0; - margin-left: -4px; - height: 20px; - display: block; - float: left; -} - -.sg-sub-nav .sg-pattern-state:before { - margin-left: -11px; - margin-right: 4px; -} - -/* call out for pattern's pattern state */ -span.sg-pattern-state { - color: #999; -} - -span.sg-pattern-state:before { - margin-bottom: -3px; - margin-left: 4px; -} - -/* pattern states */ -.inprogress:before { - color: #FF4136 !important; -} - -.inreview:before { - color: #FFCC00 !important; -} - -.complete:before { - color: #2ECC40 !important; -} \ No newline at end of file diff --git a/public/styleguide/css/static.css b/public/styleguide/css/static.css deleted file mode 100644 index b795e6b..0000000 --- a/public/styleguide/css/static.css +++ /dev/null @@ -1,374 +0,0 @@ -@charset "UTF-8"; -/* -colors -red: $orange; rgb(229,24,55) -gray: #808080; -*/ -/************Reset**************/ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - -html, body, div, object, iframe, fieldset { - margin: 0; - padding: 0; - border: 0; } - -ol, ul { - list-style: none; - margin: 0; - padding: 0; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -header, footer, nav, section, article, hgroup, figure { - display: block; } - -legend { - display: none; } - -/************End Reset**************/ -/************Global**************/ -body { - background: #fff; - color: #000; - font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif; - padding: 0; - -webkit-text-size-adjust: 100%; - border-top: 20px solid #000; - border-bottom: 20px solid #000; } - -a { - color: #808080; - text-decoration: none; } - -a:hover, a:focus { - color: #bededf; } - -p { - margin: 0 0 1em; } - -img, object, video { - max-width: 100%; - border: 0; } - -a img { - border: 0; - outline: 0; } - -h1 { - font-size: 3em; - line-height: 1; - letter-spacing: -0.02em; - margin-bottom: 0.2em; } - -h2 { - font-size: 2em; - line-height: 1.1; - margin-bottom: 0.2em; } - -h3 { - font-weight: normal; - line-height: 1.1; - padding-bottom: 0.4em; - border-bottom: 1px solid #ccc; } - -h1 a, h2 a, h3 a { - display: block; - color: #000; } - -h1 a:hover, h2 a:hover, h3 a:hover { - color: #bededf; } - -blockquote { - border-left: 0.5em solid #ddd; - padding-left: 1em; - margin-left: 1em; } - -small { - color: #bededf; } - -input[type=search] { - -webkit-appearance: none; - border-radius: 0; } - -::-webkit-input-placeholder { - color: #808080; } - -:-moz-placeholder { - color: #808080; } - -/************End Global**************/ -/************Classes**************/ -.inactive { - color: #ddd; } - -/************End Classes**************/ -/************Structure**************/ -.container { - max-width: 60em; - margin: 0 auto; - padding: 0 1em; - overflow: hidden; } - -[role=main] { - padding-bottom: 1em; } - -/*Footer*/ -[role=contentinfo] { - color: #fff; - background: #000; - margin: 0 -1em; - position: relative; - z-index: 2; } - [role=contentinfo] > div { - max-width: 60em; - padding: 0 1em; - margin: 0 auto; - overflow: hidden; } - -/*End Footer*/ -/*Grid*/ -.grid { - margin: 0 -1em; - overflow: hidden; } - -.grid:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; } - -.grid > h2 { - margin-left: 0.45em; } - -.grid > section { - padding: 1em 1em 0.5em; } - -.grid > section:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; } - -.grid ul { - overflow: hidden; } - -.grid ul li { - margin-bottom: 0.3em; } - -.featured:after { - content: "*"; - color: #bededf; } - -/*Fluid*/ -.fluid { - display: block; - margin: 0 auto; - max-width: 40em; } - -/*Homepage*/ -.home h1 { - margin-bottom: 0.2em; } - -.intro { - font-size: 1.8em; - line-height: 1.2; - margin: 0 auto; } - -.intro a:hover, .intro a:focus { - color: #000; - border-bottom-color: #000; } - -.ani { - position: relative; - height: 15em; - margin: 1em 0 0; - width: 100%; - z-index: 0; } - -.ani div { - width: 100%; } - -.ani div b { - display: block; - position: absolute; - top: 5%; - right: 5%; - bottom: 5%; - left: 5%; - background: rgba(229, 24, 55, 0.22); } - -/*Patterns*/ -.mod { - padding: 1em; } - -.pattern { - background: #f7f7f7; - border-bottom: 1px solid #808080; - margin-bottom: 1em; - overflow: hidden; } - -.pattern-description h1 { - font-size: 3.4em; - margin-bottom: 0.5em; } - -.pattern-description { - max-width: 40em; - margin: 0 auto; } - -.pattern-description ul, .pattern-description ol { - margin-bottom: 2em; } - -.pattern-description li { - margin-bottom: 1em; } - -/*Blog*/ -/*Blog Header*/ -.blog .container { - max-width: 62em; } - -.blog header[role=banner] { - overflow: hidden; - margin-bottom: 2em; - padding: 2em 0 1em; - border-bottom: 1px solid #000; } - -.blog-logo { - font-weight: normal; - font-size: 1.2em; - margin: 0 0 1em; } - -.blog-logo img { - width: 3.3em; } - -.blog-logo a { - color: #000; } - -.search-form { - width: 100%; - margin-bottom: 1em; } - -.search-field { - width: 100%; - padding: 0.5em 0; - border: 0; - border-bottom: 1px solid #808080; - outline: none; } - -.search-field:focus { - background: #bededf; - color: #fff; } - -.search-field:focus::-webkit-input-placeholder { - color: #fff; } - -.search-field:focus :-moz-placeholder { - color: #fff; } - -.blog .nav { - clear: both; } - -.blog .nav a { - display: block; - font-weight: bold; - color: #000; } - -.blog .nav a:hover { - color: #bededf; } - -/*Posts*/ -.posts ol > li { - padding-bottom: 1em; - border-bottom: 1px solid #ccc; - margin-bottom: 1em; - overflow: hidden; } - -.posts h2 { - font-size: 1.4em; - margin: 0.28em 0 0.1em; - font-weight: normal; } - -.posts h2 a { - color: #000; } - -.posts h2 a:hover, .posts h2 a:focus { - color: #bededf; } - -.permalink { - display: block; - font-size: 0.8em; - margin-bottom: 1.2em; } - -.post-body a { - border-bottom: 1px solid #ccc; } - -.posts blockquote { - margin: 0 0 1em; - color: #666; - border-left: 0.25em solid #ccc; - padding-left: 1em; } - -.tags { - float: left; } - -.tags li { - display: inline-block; - font-size: 0.8em; - margin-right: 0.5em; } - -.posts ol > li .tags a, .permalink { - color: #ccc; - -webkit-transition: color 0.3s ease-out; - -moz-transition: color 0.3s ease-out; - -ms-transition: color 0.3s ease-out; - -o-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; } - -.posts ol > li:hover .tags a, .posts ol > li:hover .permalink { - color: #808080; } - -.blog-nav { - text-align: center; - overflow: hidden; - padding: 1em 0; } - -.posts .blog-nav a { - border: 0; } - -.nav-next { - float: right; } - -.nav-prev { - float: left; } - -/* Sidebar */ -.sidebar { - font-size: 0.8em; - padding-bottom: 1.4em; } - -.sidebar div { - margin-bottom: 2em; } - -.sidebar h3 { - font-weight: bold; - font-size: 0.9em; - line-height: 1; - border-bottom: 1px solid #000; } - -.sidebar a { - color: #808080; } - -.sidebar a:hover, .sidebar a:focus { - color: #bededf; } - -.top { - clear: both; - display: block; - padding: 1em 0; } - -.top:before { - content: '▲'; } diff --git a/public/styleguide/css/static.scss b/public/styleguide/css/static.scss deleted file mode 100644 index a22d5d7..0000000 --- a/public/styleguide/css/static.scss +++ /dev/null @@ -1,404 +0,0 @@ -/* -colors -red: $orange; rgb(229,24,55) -gray: #808080; -*/ - -$orange : #bededf; - -$max-width: 60em; - -/************Reset**************/ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -html, body, div, object, iframe, fieldset { - margin: 0; - padding: 0; - border: 0; -} -ol, ul { - list-style: none; - margin: 0; - padding: 0; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -header, footer, nav, section, article, hgroup, figure { - display: block; -} -legend { - display: none; -} -/************End Reset**************/ - -/************Global**************/ -body { - background: #fff; - color: #000; - font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif; - padding: 0; - -webkit-text-size-adjust: 100%; - border-top: 20px solid #000; - border-bottom: 20px solid #000; -} -a { - color: #808080; - text-decoration: none; -} -a:hover, a:focus { - color: $orange; -} -p { - margin: 0 0 1em; -} -img, object, video { - max-width: 100%; - border: 0; -} -a img { - border: 0; - outline: 0; -} -h1 { - font-size: 3em; - line-height: 1; - letter-spacing: -0.02em; - margin-bottom: 0.2em; -} -h2 { - font-size: 2em; - line-height: 1.1; - margin-bottom: 0.2em; -} -h3 { - font-weight: normal; - line-height: 1.1; - padding-bottom: 0.4em; - border-bottom: 1px solid #ccc; -} -h1 a, h2 a, h3 a { - display: block; - color: #000; -} -h1 a:hover, h2 a:hover, h3 a:hover { - color: $orange; -} -blockquote { - border-left: 0.5em solid #ddd; - padding-left: 1em; - margin-left: 1em; -} -small { - color: $orange; -} -input[type=search] { - -webkit-appearance: none; - border-radius: 0; -} -::-webkit-input-placeholder { - color: #808080; -} -:-moz-placeholder { - color: #808080; -} -/************End Global**************/ - -/************Classes**************/ -.inactive { - color: #ddd; -} -/************End Classes**************/ - -/************Structure**************/ -.container { - max-width: $max-width; - margin: 0 auto; - padding: 0 1em; - overflow: hidden; -} - -[role=main] { - padding-bottom: 1em; -} - -/*Footer*/ -[role=contentinfo] { - color: #fff; - background: #000; - margin: 0 -1em; - position: relative; - z-index: 2; - - > div { - max-width: $max-width; - padding: 0 1em; - margin: 0 auto; - overflow: hidden; - } -} -/*End Footer*/ - -/*Grid*/ -.grid { - margin: 0 -1em; - overflow: hidden; -} -.grid:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -.grid > h2 { - margin-left: 0.45em; -} -.grid > section { - padding: 1em 1em 0.5em; -} -.grid > section:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -.grid ul { - overflow: hidden; -} -.grid ul li { - margin-bottom: 0.3em; -} -.featured:after { - content: "*"; - color: $orange; -} - -/*Fluid*/ -.fluid { - display: block; - margin: 0 auto; - max-width: 40em; -} - -/*Homepage*/ -.home h1 { - margin-bottom: 0.2em; -} -.intro { - font-size: 1.8em; - line-height: 1.2; - margin: 0 auto; -} -.intro a:hover ,.intro a:focus { - color: #000; - border-bottom-color: #000; -} - -.ani { - position: relative; - height: 15em; - margin: 1em 0 0; - width: 100%; - z-index: 0; -} -.ani div { - width: 100%; -} -.ani div b { - display: block; - position: absolute; - top: 5%; - right: 5%; - bottom: 5%; - left: 5%; - background: rgba(229,24,55,0.22); -} - - -/*Patterns*/ -.mod { - padding: 1em; -} -.pattern { - background: #f7f7f7; - border-bottom: 1px solid #808080; - margin-bottom: 1em; - overflow: hidden; -} -.pattern-description h1 { - font-size: 3.4em; - margin-bottom: 0.5em; -} -.pattern-description { - max-width: 40em; - margin: 0 auto; -} -.pattern-description ul, .pattern-description ol { - margin-bottom: 2em; -} -.pattern-description li { - margin-bottom: 1em; -} - - -/*Blog*/ -/*Blog Header*/ -.blog .container { - max-width: 62em; -} -.blog header[role=banner] { - overflow: hidden; - margin-bottom: 2em; - padding: 2em 0 1em; - border-bottom: 1px solid #000; -} -.blog-logo { - font-weight: normal; - font-size: 1.2em; - margin: 0 0 1em; -} -.blog-logo img { - width: 3.3em; -} -.blog-logo a { - color: #000; -} -.search-form { - width: 100%; - margin-bottom: 1em; -} -.search-field { - width: 100%; - padding: 0.5em 0; - border: 0; - border-bottom: 1px solid #808080; - outline: none; -} -.search-field:focus { - background: $orange; - color: #fff; -} -.search-field:focus::-webkit-input-placeholder { - color: #fff; -} - -.search-field:focus :-moz-placeholder { - color: #fff; -} - -.blog .nav { - clear: both; -} -.blog .nav a { - display: block; - font-weight: bold; - color: #000; -} -.blog .nav a:hover { - color: $orange; -} - -/*Posts*/ -.posts ol > li { - padding-bottom: 1em; - border-bottom: 1px solid #ccc; - margin-bottom: 1em; - overflow: hidden; -} -.posts h2 { - font-size: 1.4em; - margin: 0.28em 0 0.1em; - font-weight: normal; -} -.posts h2 a { - color: #000; -} -.posts h2 a:hover, .posts h2 a:focus { - color: $orange; -} -.permalink { - display: block; - font-size: 0.8em; - margin-bottom: 1.2em; -} -.post-body a { - border-bottom: 1px solid #ccc; -} -.posts blockquote { - margin: 0 0 1em; - color: #666; - border-left: 0.25em solid #ccc; - padding-left: 1em; -} -.tags { - float: left; -} -.tags li { - display: inline-block; - font-size: 0.8em; - margin-right: 0.5em; -} - -.posts ol > li .tags a, .permalink { - color: #ccc; - -webkit-transition: color 0.3s ease-out; - -moz-transition: color 0.3s ease-out; - -ms-transition: color 0.3s ease-out; - -o-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; -} -.posts ol > li:hover .tags a, .posts ol > li:hover .permalink { - color: #808080; -} -.blog-nav { - text-align: center; - overflow: hidden; - padding: 1em 0; -} -.posts .blog-nav a { - border: 0; -} -.nav-next { - float: right; -} -.nav-prev { - float: left; -} - -/* Sidebar */ -.sidebar { - font-size: 0.8em; - padding-bottom: 1.4em; -} -.sidebar div { - margin-bottom: 2em; -} -.sidebar h3 { - font-weight: bold; - font-size: 0.9em; - line-height: 1; - border-bottom: 1px solid #000; -} -.sidebar a { - color: #808080; -} -.sidebar a:hover, .sidebar a:focus { - color: $orange; -} - - - - -.top { - clear: both; - display: block; - padding: 1em 0; -} -.top:before { - content: '▲'; -} -