Start moving color-changing code to separate 'paint' stylesheet

web/themes/custom/geofresco/src/global/_layout.scss

@@ -54,22 +54,3 @@
     height: 16rem;
   }
 }
-
-// Gleanings don't have the same faux-image structure (because they'll never
-// have a featured image) but we still want the title to look about the same.
-.page--content-item--gleaning .page-title {
-  background-color: $gleaning;
-}
-
-.page--content-item--article .background-replacement-for-no-image {
-  background-color: $article;
-}
-
-.page--content-item--blog .background-replacement-for-no-image {
-  background-color: $blog;
-}
-
-.background-replacement-for-no-image,
-.page--content-item--collection .background-replacement-for-no-image {
-  background-color: $collection;
-}

web/themes/custom/geofresco/src/global/_paint.scss

@@ -0,0 +1,18 @@
+// Gleanings don't have the same faux-image structure (because they'll never
+// have a featured image) but we still want the title to look about the same.
+.page--content-item--gleaning .page-title {
+  background-color: $gleaning;
+}
+
+.page--content-item--article .background-replacement-for-no-image {
+  background-color: $article;
+}
+
+.page--content-item--blog .background-replacement-for-no-image {
+  background-color: $blog;
+}
+
+.background-replacement-for-no-image,
+.page--content-item--collection .background-replacement-for-no-image {
+  background-color: $collection;
+}

web/themes/custom/geofresco/src/global/global.scss

@@ -43,7 +43,7 @@ $navbar-breakpoint: $mini/2;
 @import "../../node_modules/bulma/sass/layout/_all";
 @import "layout";
 
-// You can add final styles below or import another Sass or SCSS stylesheet here
+// Stylesheets below will have access to all Bulma variables and mixins.
-// and it will have access to Bulma variables and mixins.
+@import "paint";
 
 // @import '../../node_modules/bulma-extensions/bulma-timeline/dist/bulma-timeline';