From 068f90fc8fb745119b6c6aa6820d48c4f69ee198 Mon Sep 17 00:00:00 2001
From: Tammie Lister <karmatosed@gmail.com>
Date: Mon, 28 Jul 2014 14:35:53 +0100
Subject: [PATCH] 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 <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. 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;
-}