From 068f90fc8fb745119b6c6aa6820d48c4f69ee198 Mon Sep 17 00:00:00 2001 From: Tammie Lister Date: Mon, 28 Jul 2014 14:35:53 +0100 Subject: [PATCH 1/2] Initial commit for _sass. Props @michaelArestad @hugobeta, and @jacklenox. * Give prefix to variable files. This avoids confusion with files of similar names like typography. It also helps with the visual recognition over what file does what. * Set up mixins-master. * Setting foundation for encouraging in larger projects use of more than one mixing file. This creates a master mixins file that we can then bring subs into if the project grows. * Fixed line breaks, spacing and new lines. Props @gregrickaby. * Nest widget select. Props @gregrickaby. * Make variables be variables-site. Makes this the global variables folder. People can then use sub folders in sections for local only variables. * Change content directory to be site directory. * Remove zip. Revert `style.css` to not be auto generated version. * Fixes rem size issue on body font. * Fixes for differences between `_s` and `_sass`. Fixed font sizes, added in display block to classes so they compile and the theme check passes. * Remove text domain and clean up css. --- sass/_reset.scss | 72 +++++++++++++++ sass/elements/_elements.scss | 19 ++++ sass/elements/_lists.scss | 25 ++++++ sass/elements/_tables.scss | 8 ++ sass/forms/_buttons.scss | 37 ++++++++ sass/forms/_fields.scss | 56 ++++++++++++ sass/forms/_forms.scss | 12 +++ sass/layout/_content-sidebar.scss | 20 +++++ sass/layout/_sidebar-content.scss | 20 +++++ sass/media/_captions.scss | 16 ++++ sass/media/_galleries.scss | 46 ++++++++++ sass/media/_media.scss | 25 ++++++ sass/mixins/_mixins-master.scss | 36 ++++++++ sass/modules/_accessibility.scss | 29 ++++++ sass/modules/_alignments.scss | 15 ++++ sass/modules/_clearings.scss | 23 +++++ sass/modules/_infinite-scroll.scss | 10 +++ sass/navigation/_links.scss | 12 +++ sass/navigation/_menus.scss | 98 ++++++++++++++++++++ sass/navigation/_navigation.scss | 9 ++ sass/site/_site.scss | 16 ++++ sass/site/primary/_asides.scss | 4 + sass/site/primary/_comments.scss | 6 ++ sass/site/primary/_posts-and-pages.scss | 28 ++++++ sass/site/secondary/_widgets.scss | 13 +++ sass/style.scss | 108 +++++++++++++++++++++++ sass/typography/_copy.scss | 70 +++++++++++++++ sass/typography/_headers.scss | 3 + sass/typography/_typography.scss | 14 +++ sass/variables-site/_colors.scss | 20 +++++ sass/variables-site/_structure.scss | 2 + sass/variables-site/_typography.scss | 5 ++ sass/variables-site/_variables-site.scss | 3 + style.css | 2 - 34 files changed, 880 insertions(+), 2 deletions(-) create mode 100644 sass/_reset.scss create mode 100644 sass/elements/_elements.scss create mode 100644 sass/elements/_lists.scss create mode 100644 sass/elements/_tables.scss create mode 100644 sass/forms/_buttons.scss create mode 100644 sass/forms/_fields.scss create mode 100644 sass/forms/_forms.scss create mode 100644 sass/layout/_content-sidebar.scss create mode 100644 sass/layout/_sidebar-content.scss create mode 100644 sass/media/_captions.scss create mode 100644 sass/media/_galleries.scss create mode 100644 sass/media/_media.scss create mode 100644 sass/mixins/_mixins-master.scss create mode 100644 sass/modules/_accessibility.scss create mode 100644 sass/modules/_alignments.scss create mode 100644 sass/modules/_clearings.scss create mode 100644 sass/modules/_infinite-scroll.scss create mode 100644 sass/navigation/_links.scss create mode 100644 sass/navigation/_menus.scss create mode 100644 sass/navigation/_navigation.scss create mode 100644 sass/site/_site.scss create mode 100644 sass/site/primary/_asides.scss create mode 100644 sass/site/primary/_comments.scss create mode 100644 sass/site/primary/_posts-and-pages.scss create mode 100644 sass/site/secondary/_widgets.scss create mode 100644 sass/style.scss create mode 100644 sass/typography/_copy.scss create mode 100644 sass/typography/_headers.scss create mode 100644 sass/typography/_typography.scss create mode 100644 sass/variables-site/_colors.scss create mode 100644 sass/variables-site/_structure.scss create mode 100644 sass/variables-site/_typography.scss create mode 100644 sass/variables-site/_variables-site.scss diff --git a/sass/_reset.scss b/sass/_reset.scss new file mode 100644 index 00000000..4c658074 --- /dev/null +++ b/sass/_reset.scss @@ -0,0 +1,72 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + border: 0; + font-family: inherit; + font-size: 100%; + font-style: inherit; + font-weight: inherit; + margin: 0; + outline: 0; + padding: 0; + vertical-align: baseline; +} +html { + font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ + overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ + -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ + -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ +} +*, +*:before, +*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ + @include box-sizing(border-box); +} +body { + background: $color__background-body; /* Fallback for when there is no custom background color defined. */ +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +nav, +section { + display: block; +} +ol, ul { + list-style: none; +} +table { /* tables still need 'cellspacing="0"' in the markup */ + border-collapse: separate; + border-spacing: 0; +} +caption, th, td { + font-weight: normal; + text-align: left; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} +a:focus { + outline: thin dotted; +} +a:hover, +a:active { + outline: 0; +} +a img { + border: 0; +} \ No newline at end of file diff --git a/sass/elements/_elements.scss b/sass/elements/_elements.scss new file mode 100644 index 00000000..992181fa --- /dev/null +++ b/sass/elements/_elements.scss @@ -0,0 +1,19 @@ +hr { + background-color: $color__background-hr; + border: 0; + height: 1px; + margin-bottom: 1.5em; +} + +@import "lists"; + +img { + height: auto; /* Make sure images are scaled correctly. */ + max-width: 100%; /* Adhere to container width. */ +} + +figure { + margin: 0; +} + +@import "tables"; \ No newline at end of file diff --git a/sass/elements/_lists.scss b/sass/elements/_lists.scss new file mode 100644 index 00000000..e271c24f --- /dev/null +++ b/sass/elements/_lists.scss @@ -0,0 +1,25 @@ +ul, ol { + margin: 0 0 1.5em 3em; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li > ul, +li > ol { + margin-bottom: 0; + margin-left: 1.5em; +} + +dt { + font-weight: bold; +} + +dd { + margin: 0 1.5em 1.5em; +} \ No newline at end of file diff --git a/sass/elements/_tables.scss b/sass/elements/_tables.scss new file mode 100644 index 00000000..98a77468 --- /dev/null +++ b/sass/elements/_tables.scss @@ -0,0 +1,8 @@ +table { + margin: 0 0 1.5em; + width: 100%; +} + +th { + font-weight: bold; +} \ No newline at end of file diff --git a/sass/forms/_buttons.scss b/sass/forms/_buttons.scss new file mode 100644 index 00000000..22f32156 --- /dev/null +++ b/sass/forms/_buttons.scss @@ -0,0 +1,37 @@ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + border: 1px solid; + border-color: $color__border-button; + @include border-radius(3px); + background: $color__background-button; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, .8); + cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ + -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ + @include font-size(1.2); + line-height: 1; + padding: .6em 1em .4em; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); +} + +button:hover, +input[type="button"]:hover, +input[type="reset"]:hover, +input[type="submit"]:hover { + border-color: $color__border-button-hover; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); +} + +button:focus, +input[type="button"]:focus, +input[type="reset"]:focus, +input[type="submit"]:focus, +button:active, +input[type="button"]:active, +input[type="reset"]:active, +input[type="submit"]:active { + border-color: $color__border-button-focus; + box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); +} \ No newline at end of file diff --git a/sass/forms/_fields.scss b/sass/forms/_fields.scss new file mode 100644 index 00000000..caee3fc3 --- /dev/null +++ b/sass/forms/_fields.scss @@ -0,0 +1,56 @@ +input[type="checkbox"], +input[type="radio"] { + padding: 0; /* Addresses excess padding in IE8/9 */ +} + +input[type="search"] { + -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ + -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ + -webkit-appearance: none; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ + border: 0; + padding: 0; +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +textarea { + color: $color__text-input; + border: 1px solid $color__border-input; + @include border-radius(3px); +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +textarea:focus { + color: $color__text-input-focus; +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"] { + padding: 3px; +} + +textarea { + overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ + padding-left: 3px; + vertical-align: top; /* Improves readability and alignment in all browsers */ + width: 100%; +} \ No newline at end of file diff --git a/sass/forms/_forms.scss b/sass/forms/_forms.scss new file mode 100644 index 00000000..c28b0604 --- /dev/null +++ b/sass/forms/_forms.scss @@ -0,0 +1,12 @@ +button, +input, +select, +textarea { + font-size: 100%; /* Corrects font size not being inherited in all browsers */ + margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ + vertical-align: baseline; /* Improves appearance and consistency in all browsers */ +} + +@import "buttons"; + +@import "fields"; \ No newline at end of file diff --git a/sass/layout/_content-sidebar.scss b/sass/layout/_content-sidebar.scss new file mode 100644 index 00000000..7a6cfae9 --- /dev/null +++ b/sass/layout/_content-sidebar.scss @@ -0,0 +1,20 @@ +.content-area { + float: left; + margin: 0 -$size__site-sidebar 0 0; + width: $size__site-main; +} + +.site-main { + margin: 0 $size__site-sidebar 0 0; +} + +.site-content .widget-area { + float: right; + overflow: hidden; + width: $size__site-sidebar; +} + +.site-footer { + clear: both; + width: $size__site-main; +} \ No newline at end of file diff --git a/sass/layout/_sidebar-content.scss b/sass/layout/_sidebar-content.scss new file mode 100644 index 00000000..521f857f --- /dev/null +++ b/sass/layout/_sidebar-content.scss @@ -0,0 +1,20 @@ +.content-area { + float: right; + margin: 0 0 0 -$size__site-sidebar; + width: $size__site-main; +} + +.site-main { + margin: 0 0 0 $size__site-sidebar; +} + +.site-content .widget-area { + float: left; + overflow: hidden; + width: $size__site-sidebar; +} + +.site-footer { + clear: both; + width: $size__site-main; +} \ No newline at end of file diff --git a/sass/media/_captions.scss b/sass/media/_captions.scss new file mode 100644 index 00000000..4feb5204 --- /dev/null +++ b/sass/media/_captions.scss @@ -0,0 +1,16 @@ +.wp-caption { + margin-bottom: 1.5em; + max-width: 100%; + + img[class*="wp-image-"] { + @include center-block; + } + + .wp-caption-text { + margin: 0.8075em 0; + } +} + +.wp-caption-text { + text-align: center; +} \ No newline at end of file diff --git a/sass/media/_galleries.scss b/sass/media/_galleries.scss new file mode 100644 index 00000000..ed3aa893 --- /dev/null +++ b/sass/media/_galleries.scss @@ -0,0 +1,46 @@ +.gallery { + margin-bottom: 1.5em; +} + +.gallery-item { + display: inline-block; + text-align: center; + vertical-align: top; + width: 100%; +} + +.gallery-columns-2 .gallery-item { + max-width: 50%; +} + +.gallery-columns-3 .gallery-item { + max-width: 33.33%; +} + +.gallery-columns-4 .gallery-item { + max-width: 25%; +} + +.gallery-columns-5 .gallery-item { + max-width: 20%; +} + +.gallery-columns-6 .gallery-item { + max-width: 16.66%; +} + +.gallery-columns-7 .gallery-item { + max-width: 14.28%; +} + +.gallery-columns-8 .gallery-item { + max-width: 12.5%; +} + +.gallery-columns-9 .gallery-item { + max-width: 11.11%; +} + +.gallery-caption { + display: block; +} \ No newline at end of file diff --git a/sass/media/_media.scss b/sass/media/_media.scss new file mode 100644 index 00000000..ee112027 --- /dev/null +++ b/sass/media/_media.scss @@ -0,0 +1,25 @@ +.page-content img.wp-smiley, +.entry-content img.wp-smiley, +.comment-content img.wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + +/* Make sure embeds and iframes fit their containers */ +embed, +iframe, +object { + max-width: 100%; +} + +/*-------------------------------------------------------------- +12.1 Captions +--------------------------------------------------------------*/ +@import "captions"; + +/*-------------------------------------------------------------- +12.2 Galleries +--------------------------------------------------------------*/ +@import "galleries"; \ No newline at end of file diff --git a/sass/mixins/_mixins-master.scss b/sass/mixins/_mixins-master.scss new file mode 100644 index 00000000..b23b0081 --- /dev/null +++ b/sass/mixins/_mixins-master.scss @@ -0,0 +1,36 @@ +// Rem output with px fallback +@mixin font-size($sizeValue: 1.6) { + font-size: ($sizeValue * 10) + px; + font-size: $sizeValue + rem; +} + +// Box model +@mixin box-sizing($box-model) { + box-sizing: $box-model; + -moz-box-sizing: $box-model; // Firefox <= 19 + -webkit-box-sizing: $box-model; // Safari <= 5 +} + +// Border radius +@mixin border-radius($radius) { + background-clip: padding-box; /* stops bg color from leaking outside the border: */ + border-radius: $radius; + -webkit-border-radius: $radius; +} + +// Center block +@mixin center-block { + display: block; + margin: 0 auto; +} + +// Clearfix +@mixin clearfix() { + content: ""; + display: table; +} + +// Center after (not all clearfix need this also) +@mixin clearfix-after() { + clear: both; +} \ No newline at end of file diff --git a/sass/modules/_accessibility.scss b/sass/modules/_accessibility.scss new file mode 100644 index 00000000..b3bc0008 --- /dev/null +++ b/sass/modules/_accessibility.scss @@ -0,0 +1,29 @@ +/* Text meant only for screen readers */ +.screen-reader-text { + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + + &:hover, + &:active, + &:focus { + background-color: $color__background-screen; + @include border-radius(3px); + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + color: $color__text-screen; + display: block; + @include font-size(1.4); + font-weight: bold; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; /* Above WP toolbar */ + } +} \ No newline at end of file diff --git a/sass/modules/_alignments.scss b/sass/modules/_alignments.scss new file mode 100644 index 00000000..2cf5abdb --- /dev/null +++ b/sass/modules/_alignments.scss @@ -0,0 +1,15 @@ +.alignleft { + display: inline; + float: left; + margin-right: 1.5em; +} + +.alignright { + display: inline; + float: right; + margin-left: 1.5em; +} + +.aligncenter { + @include center-block; +} \ No newline at end of file diff --git a/sass/modules/_clearings.scss b/sass/modules/_clearings.scss new file mode 100644 index 00000000..96c3245e --- /dev/null +++ b/sass/modules/_clearings.scss @@ -0,0 +1,23 @@ +.clear:before, +.clear:after, +.entry-content:before, +.entry-content:after, +.comment-content:before, +.comment-content:after, +.site-header:before, +.site-header:after, +.site-content:before, +.site-content:after, +.site-footer:before, +.site-footer:after { + @include clearfix; +} + +.clear:after, +.entry-content:after, +.comment-content:after, +.site-header:after, +.site-content:after, +.site-footer:after { + @include clearfix-after; +} \ No newline at end of file diff --git a/sass/modules/_infinite-scroll.scss b/sass/modules/_infinite-scroll.scss new file mode 100644 index 00000000..bad2243b --- /dev/null +++ b/sass/modules/_infinite-scroll.scss @@ -0,0 +1,10 @@ +/* Globally hidden elements when Infinite Scroll is supported and in use. */ +.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ +.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ + display: none; +} + +/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ +.infinity-end.neverending .site-footer { + display: block; +} \ No newline at end of file diff --git a/sass/navigation/_links.scss b/sass/navigation/_links.scss new file mode 100644 index 00000000..61b29511 --- /dev/null +++ b/sass/navigation/_links.scss @@ -0,0 +1,12 @@ +a { + color: $color__link; + + &:visited { + color: $color__link-visited; + } + &:hover, + &:focus, + &:active { + color: $color__link-hover; + } +} \ No newline at end of file diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss new file mode 100644 index 00000000..477b9b42 --- /dev/null +++ b/sass/navigation/_menus.scss @@ -0,0 +1,98 @@ +.main-navigation { + clear: both; + display: block; + float: left; + width: 100%; + + ul { + list-style: none; + margin: 0; + padding-left: 0; + + ul { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + float: left; + position: absolute; + top: 1.5em; + left: -999em; + z-index: 99999; + + ul { + left: -999em; + top: 0; + } + + li { + &:hover > ul { + left: 100%; + } + } + + :hover > a { + } + + a:hover { + } + } + + a { + width: 200px; + } + li:hover > ul { + left: auto; + } + } + li { + float: left; + position: relative; + + &:hover > a { + } + } + a { + display: block; + text-decoration: none; + } + + .current_page_item a, + .current-menu-item a { + } +} + +/* Small menu */ +.menu-toggle { + display: none; +} + +@media screen and (max-width: 600px) { + .menu-toggle, + .main-navigation.toggled .nav-menu { + display: block; + } + + .main-navigation ul { + display: none; + } +} + +.site-main .comment-navigation, +.site-main .paging-navigation, +.site-main .post-navigation { + margin: 0 0 1.5em; + overflow: hidden; +} + +.comment-navigation .nav-previous, +.paging-navigation .nav-previous, +.post-navigation .nav-previous { + float: left; + width: 50%; +} + +.comment-navigation .nav-next, +.paging-navigation .nav-next, +.post-navigation .nav-next { + float: right; + text-align: right; + width: 50%; +} \ No newline at end of file diff --git a/sass/navigation/_navigation.scss b/sass/navigation/_navigation.scss new file mode 100644 index 00000000..71f89934 --- /dev/null +++ b/sass/navigation/_navigation.scss @@ -0,0 +1,9 @@ +/*-------------------------------------------------------------- +5.1 Links +--------------------------------------------------------------*/ +@import "links"; + +/*-------------------------------------------------------------- +5.2 Menus +--------------------------------------------------------------*/ +@import "menus"; \ No newline at end of file diff --git a/sass/site/_site.scss b/sass/site/_site.scss new file mode 100644 index 00000000..bc644bc1 --- /dev/null +++ b/sass/site/_site.scss @@ -0,0 +1,16 @@ +// @import "layout/content-sidebar"; +// @import "layout/sidebar-content"; +/*-------------------------------------------------------------- +10.1 Posts and pages +--------------------------------------------------------------*/ +@import "primary/posts-and-pages"; + +/*-------------------------------------------------------------- +10.2 Asides +--------------------------------------------------------------*/ +@import "primary/asides"; + +/*-------------------------------------------------------------- +10.3 Comments +--------------------------------------------------------------*/ +@import "primary/comments"; \ No newline at end of file diff --git a/sass/site/primary/_asides.scss b/sass/site/primary/_asides.scss new file mode 100644 index 00000000..fd26fa23 --- /dev/null +++ b/sass/site/primary/_asides.scss @@ -0,0 +1,4 @@ +.blog .format-aside .entry-title, +.archive .format-aside .entry-title { + display: none; +} \ No newline at end of file diff --git a/sass/site/primary/_comments.scss b/sass/site/primary/_comments.scss new file mode 100644 index 00000000..13760c5c --- /dev/null +++ b/sass/site/primary/_comments.scss @@ -0,0 +1,6 @@ +.comment-content a { + word-wrap: break-word; +} +.bypostauthor { + display: block; +} diff --git a/sass/site/primary/_posts-and-pages.scss b/sass/site/primary/_posts-and-pages.scss new file mode 100644 index 00000000..9bec8980 --- /dev/null +++ b/sass/site/primary/_posts-and-pages.scss @@ -0,0 +1,28 @@ +.sticky { + display: block; +} + +.hentry { + margin: 0 0 1.5em; +} + +.byline, +.updated { + display: none; +} + +.single .byline, +.group-blog .byline { + display: inline; +} + +.page-content, +.entry-content, +.entry-summary { + margin: 1.5em 0 0; +} + +.page-links { + clear: both; + margin: 0 0 1.5em; +} \ No newline at end of file diff --git a/sass/site/secondary/_widgets.scss b/sass/site/secondary/_widgets.scss new file mode 100644 index 00000000..4166ad05 --- /dev/null +++ b/sass/site/secondary/_widgets.scss @@ -0,0 +1,13 @@ +.widget { + margin: 0 0 1.5em; + + /* Make sure select elements fit in widgets */ + select { + max-width: 100%; + } +} + +/* Search widget */ +.widget_search .search-submit { + display: none; +} \ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 00000000..2f19d89d --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,108 @@ +/* +Theme Name: _s +Theme URI: http://underscores.me/ +Author: Automattic +Author URI: http://automattic.com/ +Description: Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for. +Version: 1.0-wpcom +License: GNU General Public License v2 or later +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Text Domain: _s +Tags: + +This theme, like WordPress, is licensed under the GPL. +Use it to make something cool, have fun, and share what you've learned with others. + + _s is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc. + +Resetting and rebuilding styles have been helped along thanks to the fine work of +Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html +along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ +and Blueprint http://www.blueprintcss.org/ +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 - Reset +2.0 - Typography +3.0 - Elements +4.0 - Forms +5.0 - Navigation + 5.1 - Links + 5.2 - Menus +6.0 - Accessibility +7.0 - Alignments +8.0 - Clearings +9.0 - Widgets +10.0 - Content + 10.1 - Posts and pages + 10.2 - Asides + 10.3 - Comments +11.0 - Infinite scroll +12.0 - Media + 12.1 - Captions + 12.2 - Galleries +--------------------------------------------------------------*/ +@import "variables-site/variables-site"; +@import "mixins/mixins-master"; + +/*-------------------------------------------------------------- +1.0 - Reset +--------------------------------------------------------------*/ +@import "reset"; + +/*-------------------------------------------------------------- +2.0 Typography +--------------------------------------------------------------*/ +@import "typography/typography"; + +/*-------------------------------------------------------------- +3.0 Elements +--------------------------------------------------------------*/ +@import "elements/elements"; + +/*-------------------------------------------------------------- +4.0 Forms +--------------------------------------------------------------*/ +@import "forms/forms"; + +/*-------------------------------------------------------------- +5.0 Navigation +--------------------------------------------------------------*/ +@import "navigation/navigation"; + +/*-------------------------------------------------------------- +6.0 Accessibility +--------------------------------------------------------------*/ +@import "modules/accessibility"; + +/*-------------------------------------------------------------- +7.0 Alignments +--------------------------------------------------------------*/ +@import "modules/alignments"; + +/*-------------------------------------------------------------- +8.0 Clearings +--------------------------------------------------------------*/ +@import "modules/clearings"; + +/*-------------------------------------------------------------- +9.0 Widgets +--------------------------------------------------------------*/ +@import "site/secondary/widgets"; + +/*-------------------------------------------------------------- +10.0 Content +--------------------------------------------------------------*/ +@import "site/site"; + +/*-------------------------------------------------------------- +11.0 Infinite scroll +--------------------------------------------------------------*/ +@import "modules/infinite-scroll"; + +/*-------------------------------------------------------------- +12.0 Media +--------------------------------------------------------------*/ +@import "media/media"; diff --git a/sass/typography/_copy.scss b/sass/typography/_copy.scss new file mode 100644 index 00000000..115614ba --- /dev/null +++ b/sass/typography/_copy.scss @@ -0,0 +1,70 @@ +p { + margin-bottom: 1.5em; +} + +b, strong { + font-weight: bold; +} + +dfn, cite, em, i { + font-style: italic; +} + +blockquote { + margin: 0 1.5em; +} + +address { + margin: 0 0 1.5em; +} + +pre { + background: $color__background-pre; + font-family: $font__pre; + @include font-size(1.5); + line-height: $font__line-height-pre; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1.6em; +} + +code, kbd, tt, var { + @include font-size(1.5); + font-family: $font__code; +} + +abbr, acronym { + border-bottom: 1px dotted $color__border-abbr; + cursor: help; +} + +mark, ins { + background: $color__background-ins; + text-decoration: none; +} + +sup, +sub { + font-size: 75%; + height: 0; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + bottom: 1ex; +} + +sub { + top: .5ex; +} + +small { + font-size: 75%; +} + +big { + font-size: 125%; +} \ No newline at end of file diff --git a/sass/typography/_headers.scss b/sass/typography/_headers.scss new file mode 100644 index 00000000..281e6666 --- /dev/null +++ b/sass/typography/_headers.scss @@ -0,0 +1,3 @@ +h1, h2, h3, h4, h5, h6 { + clear: both; +} \ No newline at end of file diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss new file mode 100644 index 00000000..4f70ec99 --- /dev/null +++ b/sass/typography/_typography.scss @@ -0,0 +1,14 @@ +body, +button, +input, +select, +textarea { + color: $color__text-main; + font-family: $font__main; + @include font-size(1.6); + line-height: $font__line-height-body; +} + +@import "headers"; + +@import "copy"; \ No newline at end of file diff --git a/sass/variables-site/_colors.scss b/sass/variables-site/_colors.scss new file mode 100644 index 00000000..a76c546a --- /dev/null +++ b/sass/variables-site/_colors.scss @@ -0,0 +1,20 @@ +$color__background-body: #fff; +$color__background-screen: #f1f1f1; +$color__background-hr: #ccc; +$color__background-button: #e6e6e6; +$color__background-pre: #eee; +$color__background-ins: #fff9c0; + +$color__text-screen: #21759b; +$color__text-input: #666; +$color__text-input-focus: #111; +$color__link: royalblue; +$color__link-visited: purple; +$color__link-hover: midnightblue; +$color__text-main: #404040; + +$color__border-button: #ccc #ccc #bbb; +$color__border-button-hover: #ccc #bbb #aaa; +$color__border-button-focus: #aaa #bbb #bbb; +$color__border-input: #666; +$color__border-abbr: #666; \ No newline at end of file diff --git a/sass/variables-site/_structure.scss b/sass/variables-site/_structure.scss new file mode 100644 index 00000000..adbf8892 --- /dev/null +++ b/sass/variables-site/_structure.scss @@ -0,0 +1,2 @@ +$size__site-main: 100%; +$size__site-sidebar: 25%; \ No newline at end of file diff --git a/sass/variables-site/_typography.scss b/sass/variables-site/_typography.scss new file mode 100644 index 00000000..56ea1be6 --- /dev/null +++ b/sass/variables-site/_typography.scss @@ -0,0 +1,5 @@ +$font__main: sans-serif; +$font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; +$font__pre: "Courier 10 Pitch", Courier, monospace; +$font__line-height-body: 1.5; +$font__line-height-pre: 1.6; \ No newline at end of file diff --git a/sass/variables-site/_variables-site.scss b/sass/variables-site/_variables-site.scss new file mode 100644 index 00000000..661e342b --- /dev/null +++ b/sass/variables-site/_variables-site.scss @@ -0,0 +1,3 @@ +@import "colors"; +@import "typography"; +@import "structure"; \ No newline at end of file diff --git a/style.css b/style.css index ca9fd74d..d35564d3 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,6 @@ Version: 1.0-wpcom License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: _s -Domain Path: /languages/ Tags: This theme, like WordPress, is licensed under the GPL. @@ -790,4 +789,3 @@ object { .gallery-caption { display: block; -} From 1f62b392e8a257aab1bc28a2e130e0714b66c67c Mon Sep 17 00:00:00 2001 From: Konstantin Obenland Date: Mon, 11 Aug 2014 09:55:33 -0700 Subject: [PATCH 2/2] _s: Bring back closing curly brace. Erroneously removed while trying to sort out a merge conflict, when I squashed `_sass` commits. --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index d35564d3..e41a9e93 100644 --- a/style.css +++ b/style.css @@ -789,3 +789,4 @@ object { .gallery-caption { display: block; +}