diy

css/global-style.css

@@ -22,7 +22,11 @@ body {
   margin: 0;
 }
 
-h1, .field--name-field-guide-page-title {
+h1, .field--name-field-guide-page-title, .page-node-type-diy_guide .layout__region--first h2, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first h2,
+.page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .field--name-field-list-title {
   font-size: 2em;
   margin: 0.67em 0;
 }
@@ -572,7 +576,15 @@ ol,
 li,
 h1,
 .field--name-field-guide-page-title,
+.page-node-type-diy_guide .layout__region--first h2,
+.page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first h2,
+.page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .field--name-field-list-title,
 h2,
+.field--name-field-guide-title,
+.page-node-type-guide_categories .field--name-field-list-title,
 h3,
 .field--name-field__help-me-section-title,
 h4,
@@ -612,8 +624,14 @@ small {
   line-height: inherit;
 }
 
-h1, .field--name-field-guide-page-title, .h1,
-h2, .h2,
+h1, .field--name-field-guide-page-title, .page-node-type-diy_guide .layout__region--first h2, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first h2,
+.page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .field--name-field-list-title, .h1,
+h2,
+.field--name-field-guide-title,
+.page-node-type-guide_categories .field--name-field-list-title, .h2,
 h3,
 .field--name-field__help-me-section-title, .h3,
 h4, .h4,
@@ -625,8 +643,12 @@ h6, .h6 {
   color: inherit;
   text-rendering: optimizeLegibility;
 }
-h1 small, .field--name-field-guide-page-title small, .h1 small,
-h2 small, .h2 small,
+h1 small, .field--name-field-guide-page-title small, .page-node-type-diy_guide .layout__region--first h2 small, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title small,
+.page-node-type-guide_categories .layout__region--first h2 small,
+.page-node-type-guide_categories .layout__region--first .field--name-field-guide-title small, .h1 small,
+h2 small,
+.field--name-field-guide-title small,
+.page-node-type-guide_categories .field--name-field-list-title small, .h2 small,
 h3 small,
 .field--name-field__help-me-section-title small, .h3 small,
 h4 small, .h4 small,
@@ -636,14 +658,19 @@ h6 small, .h6 small {
   color: #c0c0c0;
 }
 
-h1, .field--name-field-guide-page-title, .h1 {
+h1, .field--name-field-guide-page-title, .page-node-type-diy_guide .layout__region--first h2, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first h2,
+.page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .field--name-field-list-title, .h1 {
   font-size: 1.5rem;
   line-height: 1.4;
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
 
-h2, .h2 {
+h2, .field--name-field-guide-title,
+.page-node-type-guide_categories .field--name-field-list-title, .h2 {
   font-size: 1.25rem;
   line-height: 1.4;
   margin-top: 0;
@@ -679,10 +706,15 @@ h6, .h6 {
 }
 
 @media print, screen and (min-width: 40em) {
-  h1, .field--name-field-guide-page-title, .h1 {
+  h1, .field--name-field-guide-page-title, .page-node-type-diy_guide .layout__region--first h2, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+  .page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+  .page-node-type-guide_categories .layout__region--first h2,
+  .page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+  .page-node-type-guide_categories .layout__region--first .field--name-field-list-title, .h1 {
     font-size: 2rem;
   }
-  h2, .h2 {
+  h2, .field--name-field-guide-title,
+  .page-node-type-guide_categories .field--name-field-list-title, .h2 {
     font-size: 1.776875rem;
   }
   h3, .field--name-field__help-me-section-title, .h3 {
@@ -960,12 +992,15 @@ ul.no-bullet, ol.no-bullet {
   }
   p,
   h2,
+  .field--name-field-guide-title,
+  .page-node-type-guide_categories .field--name-field-list-title,
   h3,
   .field--name-field__help-me-section-title {
     orphans: 3;
     widows: 3;
   }
-  h2,
+  h2, .field--name-field-guide-title,
+  .page-node-type-guide_categories .field--name-field-list-title,
   h3,
   .field--name-field__help-me-section-title {
     page-break-after: avoid;
@@ -18337,7 +18372,16 @@ main,
 .layout-content::after {
   clear: both;
 }
-.layout-content h1, .layout-content .field--name-field-guide-page-title {
+.layout-content h1, .layout-content .field--name-field-guide-page-title, .layout-content .page-node-type-diy_guide .layout__region--first h2, .layout-content .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.layout-content .page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .layout-content .page-node-type-diy_guide .layout__region--first .field--name-field-list-title, .page-node-type-diy_guide .layout__region--first .layout-content h2, .page-node-type-diy_guide .layout__region--first .layout-content .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .layout-content .page-node-type-guide_categories .field--name-field-list-title,
+.layout-content .page-node-type-guide_categories .layout__region--first h2,
+.layout-content .page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.layout-content .page-node-type-guide_categories .layout__region--first .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first .layout-content h2,
+.page-node-type-guide_categories .layout__region--first .layout-content .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .layout-content .field--name-field-list-title {
   border-bottom: 1px solid #c0c0c0;
   margin-bottom: 1rem;
 }
@@ -18701,7 +18745,7 @@ main,
 }
 
 .diy-grid .diy-grid--block a, .related-diys .attachment .diy-grid--block a, .related-diys .diy-grid--block a {
-  background: white url(../imgages/nav-arrow.png) no-repeat 95% 92%;
+  background: white url(../images/nav-arrow.png) no-repeat 95% 92%;
   color: #333;
   width: 200px;
   padding: 20px;
@@ -18740,12 +18784,33 @@ main,
     height: initial;
   }
 }
-.diy-main-title h1, .diy-main-title .field--name-field-guide-page-title {
+.diy-main-title h1, .diy-main-title .field--name-field-guide-page-title, .diy-main-title .page-node-type-diy_guide .layout__region--first h2, .diy-main-title .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.diy-main-title .page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .diy-main-title .page-node-type-diy_guide .layout__region--first .field--name-field-list-title, .page-node-type-diy_guide .layout__region--first .diy-main-title h2, .page-node-type-diy_guide .layout__region--first .diy-main-title .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .diy-main-title .page-node-type-guide_categories .field--name-field-list-title,
+.diy-main-title .page-node-type-guide_categories .layout__region--first h2,
+.diy-main-title .page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.diy-main-title .page-node-type-guide_categories .layout__region--first .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first .diy-main-title h2,
+.page-node-type-guide_categories .layout__region--first .diy-main-title .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .diy-main-title .field--name-field-list-title {
   font-size: 2rem;
   border-bottom: none;
   margin-bottom: 0.5rem;
 }
 
+.layout__region--first {
+  padding-right: 0.5rem;
+}
+
+.layout__region--second {
+  border-left: 1px solid #ccc;
+  padding-left: 0.5rem;
+}
+.layout__region--second .field--name-field-guide-body {
+  margin-left: 1rem;
+}
+
 .home-link {
   margin: 1rem;
 }
@@ -18803,7 +18868,9 @@ main,
   color: #461002;
 }
 
-.related-diys h2 {
+.related-diys h2, .related-diys .field--name-field-guide-title,
+.related-diys .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .related-diys .field--name-field-list-title {
   text-align: center;
 }
 .related-diys .item-list a {
@@ -18929,9 +18996,37 @@ main,
   display: flex;
   justify-content: space-around;
 }
+.page-node-type-diy_guide .layout__region--first h1, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-page-title, .page-node-type-diy_guide .layout__region--first h2, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .page-node-type-diy_guide .layout__region--first .field--name-field-list-title {
+  margin-top: 1rem;
+}
+
+.page-node-type-diy_guide .layout__region--first h2, .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first h2,
+.page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .field--name-field-list-title {
+  margin-top: 1rem;
+  border-bottom: 1px solid #ccc;
+}
+
+.page-node-type-guide_categories nav.tabs,
+.page-node-type-guide_categories h1.page-title,
+.page-node-type-guide_categories .page-title.field--name-field-guide-page-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories h2.page-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .page-title.field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .page-title.field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first h2.page-title,
+.page-node-type-guide_categories .layout__region--first .page-title.field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .page-title.field--name-field-list-title,
 .page-node-type-front_page nav.tabs,
 .page-node-type-front_page h1.page-title,
-.page-node-type-front_page .page-title.field--name-field-guide-page-title {
+.page-node-type-front_page .page-title.field--name-field-guide-page-title,
+.page-node-type-front_page .page-node-type-diy_guide .layout__region--first h2.page-title,
+.page-node-type-front_page .page-node-type-diy_guide .layout__region--first .page-title.field--name-field-guide-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-front_page h2.page-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-front_page .page-title.field--name-field-guide-title {
   display: none;
 }
 
@@ -18975,13 +19070,30 @@ main,
   text-decoration: none;
 }
 
+.field--name-field-guide-title,
+.page-node-type-guide_categories .field--name-field-list-title {
+  text-align: center;
+  border-bottom: 1px solid #ccc;
+  text-transform: capitalize;
+  line-height: 1.6;
+  margin-top: 1rem;
+}
+
 .diy-category-wrapper .diy-category-title {
   text-align: center;
   margin-bottom: 0;
   width: 100%;
 }
 
-.diy-home-title h1, .diy-home-title .field--name-field-guide-page-title {
+.diy-home-title h1, .diy-home-title .page-node-type-diy_guide .layout__region--first h2, .page-node-type-diy_guide .layout__region--first .diy-home-title h2,
+.diy-home-title .page-node-type-guide_categories .layout__region--first h2,
+.page-node-type-guide_categories .layout__region--first .diy-home-title h2, .diy-home-title .field--name-field-guide-page-title, .diy-home-title .page-node-type-diy_guide .layout__region--first .field--name-field-guide-title, .page-node-type-diy_guide .layout__region--first .diy-home-title .field--name-field-guide-title,
+.diy-home-title .page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .field--name-field-list-title,
+.page-node-type-diy_guide .layout__region--first .page-node-type-guide_categories .diy-home-title .field--name-field-list-title,
+.diy-home-title .page-node-type-guide_categories .layout__region--first .field--name-field-guide-title,
+.page-node-type-guide_categories .layout__region--first .diy-home-title .field--name-field-guide-title,
+.diy-home-title .page-node-type-guide_categories .layout__region--first .field--name-field-list-title,
+.page-node-type-guide_categories .layout__region--first .diy-home-title .field--name-field-list-title {
   line-height: 1.1;
 }
 

css/sass/components/_diy.scss

@@ -1,6 +1,6 @@
 //@format;
 %diy-card {
-  background: white url(../imgages/nav-arrow.png) no-repeat 95% 92%;
+  background: white url(../images/nav-arrow.png) no-repeat 95% 92%;
   color: #333;
   //font-size: 120%;
   width: 200px;
@@ -50,6 +50,16 @@ $diy-header-height: initial;
     margin-bottom: 0.5rem;
   }
 }
+.layout__region--first {
+  padding-right: calc($global-padding/2);
+}
+.layout__region--second {
+  border-left: 1px solid #ccc;
+  padding-left: calc($global-padding/2);
+  .field--name-field-guide-body {
+    margin-left: $global-margin;
+  }
+}
 .home-link {
   margin: $global-margin;
   a {
@@ -136,6 +146,22 @@ $diy-header-height: initial;
     @extend %diy-card;
   }
 }
+.page-node-type-diy_guide {
+  .layout__region--first h1 {
+    margin-top: $global-margin;
+    //border-bottom: 1px solid #ccc;
+  }
+}
+.page-node-type-diy_guide,
+.page-node-type-guide_categories {
+  .layout__region--first h2 {
+    @extend h1;
+    margin-top: $global-margin;
+    border-bottom: 1px solid #ccc;
+  }
+}
+
+.page-node-type-guide_categories,
 .page-node-type-front_page {
   nav.tabs,
   h1.page-title {
@@ -186,6 +212,16 @@ $diy-header-height: initial;
     //align-self: flex-end;
   }
 }
+.field--name-field-guide-title,
+.page-node-type-guide_categories .field--name-field-list-title {
+  @extend h2;
+  text-align: center;
+  border-bottom: 1px solid #ccc;
+  text-transform: capitalize;
+  //padding-bottom: $global-padding;
+  line-height: 1.6;
+  margin-top: $global-margin;
+}
 .diy-category-wrapper {
   //height: 106px;
   .diy-category-title {