Merge pull request #36 from nypublicradio/alt-channel

Add stylistic tweaks to the alt show page template
nypublicradio · Jan 19, 2017 · 94ecb45 · 94ecb45
2 parents f06a6ca + af8ebdb
commit 94ecb45
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/app/components/alt-channel-layout/template.hbs b/app/components/alt-channel-layout/template.hbs
@@ -50,7 +50,7 @@
 
   {{#if channel.linkroll}}
     {{nav-links
-      classNames="aligncenter tabs-header--padded alt-channel-links"
+      classNames="aligncenter alt-channel-links"
       defaultSlug=defaultSlug
       navRoot=navRoot
       links=channel.linkroll

diff --git a/app/styles/_alt-channel.scss b/app/styles/_alt-channel.scss
@@ -18,6 +18,19 @@
     letter-spacing: 2px;
     text-transform: uppercase;
   }
+
+  .list {
+    padding: 30px 0;
+
+    &:after {
+      content: " ";
+      width: 25px;
+      height: 100%;
+      background: linear-gradient(90deg, rgba(255, 255, 255, 0),rgba(255, 255, 255,1));
+      position: absolute;
+      right: 0;
+    }
+  }
 }
 
 .alt-channel-footer {

diff --git a/app/styles/_box.scss b/app/styles/_box.scss
@@ -74,7 +74,7 @@
 
   &--fullscreen {
     &:before {
-      @include background(linear-gradient(20deg, black, rgba(0, 0, 0, 0.3)));
+      @include background(linear-gradient(20deg,rgba(0,0,0,.8),rgba(0,0,0,.1)));
 
       @include mq($medium-only) {
         @include background(linear-gradient(20deg, black, rgba(0, 0, 0, 0.5)));

diff --git a/app/styles/_story-tease.scss b/app/styles/_story-tease.scss
@@ -1,7 +1,7 @@
 .story-tease.full-screen {
   position: relative;
   text-align: center;
-  padding: 150px 0 50px;
+  padding: 150px 0 90px;
   height: 490px;
 
   @include flexbox((
@@ -30,6 +30,18 @@
   @include mq($small-only) {
     width: 90%;
 
+    .flag {
+      @include flexbox((
+        display: flex,
+        align-items: center,
+        justify-content: center
+      ));
+
+      &-body {
+        width: auto;
+      }
+    }
+
     .squarebadge {
       width: 50px;
       height: 50px;