Merge pull request #3285 from Automattic/update/penscratch-editor-styles

Penscratch: Update editor styles

penscratch-2/css/blocks.css

@@ -42,12 +42,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin-top: 0.15em;
 }
 
-/* Gallery */
-
-.wp-block-gallery {
-	margin: 0 0 27px;
-}
-
 /* Quote */
 
 .wp-block-quote.is-large,

penscratch-2/css/editor-blocks.css

@@ -19,37 +19,11 @@ Description: Used to style Gutenberg Blocks in the editor.
 1.0 General Typography
 --------------------------------------------------------------*/
 
-.edit-post-visual-editor .editor-block-list__block,
-.editor-default-block-appender textarea.editor-default-block-appender__content {
-	font-family: "Roboto Slab", Georgia, Times, serif;
-}
-
-/* Font size */
-
-.edit-post-visual-editor .editor-block-list__block,
-.edit-post-visual-editor .editor-block-list__block p,
-.editor-default-block-appender textarea.editor-default-block-appender__content {
-	font-size: 15px;
-	font-weight: 300;
-	line-height: 1.7em;
-}
-
-@media (min-width: 50em) {
-	.edit-post-visual-editor .editor-block-list__block,
-	.edit-post-visual-editor .editor-block-list__block p,
-	.editor-default-block-appender textarea.editor-default-block-appender__content {
-		font-size: 18px;
-	}
-}
-
-/* Colour */
-
-.edit-post-visual-editor .editor-block-list__block {
-	color: #666;
+body {
+	background: #fff;
 }
 
 /* Post title */
-
 .editor-post-title__block .editor-post-title__input {
 	color: #666;
 	font-family: "Roboto Slab", Georgia, Times, serif;
@@ -62,517 +36,3 @@ Description: Used to style Gutenberg Blocks in the editor.
 		font-size: 32px;
 	}
 }
-
-/* Headings */
-
-.edit-post-visual-editor h1,
-.wp-block-freeform.block-library-rich-text__tinymce h1,
-.edit-post-visual-editor h2,
-.wp-block-freeform.block-library-rich-text__tinymce h2,
-.edit-post-visual-editor h3,
-.wp-block-freeform.block-library-rich-text__tinymce h3,
-.edit-post-visual-editor h4,
-.wp-block-freeform.block-library-rich-text__tinymce h4,
-.edit-post-visual-editor h5,
-.wp-block-freeform.block-library-rich-text__tinymce h5,
-.edit-post-visual-editor h6,
-.wp-block-freeform.block-library-rich-text__tinymce h6 {
-	color: #666;
-	font-weight: normal
-}
-
-.edit-post-visual-editor h1,
-.wp-block-freeform.block-library-rich-text__tinymce h1 {
-	font-size: 28px;
-}
-
-.edit-post-visual-editor h2,
-.wp-block-freeform.block-library-rich-text__tinymce h2 {
-	font-size: 20px;
-}
-
-.edit-post-visual-editor h3,
-.wp-block-freeform.block-library-rich-text__tinymce h3 {
-	font-size: 20px;
-}
-
-.edit-post-visual-editor h4,
-.wp-block-freeform.block-library-rich-text__tinymce h4 {
-	font-size: 16px;
-}
-
-.edit-post-visual-editor h5,
-.wp-block-freeform.block-library-rich-text__tinymce h5 {
-	font-size: 16px;
-}
-
-.edit-post-visual-editor h6,
-.wp-block-freeform.block-library-rich-text__tinymce h6 {
-	font-size: 14px;
-}
-
-@media (min-width: 50em) {
-	.edit-post-visual-editor h1,
-	.wp-block-freeform.block-library-rich-text__tinymce h1 {
-		font-size: 32px;
-	}
-
-	.edit-post-visual-editor h2,
-	.wp-block-freeform.block-library-rich-text__tinymce h2 {
-		font-size: 28px;
-	}
-
-	.edit-post-visual-editor h3,
-	.wp-block-freeform.block-library-rich-text__tinymce h3 {
-		font-size: 24px;
-	}
-
-	.edit-post-visual-editor h4,
-	.wp-block-freeform.block-library-rich-text__tinymce h4 {
-		font-size: 20px;
-	}
-}
-
-/*--------------------------------------------------------------
-2.0 General Block Settings
---------------------------------------------------------------*/
-
-/* Main content width */
-
-.wp-block {
-	max-width: 686px; /* 656px + 30px to account for padding */
-}
-
-/* Link styles */
-
-.edit-post-visual-editor a,
-.editor-block-list__block a,
-.wp-block-freeform.block-library-rich-text__tinymce a {
-	color: #1c7c7c;
-	text-decoration: none;
-}
-
-/* Table styles */
-
-.wp-block-freeform.block-library-rich-text__tinymce table {
-	border-collapse: collapse;
-	border: 0;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table th,
-.wp-block-freeform.block-library-rich-text__tinymce table td {
-	border: 0;
-	padding: 0.5em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table th {
-	border-bottom: 3px solid #eee;
-	text-transform: uppercase;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table td {
-	border-bottom: 1px solid #eee
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce td,
-.rtl .wp-block-freeform.block-library-rich-text__tinymce th {
-	text-align: right;
-}
-
-/* Quote styles */
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	border: 0;
-	padding-left: 64px;
-	position: relative;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
-	color: #eee;
-	content: "\201D";
-	display: block;
-	font-family: Baskerville, Georgia, serif;
-	font-size: 48px;
-	font-weight: bold;
-	line-height: 1;
-	position: absolute;
-	top: 2px;
-	left: 0;
-	transform: scaleX(-1);
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce  blockquote p {
-	color: #999;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
-	color: #999;
-	font-size: 15px;
-	font-style: none;
-	text-align: right;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	padding-left: 0;
-	padding-right: 64px;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
-	left: auto;
-	right: 0;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
-	text-align: left;
-}
-
-@media (min-width: 50em) {
-	.wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
-		font-size: 72px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce  blockquote p {
-		font-size: 21.6px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
-		font-size: 17.6px;
-		text-align: right;
-	}
-}
-
-/* List styles */
-
-.wp-block-freeform.block-library-rich-text__tinymce li,
-.editor-styles-wrapper li {
-	margin-bottom: 0;
-}
-
-/* Code styles */
-
-.wp-block-freeform.block-library-rich-text__tinymce code {
-
-}
-
-/* Caption styles */
-
-[class^="wp-block-"] figcaption {
-	font-size: 14.6px;
-}
-
-[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
-	color: inherit;
-	text-align: left;
-}
-
-.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
-	text-align: right;
-}
-
-/* Definition List styles */
-
-.wp-block-freeform.block-library-rich-text__tinymce dt {
-	font-weight: bold;
-}
-
-/* Pre styles */
-
-.wp-block-freeform.block-library-rich-text__tinymce pre {
-	color: #666;
-	font-family: "Roboto Slab", Georgia, Times, serif;
-	font-size: 15px;
-	font-weight: 300;
-	line-height: 27px;
-	overflow: auto;
-	max-width: 100%;
-	padding: 0;
-}
-
-@media (min-width: 50em) {
-	.wp-block-freeform.block-library-rich-text__tinymce pre {
-		font-size: 18px;
-	}
-}
-
-/*--------------------------------------------------------------
-3.0 Blocks - Common Blocks
---------------------------------------------------------------*/
-
-/* Paragraph */
-
-p.has-drop-cap:not(:focus)::first-letter {
-	font-size: 5em;
-	margin-top: 0.15em;
-}
-
-/* Quote */
-
-.wp-block-quote,
-.wp-block-quote:not(.is-large):not(.is-style-large),
-.rtl .wp-block-quote[style*="text-align:left"],
-.rtl .wp-block-quote[style*="text-align: left"],
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:left"],
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: left"] {
-	border: 0;
-	padding-left: 64px;
-	position: relative;
-}
-
-.wp-block-quote:before {
-	color: #eee;
-	content: "\201D";
-	display: block;
-	font-family: Baskerville, Georgia, serif;
-	font-size: 48px;
-	font-weight: bold;
-	position: absolute;
-	top: 16px;
-	left: 0;
-	transform: scaleX(-1);
-}
-
-.wp-block-quote[style*="text-align:right"],
-.wp-block-quote[style*="text-align: right"],
-.wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:right"],
-.wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: right"] {
-	padding: 0 64px 0 0;
-}
-
-.wp-block-quote[style*="text-align:right"]:before,
-.wp-block-quote[style*="text-align: right"]:before {
-	left: auto;
-	right: 0;
-}
-
-.edit-post-visual-editor .editor-block-list__block .wp-block-quote p {
-	color: #999;
-}
-
-.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
-.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
-	font-size: 22px;
-	font-style: normal;
-}
-
-.wp-block-quote .wp-block-quote__citation {
-	color: #999;
-	font-size: 15px;
-	text-align: right;
-}
-
-.rtl .editor-styles-wrapper .wp-block-quote,
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large) {
-	padding-left: 0;
-	padding-right: 64px;
-}
-
-.rtl .wp-block-quote:before {
-	left: auto;
-	right: 0;
-}
-
-.rtl .wp-block-quote[style*="text-align:left"]:before,
-.rtl .wp-block-quote[style*="text-align: left"]:before {
-	left: 0;
-	right: auto;
-}
-
-.rtl .wp-block-quote .wp-block-quote__citation {
-	text-align: left;
-}
-
-
-@media (min-width: 50em) {
-	.wp-block-quote:before {
-		font-size: 72px;
-	}
-
-	.edit-post-visual-editor .editor-block-list__block .wp-block-quote p {
-		font-size: 21.6px;
-	}
-
-	.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
-	.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
-		font-size: 28px;
-	}
-
-	.wp-block-quote .wp-block-quote__citation {
-		font-size: 17.6px;
-		text-align: right;
-	}
-}
-
-/* Cover */
-
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image h2,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-image-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover h2 {
-	font-size: 27px;
-}
-
-/* File */
-
-.wp-block-file__textlink {
-	color: #1c7c7c;
-}
-
-.wp-block-file .wp-block-file__button,
-.wp-block-file .wp-block-file__button:visited {
-	background: #e6e6e6;
-	border: 1px solid #ccc;
-	border-color: #ccc #ccc #bbb #ccc;
-	border-radius: 3px;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
-	color: rgba(0, 0, 0, .8);
-	/* Corrects inability to style clickable 'input' types in iOS */
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
-}
-
-/*--------------------------------------------------------------
-4.0 Blocks - Formatting
---------------------------------------------------------------*/
-
-/* Verse */
-
-.wp-block-verse pre {
-	font-style: italic;
-}
-
-/* Code */
-
-.wp-block-code {
-	border: none;
-	border-radius: 0;
-}
-
-.wp-block-code textarea {
-	background: transparent;
-}
-
-@media (min-width: 50em) {
-	.wp-block-code .editor-plain-text {
-		font-size: 18px;
-	}
-}
-
-/* Preformatted */
-
-.wp-block-preformatted pre {
-	font-family: inherit;
-	font-size: inherit;
-}
-
-/* Pullquote */
-
-.wp-block-pullquote {
-	border: 0;
-	color: #999;
-}
-
-.wp-block-pullquote__citation {
-	font-size: 15px;
-	text-transform: none;
-}
-
-.wp-block-pullquote.alignleft blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
-.wp-block-pullquote.alignright blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
-.wp-block-pullquote.alignleft blockquote > .editor-rich-text p,
-.wp-block-pullquote.alignright blockquote > .editor-rich-text p {
-	font-size: 20px;
-}
-
-@media (min-width: 50em) {
-	.wp-block-pullquote__citation {
-		font-size: 17.55px;
-	}
-}
-
-/* Table */
-
-.wp-block-table th,
-.wp-block-table td {
-	border: 0;
-	border-bottom: 1px solid #eee;
-}
-
-.wp-block-table th {
-	border-bottom-width: 3px;
-	text-align: left;
-	text-transform: uppercase;
-}
-
-.rtl .wp-block-table th {
-	text-align: right;
-}
-
-.wp-block-table__cell-content {
-	padding: 0.5em;
-}
-
-/*--------------------------------------------------------------
-5.0 Blocks - Layout Elements
---------------------------------------------------------------*/
-
-/* Buttons */
-
-.wp-block-button .wp-block-button__link {
-	background: #e6e6e6;
-	border: 1px solid #ccc;
-	border-color: #ccc #ccc #bbb #ccc;
-	color: rgba(0, 0, 0, .8);
-	font-size: 18px;
-	line-height: 24px;
-	padding: 12px 24px;
-}
-
-.is-style-outline .wp-block-button__link {
-	border: 1px solid currentColor;
-	background: transparent;
-}
-
-.is-style-outline .wp-block-button__link:not(.has-text-color) {
-	color: rgba(0, 0, 0, .8);
-}
-
-.wp-block-button .wp-block-button__link:not(.has-background) {
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
-	/* Corrects inability to style clickable 'input' types in iOS */
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
-}
-
-/* Separator */
-
-.wp-block-separator {
-	background-color: #ccc;
-	border: 0;
-	height: 1px;
-}
-
-/*--------------------------------------------------------------
-6.0 Blocks - Widgets
---------------------------------------------------------------*/
-
-/* General Widget styles */
-
-.edit-post-visual-editor [data-align="center"] .wp-block-categories__list,
-.edit-post-visual-editor [data-align="center"] .wp-block-archives,
-.edit-post-visual-editor [data-align="center"] .wp-block-lastest-posts {
-	list-style-position: inside;
-}
-
-/* Latest Comments */
-
-.editor-styles-wrapper .wp-block-latest-comments {
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.wp-block-latest-comments__comment-date {
-	color: inherit;
-}
-

penscratch-2/css/forms.css

@@ -0,0 +1,203 @@
+
+/* =Forms
+----------------------------------------------- */
+
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'],
+.button,
+.button:visited {
+	font-family: "Roboto Slab", Georgia, Times, serif;
+	box-sizing: border-box;
+	padding: 10px 14px;
+	-webkit-transition: all .3s ease-in-out;
+			transition: all .3s ease-in-out;
+	letter-spacing: 1px;
+	text-transform: uppercase;
+	color: #999;
+	border: 3px solid #eee;
+	background: white;
+	box-shadow: none;
+	text-shadow: none;
+}
+button:hover,
+button:focus,
+button:active,
+input[type='button']:hover,
+input[type='button']:focus,
+input[type='button']:active,
+input[type='reset']:hover,
+input[type='reset']:focus,
+input[type='reset']:active,
+input[type='submit']:hover,
+input[type='submit']:focus,
+input[type='submit']:active,
+.button:hover,
+.button:focus,
+.button:active {
+	-webkit-transition: all .3s ease-in-out;
+			transition: all .3s ease-in-out;
+	color: #1c7c7c;
+	border-color: #1c7c7c;
+	box-shadow: none;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+input[type='search'] {
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+			box-sizing: border-box;
+	max-width: 100%;
+	padding: 12px;
+	border: 1px solid #eee;
+}
+input[type='text']:active,
+input[type='text']:focus,
+input[type='email']:active,
+input[type='email']:focus,
+input[type='url']:active,
+input[type='url']:focus,
+input[type='password']:active,
+input[type='password']:focus,
+input[type='search']:active,
+input[type='search']:focus {
+	border-color: #d4d4d4;
+	outline: none;
+	background: white;
+}
+
+textarea {
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+			box-sizing: border-box;
+	max-width: 100%;
+	padding: 12px;
+	border: 1px solid #eee;
+}
+textarea:active,
+textarea:focus {
+	border-color: #d4d4d4;
+	outline: none;
+}
+
+button,
+input,
+select,
+textarea {
+	margin: 0;
+	/* Addresses margins set differently in IE6/7, F3, S5, Chrome */
+
+	vertical-align: baseline;
+	/* Improves appearance and consistency in all browsers */
+
+	*vertical-align: middle;
+	/* Improves appearance and consistency in all browsers */
+}
+
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+	cursor: pointer;
+	color: rgba(0, 0, 0, .8);
+	border: 1px solid #ccc;
+	border-color: #ccc #ccc #bbb #ccc;
+	border-radius: 3px;
+	background: #e6e6e6;
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
+	/* Corrects inability to style clickable 'input' types in iOS */
+	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
+	/* Improves usability and consistency of cursor style between image-type 'input' and others */
+
+	-webkit-appearance: button;
+}
+
+button:hover,
+input[type='button']:hover,
+input[type='reset']:hover,
+input[type='submit']:hover {
+	border-color: #ccc #bbb #aaa #bbb;
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 15px 17px rgba(255, 255, 255, .8), inset 0 -5px 12px rgba(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: #aaa #bbb #bbb #bbb;
+	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 2px 5px rgba(0, 0, 0, .15);
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+	padding: 0;
+	/* Addresses excess padding in IE8/9 */
+}
+
+input[type='search'] {
+	/* 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;
+			-webkit-appearance: textfield;
+}
+
+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 {
+	padding: 0;
+	/* Corrects inner padding and border displayed oddly in FF3 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
+
+	border: 0;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+input[type='search'],
+textarea {
+	color: #666;
+	border: 1px solid #ccc;
+	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: #111;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+input[type='search'] {
+	padding: 3px;
+}
+
+textarea {
+	overflow: auto;
+	/* Improves readability and alignment in all browsers */
+
+	width: 98%;
+	/* Removes default vertical scrollbar in IE6/7/8/9 */
+	padding-left: 3px;
+	vertical-align: top;
+}

penscratch-2/css/reset.css

@@ -0,0 +1,70 @@
+/* =Reset
+-------------------------------------------------------------- */
+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,
+th {
+	font-family: inherit;
+	font-size: 100%;
+	font-weight: inherit;
+	font-style: inherit;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+	border: 0;
+	outline: 0;
+}

penscratch-2/functions.php

@@ -126,6 +126,15 @@ if ( ! function_exists( 'penscratch_2_setup' ) ) :
 			)
 		);
 
+		add_theme_support( 'editor-styles' );
+		add_editor_style(
+			array(
+				'style.css',
+				'/css/blocks.css',
+				'/css/editor-blocks.css',
+				penscratch_2_fonts_url(),
+			)
+		);
 	}
 endif; // penscratch_2_setup
 add_action( 'after_setup_theme', 'penscratch_2_setup' );
@@ -204,9 +213,15 @@ add_action( 'widgets_init', 'penscratch_2_widgets_init' );
  * Enqueue scripts and styles.
  */
 function penscratch_2_scripts() {
-	wp_enqueue_style( 'penscratch-2-style', get_stylesheet_uri() );
+	wp_enqueue_style( 'penscratch-2-style', get_stylesheet_uri(), array( 'penscratch-2-reset' ) );
 	wp_enqueue_style( 'penscratch-2-fonts', penscratch_2_fonts_url(), array(), null );
 
+	// Theme reset stylesheet
+	wp_enqueue_style( 'penscratch-2-reset', get_theme_file_uri( '/css/reset.css' ), array(), '1.0' );
+
+	// Theme form styles
+	wp_enqueue_style( 'penscratch-2-reset', get_theme_file_uri( '/css/forms.css' ), array(), '1.0' );
+
 	// Theme block stylesheet.
 	wp_enqueue_style( 'penscratch-2-block-style', get_theme_file_uri( '/css/blocks.css' ), array( 'penscratch-2-style' ), '1.0' );
 

penscratch-2/style.css

@@ -3,7 +3,7 @@
  * Author: Automattic
  * Author URI: https://wordpress.com/themes/
  * Description: A clean, responsive writing theme with support for custom logos, featured images, fancy pull quotes, and more.
- * Version: 2.0.2-wpcom
+ * Version: 2.0.3-wpcom
  * License: GNU General Public License v2 or later
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
  * Text Domain: penscratch
@@ -19,78 +19,6 @@
  * along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
  * and Blueprint http://www.blueprintcss.org/ */
 
-
-/* =Reset
--------------------------------------------------------------- */
-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,
-th {
-	font-family: inherit;
-	font-size: 100%;
-	font-weight: inherit;
-	font-style: inherit;
-	margin: 0;
-	padding: 0;
-	vertical-align: baseline;
-	border: 0;
-	outline: 0;
-}
-
 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/4/#c790 */
@@ -441,126 +369,6 @@ img {
 	clear: both;
 }
 
-/* =Forms
------------------------------------------------ */
-button,
-input,
-select,
-textarea {
-	margin: 0;
-	/* Addresses margins set differently in IE6/7, F3, S5, Chrome */
-
-	vertical-align: baseline;
-	/* Improves appearance and consistency in all browsers */
-
-	*vertical-align: middle;
-	/* Improves appearance and consistency in all browsers */
-}
-
-button,
-input[type='button'],
-input[type='reset'],
-input[type='submit'] {
-	cursor: pointer;
-	color: rgba(0, 0, 0, .8);
-	border: 1px solid #ccc;
-	border-color: #ccc #ccc #bbb #ccc;
-	border-radius: 3px;
-	background: #e6e6e6;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
-	/* Corrects inability to style clickable 'input' types in iOS */
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
-
-	-webkit-appearance: button;
-}
-
-button:hover,
-input[type='button']:hover,
-input[type='reset']:hover,
-input[type='submit']:hover {
-	border-color: #ccc #bbb #aaa #bbb;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 15px 17px rgba(255, 255, 255, .8), inset 0 -5px 12px rgba(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: #aaa #bbb #bbb #bbb;
-	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 2px 5px rgba(0, 0, 0, .15);
-}
-
-input[type='checkbox'],
-input[type='radio'] {
-	padding: 0;
-	/* Addresses excess padding in IE8/9 */
-}
-
-input[type='search'] {
-	/* 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;
-			-webkit-appearance: textfield;
-}
-
-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 {
-	padding: 0;
-	/* Corrects inner padding and border displayed oddly in FF3 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
-
-	border: 0;
-}
-
-input[type='text'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-input[type='search'],
-textarea {
-	color: #666;
-	border: 1px solid #ccc;
-	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: #111;
-}
-
-input[type='text'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-input[type='search'] {
-	padding: 3px;
-}
-
-textarea {
-	overflow: auto;
-	/* Improves readability and alignment in all browsers */
-
-	width: 98%;
-	/* Removes default vertical scrollbar in IE6/7/8/9 */
-	padding-left: 3px;
-	vertical-align: top;
-}
-
 * html {
 	font-size: 100%;
 }
@@ -745,88 +553,6 @@ blockquote cite {
 	text-align: right;
 }
 
-button,
-input[type='button'],
-input[type='reset'],
-input[type='submit'],
-.button,
-.button:visited {
-	font-family: "Roboto Slab", Georgia, Times, serif;
-	box-sizing: border-box;
-	padding: 10px 14px;
-	-webkit-transition: all .3s ease-in-out;
-			transition: all .3s ease-in-out;
-	letter-spacing: 1px;
-	text-transform: uppercase;
-	color: #999;
-	border: 3px solid #eee;
-	background: white;
-	box-shadow: none;
-	text-shadow: none;
-}
-button:hover,
-button:focus,
-button:active,
-input[type='button']:hover,
-input[type='button']:focus,
-input[type='button']:active,
-input[type='reset']:hover,
-input[type='reset']:focus,
-input[type='reset']:active,
-input[type='submit']:hover,
-input[type='submit']:focus,
-input[type='submit']:active,
-.button:hover,
-.button:focus,
-.button:active {
-	-webkit-transition: all .3s ease-in-out;
-			transition: all .3s ease-in-out;
-	color: #1c7c7c;
-	border-color: #1c7c7c;
-	box-shadow: none;
-}
-
-input[type='text'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-input[type='search'] {
-	-webkit-box-sizing: border-box;
-	   -moz-box-sizing: border-box;
-			box-sizing: border-box;
-	max-width: 100%;
-	padding: 12px;
-	border: 1px solid #eee;
-}
-input[type='text']:active,
-input[type='text']:focus,
-input[type='email']:active,
-input[type='email']:focus,
-input[type='url']:active,
-input[type='url']:focus,
-input[type='password']:active,
-input[type='password']:focus,
-input[type='search']:active,
-input[type='search']:focus {
-	border-color: #d4d4d4;
-	outline: none;
-	background: white;
-}
-
-textarea {
-	-webkit-box-sizing: border-box;
-	   -moz-box-sizing: border-box;
-			box-sizing: border-box;
-	max-width: 100%;
-	padding: 12px;
-	border: 1px solid #eee;
-}
-textarea:active,
-textarea:focus {
-	border-color: #d4d4d4;
-	outline: none;
-}
-
 address {
 	font-style: italic;
 	margin-bottom: 27px;
@@ -1918,8 +1644,8 @@ div.sharedaddy div.sd-block {
 }
 @media screen and (min-width: 55em) {
 	.no-sidebar .site {
-		margin-right: auto; 
-		margin-left: auto;								
+		margin-right: auto;
+		margin-left: auto;
 		max-width: 872px;
 		padding: 54px 108px;
 	}