[!!!][TASK] update Appearance and Layout wrapper labels/classes, make…

… it more semantic

Configuration/FluidStyledContent/FluidContent.pagets

@@ -31,8 +31,8 @@ TCEFORM.tt_content.frame_class {
 TCEFORM.tt_content.frame_class {
     addItems {
         gray-background  = Gray Background
-        blue-mountain-wrp  = Blue Mountain Wrapper
-        blue-mountain-header  = Blue Mountain Header Text
+        main-color-wrp  = Main Color Wrapper
+        large-header  = Large Header Text
         inverse  = Inverse color (text/links/buttons)
         saturated-inverse  = Inverse and saturate color
     }

Configuration/GridElements/PageTS/AdvColumnGrid.pagets

@@ -4,8 +4,8 @@ TCEFORM.tt_content.layout {
         gridelements_pi1 {
             addItems {
                 --div-- = Gridelements layouts:
-                501 = Blue Mountain Mosaic odd
-                502 = Blue Mountain Mosaic even
+                501 = Main Color Mosaic odd
+                502 = Main Color Mosaic even
                 503 = Gray Mosaic odd
                 504 = Gray Mosaic even
             }

Configuration/TypoScript/Library/lib.fluidContent.setupts

@@ -80,8 +80,8 @@ lib.contentElement {
         800 {
             classMappings {
                 # Specific layout for GridElements (Label => theme_t3kit/Configuration/GridElements/PageTS/AdvColumnGrid.pagets)
-                501 = mosaic-blue-mountain-odd
-                502 = mosaic-blue-mountain-even
+                501 = mosaic-main-color-odd
+                502 = mosaic-main-color-even
                 503 = mosaic-gray-odd
                 504 = mosaic-gray-even
             }

felayout_t3kit/dev/styles/main.less

@@ -49,16 +49,24 @@
 @import "main/contentElements/simpleAccordion.less";
 @import "main/contentElements/heroImage.less";
 
-// appearance
-@import "main/appearance/wrapperStyle/blueMountainWrp.less";
-@import "main/appearance/wrapperStyle/blueMountainHeader.less";
-@import "main/appearance/wrapperStyle/inverse.less";
-@import "main/appearance/wrapperStyle/saturatedInverse.less";
-@import "main/appearance/wrapperStyle/grayBackground.less";
+// ========================
+// appearance wrappers
+// ========================
+// general
+@import "main/appearance/general/mainColorWrp.less";
+@import "main/appearance/general/largeHeader.less";
+@import "main/appearance/general/inverse.less";
+@import "main/appearance/general/saturatedInverse.less";
+@import "main/appearance/general/grayBackground.less";
 
-// gridLayouts
-@import "main/appearance/gridLayoutStyle/mosaicGray.less";
-@import "main/appearance/gridLayoutStyle/mosaicBlueMountain.less";
+// ========================
+// layout wrappers
+// ========================
+// gridelements
+@import "main/layout/gridelements/mosaicGray.less";
+@import "main/layout/gridelements/mosaicMainColor.less";
+
+// nav
 @import "main/nav/breadcrumbs.less";
 @import "main/nav/subNavigation.less";
 @import "main/nav/dropdownMenuWithColumns.less";

felayout_t3kit/dev/styles/main/appearance/general/grayBackground.less

@@ -0,0 +1,8 @@
+// =================================
+// General appearance wrappers
+// =================================
+
+// gray-background class
+.gray-background {
+    background: tint(@main-text-color, 90%);
+}

felayout_t3kit/dev/styles/main/appearance/wrapperStyle/inverse.less → felayout_t3kit/dev/styles/main/appearance/general/inverse.less

@@ -1,3 +1,7 @@
+// =================================
+// General appearance wrappers
+// =================================
+
 .inverse a {
     color: tint(@main-color, 90%);
 

felayout_t3kit/dev/styles/main/appearance/general/largeHeader.less

@@ -0,0 +1,11 @@
+// =================================
+// General appearance wrappers
+// =================================
+
+.large-header {
+    h2 {
+        font-size: 48px;
+        font-weight: 400;
+        font-style: italic;
+    }
+}

felayout_t3kit/dev/styles/main/appearance/wrapperStyle/blueMountainWrp.less → felayout_t3kit/dev/styles/main/appearance/general/mainColorWrp.less

@@ -1,8 +1,12 @@
-.blue-mountain-wrp {
+// =================================
+// General appearance wrappers
+// =================================
+
+.main-color-wrp {
     background: @main-color;
 }
 
-.blue-mountain-wrp a {
+.main-color-wrp a {
     color: tint(@main-text-color, 100%);
 
     &.active,
@@ -22,12 +26,12 @@
     }
 }
 
-.blue-mountain-wrp p {
+.main-color-wrp p {
     color: shade(@main-text-color, 100%);
     -webkit-font-smoothing: antialiased;
 }
 
-.blue-mountain-wrp {
+.main-color-wrp {
     h1,
     h2,
     h3,
@@ -38,19 +42,19 @@
     }
 }
 
-.blue-mountain-wrp .icons {
+.main-color-wrp .icons {
     color: tint(@main-color, 90%);
     border-color: tint(@main-color, 50%);
 }
 
-.blue-mountain-wrp .big-icon-text-btn__sham-link {
+.main-color-wrp .big-icon-text-btn__sham-link {
     color: tint(@main-color, 90%);
 }
 
-.blue-mountain-wrp .icon-text-btn__sham-link {
+.main-color-wrp .icon-text-btn__sham-link {
     color: tint(@main-color, 90%);
 }
 
-.blue-mountain-wrp .img-text-link__sham-link {
+.main-color-wrp .img-text-link__sham-link {
     color: tint(@main-color, 90%);
 }

felayout_t3kit/dev/styles/main/appearance/wrapperStyle/saturatedInverse.less → felayout_t3kit/dev/styles/main/appearance/general/saturatedInverse.less

@@ -1,3 +1,7 @@
+// =================================
+// General appearance wrappers
+// =================================
+
 .saturated-inverse a {
     color: tint(@main-color, 90%);
 

felayout_t3kit/dev/styles/main/appearance/gridLayoutStyle/mosaicGray.less → felayout_t3kit/dev/styles/main/layout/gridelements/mosaicGray.less

@@ -1,3 +1,4 @@
+// layout wrappers for gridelements
 .mosaic-gray-odd {
     & > .row {
         & > div {

felayout_t3kit/dev/styles/main/appearance/gridLayoutStyle/mosaicBlueMountain.less → felayout_t3kit/dev/styles/main/layout/gridelements/mosaicMainColor.less

@@ -1,4 +1,5 @@
-.mosaic-blue-mountain-odd {
+// layout wrappers for gridelements
+.mosaic-main-color-odd {
     & > .row {
         & > div {
             &:nth-child(odd) {
@@ -62,7 +63,7 @@
     }
 }
 
-.mosaic-blue-mountain-even {
+.mosaic-main-color-even {
     & > .row {
         & > div {
             &:nth-child(odd) {
@@ -126,25 +127,25 @@
     }
 }
 
-.mosaic-blue-mountain-even .row > div,
-.mosaic-blue-mountain-odd .row > div {
+.mosaic-main-color-even .row > div,
+.mosaic-main-color-odd .row > div {
     padding: 0 30px;
 }
 
-.mosaic-blue-mountain-even .row > div .big-icon-text-btn__wrp,
-.mosaic-blue-mountain-odd .row > div .big-icon-text-btn__wrp {
+.mosaic-main-color-even .row > div .big-icon-text-btn__wrp,
+.mosaic-main-color-odd .row > div .big-icon-text-btn__wrp {
     margin: 0 -30px;
     padding: 0 30px;
 }
 
-.mosaic-blue-mountain-even .row > div .icon-text-btn__wrp,
-.mosaic-blue-mountain-odd .row > div .icon-text-btn__wrp {
+.mosaic-main-color-even .row > div .icon-text-btn__wrp,
+.mosaic-main-color-odd .row > div .icon-text-btn__wrp {
     margin: 0 -30px;
     padding: 0 30px;
 }
 
-.mosaic-blue-mountain-even .row > div .img-text-link__wrp,
-.mosaic-blue-mountain-odd .row > div .img-text-link__wrp {
+.mosaic-main-color-even .row > div .img-text-link__wrp,
+.mosaic-main-color-odd .row > div .img-text-link__wrp {
     margin: 0 -30px;
     padding: 0 30px;
 }