Remove crx-grid styles from codered-front.css

Add them instead to the project_template, since this is an opinionated change that can break Bootstrap compatibility and/or older sites.

coderedcms/project_template/basic/website/static/website/css/custom.css

@@ -0,0 +1,12 @@
+/* Add your custom styles here */
+
+
+/* Adds a bit of spacing to "Responsive Grid Row" blocks. */
+.crx-grid {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.crx-grid .crx-grid {
+  padding-top: 0;
+  padding-bottom: 0;
+}

coderedcms/project_template/sass/website/static/website/src/custom.scss

@@ -17,11 +17,20 @@
 @import "coderedcms/scss/crx-article";
 @import "coderedcms/scss/crx-bs-overrides";
 @import "coderedcms/scss/crx-gallery";
-@import "coderedcms/scss/crx-grid";
 @import "coderedcms/scss/crx-hero";
 @import "coderedcms/scss/crx-location";
 @import "coderedcms/scss/crx-navbar";
 @import "coderedcms/scss/crx-pricelist";
 @import "coderedcms/scss/crx-richtext";
 
-// Your custom styles here.
+// Add your custom styles here.
+
+// Adds a bit of spacing to "Responsive Grid Row" blocks.
+.crx-grid {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.crx-grid .crx-grid {
+  padding-top: 0;
+  padding-bottom: 0;
+}

coderedcms/static/coderedcms/css/crx-front.css

@@ -3,49 +3,37 @@ Wagtail CRX (https://www.coderedcorp.com/cms/)
 Copyright 2018-2022 CodeRed LLC
 License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
 */
-.hero-bg {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-  color: white;
-}
-
-.hero-bg.parallax {
-  background-attachment: fixed;
-}
-
-.hero-bg.tile {
-  background-size: initial;
-  background-repeat: repeat;
+.crx-article .article-body {
+  max-width: 800px;
 }
 
-.hero-fg {
-  padding: 80px 0;
+@media (min-width: 768px) {
+  .crx-article .article-body {
+    font-size: 1.2em;
+  }
 }
 
-.crx-grid {
-  padding-top: 40px;
-  padding-bottom: 40px;
+.crx-article .article-author-img {
+  max-height: 3em;
 }
 
-.crx-grid .crx-grid {
-  padding-top: 0;
-  padding-bottom: 0;
+[class^="container"] [class^="container"] {
+  width: 100%;
+  padding: 0;
+  margin: 0;
 }
 
-.richtext-image.left {
-  float: left;
-  margin: 0 1em 1em 0;
+.card {
+  background-size: cover;
+  background-position: center center;
 }
 
-.richtext-image.right {
-  float: right;
-  margin: 0 0 1em 1em;
+.container-fluid .carousel {
+  margin: 0 -15px;
 }
 
-.richtext-image.full-width {
-  width: 100%;
-  height: auto;
+.carousel .no-image {
+  height: 500px;
 }
 
 .modal-lightbox {
@@ -58,46 +46,24 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
   max-width: 90vw;
 }
 
-.leaders {
-  max-width: 40em;
-  padding: 0;
-  overflow-x: hidden;
-}
-
-.leaders:before {
-  float: left;
-  width: 0;
-  white-space: nowrap;
-  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
-}
-
-.leaders span:first-child {
-  padding-right: 0.33em;
-  background: white;
-}
-
-.leaders span + span {
-  float: right;
-  padding-left: 0.33em;
-  padding-right: 15px;
-  background: white;
-  position: relative;
-  z-index: 1;
-  margin-right: -15px;
+.hero-bg {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: white;
 }
 
-.crx-article .article-body {
-  max-width: 800px;
+.hero-bg.parallax {
+  background-attachment: fixed;
 }
 
-@media (min-width: 768px) {
-  .crx-article .article-body {
-    font-size: 1.2em;
-  }
+.hero-bg.tile {
+  background-size: initial;
+  background-repeat: repeat;
 }
 
-.crx-article .article-author-img {
-  max-height: 3em;
+.hero-fg {
+  padding: 80px 0;
 }
 
 .map-container {
@@ -300,23 +266,47 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
   }
 }
 
-[class^="container"] [class^="container"] {
-  width: 100%;
+.leaders {
+  max-width: 40em;
   padding: 0;
-  margin: 0;
+  overflow-x: hidden;
 }
 
-.card {
-  background-size: cover;
-  background-position: center center;
+.leaders:before {
+  float: left;
+  width: 0;
+  white-space: nowrap;
+  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
 }
 
-.container-fluid .carousel {
-  margin: 0 -15px;
+.leaders span:first-child {
+  padding-right: 0.33em;
+  background: white;
 }
 
-.carousel .no-image {
-  height: 500px;
+.leaders span + span {
+  float: right;
+  padding-left: 0.33em;
+  padding-right: 15px;
+  background: white;
+  position: relative;
+  z-index: 1;
+  margin-right: -15px;
+}
+
+.richtext-image.left {
+  float: left;
+  margin: 0 1em 1em 0;
+}
+
+.richtext-image.right {
+  float: right;
+  margin: 0 0 1em 1em;
+}
+
+.richtext-image.full-width {
+  width: 100%;
+  height: auto;
 }
 
 /*# sourceMappingURL=crx-front.css.map */

coderedcms/static/coderedcms/scss/_crx-grid.scss

@@ -1,10 +0,0 @@
-/// Enhance grid blocks by adding spacing between them.
-
-.crx-grid {
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-.crx-grid .crx-grid {
-  padding-top: 0;
-  padding-bottom: 0;
-}

coderedcms/static/coderedcms/scss/crx-front.scss

@@ -10,7 +10,6 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
 @import "crx-article";
 @import "crx-bs-overrides";
 @import "crx-gallery";
-@import "crx-grid";
 @import "crx-hero";
 @import "crx-location";
 @import "crx-navbar";