trusty-festivity-extension 2.5.12 → 2.5.13

data/app/assets/stylesheets/skins/buzzword/contexts/_featured_events.scss

@@ -0,0 +1,72 @@
+.featured-events {
+  padding-bottom: 3em;
+  @include breakpoint($breakpoint-nav) {
+    height: 750px;
+  }
+  @include container;
+  article.featured-event {
+    @include breakpoint($breakpoint-nav) {
+      @include column(8);
+    }
+    @include column(12);
+  }
+  article.featured-event, article.secondary-events {
+    border: 1px solid $background-color-subtle;
+    margin-bottom: 2em;
+    img {
+      width: 100%;
+    }
+    .genre-title {
+      margin-top: 1em;
+      border-left: .3em solid $highlight-color;
+      h3 {
+        @include heading-5;
+        color: $heading-highlight-color;
+        margin-left: 1em;
+      }
+    }
+    .event-information {
+      margin-left: 1em;
+      padding-bottom: 2em;
+      h4 {
+        @include heading-1;
+      }
+      .date-wrapper {
+        div {
+          display: inline-block;
+        }
+        .date, .time {
+          &::after {
+            content: ' \00b7';
+          }
+        }
+      }
+    }
+  }
+  article.secondary-events {
+    @include breakpoint($breakpoint-nav) {
+      @include column(4);
+      @include last;
+    }
+    @include column(12);
+
+    .event-information {
+      h4 {
+        @include heading-2;
+      }
+    }
+  }
+  .button-highlight {
+    color: #fff;
+    background-color: $link-color;
+    .icon-chevron-right {
+      margin-left: 1em;
+      svg {
+        path {
+          fill: #fff;
+        }
+
+      }
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+.home main {
+  .container {
+    width: 100%;
+    max-width: 100%;
+    .buzz-intro-background {
+      @include breakpoint($breakpoint-nav) {
+        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(buzzword-background.png) no-repeat bottom center;
+      height: 580px;
+      background-color: $background-color-alt;
+      background-size: 140%;
+    }
+  }
+
+  .main {
+    @include container;
+    margin-top: -1em;
+    width: 95%;
+    @include breakpoint($breakpoint-nav) {
+      padding-top: 0;
+    }
+    .headline {
+      @include heading-6;
+      h1 {
+        color: #fff;
+      }
+    }
+    .headline-2 {
+      @include breakpoint($breakpoint-nav) {
+        @include heading-4;
+      }
+    }
+    .headline-3 {
+      @include breakpoint($breakpoint-nav) {
+        @include heading-2;
+      }
+    }
+    .buttons {
+      .button-wrapper {
+        margin-right: 1em;
+        margin-bottom: .75em;
+        .icon-chevron-right {
+          height: 15px;
+          margin-left: 2em;
+          margin-right: -1em;
+          svg {
+            fill: $text-color;
+          }
+        }
+      }
+    }
+  }
+  .announcements {
+    background: none;
+    background-color: #0b7b40;
+    padding-top: 2em;
+    margin-bottom: 6em;
+    border-bottom: 5em;
+    border-image: url(traf-thin-wave.png) 0 27 75 repeat;
+    border-image-outset: 1;
+    .announcements-container {
+      @include container;
+      width: 95%;
+      margin-bottom: -4em;
+      padding-top: 4em;
+
+      .announcements-header {
+        @include breakpoint($breakpoint-nav) {
+          @include column(4);
+        }
+        vertical-align: top;
+        .icon-info {
+          margin-right: 1.5em;
+        }
+        h4 {
+          display: inline-block;
+          color: #fff;
+          font-size: 1.8em;
+        }
+      }
+      .announcements-group {
+        @include breakpoint($breakpoint-nav) {
+          @include column(8);
+          @include last;
+        }
+        .date {
+          font-size: 1.5em;
+          display: inline-block;
+          color: $text-highlight-color;
+        }
+        .announcement-item-group {
+          @include divider-bottom;
+          @include last;
+          .announcement-item {
+            margin-left: 2em;
+            display: inline-block;
+            color: #fff;
+          }
+        }
+      }
+      &::after {
+        clear: both;
+        content: " ";
+        display: block;
+      }
+    }
+
+  }
+
+  .buzz-bubbles {
+    background: url(traf-bubbles.png) no-repeat top center;
+    background-size: cover;
+    height: 75px;
+    @include breakpoint($breakpoint-nav) {
+      height: 100px;
+    }
+  }
+
+}

data/app/assets/stylesheets/skins/buzzword/contexts/_social_feed.scss

@@ -0,0 +1,89 @@
+h3.section-title {
+  @include reversed-text-smoothing;
+  color: $text-color;
+  text-transform: uppercase;
+  margin-bottom: 2em;
+  margin-top: 2em;
+
+  @include breakpoint($breakpoint-m){
+    text-align:center;
+    @include heading-2;
+    color: $text-color;
+    text-transform: uppercase;
+    margin-bottom: 2em;
+  }
+  a {
+    margin-left: 1em;
+  }
+}
+
+.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%;
+  }
+  .social-posts {
+    .instagram-post {
+      background: url('fn-instagram-bg.svg') no-repeat $text-color;
+      background-position: 90% 93%;
+      background-size: 35px auto;
+      .post-text {
+        color: #fff;
+        .user-account, time {
+          color: $background-color-alt;
+        }
+      }
+    }
+    .twitter-post {
+      background: url('fn-twitter-bg.svg') no-repeat $homepage-featured-background;
+      background-position: 90% 85%;
+      background-size: 38px 31px;
+      .post-text {
+        color: $text-color;
+        .user-account, time {
+          color: #fff;
+        }
+      }
+    }
+    .post-text {
+      overflow: hidden;
+      padding: 1.5em;
+      .user-account, time {
+        max-width: 85%;
+      }
+      .user-account {
+        display:block;
+      }
+    }
+  }
+
+}
+

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

@@ -0,0 +1,73 @@
+/// Typographic Mixins
+
+@mixin copy-face {
+  font-family: "azo-sans-web", arial, "helvetica neue", helvetica, sans-serif;
+  font-weight: 400;
+}
+
+@mixin title-face {
+  font-family: "azo-sans-web", arial, "helvetica neue", helvetica, sans-serif;
+  font-weight: 700;
+}
+
+@mixin title-face-highlight {
+  font-family: "azo-sans-web", arial, "helvetica neue", helvetica, sans-serif;
+  font-weight: 400;
+  color: $heading-highlight-color;
+}
+
+@mixin reversed-text-smoothing {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin no-text-smoothing {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
+@mixin subtle-heading {
+  @include heading-5;
+  @include copy-face;
+  color: $heading-highlight-color;
+  margin-bottom: 1em;
+}
+
+@mixin link-reverse-alt {
+  color: $link-color-reverse-alt;
+  transition: all 0.3s ease-in-out;
+  border-bottom: 2px solid transparent;
+
+  &:hover, &:focus {
+    color: shade($link-color-reverse-alt, 40%);
+    text-decoration: none;
+    border-color: $highlight-color;
+  }
+}
+
+@mixin button-highlight {
+  @include button;
+  color: $text-color;
+  background-color: $highlight-color;
+  &:hover,
+  &:focus {
+    color:$text-color;
+    background-color: $highlight-color-hover;
+  }
+}
+
+
+@mixin navigation-link {
+  color:$highlight-color;
+
+  &:hover, &:focus {
+    color: $highlight-color-hover;
+    border-color: transparent;
+  }
+  @include breakpoint($breakpoint-nav) {
+    @include link-reverse-alt;
+  }
+}
+
+
+

data/app/assets/stylesheets/skins/buzzword/library/_icons.scss

@@ -0,0 +1,20 @@
+.icon-twitter,
+.icon-facebook,
+.icon-instagram,
+.icon-external-link,
+.icon-envelope {
+  svg {
+    width: 1.25em;
+    height: 1.25em;
+    .social-link-item-group & {
+      width: 2.5em;
+      height: 2.5em;
+    }
+  }
+  path {
+    fill: $icon-secondary-color;
+    .social-link-item-group & {
+      fill: $icon-primary-color;
+    }
+  }
+}

data/app/assets/stylesheets/skins/buzzword/library/_variables.scss

@@ -0,0 +1,34 @@
+$text-color: #792d8f; //dark green
+//$heading-color: #404242;
+$heading-color: $text-color;
+$text-color-subtle: tint($text-color, 30%);
+$text-highlight-color: #fdcb36;//yellow
+
+$link-color: #f06a33; //orange
+$link-color-hover: darken($link-color, 15%);
+
+$highlight-color: #d7df23; //light green
+$highlight-color-hover: shade($highlight-color, 10%);
+
+$link-color-reverse: #fbd34b; //light Blue
+$link-color-reverse-hover: lighten($link-color-reverse, 10%);
+$link-color-reverse-alt: $text-color;
+
+$heading-highlight-color: #d7df23; //turquoise
+
+$border-color: #cbcdc6;
+
+$background-color: #fff;
+$background-color-subtle: #cbcbcb;
+$background-color-alt: #92d5e1;
+
+$footer-color: $text-color;
+$social-footer-color: $footer-color;
+
+$search-placeholder-color: $link-color;
+
+// icon color variations - overrides original value with this theme's contextual value
+
+$icon-primary-color: #D7DF23;
+$icon-secondary-color: #F06A33;
+$icon-search-color: $highlight-color;

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

@@ -0,0 +1,36 @@
+$text-color: #792d8f; //dark green
+$heading-color: $text-color;
+$text-color-subtle: tint($text-color, 30%);
+$text-highlight-color: #fbd34b;//yellow
+
+$link-color: #f06a33; //orange
+$link-color-hover: darken($link-color, 15%);
+
+$highlight-color: #fbd34b; //light blue
+$highlight-color-hover: shade($highlight-color, 10%);
+
+$link-color-reverse: #fbd34b; //light Blue
+$link-color-reverse-hover: lighten($link-color-reverse, 10%);
+$link-color-reverse-alt: $text-color;
+
+$heading-highlight-color: #00afaa; //turquoise
+
+$border-color: #cbcdc6;
+
+$background-color: #fff;
+$background-color-subtle: #cbcbcb;
+$background-color-alt: #fff;
+
+$homepage-featured-background: #92D6ED;
+$footer-color: $text-color;
+$social-footer-color: $footer-color;
+
+$search-placeholder-color: $link-color;
+
+// icon color variations - overrides original value with this theme's contextual value
+
+$icon-primary-color: #fbd34b;
+$icon-secondary-color: #F06A33;
+$icon-search-color: $highlight-color;
+
+@import "../../buzzword";