page.scss in pageflow-12.2.0

- old
+ new

@@ -3,22 +3,10 @@
 ////
 
 /// Base typography for page.
 $page-typography: () !default;
 
-/// Space for logo on first page.
-$page-scroller-first-page-padding-top: nil !default;
-
-/// Space for logo on first page in mobile layout.
-$page-scroller-first-page-mobile-padding-top: 110px !default;
-
-/// Space for logo on first page in mobile landscape layout.
-$page-scroller-first-page-mobile-landscape-padding-top: 100px !default;
-
-/// Space for logo on first page in phone layout.
-$page-scroller-first-page-phone-padding-top: nil !default;
-
 /// Typography for header.
 $page-header-typography: () !default;
 
 /// Typography for header tagline.
 $page-header-tagline-typography: () !default;
@@ -53,26 +41,22 @@
 
 /// Color of text on inverted pages
 /// @group page-colors
 $page-inverted-text-color: #000 !default;
 
+/// Color of title on inverted pages
+/// @group page-colors
+$page-inverted-title-color: null !default;
+
 /// Background-color of pages
 /// @group page-colors
 $page-background-color: #000 !default;
 
 /// Background-color of inverted pages
 /// @group page-colors
 $page-inverted-background-color: #fff !default;
 
-/// Color of the gradient
-/// @group page-colors
-$page-shadow-color: #000 !default;
-
-/// Color of the gradient on inverted pages
-/// @group page-colors
-$page-shadow-inverted-color: #fff !default;
-
 // Deprecated. Use typography variables above.
 
 $page-font-family: $standard-font !default;
 $page-font-size: 16px !default;
 $page-header-font-family: $page-font-family !default;
@@ -98,44 +82,45 @@
 $page-content-text-font-family: $page-font-family !default;
 $page-content-text-font-size: 1.2em !default;
 $page-content-text-line-height: 1.5em !default;
 
 @import "./page/anchors";
+@import "./page/paddings";
+@import "./page/scroller";
+@import "./page/shadow";
+
 @import "./page/line_lengths";
 
 .page {
   @include typography(
     $page-typography,
     (
       font-family: $page-font-family,
       font-size: $page-font-size
     )
   );
+
   color: $page-text-color;
   background-color: $page-background-color;
 
+  &.invert {
+    color: $page-inverted-text-color;
+    background-color: $page-inverted-background-color;
+
+    h2 .title {
+      color: $page-inverted-title-color;
+    }
+  }
+
   .content {
     font-size: $page-content-font-size;
 
     @include phone {
       font-size: $page-content-phone-font-size;
     }
   }
 
-  .shadow {
-    @include shadow($page-shadow-color);
-  }
-
-  &.invert {
-    color: $page-inverted-text-color;
-    background-color: $page-inverted-background-color;
-
-    .shadow {
-      @include shadow($page-shadow-inverted-color);
-    }
-  }
-
   h2 {
     @include typography(
       $page-header-typography,
       (
         font-family: $page-header-font-family,
@@ -166,11 +151,11 @@
         (
           font-size: $page-header-title-font-size,
           font-weight: $page-header-title-font-weight,
           line-height: $page-header-title-line-height,
           margin-top: $page-header-title-margin-top,
-          margin-bottom: $page-header-title-margin-top,
+          margin-bottom: $page-header-title-margin-bottom,
           letter-spacing: 0
         )
       );
 
       @include phone {
@@ -213,28 +198,10 @@
   p {
     margin-top: 0;
   }
 }
 
-.js .page:first-child {
-  .scroller > div,
-  .content_and_background > .page_header {
-    padding-top: $page-scroller-first-page-padding-top;
-
-    @include mobile {
-      padding-top: $page-scroller-first-page-mobile-padding-top;
-      width: 100%;
-
-      @media (orientation: landscape) {
-        padding-top: $page-scroller-first-page-mobile-landscape-padding-top;
-      }
-    }
-
-    @include phone {
-      padding-top: $page-scroller-first-page-phone-padding-top;
-    }
-  }
-
+.page:first-child {
   h2 .title {
     @include typography(
       $page-header-first-page-title-typography,
       (
         font-size: $page-header-first-page-title-font-size,