trusty-festivity-extension 2.5.3 → 2.5.4

data/app/assets/stylesheets/skins/crawl/contexts/_site-header.scss

@@ -0,0 +1,3 @@
+.site-header {
+  background: url('gc-header-bg.svg') repeat-x $link-color;
+}

data/app/assets/stylesheets/skins/crawl/library/_general-mixins.scss

@@ -0,0 +1,15 @@
+@mixin button-link-reverse {
+  @include button;
+  background-color: $link-color-reverse;
+  color: $text-color;
+
+  &:hover,
+  &:focus {
+    background-color: $link-color-reverse-hover;
+    color: $text-color;
+  }
+}
+
+.button-link-reverse {
+  @include button-link-reverse;
+}

data/app/assets/stylesheets/skins/crawl/library/_typographic-mixins.scss

@@ -0,0 +1,16 @@
+.highlight-text {
+  color: $highlight-color;
+
+  &:hover {
+    text-decoration: none;
+    color: lighten($highlight-color, 15);
+  }
+}
+
+.light-text {
+  color: lighten($text-color, 25%);
+}
+
+.white-text {
+  color: #fff;
+}

data/app/assets/stylesheets/skins/crawl/skin.scss

@@ -0,0 +1,34 @@
+$text-color: #323232;
+$heading-color: #000;
+$text-color-subtle: lighten($text-color, 30%);
+
+$link-color: #00a3b4;
+$link-color-hover: darken($link-color, 15%);
+
+$link-color-reverse: #7fd1d9;
+$link-color-reverse-hover: lighten($link-color-reverse, 10%);
+$link-color-reverse-alt: #e5f6f8;
+
+$highlight-color: #f06c70;
+$highlight-color-hover: darken($highlight-color, 25%);
+
+$border-color: #cbcdc6;
+
+$background-color: #fff;
+$background-color-subtle: #cbcbcb;
+
+$footer-color: $heading-color;
+$social-footer-color: $text-color;
+
+$search-placeholder-color: $link-color;
+
+$homepage-featured-background: lighten($text-color, 20%);
+
+// icon color variations - defined here and overridden in each theme
+
+$icon-primary-color: #CBCBCB;
+$icon-secondary-color: #F06C70;
+$icon-search-color: #00A3B4;
+
+
+@import "../../crawl";

data/app/assets/stylesheets/{first-night-stylesheets → skins/first-night}/contexts/_first-night.scss

@@ -172,9 +172,9 @@
     h1.featured-text {
       background-color: $homepage-featured-background;
       padding: 0.5em;
-      margin-bottom:0;
+      margin-bottom: 0;
       line-height: 1;
-      font-size:2em;
+      font-size: 2em;
       max-width: 800px;
 
       @include breakpoint($breakpoint-s) {
@@ -226,14 +226,14 @@
         padding: 4em 1.5em 3em 1.5em;
       }
       @include breakpoint($breakpoint-xl) {
-        padding-top:5em;
+        padding-top: 5em;
       }
     }
     .pin-img {
-      display:none;
-      @include breakpoint($breakpoint-s){
+      display: none;
+      @include breakpoint($breakpoint-s) {
         @include column(4);
-        display:block;
+        display: block;
         img {
           max-width: 150px;
         }
@@ -253,7 +253,7 @@
       @include breakpoint($breakpoint-nav) {
         @include column(6);
 
-        p{
+        p {
           font-size: 1.25em;
         }
       }
@@ -266,12 +266,12 @@
       @include breakpoint($breakpoint-nav) {
         @include column(3);
         @include last;
-        text-align:center;
-        margin-top:2em;
+        text-align: center;
+        margin-top: 2em;
       }
     }
     .title {
-      @include breakpoint($breakpoint-nav){
+      @include breakpoint($breakpoint-nav) {
         @include heading-2;
       }
     }
@@ -285,11 +285,11 @@
       }
     }
   }
-	.how-it-works {
+  .how-it-works {
     background: url(fn-homepage-howitworks-topbg.svg) -1.5em 0 no-repeat, url(fn-homepage-howitworks-bg-sm.jpg) no-repeat, $text-color;
-		@include pie-clearfix;
+    @include pie-clearfix;
 
-    @include breakpoint($breakpoint-l){
+    @include breakpoint($breakpoint-l) {
       background: url(fn-homepage-howitworks-topbg.svg) -1.5em 0 no-repeat, url(fn-homepage-howitworks-bg.jpg) no-repeat, $text-color;
     }
     h3.section-title {
@@ -299,8 +299,8 @@
       margin-bottom: 2em;
       margin-top: 2em;
 
-      @include breakpoint($breakpoint-m){
-        text-align:center;
+      @include breakpoint($breakpoint-m) {
+        text-align: center;
         @include heading-2;
         color: $background-color;
         text-transform: uppercase;
@@ -308,19 +308,19 @@
       }
     }
 
-		article {
+    article {
       @include pie-clearfix;
       @include divider-bottom;
       text-align: center;
       @include breakpoint($breakpoint-xs) {
         text-align: left;
       }
-			@include breakpoint($breakpoint-m) {
-				@include column(4);
+      @include breakpoint($breakpoint-m) {
+        @include column(4);
         border: 0 none;
         padding: 0;
         text-align: center;
-			}
+      }
       img {
         margin: 0 auto;
         width: 100%;
@@ -339,67 +339,12 @@
         @include reversed-text-smoothing;
         color: $background-color;
       }
-		}
+    }
     article.last {
       @include divider-none;
       @include breakpoint($breakpoint-m) {
         @include last;
       }
-    }
-	}
-  .social-posts {
-    @include pie-clearfix;
-  }
-  .social-feed {
-    .section-wrapper {
-      padding: 1.5em;
-    }
-    .section-title {
-      text-align:center;
-      margin-bottom: 1.5em;
-      @include breakpoint($breakpoint-l) {
-        margin-top: 1.5em;
-      }
-      a {
-        color: $link-color;
-      }
-    }
-    article {
-      margin-bottom: 1em;
-      width: 100%;
-      @include breakpoint($breakpoint-s) {
-        width: 48.3%;
-      }
-      @include breakpoint($breakpoint-nav) {
-        width: 31.15%;
-      }
-      @include breakpoint($breakpoint-xl) {
-        width: 22.53%;
-      }
-    }
-    .grid-sizer {
-      width: 3.25%;
-    }
-    .instagram-post {
-      background: url('fn-instagram-bg.svg') no-repeat $link-color;
-      background-position: 90% 93%;
-      background-size: 35px auto;
-    }
-    .twitter-post {
-      background: url('fn-twitter-bg.svg') no-repeat $homepage-featured-background;
-      background-position: 90% 85%;
-      background-size: 38px 31px;
-    }
-    .post-text {
-      overflow: hidden;
-      padding: 1.5em;
-      .user-account, time {
-        max-width: 85%;
-      }
-      .user-account {
-        display:block;
-        font-weight: 700;
-      }
     }
   }
 }
@@ -487,3 +432,16 @@
 		}
 	}
 }
+
+.social-feed {
+  .section-wrapper {
+    .social-posts {
+      .instagram-post {
+        background-color: $link-color;
+      }
+      .twitter-post {
+        color: $background-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/skins/first-night/skin.scss

@@ -0,0 +1,43 @@
+$text-color: #0f3a5c; //dark blue
+$heading-color: $text-color;
+$text-color-subtle: tint($text-color, 30%);
+$text-highlight-color: #f6d564;//yellow
+
+$link-color: #d53777;
+$link-color-hover: darken($link-color, 15%);
+
+$highlight-color: #d7df23; //light green
+$highlight-color-hover: shade($highlight-color, 10%);
+
+$link-color-reverse: #01bfe1; //light Blue
+$link-color-reverse-hover: lighten($link-color-reverse, 10%);
+$link-color-reverse-alt: $text-color;
+
+$heading-highlight-color: #dfe0e5;
+
+$border-color: #01bfe1;
+
+$background-color: #fff;
+$background-color-subtle: #cbcbcb;
+$background-color-alt: #0f3a5c;
+
+$checkbox-bg-color: #daeef5;
+
+$header-bg-color: #010a2b;
+$header-border-color: #feca36;
+$homepage-featured-background: #92D6ED;
+$utility-nav-color: #9cb2bd;
+$search-input-bg-color: #0a3f5e;
+
+$footer-color: $text-color;
+$social-footer-color: $footer-color;
+
+$search-placeholder-color: $background-color;
+
+// icon color variations - overrides original value with this theme's contextual value
+
+$icon-primary-color: #ffffff;
+$icon-secondary-color: #e45362;
+$icon-search-color: $text-color;
+
+@import "../../firstnight";

data/app/assets/stylesheets/skins/pghkids/contexts/_faq.scss

@@ -1,12 +1,16 @@
 //questions
 .FAQ {
   .faq-wrapper {
-    list-style: none;
-    display: flex;
-    flex-wrap: nowrap;
+    @include breakpoint($breakpoint-xl) {
+      list-style: none;
+      display: flex;
+      flex-wrap: nowrap;
+    }
   }
   .faq-list {
-    @include column(4);
+    @include breakpoint($breakpoint-xl) {
+      @include column(4);
+    }
     ul.list-group {
       z-index: 2;
       color: $link-color;
@@ -22,7 +26,7 @@
           text-decoration: none;
           background-color: #f5f5f5;
         }
-        &.active, {
+        &.active {
           background-color: #00A3B4;
           color: #fff;
         }
@@ -32,7 +36,9 @@
   .faq-answers {
     position: relative;
     margin-bottom: 10em;
-    @include column(7);
+    @include breakpoint($breakpoint-xl) {
+      @include column(7);
+    }
   }
 
   //answers
@@ -48,7 +54,10 @@
   }
 
   nav.faq-navigation {
+    width: 100%;
+    @include breakpoint($breakpoint-xl) {
     width: 300px;
+    }
   }
 
   // stuff for the affixed side menu
@@ -58,11 +67,15 @@
   }
 
   .affix-bottom {
-    position: fixed;
+    @include breakpoint($breakpoint-xl) {
+      position: fixed;
+    }
   }
 
   .affix {
-    position: fixed;
+    @include breakpoint($breakpoint-xl) {
+      position: fixed;
+    }
     width: 300px;
     top: 60px;
   }

data/app/assets/stylesheets/skins/traf/contexts/_homepage.scss

@@ -3,13 +3,22 @@
     width: 100%;
     max-width: 100%;
     .traf-intro-background {
-      height: 550px;
-      background: url(traf-background.png) no-repeat top center;
-      background-color: $background-color-alt;
-      background-size: cover;
       @include breakpoint($breakpoint-nav) {
-        height: 850px;
+        height: 550px;
+        background-size: 125%;
+      }
+      @include breakpoint($breakpoint-xl) {
+        height: 600px;
+        background-size: 100%;
       }
+      @include breakpoint($breakpoint-xxxl) {
+        height: 660px;
+        background-size: 100%;
+      }
+      background: url(traf-background.png) no-repeat bottom center;
+      background-color: $background-color-alt;
+      height: 420px;
+      background-size: 140%;
     }
   }
 
@@ -17,28 +26,29 @@
     @include container;
     margin-top: -1em;
     width: 95%;
-    padding-top: 5em;
+    @include breakpoint($breakpoint-nav) {
+      padding-top: 5em;
+    }
     .headline {
+      @include heading-6;
       h1 {
-        @include heading-4;
         color: #fff;
       }
     }
     .headline-2 {
-      font-size: 1em;
       @include breakpoint($breakpoint-nav) {
-        @include heading-3;
+        @include heading-4;
       }
     }
     .headline-3 {
-      font-size: 1.5em;
       @include breakpoint($breakpoint-nav) {
-        @include heading-1;
+        @include heading-2;
       }
     }
     .buttons {
       .button-wrapper {
         margin-right: 1em;
+        margin-bottom: .75em;
         .icon-chevron-right {
           height: 15px;
           margin-left: 2em;