Begin styling editor, excepting blockquotes and pull quotes. Add some custom colors.

karuna/blocks.css

@@ -446,46 +446,73 @@ hr.wp-block-separator {
 	background-color: #fff;
 }
 
-.has-yellow-color,
-.has-yellow-color:hover,
-.has-yellow-color:focus,
-.has-yellow-color:active {
-	color: #d7b221;
+.has-purple-color,
+.has-purple-color:hover,
+.has-purple-color:focus,
+.has-purple-color:active {
+	color: #6636cc;
 }
 
-.has-yellow-background-color,
-.has-yellow-background-color:hover,
-.has-yellow-background-color:focus,
-.has-yellow-background-color:active {
-	background-color: #d7b221;
+.has-purple-background-color,
+.has-purple-background-color:hover,
+.has-purple-background-color:focus,
+.has-purple-background-color:active {
+	background-color: #6636cc;
 }
 
-.has-dark-yellow-color,
-.has-dark-yellow-color:hover,
-.has-dark-yellow-color:focus,
-.has-dark-yellow-color:active {
+.has-dark-purple-color,
+.has-dark-purple-color:hover,
+.has-dark-purple-color:focus,
+.has-dark-purple-color:active {
 	color: #9c8012;
 }
 
-.has-dark-yellow-background-color,
-.has-dark-yellow-background-color:hover,
-.has-dark-yellow-background-color:focus,
-.has-dark-yellow-background-color:active {
+.has-dark-purple-background-color,
+.has-dark-purple-background-color:hover,
+.has-dark-purple-background-color:focus,
+.has-dark-purple-background-color:active {
 	background-color: #9c8012;
 }
 
+.has-green-color,
+.has-green-color:hover,
+.has-green-color:focus,
+.has-green-color:active {
+	color: #85cc36;
+}
+
+.has-green-background-color,
+.has-green-background-color:hover,
+.has-green-background-color:focus,
+.has-green-background-color:active {
+	background-color: #85cc36;
+}
+
+.has-dark-green-color,
+.has-dark-green-color:hover,
+.has-dark-green-color:focus,
+.has-dark-green-color:active {
+	color: #9c8012;
+}
+
+.has-dark-green-background-color,
+.has-dark-green-background-color:hover,
+.has-dark-green-background-color:focus,
+.has-dark-green-background-color:active {
+	background-color: #9c8012;
+}
 .has-dark-gray-color,
 .has-dark-gray-color:hover,
 .has-dark-gray-color:focus,
 .has-dark-gray-color:active {
-	color: #474f53;
+	color: #333;
 }
 
 .has-dark-gray-background-color,
 .has-dark-gray-background-color:hover,
 .has-dark-gray-background-color:focus,
 .has-dark-gray-background-color:active {
-	background-color: #474f53;
+	background-color: #333;
 }
 
 .has-black-color,

karuna/editor-blocks.css

@@ -21,22 +21,22 @@
 .edit-post-visual-editor .editor-block-list__block,
 .edit-post-visual-editor .editor-block-list__block p:not(.wp-block-cover-text),
 .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
-	color: #192930;
-	font-family: "Cooper Hewitt", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 18px;
-	line-height: 1.875;
+	color: #333;
+	font-family: Karla, sans-serif;
+	font-size: 16px;
+	line-height: 1.6;
 }
 
 .alignleft {
 	display: inline;
 	float: left;
-	margin: .75em 1.5em .75em 0;
+	margin: .8em 1.6em .8em 0;
 }
 
 .alignright {
 	display: inline;
 	float: right;
-	margin: .75em 0 .75em 1.5em;
+	margin: .8em 0 .8em 1.6em;
 }
 
 .aligncenter {
@@ -47,24 +47,22 @@
 .wp-block-columns.alignfull,
 .wp-block-latest-comments.alignfull,
 .editor-block-list__block[data-align="full"] .wp-block-file {
-	padding-left: 1.5em;
-	padding-right: 1.5em;
+	padding-left: 1.6em;
+	padding-right: 1.6em;
 }
 
 .editor-block-list__block[data-align="full"] table.wp-block-table {
-	margin-left: .75em;
-	margin-right: .75em;
+	margin-left: .8em;
+	margin-right: .8em;
 }
 
 /* Title */
 
 .editor-post-title__block .editor-post-title__input {
-	font-family: "Archivo Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-weight: bold;
 	clear: both;
-	margin: 0 0 .8em;
-	line-height: 1.2;
-	border-width: 0;
+	font-weight: bold;
+	font-family: Karla, sans-serif;
+	text-transform: uppercase;
 }
 
 /* Headings */
@@ -75,63 +73,76 @@
 .edit-post-visual-editor h4,
 .edit-post-visual-editor h5,
 .edit-post-visual-editor h6 {
-	font-family: "Archivo Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-weight: bold;
 	clear: both;
-	margin: .8em 0;
+	font-weight: bold;
+	font-family: Karla, sans-serif;
+	text-transform: uppercase;
 }
 
 .edit-post-visual-editor h1 {
-	font-size: 36px;
-	line-height: 1.2;
-	margin: .4em 0;
+	font-size: 32px;
 }
 
 .edit-post-visual-editor h2 {
-	font-size: 32px;
-	line-height: 1.2;
-	margin: .4em 0;
+	font-size: 30px;
 }
 
 .edit-post-visual-editor h3 {
-	font-size: 24px;
-	margin: .4em 0;
+	font-size: 26px;
 }
 
 .edit-post-visual-editor h4 {
-	color: #a5a29d;
-	font-size: 20px;
-	text-transform: uppercase;
-	letter-spacing: 1px;
+	font-size: 18px;
 }
 
 .edit-post-visual-editor h5 {
-	color: #a5a29d;
 	font-size: 16px;
-	text-transform: uppercase;
-	letter-spacing: 1px;
 }
 
 .edit-post-visual-editor h6 {
-	color: #a5a29d;
 	font-size: 14px;
-	letter-spacing: 1px;
-	text-transform: uppercase;
+}
+
+@media screen and (min-width: 768px) {
+	.edit-post-visual-editor h1 {
+		font-size: 42px;
+	}
+
+	.edit-post-visual-editor h2 {
+		font-size: 32px;
+	}
+
+	.edit-post-visual-editor h3 {
+		font-size: 30px;
+	}
+
+	.edit-post-visual-editor h4 {
+		font-size: 26px;
+	}
+
+	.edit-post-visual-editor h5 {
+		font-size: 20px;
+	}
+
+	.edit-post-visual-editor h6 {
+		font-size: 16px;
+	}
 }
 
 /* Paragraphs */
 
 .edit-post-visual-editor p {
-	margin: 0 0 1.8em;
+	margin: .8em 0;
 }
 
 .edit-post-visual-editor blockquote p {
-	margin-bottom: 1.8em;
+	margin: .8em 0;
 }
 
 /* Images */
 
 .wp-block-image figcaption {
+	font-style: italic;
 	text-align: center;
 }
 
@@ -142,7 +153,7 @@
 /* Main column width */
 
 .wp-block {
-	max-width: 742px; /* 712px + 30px to account for padding */
+	max-width: 715px; /* 685px + 30px to account for padding */
 }
 
 /* Link styles */
@@ -150,7 +161,10 @@
 .edit-post-visual-editor a,
 .editor-block-list__block a,
 .wp-block-freeform.block-library-rich-text__tinymce a {
-	color: #d7b221;
+	color: #6636cc;
+	font-weight: bold;
+	text-decoration: none;
+	transition: 0.3s;
 }
 
 .edit-post-visual-editor a:hover,
@@ -162,8 +176,7 @@
 .wp-block-freeform.block-library-rich-text__tinymce a:hover,
 .wp-block-freeform.block-library-rich-text__tinymce a:focus,
 .wp-block-freeform.block-library-rich-text__tinymce a:active {
-	color: #ab8d1a;
-	text-decoration: underline;
+	color: #85cc36;
 }
 
 /* List styles */
@@ -175,7 +188,7 @@
 .editor-block-list__block ol,
 .block-library-list ol.editor-rich-text__tinymce {
 	margin: 0 0 1.6em 1.6em;
-	padding-left: 0;
+	padding: 0;
 }
 
 .block-library-list .editor-rich-text__tinymce {
@@ -186,7 +199,7 @@
 .edit-post-visual-editor ul:not(.wp-block-gallery),
 .editor-block-list__block ul:not(.wp-block-gallery),
 .block-library-list ul {
-	list-style: square;
+	list-style: disc;
 }
 
 .edit-post-visual-editor ol,
@@ -202,7 +215,7 @@
 .editor-block-list__block li > ol,
 .block-library-list li > ol {
 	margin-bottom: 0;
-	margin-left: 1.5em;
+	margin-left: 1.6em;
 }
 
 .rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
@@ -212,14 +225,15 @@
 .rtl .editor-block-list__block ol,
 .rtl .block-library-list ol.editor-rich-text__tinymce {
 	margin-left: 0;
-	margin-right: 1.5em;
+	margin-right: 1.6em;
 	padding: 0;
 }
 
 /* Captions */
 
 [class^="wp-block-"] figcaption {
-	font-size: 14px;
+	text-align: center;
+	font-style: italic;
 }
 
 /*--------------------------------------------------------------
@@ -237,14 +251,14 @@
 /* Quote */
 
 .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large) {
-	margin: 0 1.5em;
+	margin: 0 1.6em;
 	border: 0;
 	padding: 0;
 }
 
 .editor-block-list__block .wp-block-quote {
 	font-style: normal;
-	margin: 0 1.5em;
+	margin: 0 1.6em;
 }
 
 .edit-post-visual-editor .editor-block-list__block blockquote p:not(.wp-block-cover-text) {
@@ -272,15 +286,15 @@
 }
 
 .editor-block-list__block .wp-block-quote.alignleft {
-	margin: .75em 1.5em .75em 0;
+	margin: .8em 1.6em .8em 0;
 }
 
 .editor-block-list__block .wp-block-quote.alignright {
-	margin: .75em 0 .75em 1.5em;
+	margin: .8em 0 .8em 1.6em;
 }
 
 .editor-block-list__block .wp-block-quote.aligncenter {
-	margin-bottom: .75em;
+	margin-bottom: .8em;
 }
 
 .rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
@@ -290,7 +304,7 @@
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	font-style: normal;
-	margin: 0 .75em;
+	margin: 0 .8em;
 	padding: 0;
 }
 
@@ -303,7 +317,7 @@
 
 .editor-block-list__block .wp-block-quote.is-large p,
 .editor-block-list__block .wp-block-quote.is-style-large p {
-	margin-bottom: .75em;
+	margin-bottom: .8em;
 	font-style: normal;
 }
 
@@ -314,27 +328,29 @@
 /* File */
 
 .wp-block-file .wp-block-file__button {
-	border: 0;
-	border-radius: 0;
-	background: #d7b221;
+	border: 2px solid;
+	border-color: #6636cc;
+	border-radius: 10px;
+	background: transparent;
 	box-shadow: none;
-	color: white;
-	font-size: 16px;
+	color: #6636cc;
 	font-weight: bold;
-	text-transform: uppercase;
+	font-size: 16px;
+	font-size: 1rem;
 	letter-spacing: 1px;
 	line-height: 1;
-	padding: 1.4em 1.6em 1.2em;
+	padding: 0.8em 1.6em 0.8em;
+	text-shadow: none;
+	text-decoration: none;
+	text-transform: uppercase;
 	transition: 0.3s;
 }
 
 .wp-block-file .wp-block-file__button:hover,
 .wp-block-file .wp-block-file__button:focus {
-	background: #c1a01e;
+	border-color: #85cc36;
 	box-shadow: none;
-	color: #fff;
-	transition: 0.3s;
-	text-decoration: none;
+	color: #85cc36;
 }
 
 /*--------------------------------------------------------------
@@ -349,7 +365,7 @@
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
-	margin-bottom: 1.5em;
+	margin-bottom: 1.6em;
 	max-width: 100%;
 	overflow: auto;
 	padding: 0;
@@ -358,24 +374,25 @@
 /* Code */
 
 .wp-block-code {
-	background: #eee;
+	background: rgba(0, 0, 0, 0.02);
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	font-size: 15px;
+	font-size: 0.9375rem;
 	line-height: 1.6;
-	margin-bottom: 1.875em;
+	margin-bottom: 1.6em;
 	max-width: 100%;
 	overflow: auto;
-	padding: 1.875em;
+	padding: 1.6em;
 }
 
 .wp-block-code textarea {
-	background: #eee;
+	background: rgba(0, 0, 0, 0.02);
 }
 
 /* Classic */
 
 .wp-block-freeform.block-library-rich-text__tinymce address {
-	margin-bottom: 1.5em;
+	margin-bottom: 1.6em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce ol {
@@ -385,13 +402,13 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce li > ol {
-	margin-left: 1.5em;
+	margin-left: 1.6em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 	border: 0;
 	font-style: normal;
-	margin: 0 1.5em 1.5em;
+	margin: 0 1.6em 1.6em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
@@ -412,7 +429,7 @@
 .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 	margin-right: 0;
 	padding-left: 0;
-	padding-right: 1.5em;
+	padding-right: 1.6em;
 }
 
 .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
@@ -424,11 +441,11 @@
 }
 
 .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
-	margin: .75em 1.5em .75em 0;
+	margin: .8em 1.6em .8em 0;
 }
 
 .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
-	margin: .75em 0 .75em 1.5em;
+	margin: .8em 0 .8em 1.6em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h1,
@@ -437,64 +454,78 @@
 .wp-block-freeform.block-library-rich-text__tinymce h4,
 .wp-block-freeform.block-library-rich-text__tinymce h5,
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
-	font-family: "Archivo Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-weight: bold;
 	clear: both;
-	margin: .8em 0;
+	font-weight: bold;
+	font-family: Karla, sans-serif;
+	text-transform: uppercase;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h1 {
-	font-size: 36px;
-	line-height: 1.2;
-	margin: .4em 0;
+	font-size: 32px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h2 {
-	font-size: 32px;
-	line-height: 1.2;
-	margin: .4em 0;
+	font-size: 30px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h3 {
-	font-size: 24px;
-	margin: .4em 0;
+	font-size: 26px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h4 {
-	color: #a5a29d;
-	font-size: 20px;
-	text-transform: uppercase;
-	letter-spacing: 1px;
+	font-size: 18px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h5 {
-	color: #a5a29d;
 	font-size: 16px;
-	text-transform: uppercase;
-	letter-spacing: 1px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
-	color: #a5a29d;
 	font-size: 14px;
-	letter-spacing: 1px;
-	text-transform: uppercase;
+}
+
+@media screen and (min-width: 768px) {
+	.wp-block-freeform.block-library-rich-text__tinymce h1 {
+		font-size: 42px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h2 {
+		font-size: 32px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h3 {
+		font-size: 30px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h4 {
+		font-size: 26px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h5 {
+		font-size: 20px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h6 {
+		font-size: 16px;
+	}
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce pre {
-	background: #eee;
+	background: rgba(0, 0, 0, 0.02);
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	font-size: 15px;
+	font-size: 0.9375rem;
 	line-height: 1.6;
-	margin-bottom: 1.875em;
+	margin-bottom: 1.6em;
 	max-width: 100%;
 	overflow: auto;
-	padding: 1.875em;
+	padding: 1.6em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table {
+	background-color: rgba(0, 0, 0, 0.02);
 	width: 100%;
-	margin: 0 0 1.5em;
+	margin: 0 0 1.6em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce .alternate {
@@ -502,10 +533,12 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table td {
+	padding: 8px 5px;
 	border: 0;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table th {
+	padding: 8px 5px;
 }
 
 .rtl .wp-block-freeform.block-library-rich-text__tinymce th,
@@ -515,14 +548,15 @@
 /* Preformatted */
 
 .editor-block-list__block .wp-block-preformatted pre {
-	background: #eee;
+	background: rgba(0, 0, 0, 0.02);
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	font-size: 15px;
+	font-size: 0.9375rem;
 	line-height: 1.6;
-	margin-bottom: 1.875em;
+	margin-bottom: 1.6em;
 	max-width: 100%;
 	overflow: auto;
-	padding: 1.875em;
+	padding: 1.6em;
 }
 
 /* Pullquote */
@@ -542,7 +576,7 @@
 	border-bottom: 2px solid #d7b221;
 	font-style: italic;
 	font-size: 24px;
-	margin: 0 0 1.5em;
+	margin: 0 0 1.6em;
 	padding: .8em 0;
 }
 
@@ -551,21 +585,21 @@
 }
 
 .wp-block-pullquote.alignfull blockquote {
-	padding-left: 1.5em;
-	padding-right: 1.5em;
+	padding-left: 1.6em;
+	padding-right: 1.6em;
 }
 
 .wp-block-pullquote.alignleft {
-	margin-right: 1.5em;
+	margin-right: 1.6em;
 }
 
 .wp-block-pullquote.alignright {
-	margin-left: 1.5em;
+	margin-left: 1.6em;
 }
 
 .wp-block-pullquote blockquote > .editor-rich-text p {
 	font-size: 24px;
-	margin-bottom: .75em;
+	margin-bottom: .8em;
 }
 
 .wp-block-pullquote.alignleft blockquote > .editor-rich-text p,
@@ -588,16 +622,19 @@
 }
 
 .editor-block-list__block table.wp-block-table {
+	background-color: rgba(0, 0, 0, 0.02);
 	width: 100%;
-	margin: 0 0 1.5em;
+	margin: 0 0 1.6em;
 }
 
 .editor-block-list__block table.wp-block-table td {
 	border: 0;
+	padding: 8px 5px;
 }
 
 .editor-block-list__block table.wp-block-table th {
 	border: 0;
+	padding: 8px 5px;
 }
 
 /*--------------------------------------------------------------
@@ -606,15 +643,18 @@
 
 /* Buttons */
 .wp-block-button .wp-block-button__link {
-	border: 0;
-	border-radius: 0;
+	border: 2px solid currentColor;
+	border-radius: 10px;
 	box-shadow: none;
-	font-size: 16px;
 	font-weight: bold;
-	text-transform: uppercase;
+	font-size: 16px;
+	font-size: 1rem;
 	letter-spacing: 1px;
 	line-height: 1;
-	padding: 1.4em 1.6em 1.2em;
+	padding: 0.8em 1.6em 0.8em;
+	text-shadow: none;
+	text-decoration: none;
+	text-transform: uppercase;
 	transition: 0.3s;
 }
 
@@ -622,37 +662,37 @@
 .wp-block-button .wp-block-button__link:hover,
 .wp-block-button .wp-block-button__link:focus {
 	box-shadow: none;
-	transition: 0.3s;
-	text-decoration: none;
 }
 
 .wp-block-button__link:not(.has-background) {
-	background: #d7b221;
+	background: transparent;
 }
 
 .wp-block-button__link:not(.has-text-color) {
-	color: #fff;
+	color: #6636cc;
+	border-color: #6636cc;
 }
 
 .wp-block-button__link:not(.has-text-color):active,
 .wp-block-button__link:not(.has-text-color):focus,
 .wp-block-button__link:not(.has-text-color):hover {
-	color: #fff;
+	border-color: #85cc36;
+	color: #85cc36;
 }
 
 .wp-block-button__link:not(.has-background):active,
 .wp-block-button__link:not(.has-background):focus,
 .wp-block-button__link:not(.has-background):hover {
-	background: #c1a01e;
+	background: transparent;
 }
 
 /* Separator */
 
 .wp-block-separator {
-	background-color: #eeece8;
+	background-color: #ddd;
 	border: 0;
 	height: 1px;
-	margin-bottom: 1.5em;
+	margin-bottom: 1.6em;
 }
 
 
@@ -680,9 +720,9 @@
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #eeece8;
+	border-top: 1px solid #ddd;
 	margin-bottom: 0;
-	padding: .75em 0;
+	padding: .8em 0;
 }
 
 .rtl ol.wp-block-latest-comments {

karuna/functions.php

@@ -54,7 +54,7 @@ function karuna_setup() {
 			array(
 				'name'  => esc_html__( 'Dark Gray', 'karuna' ),
 				'slug' => 'dark-gray',
-				'color' => '#474f53',
+				'color' => '#333333',
 			),
 			array(
 				'name'  => esc_html__( 'Medium Gray', 'karuna' ),
@@ -72,13 +72,23 @@ function karuna_setup() {
 				'color' => '#ffffff',
 			),
 			array(
-				'name'  => esc_html__( 'Yellow', 'karuna' ),
-				'slug' => 'yellow',
-				'color' => '#d7b221',
+				'name'  => esc_html__( 'Purple', 'karuna' ),
+				'slug' => 'purple',
+				'color' => '#6636cc',
 			),
 			array(
-				'name'  => esc_html__( 'Dark Yellow', 'karuna' ),
-				'slug' => 'dark-yellow',
+				'name'  => esc_html__( 'Dark Purple', 'karuna' ),
+				'slug' => 'dark-purple',
+				'color' => '#9c8012',
+			),
+			array(
+				'name'  => esc_html__( 'Green', 'karuna' ),
+				'slug' => 'green',
+				'color' => '#85cc36',
+			),
+			array(
+				'name'  => esc_html__( 'Dark Green', 'karuna' ),
+				'slug' => 'dark-green',
 				'color' => '#9c8012',
 			),
 		)