Slideshow improvements

.scss-lint.yml

@@ -0,0 +1,169 @@
+linters:
+
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BorderZero:
+    enabled: true
+
+  ColorKeyword:
+    enabled: false
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: false
+
+  ElsePlacement:
+    enabled: true
+    style: same_line
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: false
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short
+
+  HexNotation:
+    enabled: true
+    style: uppercase
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    character: space
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: false
+
+  NameFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    allow_leading_underscore: true
+
+  NestingDepth:
+    enabled: true
+    max_depth: 3
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-zA-Z0-9]*)?$'
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: true
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: false
+
+  UrlQuotes:
+    enabled: true
+
+  VendorPrefixes:
+    enabled: true
+    identifier_list: base
+    include: []
+    exclude: []
+
+  ZeroUnit:
+    enabled: true

Gemfile

@@ -61,6 +61,9 @@ group :development do
   # Access an IRB console on exception pages or by using <%%= console %> in views
   gem 'web-console', '~> 2.0.0'
 
+  # Use SCSS lint to check Sass style
+  gem 'scss-lint'
+
 end
 
 group :production do

Gemfile.lock

@@ -145,6 +145,8 @@ GEM
       activesupport (= 4.2.4)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
+    rainbow (2.0.0)
+    raindrops (0.12.0)
     rake (10.4.2)
     ransack (1.6.6)
       actionpack (>= 3.0)
@@ -176,6 +178,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    scss-lint (0.35.0)
+      rainbow (~> 2.0)
+      sass (~> 3.4.1)
     slim (3.0.1)
       temple (~> 0.7.3)
       tilt (>= 1.3.3, < 2.1)
@@ -229,6 +234,7 @@ DEPENDENCIES
   rails_12factor
   rspec-rails
   sass-rails (~> 5.0.0)
+  scss-lint
   slim-rails
   spring
   uglifier (~> 2.7.2)

app/assets/stylesheets/application.css.scss

@@ -1,5 +1,4 @@
 @import "config/color";
-@import "config/grid";
 @import "config/layout";
 @import "config/responsive";
 @import "config/style";

app/assets/stylesheets/component/_aspect-ratio.scss

@@ -2,23 +2,23 @@
   position: relative;
 }
 
-.AspectRatio--1x1  {
+.AspectRatio--1x1 {
   padding-top: 100%;
 }
 
-.AspectRatio--4x3  {
+.AspectRatio--4x3 {
   padding-top: 75%;
 }
 
-.AspectRatio--3x2  {
+.AspectRatio--3x2 {
   padding-top: 66.66%;
 }
 
 .AspectRatio--16x9 {
   padding-top: 56.25%;
 }
 
-.AspectRatio--2x1  {
+.AspectRatio--2x1 {
   padding-top: 50%;
 }
 

app/assets/stylesheets/component/_gallery.scss

@@ -16,7 +16,7 @@
   }
 
   &:hover {
-    background: rgba($palette-gray-80, 0.5);
+    background: $palette-gray-80;
   }
 
 }

app/assets/stylesheets/component/_notice.scss

@@ -1,7 +1,7 @@
 .Notice {
   @extend %base-border-radius;
   border: 2px solid;
-  padding: $base-padding-small;
+  padding: map-get($base-padding, "small");
 }
 
 .Notice--error {

app/assets/stylesheets/component/_slideshow.scss

@@ -13,8 +13,9 @@ $slideshow-img-size: 640px;
   width: 100%;
   height: 100%;
   display: none;
-  transition: transform 1s ease;
+  transition: transform 0.75s ease;
   will-change: transform;
+  user-select: none;
 
   &.is-next,
   &.is-prev,
@@ -86,8 +87,8 @@ $slideshow-img-size: 640px;
   left: 0;
   display: none;
   overflow: hidden;
-  background: linear-gradient(to top, rgba($palette-gray-80, .85) 0, rgba($palette-gray-80, 0) 100%);
-  padding: $base-padding;
+  background: linear-gradient(to top, rgba($palette-gray-80, 0.85) 0, rgba($palette-gray-80, 0) 100%);
+  padding: map-get($base-padding, "medium");
   padding-top: 40px;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -103,13 +104,20 @@ $slideshow-img-size: 640px;
   position: absolute;
   top: 50%;
   z-index: 1;
+  display: none;
   margin-top: -25px;
   border: 0;
   background: none;
-  padding: $base-padding-small;
+  padding: map-get($base-padding, "small");
   font-size: 32px;
   line-height: 1;
   transition: left 0.25s, right 0.25s;
+
+  // They don't offer anything on a small screen
+  @media screen and (min-height: $slideshow-img-size) {
+    display: block;
+  }
+
 }
 
 .Slideshow-btn--next {
@@ -134,15 +142,16 @@ $slideshow-img-size: 640px;
   position: absolute;
   bottom: 10px;
   z-index: 2;
+  display: none;
   margin-left: 0;
   padding-left: 0;
   width: 100%;
   text-align: center;
   white-space: nowrap;
 
   // Avoid clashing with image caption
-  @media screen and (max-height: $slideshow-img-size) {
-    display: none;
+  @media screen and (min-height: $slideshow-img-size) {
+    display: block;
   }
 
 }
@@ -156,6 +165,12 @@ $slideshow-img-size: 640px;
   border-radius: 50%;
   box-shadow: inset 0 0 0 2px white;
 
+  @include respond-above("large") {
+    width: 16px;
+    height: 16px;
+    margin: 0 8px;
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -177,10 +192,4 @@ $slideshow-img-size: 640px;
 
   }
 
-  @include respond-above("large") {
-    width: 16px;
-    height: 16px;
-    margin: 0 8px;
-  }
-
 }

app/assets/stylesheets/component/_sliding-drawer.scss

@@ -6,7 +6,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    transition: transform .5s $ease-out-back;
+    transition: transform 0.5s $ease-out-back;
     will-change: transform;
   }
 

app/assets/stylesheets/config/_color.scss

@@ -13,4 +13,4 @@ $palette-gray-05: #F2F2F2;
 // Notice colors
 $palette-notice-error:   #D9534F;
 $palette-notice-warning: #F0AD4E;
-$palette-notice-success: #5Cb85C;
+$palette-notice-success: #5CB85C;

app/assets/stylesheets/config/_layout.scss

@@ -7,10 +7,14 @@ $header-height-small: 62px;
 $header-height-large: 78px;
 
 // Base margins and padding
-$base-margin-small:   16px 10px;
-$base-margin:         24px 20px;
-$base-margin-large:   36px 40px;
+$base-margins: (
+  "small": 16px 10px,
+  "medium": 24px 20px,
+  "large": 36px 40px
+);
 
-$base-padding-small:  12px;
-$base-padding:        20px;
-$base-padding-large:  36px 40px;
+$base-padding: (
+  "small": 12px,
+  "medium": 18px 20px,
+  "large": 36px 40px
+);

app/assets/stylesheets/config/_responsive.scss

@@ -1,6 +1,6 @@
 $breakpoints: (
-  small:    480px,
-  medium:   720px,
-  large:    960px,
-  x-large:  1280px
+  "small":    480px,
+  "medium":   720px,
+  "large":    960px,
+  "x-large":  1280px
 );