Barnsbury: Adding variables for colors and fonts.

barnsbury/sass/_config-child-theme-deep.scss

@@ -10,9 +10,9 @@
 // Vertical Rhythm Multiplier
 $baseline-unit: 8px;
 
-$typescale-root: 18px; // Set 16px/1em default on html
+$typescale-root: 22px; // Set 16px/1em default on html
 $typescale-base: 1rem; // Set 1em default on body == $typescale-root;
-$typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root;
+$typescale-ratio: 1.125; // Run ratio math on 1em == $typescale-base * $typescale-root;
 
 $config-global: (
 
@@ -20,8 +20,8 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "sans-serif",
-			"secondary": "serif",
+			"primary": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
+			"secondary": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
 			"code": "monospace, monospace",
 			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
 		),
@@ -53,28 +53,28 @@ $config-global: (
 		/* Line Height */
 		"line-height": (
 			"base": strip-unit($typescale-base),
-			"body": 1.78,
-			"heading": 1.125,
+			"body": 1.8,
+			"heading": 1.2,
 		),
 	),
 
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": blue,
-			"hover": indigo,
+			"default": #20603c,
+			"hover": darken( #20603c, 10% ),
 		),
 		"secondary": (
 			"default": red,
 			"hover": darkred,
 		),
 		"foreground": (
-			"default": #444444,
-			"light": #767676, // must be accessible against background
-			"dark": #111111, // must be accessible against background
+			"default": #3c2323,
+			"light": lighten( #111, 22.5% ), // must be accessible against background
+			"dark": #0d1b24, // must be accessible against background
 		),
 		"background": (
-			"default": white,
+			"default": #FFFDF6,
 			"light": #FAFAFA, // must be accessible against foreground-default
 			"dark": #DDDDDD, // must be accessible against foreground-default
 		),
@@ -83,7 +83,7 @@ $config-global: (
 			"light": #FAFAFA,
 			"dark": #AAAAAA,
 		),
-		"text-selection": lightblue,
+		"text-selection": lighten( #20603c, 55% ),
 		"black": black,
 		"white": white,
 	),
@@ -162,7 +162,7 @@ $config-elements: (
 $config-button: (
 	// Colors
 	"color": (
-		"text": map-deep-get($config-global, "color", "background"),
+		"text": map-deep-get($config-global, "color", "background", "default"),
 		"text-hover": map-deep-get($config-global, "color", "background"),
 		"background": map-deep-get($config-global, "color", "primary", "default"),
 		"background-hover": map-deep-get($config-global, "color", "primary", "hover"),

barnsbury/sass/_extra-child-theme.scss

@@ -6,33 +6,3 @@
 a {
 	text-decoration: none;
 }
-
-.site-branding,
-.site-info,
-.main-navigation,
-.entry-header,
-.entry-footer,
-.page-title,
-.author-title,
-.comments-title,
-.comment-reply-title {
-	text-align: center;
-}
-
-.main-navigation > div {
-	text-align: left;
-}
-
-.comment-reply-title {
-	display: inherit;
-}
-
-.comment .comment-reply-title {
-	display: flex;
-}
-
-.main-navigation > div > ul,
-.social-navigation > div > ul,
-.pagination .nav-links {
-	justify-content: center;
-}

barnsbury/style-editor.css

@@ -168,31 +168,31 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * - Reset the browser
  */
 body {
-	color: #444444;
-	background-color: white;
-	font-family: serif;
-	font-size: 18px;
+	color: #3c2323;
+	background-color: #FFFDF6;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-size: 22px;
 	font-weight: normal;
-	line-height: 1.78;
+	line-height: 1.8;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
 
 .editor-post-title__block {
-	font-size: 18px;
+	font-size: 22px;
 }
 
 p {
 	font-size: 1em;
-	line-height: 1.78;
+	line-height: 1.8;
 }
 
 a {
-	color: blue;
+	color: #20603c;
 }
 
 a:hover {
-	color: indigo;
+	color: #133a24;
 }
 
 button,
@@ -213,14 +213,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.728rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.83333rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -242,7 +242,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.44rem;
+	font-size: 1.26562rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -250,13 +250,13 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.69444rem;
+	font-size: 0.79012rem;
 	letter-spacing: normal;
 }
 
 figcaption {
-	color: #767676;
-	font-size: 0.69444rem;
+	color: #4a4a4a;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -304,29 +304,29 @@ object {
 }
 
 .wp-block-button .wp-block-button__link {
-	color: ("default": white, "light": #FAFAFA, "dark": #DDDDDD);
+	color: #FFFDF6;
 	font-weight: 600;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2em;
+	font-size: 1.125em;
 	line-height: 1;
-	background-color: blue;
-	border-radius: 9px;
+	background-color: #20603c;
+	border-radius: 11px;
 	padding: 16px 16px;
 }
 
 .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus {
-	color: ("default": white, "light": #FAFAFA, "dark": #DDDDDD);
-	background-color: indigo;
+	color: ("default": #FFFDF6, "light": #FAFAFA, "dark": #DDDDDD);
+	background-color: #133a24;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: blue;
+	color: #20603c;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: indigo;
+	color: #133a24;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -335,7 +335,7 @@ object {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #444444;
+	background-color: #3c2323;
 	min-height: calc( 15 * 32px);
 	/* Treating H2 separately to account for legacy /core styles */
 }
@@ -346,7 +346,7 @@ object {
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: #FFFDF6;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
@@ -360,9 +360,9 @@ object {
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.48832em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 	padding: 0;
 	max-width: inherit;
 	text-align: inherit;
@@ -389,45 +389,45 @@ object {
 .wp-block-heading h4, h4, .h4,
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
-	font-family: sans-serif;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
 	font-weight: normal;
 	clear: both;
 }
 
 .wp-block-heading h1, h1, .h1 {
-	font-size: 2.98598em;
+	font-size: 2.02729em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h2, h2, .h2 {
-	font-size: 2.48832em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h3, h3, .h3 {
-	font-size: 2.0736em;
+	font-size: 1.60181em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h4, h4, .h4 {
-	font-size: 1.728em;
+	font-size: 1.42383em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h5, h5, .h5 {
-	font-size: 1.44em;
+	font-size: 1.26562em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h6, h6, .h6 {
-	font-size: 1.2em;
+	font-size: 1.125em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-gallery figcaption {
@@ -463,7 +463,7 @@ p.has-background:not(.has-background-background-color) a {
 	border-top-width: 4px;
 	border-bottom-color: #DDDDDD;
 	border-bottom-width: 4px;
-	color: #444444;
+	color: #3c2323;
 	/**
 	 * Block Options
 	 */
@@ -474,10 +474,10 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-size: 1.42383em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-pullquote a {
@@ -487,8 +487,8 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #767676;
-	font-size: 0.83333em;
+	color: #4a4a4a;
+	font-size: 0.88889em;
 	letter-spacing: normal;
 }
 
@@ -497,8 +497,8 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: blue;
-	color: white;
+	background-color: #20603c;
+	color: #FFFDF6;
 }
 
 .wp-block-pullquote.is-style-solid-color.alignleft blockquote,
@@ -527,14 +527,14 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: blue;
+	border-left-color: #20603c;
 	margin: 32px 0;
 	padding-left: 16px;
 }
 
 .wp-block-quote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-size: 1.42383em;
 	letter-spacing: normal;
 }
 
@@ -544,10 +544,10 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
-	font-family: sans-serif;
-	font-size: 2.0736em;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-size: 1.60181em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-separator,
@@ -579,7 +579,7 @@ hr.is-style-dots:before {
 
 table th,
 .wp-block-table th {
-	font-family: sans-serif;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
 }
 
 table td,
@@ -594,16 +594,16 @@ table th,
  * - Needs a special styles
  */
 .editor-post-title__block .editor-post-title__input {
-	color: #444444;
-	font-family: sans-serif;
+	color: #3c2323;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
 	font-weight: normal;
-	font-size: 2.48832em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .has-primary-color[class] {
-	color: blue !important;
+	color: #20603c !important;
 }
 
 .has-secondary-color[class] {
@@ -611,15 +611,15 @@ table th,
 }
 
 .has-foreground-color[class] {
-	color: #444444 !important;
+	color: #3c2323 !important;
 }
 
 .has-foreground-light-color[class] {
-	color: #767676 !important;
+	color: #4a4a4a !important;
 }
 
 .has-foreground-dark-color[class] {
-	color: #111111 !important;
+	color: #0d1b24 !important;
 }
 
 .has-background-light-color[class] {
@@ -631,12 +631,12 @@ table th,
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: #FFFDF6 !important;
 }
 
 .has-primary-background-color[class] {
-	background-color: blue !important;
-	color: white;
+	background-color: #20603c !important;
+	color: #FFFDF6;
 }
 
 .has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
@@ -646,7 +646,7 @@ table th,
 
 .has-secondary-background-color[class] {
 	background-color: red !important;
-	color: white;
+	color: #FFFDF6;
 }
 
 .has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
@@ -655,8 +655,8 @@ table th,
 }
 
 .has-foreground-background-color[class] {
-	background-color: #444444 !important;
-	color: white;
+	background-color: #3c2323 !important;
+	color: #FFFDF6;
 }
 
 .has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
@@ -665,8 +665,8 @@ table th,
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #767676 !important;
-	color: white;
+	background-color: #4a4a4a !important;
+	color: #FFFDF6;
 }
 
 .has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
@@ -675,8 +675,8 @@ table th,
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: #111111 !important;
-	color: white;
+	background-color: #0d1b24 !important;
+	color: #FFFDF6;
 }
 
 .has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
@@ -686,7 +686,7 @@ table th,
 
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
-	color: #444444;
+	color: #3c2323;
 }
 
 .has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
@@ -696,7 +696,7 @@ table th,
 
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
-	color: #444444;
+	color: #3c2323;
 }
 
 .has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
@@ -705,8 +705,8 @@ table th,
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
-	color: #444444;
+	background-color: #FFFDF6 !important;
+	color: #3c2323;
 }
 
 .has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
@@ -716,32 +716,32 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.83333em;
+	font-size: 0.88889em;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.2em;
+	font-size: 1.125em;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.44em;
-	line-height: 1.125;
+	font-size: 1.26562em;
+	line-height: 1.2;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 1.728em;
-	line-height: 1.125;
+	font-size: 1.42383em;
+	line-height: 1.2;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
-	font-family: sans-serif;
-	font-size: calc(2 * 2.98598em);
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-size: calc(2 * 2.02729em);
 	font-weight: normal;
 }