text_page.scss in pageflow-text-page-1.2.0

- old
+ new

@@ -31,12 +31,15 @@
     right: 0;
   }
 }
 
 .page .text_page, .js .page .text_page, .js .page:first-child .text_page, .page:first-child .text_page {
+  h3 {
+    font-size: 1em;
+  }
 
-  .backgroundArea {
+  .page_background {
 
     .fixed_header_area {
       position: absolute;
       width: 100%;
       .page_header_wrapper {
@@ -45,11 +48,11 @@
           padding: 85px 12% 0% 8%;
         }
 
         .page_header {
 
-          h2 {
+          h3 {
             margin: 0;
           }
         }
       }
     }
@@ -83,11 +86,11 @@
           bottom: 100%;
           width: 100%;
           color: white;
           display: none;
 
-          h2 {
+          h3 {
             text-align: center;
             padding: 2em 0;
             margin: 0;
             span {
               margin-right: auto;
@@ -117,19 +120,19 @@
             opacity: 1;
             z-index: -1;
           }
         }
 
-        .contentText > * {
+        .page_text > * {
           margin: 0 auto;
 
           @include phone {
             margin: 0;
           }
         }
 
-        .contentText {
+        .page_text {
           max-width: 500px;
           margin: auto;
           min-height: 300px;
           padding: 6em 0 12em 0;
           box-sizing: border-box;
@@ -140,11 +143,11 @@
 
           @include pad_portrait {
             padding-right: 0;
           }
 
-          h3 {
+          .page_sub_header {
             width: 100%;
           }
 
           @include pad_portrait {
             padding-right: 0;
@@ -239,11 +242,11 @@
         }
       }
     }
 
     &.inline_text_position_left {
-      > div .contentInnerWrapper .contentText {
+      > div .contentInnerWrapper .page_text {
         margin-left: 8%;
         padding-right: 0;
 
         .inline_image {
           float: none;
@@ -257,11 +260,11 @@
         }
       }
     }
 
     &.inline_text_position_right {
-      > div .contentInnerWrapper .contentText {
+      > div .contentInnerWrapper .page_text {
         margin-right: 12%;
         padding-right: 0;
 
         .inline_image {
           float: none;
@@ -278,13 +281,13 @@
     }
   }
 }
 
 .text_position_right.page .text_page {
-  h2 .title,
-  h2 .subtitle,
-  h2 .tagline {
+  h3 .title,
+  h3 .subtitle,
+  h3 .tagline {
     max-width: 500px;
   }
 }
 
 .text_position_center, .text_position_right .text_position_center {
@@ -316,11 +319,11 @@
     }
   }
 }
 
 .page .text_page, .js .page .text_page, .js .page:first-child .text_page, .page:first-child .text_page {
-  &.content_and_background.sticky_inline_image .inline_text_position_center.scroller .contentWrapper {
+  &.content_and_background.sticky_inline_image .inline_text_position_center.scroller .content_wrapper {
     .inline_image {
       position: absolute;
       display: inline-block;
       left: 50%;
       width: 35%;
@@ -338,16 +341,16 @@
         padding: 0;
         float: none;
       }
     }
 
-    .contentText {
+    .page_text {
       @media screen and (min-width: 1101px) {
         max-width: 1000px;
         width: 84%;
 
-        h3, p {
+        .page_sub_header, p {
           margin: 0;
           max-width: 500px;
         }
 
         @include narrow_desktop {
@@ -363,11 +366,11 @@
   .contentInnerWrapper {
 
     .page_header {
       border-bottom: 1px solid rgb(216, 216, 216);
 
-      h2 {
+      h3 {
         color: black;
       }
     }
   }
 
@@ -377,11 +380,11 @@
 }
 
 .page .text_page, .js .page .text_page {
   .scroller {
     > div {
-      .contentText {
+      .page_text {
         a {
           color: black;
         }
       }
     }
@@ -394,11 +397,11 @@
         .content_background_layer {
           background-color: black;
         }
       }
 
-      .contentText {
+      .page_text {
         a {
           color: white;
         }
       }
     }
@@ -425,16 +428,16 @@
   .content_background_layer, .header_background_layer {
     width: 800px !important;
     left: 50% !important;
     margin-left: -400px;
   }
-  .contentInnerWrapper .contentText .inline_image {
+  .contentInnerWrapper .page_text .inline_image {
     margin-right: 0 !important;
   }
 
   &.text_position_right {
-    .contentInnerWrapper .contentText .inline_image {
+    .contentInnerWrapper .page_text .inline_image {
       margin-left: 0 !important;
     }
   }
 }
 
@@ -444,20 +447,20 @@
   }
 }
 
 .slideshow section.fade[data-template="text_page"] {
 
-  .blackLayer {
+  .black_layer {
     display: none;
   }
-  .backgroundArea {
+  .page_background {
     background-color: black;
     -webkit-backface-visibility: hidden;
     opacity: 1;
   }
 
-  &.invert .backgroundArea {
+  &.invert .page_background {
     background-color: white;
   }
 
   &.active .content_and_background {
     @include transition (opacity 1s ease);
@@ -482,24 +485,24 @@
 
   &.active .content_and_background {
     opacity: 1;
   }
 
-  &.active.animate-in-forwards .backgroundArea, &.active.animate-in-backwards .backgroundArea {
+  &.active.animate-in-forwards .page_background, &.active.animate-in-backwards .page_background {
     opacity: 1;
   }
 
-  &.animate-in-forwards .backgroundArea {
+  &.animate-in-forwards .page_background {
     opacity: 0;
   }
-  &.animate-out-forwards .backgroundArea {
+  &.animate-out-forwards .page_background {
     opacity: 1;
   }
-  &.animate-in-backwards .backgroundArea {
+  &.animate-in-backwards .page_background {
     opacity: 0;
   }
-  &.animate-out-backwards .backgroundArea {
+  &.animate-out-backwards .page_background {
     opacity: 1;
   }
 
   div.content {
     @include transition(1s ease);
@@ -546,17 +549,17 @@
     }
   }
 }
 
 .slideshow {
-  .text_page p, h3 span, .inline_image_text, .fixed_header_area .page_header_wrapper {
+  .text_page p, .page_sub_header span, .inline_image_text, .fixed_header_area .page_header_wrapper {
     @include transition(0.5s ease);
   }
   .hidden_by_overlay .text_page {
     .content {
       opacity: 1;
-      p, h3 span, .inline_image_text {
+      p, .page_sub_header span, .inline_image_text {
         opacity: 0;
       }
     }
     .fixed_header_area .page_header_wrapper {
       opacity: 0;
@@ -583,10 +586,10 @@
 
   .text_page .fixed_header_area .page_header_wrapper {
     opacity: 0;
   }
 
-  .text_page .content .contentWrapper {
+  .text_page .content .content_wrapper {
     @include transform(none);
   }
 }
 
 .image_fullscreen_view {