refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/_image-gradient-dynamic.scss

@@ -1,39 +1,38 @@
 .image-gradient-dynamic {
-  $image-gradient-color-top: red; 
+  $image-gradient-color-top: red;
   $transparency-top: 0.9;
-  $image-gradient-color-bottom: green; 
+  $image-gradient-color-bottom: green;
   $transparency-bottom: 0.6;
   $vertical-angle: 0deg;
-  $image-gradient-color-left: teal; 
+  $image-gradient-color-left: teal;
   $transparency-left: 0.8;
-  $image-gradient-color-right: yellow; 
+  $image-gradient-color-right: yellow;
   $transparency-right: 0.8;
   $horizontal-angle: 90deg;
-  
+
   line-height: 0;
   position: relative;
   width: 100%;
 
   img {
-   height: auto;
-   left: 0; 
-   position: relative;
-   top: 0;
-   width: 100%;
+    height: auto;
+    left: 0;
+    position: relative;
+    top: 0;
+    width: 100%;
   }
 
   .copy {
-    @include transform(translate(-50%, -50%));
     left: 50%;
     margin: auto;
     position: absolute;
     text-align: center;
     top: 50%;
+    transform: translate(-50%, -50%);
     z-index: 999;
 
     p {
       color: white;
-      font-weight: 800;
       line-height: 1.5em;
       padding: 1em 2em;
       position: relative;
@@ -41,16 +40,28 @@
   }
 
   .overlay {
-    @include linear-gradient($vertical-angle, transparentize($image-gradient-color-top, $transparency-top), 
-      transparentize($image-gradient-color-bottom, $transparency-bottom));
+    @include position(absolute, 0);
+    background-color: transparentize(
+      $image-gradient-color-top,
+      $transparency-top
+    );
+    background-image: linear-gradient($vertical-angle,
+      transparentize($image-gradient-color-top, $transparency-top),
+      transparentize($image-gradient-color-bottom, $transparency-bottom)
+    );
     display: block;
-    @include position(absolute, 0px 0px 0px 0px);
 
-    &:after {
-      @include linear-gradient($horizontal-angle, transparentize($image-gradient-color-left, $transparency-left), 
-        transparentize($image-gradient-color-right, $transparency-right));
-      @include position(absolute, 0px 0px 0px 0px);
-      content: '';
+    &::after {
+      @include position(absolute, 0);
+      background-color: transparentize(
+        $image-gradient-color-left,
+        $transparency-right
+      );
+      background-image: linear-gradient($horizontal-angle,
+        transparentize($image-gradient-color-left, $transparency-left),
+        transparentize($image-gradient-color-right, $transparency-right)
+      );
+      content: "";
       display: block;
     }
   }

data/source/stylesheets/refills/_logo-section.scss

@@ -0,0 +1,25 @@
+.logo-section {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 1em;
+
+  li {
+    align-self: center;
+    list-style: none;
+    padding: 2em;
+    text-align: center;
+
+    .square-logo {
+      max-height: 5em;
+    }
+
+    .wide-logo {
+      max-width: 10em;
+    }
+
+    .wider-logo {
+      max-width: 15em;
+    }
+  }
+}

data/source/stylesheets/refills/_maps.scss

@@ -3,7 +3,7 @@
   width: 100%;
 }
 
-#map_canvas img { 
+#map_canvas img {
   max-width: none; // to prevent UI control bug
 }
 
@@ -13,8 +13,8 @@
 
 #map_canvas .firstHeading {
   font-size: 1em;
-  line-height: 1em;
   font-weight: bold;
+  line-height: 1em;
   margin: 0;
 }
 

data/source/stylesheets/refills/_modal.scss

@@ -1,27 +1,15 @@
 .modal {
-  ///////////////////////////////////////////////////////////////////////////////////
-  $base-border-color: gainsboro !default;
+  $base-border-color: #dcdcdc !default;
   $base-border-radius: 3px !default;
-  $base-background-color: white !default;
+  $base-background-color: #fff !default;
   $base-font-size: 1em !default;
   $base-line-height: 1.5em !default;
-  $base-accent-color: #477DCA !default;
+  $action-color: #477dca !default;
   $dark-gray: #333 !default;
-  $light-gray: #DDD !default;
-  $medium-screen: em(640) !default;
-  $large-screen: em(860) !default;
+  $light-gray: #ddd !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-
-  h1 {
-    margin: 0;
-  }
-
-  p {
-    color: $base-font-color;
-    line-height: $base-line-height;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $modal-padding: 3em;
   $modal-background: $base-background-color;
   $modal-close-color: $light-gray;
@@ -45,17 +33,16 @@
   }
 
   .modal-trigger {
-    @include button(flat, $base-accent-color);
     padding: 0.8em 1em;
   }
 
-  .modal-window { // overlay
-    @include transition(opacity 0.25s ease);
-    @include position(fixed, 0px 0px 0px 0px);
-    background: rgba(0,0,0, 0.85);
+  .modal-fade-screen { // overlay
+    @include position(fixed, 0);
+    background-color: rgba(#000, 0.85);
     opacity: 0;
     padding-top: 0.6em;
     text-align: left;
+    transition: opacity 0.25s ease;
     visibility: hidden;
     z-index: 99999999999;
 
@@ -64,7 +51,7 @@
     }
 
     .modal-bg {
-      @include position(absolute, 0px 0px 0px 0px);
+      @include position(absolute, 0);
       cursor: pointer;
     }
   }
@@ -75,37 +62,37 @@
     background: $modal-background;
     cursor: pointer;
 
-    &:after,
-    &:before {
+    &::after,
+    &::before {
       @include position(absolute, 3px 3px 0 50%);
-      @include transform(rotate(45deg));
-      @include size(0.15em 1.5em);
+      @include size(0.15em, 1.5em);
       background: $modal-close-color;
-      content: '';
+      content: "";
       display: block;
       margin: -3px 0 0 -1px;
+      transform: rotate(45deg);
     }
 
-    &:hover:after,
-    &:hover:before {
+    &:hover::after,
+    &:hover::before {
       background: darken($modal-close-color, 10%);
     }
 
-    &:before {
-      @include transform(rotate(-45deg));
+    &::before {
+      transform: rotate(-45deg);
     }
   }
 
   .modal-inner {
-    @include transition(opacity 0.25s ease);
     background: $modal-background;
     border-radius: $base-border-radius;
-    margin-top: 0;
     margin: auto;
+    margin-top: 0;
     max-height: 95%;
     overflow: auto;
     padding: $modal-padding / 2;
     position: relative;
+    transition: opacity 0.25s ease;
     width: 95%;
 
     @include media($medium-screen) {
@@ -120,25 +107,29 @@
 
     h1 {
       color: $base-font-color;
-      margin-bottom: 0.6em;
       text-align: left;
       text-transform: capitalize;
     }
 
+    p {
+      color: $base-font-color;
+      line-height: $base-line-height;
+    }
+
     .modal-intro {
-      font-weight: 800;
+      margin-bottom: 1em;
     }
 
     .modal-content {
       color: $base-font-color;
 
       @include media($medium-screen) {
-        @include columns(2 8em);
+        columns: 2 8em;
       }
     }
 
     a.cta {
-      color: white;
+      color: $base-background-color;
       display: inline-block;
       margin-right: 0.5em;
       margin-top: 1em;
@@ -149,12 +140,12 @@
     }
   }
 
-  .modal-state:checked + .modal-window {
+  .modal-state:checked + .modal-fade-screen {
     opacity: 1;
     visibility: visible;
   }
 
-  .modal-state:checked + .modal-window .modal-inner {
+  .modal-state:checked + .modal-fade-screen .modal-inner {
     top: 0.5em;
   }
 }
@@ -163,8 +154,4 @@
   overflow: hidden;
 }
 
-.modal-closed {
-  overflow: auto;
-}
-
 // Based on code by Kasper Mikiewicz

data/source/stylesheets/refills/_navigation.scss

@@ -1,22 +1,15 @@
 header.navigation {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
-  $base-accent-color: #477DCA !default;
+  $action-color: #477DCA !default;
   $dark-gray: #333 !default;
-  $large-screen: em(860) !default;
-  
-  a {
-    text-decoration: none;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $large-screen: 53.75em !default;
   $navigation-padding: 1em;
   $navigation-background: $dark-gray;
   $navigation-color: transparentize(white, 0.3);
   $navigation-color-hover: white;
   $navigation-height: 60px;
-  $navigation-nav-button-background: $base-accent-color;
+  $navigation-nav-button-background: $action-color;
   $navigation-nav-button-background-hover: lighten($navigation-background, 10%);
   $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20%);
   $navigation-search-background: lighten($navigation-background, 5);
@@ -34,7 +27,6 @@ header.navigation {
 
   .navigation-wrapper {
     @include clearfix;
-    @include outer-container;
     position: relative;
     z-index: 9999;
   }
@@ -57,10 +49,10 @@ header.navigation {
     color: $navigation-color;
     display: block;
     float: right;
-    font-weight: 700;
     line-height: $navigation-height;
     margin: 0;
     padding-right: 1em;
+    text-decoration: none;
     text-transform: uppercase;
 
     @include media ($horizontal-bar-mode) {
@@ -86,7 +78,6 @@ header.navigation {
   }
 
   ul.navigation-menu {
-    -webkit-transform-style: preserve-3d; // stop webkit flicker
     clear: both;
     display: none;
     margin: 0 auto;
@@ -129,7 +120,7 @@ header.navigation {
     a {
       color: $navigation-color;
       display: inline-block;
-      font-weight: 400;
+      text-decoration: none;
 
       @include media ($horizontal-bar-mode) {
         padding-right: 1em;
@@ -152,7 +143,7 @@ header.navigation {
   li.more.nav-link {
     padding-right: 0;
 
-    @include media($large-screen) {
+    @include media($horizontal-bar-mode) {
       padding-right: $navigation-submenu-padding;
     }
 
@@ -168,10 +159,10 @@ header.navigation {
       padding-right: 0.6em;
     }
 
-    > a:after {
+    > a::after {
       @include position(absolute, auto -0.4em auto auto);
-      content: '\25BE';
       color: $navigation-color;
+      content: "\25BE";
     }
   }
 
@@ -187,12 +178,12 @@ header.navigation {
       padding-right: 1.6em;
       position: relative;
 
-      @include media($large-screen) {
+      @include media($horizontal-bar-mode) {
         margin-right: $navigation-submenu-padding;
       }
 
-      &:after {
-        content: '›';
+      &::after {
+        content: "›";
         font-size: 1.2em;
         position: absolute;
         right: $navigation-submenu-padding / 2;
@@ -220,6 +211,20 @@ header.navigation {
       top: 1.5em;
     }
 
+    .submenu.fly-out-right {
+      @include media($horizontal-bar-mode) {
+        left: $navigation-submenu-width - 0.2em;
+        top: 0;
+      }
+    }
+
+    .submenu.fly-out-left {
+      @include media($horizontal-bar-mode) {
+        left: -$navigation-submenu-width + 0.2em;
+        top: 0;
+      }
+    }
+
     .submenu {
       @include media($horizontal-bar-mode) {
         left: $navigation-submenu-width - 0.2em;
@@ -269,26 +274,14 @@ header.navigation {
     clear: both;
     display: block;
     height: $navigation-height;
-    padding-left: $navigation-padding / 2;
-    padding-right: $navigation-padding;
 
-    @include media($large-screen) {
+    @include media($horizontal-bar-mode) {
       background: transparent;
       clear: none;
       float: right;
     }
   }
 
-  .sign-up {
-    @include button(flat, $base-accent-color);
-    display: inline;
-    float: right;
-    font-size: 0.8em;
-    margin-top: 1em;
-    padding: 0.75em 1em;
-    text-transform: uppercase;
-  }
-
   // Search bar
 
   .search-bar {
@@ -297,17 +290,17 @@ header.navigation {
     $search-bar-background: lighten($search-bar-border-color, 10%);
 
     float: left;
-    padding: 0.85em 0.6em 0.7em 0.6em;
+    padding: 0.85em 0.85em 0.7em 0.6em;
     width: 60%;
 
     form {
       position: relative;
 
       input[type=search] {
-        @include box-sizing(border-box);
         background: $navigation-search-background;
-        border-radius: $base-border-radius * 2;
         border: $navigation-search-border;
+        border-radius: $base-border-radius * 2;
+        box-sizing: border-box;
         color: $navigation-color;
         font-size: 0.9em;
         font-style: italic;
@@ -315,13 +308,14 @@ header.navigation {
         padding: 0.5em 0.8em;
         width: 100%;
 
-        @include media($large-screen) {
+        @include media($horizontal-bar-mode) {
           width: 100%;
         }
       }
 
       button[type=submit] {
-        @include button(flat, $navigation-search-background);
+        background: $navigation-search-background;
+        border: 0;
         bottom: 0.3em;
         left: auto;
         outline: none;
@@ -344,7 +338,7 @@ header.navigation {
       width: 16em;
 
       input {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         display: block;
       }
     }