storytime 2.1.6 → 2.1.7

data/Guardfile

@@ -1,7 +1,7 @@
 # A sample Guardfile
 # More info at https://github.com/guard/guard#readme
 
-guard :rspec, cmd: 'bundle exec spring rspec', failed_mode: :none do
+guard :rspec, cmd: 'bundle exec rspec', failed_mode: :none do
   watch(%r{^spec/.+_spec\.rb$})
   watch(%r{^lib/(.+)\.rb$})     { |m| "spec/lib/#{m[1]}_spec.rb" }
   watch('spec/spec_helper.rb')  { "spec" }

data/app/assets/fonts/storytime-icons.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="storytime-icons" horiz-adv-x="512">
+<font-face font-family="storytime-icons" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512"/>
+
+<glyph unicode="m" d="M247 42l22 0 0-36-22 0z m58 231l174 104-8 14-184-105 103 185-15 9-106-183-2 211-17 0-2-212-109 182-15-9 100-175-176 101-16-27 222-127 255 0 0 32z m-298-5l34 0 0-22-34 0z m118-224l19-11 18 32-19 11z m312 99l34-19 11 18-34 20z m-390-22l-11 18 31 18 11-18z m310-53l19-33 19 11-20 33z"/>
+<glyph unicode="a" d="M256 509c-139 0-252-113-252-252 0-139 113-252 252-252 139 0 252 113 252 252 0 139-113 252-252 252z m0-476c-123 0-224 100-224 224 0 123 101 224 224 224 124 0 224-101 224-224 0-124-100-224-224-224z m90 319l-90-89-90 89-19-19 89-90-89-89 20-20 89 89 89-89 20 20-89 89 90 90z"/>
+<glyph unicode="b" d="M258 153l-88 84 167 168 87-83z m-84 84l84-80 162 165-83 80z m84-93l-97 92 175 178 97-92z m-75 93l74-71 154 156-74 71z m75-95l-99 94 177 180 99-94z m-95 94l95-90 173 176-95 90z m94-72l-75 73 155 157 75-72z m-72 73l72-69 152 154-72 69z m-73-140l38 119 88-84z m39 115l-35-111 117 32z m-48-124l44 141 104-100z m51 112l-28-90 94 26z m-53-114l45 145 107-103z m46 140l-43-137 144 40z m-23-117l29 93 70-66z m31 88l-27-85 90 25z m289 145l-87 84 57 58 87-84z m-84 84l84-80 53 54-83 80z m84-93l-97 93 67 67 96-93z m-74 93l74-71 44 45-74 71z m74-95l-98 95 68 69 98-95z m-95 95l95-91 64 65-94 91z m95-73l-76 73 46 47 76-73z m-72 73l72-69 42 43-72 69z m101-136l0-260-445 0 0 454 306 0 0 25-331 0 0-504 494 0 0 285z"/>
+<glyph unicode="c" d="M4 509l0-505 505 0 0 505z m481-481l-458 0 0 105 130 111 87-86 108 198 133-129z m0 232l-139 135-108-198-80 79-131-111 0 321 458 0z m-317 49c29 0 52 23 52 52 0 29-23 52-52 52-29 0-52-23-52-52 0-29 23-52 52-52z m0 80c15 0 28-12 28-28 0-15-13-28-28-28-16 0-28 13-28 28 0 16 12 28 28 28z"/>
+<glyph unicode="d" d="M254 6c-124 0-224 101-224 226 0 125 101 226 224 226 123 0 224-101 224-226 0-125-100-226-224-226z m0 418c-104 0-189-86-189-192 0-106 85-192 189-192 104 0 189 86 189 192 1 106-85 192-189 192z m-17 84l34 0 0-288-34 0z"/>
+<glyph unicode="e" d="M374 342l7 0c0 0 0 0 0 0-10 96-62 166-125 166-63 0-114-70-125-166l8 0c-40 0-73-32-73-72l0-193c0-40 33-73 73-73l235 0c40 0 72 33 72 73l0 192c0 40-32 73-72 73z m-118 137c45 0 84-60 94-137l-188 0c10 77 49 137 94 137z m161-402c0-24-19-44-43-44l-235 0c-24 0-44 20-44 44l0 192c0 24 20 44 44 44l235 0c1 0 1 0 2 0 23-1 41-20 41-44l0-192z m-161 139c-22 0-39-17-39-39 0-15 8-28 20-34l0-36 38 0 0 36c13 6 21 19 21 34 0 22-18 39-40 39z"/>
+<glyph unicode="f" d="M346 308c18 21 28 48 28 77 0 68-55 123-122 123-68 0-123-55-123-123 0-30 12-57 30-79l-72-65 62-237 209 0 63 237z m-187 77c0 52 42 93 93 93 51 0 93-41 93-93 0-21-8-41-21-57-6-8-13-15-21-20-15-10-32-16-51-16-18 0-34 6-49 14-8 6-16 12-22 20-14 16-22 37-22 59z m177-352l-164 0-52 199 61 54c20-14 44-23 71-23 27 0 53 10 73 25l63-56z"/>
+<glyph unicode="g" d="M112 365l0 144-31 0 0-144c-28-7-48-31-48-61 0-29 20-53 48-60l0-240 31 0 0 240c27 7 47 31 47 61 0 29-20 53-47 60z m0-88c-5-2-10-4-16-4-6 0-11 2-15 4-10 6-16 16-16 27 0 12 6 22 16 28 4 2 10 4 15 4 6 0 11-2 16-4 9-6 16-16 16-28 0-11-7-21-16-27z m157-69l0 301-31 0 0-301c-27-7-47-31-47-61 0-29 20-53 47-61l0-81 31 0 0 81c27 7 48 32 48 61 0 29-21 54-48 61z m0-88c-4-3-10-4-15-4-6 0-11 1-16 4-9 5-16 16-16 27 0 12 7 22 16 27 5 3 10 5 16 5 5 0 11-2 15-5 10-5 16-15 16-27 0-11-6-22-16-27z m158 340l0 49-32 0 0-49c-27-7-47-32-47-61 0-29 20-54 47-61l0-334 32 0 0 334c27 7 47 32 47 61 0 29-20 54-47 61z m0-88c-5-3-10-5-16-5-6 0-11 2-16 5-9 5-15 15-15 27 0 11 6 22 15 27 5 3 10 4 16 4 6 0 11-1 16-4 9-5 15-16 15-27 0-12-6-22-15-27z"/>
+<glyph unicode="h" d="M4 451l0-377 503 0 0 377z m433-31l-177-142-185 142z m-402-315l0 306 225-173 215 172 0-305-440 0z"/>
+<glyph unicode="i" d="M122 6l275 0 68 405-410 0z m252 27l-229 0-58 351 345 0z m-51 419l0 54-120 0 0-54-160 0 0-27 426 0 0 27z"/>
+<glyph unicode="j" d="M459 330c10 13 17 30 17 48 0 45-38 82-84 82-39 0-72-27-81-63-16 13-36 21-58 21-22 0-41-8-57-20-9 35-41 62-80 62-47 0-84-37-84-82 0-19 7-36 18-50l-47-40 43-156 110 0 21-82 154 0 22 82 111 0 43 156z m-67 104c32 0 59-25 59-56 0-12-5-23-11-32-5-7-12-12-20-16-8-5-17-8-27-8-10 0-19 3-27 7-8 4-14 9-20 16-7 9-11 21-11 33-1 31 25 56 57 56z m-139-41c27 0 50-16 60-40 1-1 1-3 2-5 2-6 3-13 3-20 0-3 0-5-1-8-1-11-5-22-12-31-5-7-11-13-19-17 0 0-1 0-1-1-10-5-20-8-32-8-10 0-20 2-28 6-1 1-2 2-4 2-7 4-14 10-19 17-8 10-13 22-14 36 0 1 0 2 0 4 0 4 0 9 1 13 3 6 6 12 7 18 12 20 33 34 57 34z m-196-15c0 31 26 56 59 56 32 0 58-25 58-56 0-3-1-6-1-10-3-5-5-11-7-17-1-2-2-3-3-5-5-7-12-13-19-17-9-4-18-7-28-7-10 0-19 3-27 7-7 3-14 9-20 16-7 9-12 21-12 33z m8-221l-33 122 37 32c13-9 29-14 47-14 17 0 34 6 48 15l0-1c3-15 10-29 19-40l-51-47 17-67z m247-82l-115 0-15 57-10 38-12 46 32 29 10 9c5-4 10-7 16-9 11-5 23-7 35-7 14 0 27 3 39 8 5 3 10 6 14 9l13-12 30-27-11-43-11-41z m133 82l-85 0 18 67-54 48c8 10 14 22 17 35l5 4c13-9 29-14 47-14 17 0 34 5 47 15l38-33z"/>
+<glyph unicode="k" d="M255 341c-46 0-84-38-84-84 0-46 38-84 84-84 47 0 84 38 84 84 0 46-37 84-84 84z m64-84c0-35-29-63-64-63-34 0-63 28-63 63 0 35 29 63 63 63 35 0 64-28 64-63z m188-37l0 74-74 31c-2 4-3 6-4 9l30 75-52 52-74-31c-3 2-6 3-9 4l-32 74-74 0-30-74c-4-1-7-2-10-4l-74 30-52-52 30-73c-1-3-3-7-4-11l-73-31 0-74 73-30c1-4 3-7 4-10l-29-74 52-52 73 30c3-1 6-2 10-4l31-73 74 0 31 74c4 1 6 2 9 3l75-29 52 52-31 74c1 3 2 6 4 9z m-91-16l-1-4c-2-4-4-10-6-15l-2-4 28-70-32-33-70 28 0 0-4-2c-6-2-12-5-16-6l-5-2-28-69-47 0-29 69-5 1c-4 2-10 4-16 7l-4 2-69-29-33 33 28 69-2 4c-2 5-5 11-7 17l-2 5-68 28 0 47 68 29 2 4c2 5 4 11 7 17l2 4-29 69 33 33 70-28 4 2c4 2 9 4 16 6l4 2 29 69 47 0 29-69 4-2c6-2 11-4 16-6l4-2 70 28 33-32-29-71 2-4c2-4 5-9 7-15l1-4 70-29 0-47z"/>
+<glyph unicode="l" d="M406 351l0 75-84 0 0 83-292 0 0-346 83 0 0-83 76 0 0-76 293 0 0 347-76 0z m-350-162l0 293 240 0 0-56-183 0 0-237-57 0z m84-83l0 294 239 0 0-49-190 0 0-245-49 0z m315-75l-239 0 0 293 239 0 0-293z"/>
+</font></defs></svg>

data/app/assets/javascripts/storytime/application.js

@@ -14,14 +14,8 @@
 //= require jquery
 //= require jquery_ujs
 //= require bootstrap-sprockets
-//= require leather
 //= require cocoon
-//= require jquery-ui/core
-//= require jquery-ui/datepicker
-//= require jquery-ui/position
-//= require jquery-ui/widget
-//= require jquery-ui/resizable
-//= require jquery-ui/sortable
+//= require jquery-ui
 //= require jquery.ui.timepicker
 //= require jquery.iframe-transport.js
 //= require jquery.fileupload.js
@@ -34,7 +28,6 @@
 //= require codemirror/addons/edit/closebrackets
 //= require chosen.jquery
 //= require medium-editor.min
-//= require storytime_admin
 //= require_tree .
 
 window.Storytime || (window.Storytime = {})

data/app/assets/javascripts/storytime/off_canvas.coffee

@@ -0,0 +1,16 @@
+$ ->
+  $("body").on "click", "[data-toggle='off-canvas']", (e) ->
+    e.preventDefault()
+    if $("#off-canvas-overlay").length == 0
+      $("#main").before("<div id='off-canvas-overlay'></div>")
+    target = $(this).data("target")
+    $(target).toggleClass("in")
+
+  $("body").on "click touchstart", "#off-canvas-overlay", (e) ->
+    e.preventDefault()
+    $(".off-canvas.in").removeClass("in")
+
+  $("body").on "click", "[data-toggle='columns']", (e) ->
+    e.preventDefault()
+    $('#right').toggleClass('hidden-xs')
+    $('#left').toggleClass('hidden-xs')

data/app/assets/javascripts/storytime/wysiwyg.js.coffee

@@ -1,18 +1,20 @@
 class Storytime.Dashboard.Wysiwyg
-  mediumEditorOptions = 
+  mediumEditorOptions =
     buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote', 'unorderedlist', 'orderedlist', 'pre']
     toolbarAlign: 'center'
     buttonLabels: 'fontawesome'
     checkLinkFormat: true
+    firstHeader: "h2"
+    secondHeader: "h3"
 
-  codeMirrorOptions = 
+  codeMirrorOptions =
     mode: 'htmlmixed'
     theme: 'solarized dark'
     tabSize: 2
     autoCloseTags: true
     lineNumbers: true
 
-  tidyOptions = 
+  tidyOptions =
     "indent": "auto",
     "indent-spaces": 2,
     "wrap": 80,
@@ -131,8 +133,8 @@ class Storytime.Dashboard.Wysiwyg
       codemirror.setValue(html)
 
   setupMedium: ->
-    # Medium-editor keeps adding toolbars when this method gets triggered 
-    # (i.e. when opening snippets modal on post edit page) and they all seem 
+    # Medium-editor keeps adding toolbars when this method gets triggered
+    # (i.e. when opening snippets modal on post edit page) and they all seem
     # to get activated at the same time, so this clears out existing ones first
     $('.medium-editor-toolbar').remove()
     $('.medium-editor-anchor-preview').remove()
@@ -186,10 +188,10 @@ class Storytime.Dashboard.Wysiwyg
       mediumEditor.activate()
       wysiwyg.find('.editor').show()
       wysiwyg.find('.CodeMirror').hide()
-  
+
   bindTogglesToPanels: () ->
     $(".post-action-panel").on "show.bs.collapse", ->
       $("[data-toggle='codemirror']").hide()
 
     $(".post-action-panel").on "hide.bs.collapse", ->
-      $("[data-toggle='codemirror']").show()
+      $("[data-toggle='codemirror']").show()

data/app/assets/stylesheets/storytime/_buttons.scss

@@ -1,3 +1,36 @@
+
+@mixin btn-outline-variant($color, $bg) {
+  color: $bg;
+
+  &:hover {
+    color: $color;
+  }
+}
+
+.btn-outline {
+  background-color: transparent;
+
+  &.btn-primary {
+    @include btn-outline-variant($btn-primary-color, $btn-primary-bg);
+  }
+
+  &.btn-info {
+    @include btn-outline-variant($btn-info-color, $btn-info-bg);
+  }
+
+  &.btn-success {
+    @include btn-outline-variant($btn-success-color, $btn-success-bg);
+  }
+
+  &.btn-warning {
+    @include btn-outline-variant($btn-warning-color, $btn-warning-bg);
+  }
+
+  &.btn-danger {
+    @include btn-outline-variant($btn-danger-color, $btn-danger-bg);
+  }
+}
+
 .btn-primary.btn-outline:active, .btn-primary.btn-outline:focus {
   color: #fff;
 }

data/app/assets/stylesheets/storytime/_list-group.scss

@@ -10,4 +10,4 @@
   &:last-child {
     border-radius: 0;
   }
-}
+}

data/app/assets/stylesheets/storytime/application.scss

@@ -1,4 +1,4 @@
-@import url("//fonts.googleapis.com/css?family=Merriweather:400,300,700,900|Open+Sans:400,300,600");
+@import url("https://fonts.googleapis.com/css?family=Merriweather:400,300,700,900|Open+Sans:400,300,600");
 @import "storytime/icons";
 
 $st-brand-primary: #4B71C3;
@@ -35,7 +35,6 @@ $st-headings-font-weight: 700;
 @import "bootstrap";
 @import "font-awesome-sprockets";
 @import "font-awesome";
-@import "leather";
 @import "jquery-ui/core";
 @import "jquery-ui/datepicker";
 @import "jquery-ui/theme";
@@ -74,3 +73,16 @@ $st-headings-font-weight: 700;
 @import "storytime/snippets";
 @import "storytime/layout";
 @import "storytime/comments";
+
+@import "storytime/leather/variables";
+@import "storytime/leather/buttons";
+@import "storytime/leather/devise";
+@import "storytime/leather/grid";
+@import "storytime/leather/list_groups";
+@import "storytime/leather/nav_menus";
+@import "storytime/leather/navbar_transparent";
+@import "storytime/leather/off_canvas";
+@import "storytime/leather/scroll_panels";
+@import "storytime/leather/toggle_columns";
+@import "storytime/leather/typography";
+@import "storytime/leather/utilities";

data/app/assets/stylesheets/storytime/icons.scss

@@ -3,11 +3,11 @@
 /* storytime-icons */
 @font-face {
   font-family: "storytime-icons";
-  src:url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.eot");
-  src:url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.eot?#iefix") format("embedded-opentype"),
-    url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.woff") format("woff"),
-    url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.ttf") format("truetype"),
-    url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.svg#1423165812") format("svg");
+  src:font-url("storytime-icons.eot");
+  src:font-url("storytime-icons.eot?#iefix") format("embedded-opentype"),
+    font-url("storytime-icons.woff") format("woff"),
+    font-url("storytime-icons.ttf") format("truetype"),
+    font-url("storytime-icons.svg#1423165812") format("svg");
   font-weight: normal;
   font-style: normal;
 }

data/app/assets/stylesheets/storytime/leather/_buttons.scss

@@ -0,0 +1,31 @@
+@mixin btn-outline-variant($color, $bg) {
+  color: $bg;
+
+  &:hover {
+    color: $color;
+  }
+}
+
+.btn-outline {
+  background-color: transparent;
+
+  &.btn-primary {
+    @include btn-outline-variant($btn-primary-color, $btn-primary-bg);
+  }
+
+  &.btn-info {
+    @include btn-outline-variant($btn-info-color, $btn-info-bg);
+  }
+
+  &.btn-success {
+    @include btn-outline-variant($btn-success-color, $btn-success-bg);
+  }
+
+  &.btn-warning {
+    @include btn-outline-variant($btn-warning-color, $btn-warning-bg);
+  }
+
+  &.btn-danger {
+    @include btn-outline-variant($btn-danger-color, $btn-danger-bg);
+  }
+}

data/app/assets/stylesheets/storytime/leather/_devise.scss

@@ -0,0 +1,72 @@
+.text-white { color: #ffffff; }
+
+.devise_sessions, .devise_registrations, .devise_passwords {
+  &.new, &.create {
+    @extend .devise;
+  }
+}
+
+.devise_passwords.edit, .devise_passwords.update {
+  @extend .devise;
+}
+
+// For compatibility with Flutie body_class
+.devise-sessions-new, .devise-sessions-create, .devise-registrations-new, .devise-registrations-create, .devise-passwords-new, .devise-passwords-create, .devise-passwords-edit {
+  @extend .devise;
+}
+
+.devise {
+  @include gradient-vertical($devise-bg-gradient-start, $devise-bg-gradient-end);
+  background-attachment: fixed !important;
+  .devise-welcome {
+    @extend .text-center;
+    @extend .text-white;
+    text-shadow: 1px 1px 3px $gray-dark;
+    padding: 50px 0 20px 0;
+    h2 {
+      margin-bottom: 50px;
+      a {
+        @extend .text-white;
+        text-decoration: none;
+        @include transition(color 0.25s linear);
+        &:hover {
+          color: darken(#ffffff, 20%);
+        }
+      }
+    }
+    h2, h3 {
+      font-weight: lighter;
+    }
+  }
+  form {
+    @include border-top-radius($border-radius-base);
+    @include border-bottom-radius($border-radius-base);
+    border: 1px solid #ffffff;
+    background: #ffffff;
+    box-shadow: 1px 1px 3px $gray-dark;
+    padding: 40px 40px 20px;
+    
+    #error_explanation {
+      @extend .alert;
+      @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+      h2 {
+        margin-top: 0;
+        font-size: 15px;
+      }
+    }
+    .actions {
+      @extend .text-center;
+      padding-top: 30px;
+    }
+  }
+  .devise-links {
+    @extend .text-center;
+    @extend .text-white;
+    margin-top: 20px;
+    margin-bottom: 70px;
+    a {
+      text-decoration: underline;
+      @extend .text-white;
+    }
+  }
+}

data/app/assets/stylesheets/storytime/leather/_grid.scss

@@ -0,0 +1,19 @@
+.container-lg {
+  max-width: 1580px;
+  margin: 0 auto;
+  position: relative;
+}
+
+section {
+  padding: 80px 0 80px 0;
+}
+
+.row.no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+.row.no-gutters > [class^="col-"],
+.row.no-gutters > [class*=" col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}

data/app/assets/stylesheets/storytime/leather/_list_groups.scss

@@ -0,0 +1,33 @@
+.list-group-button-links {
+
+  .list-group-item {
+    padding: 0;
+
+    .list-group-actions {
+      display: none;
+      position: absolute; 
+      top: 50%; 
+      right: 15px; 
+      margin-top: -11px;
+    }
+
+    &:hover {
+      .list-group-actions {
+        display: block;
+      }
+    }
+
+    .list-group-link {
+      display: block; 
+      padding: 10px 15px;
+      color: $list-group-link-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: $list-group-link-hover-color;
+        background-color: $list-group-hover-bg;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/storytime/leather/_nav_menus.scss

@@ -0,0 +1,125 @@
+.navbar-static-top ~ #main {
+  top: $navbar-height !important;
+}
+
+.navbar-static-top ~ .nav-menu {
+  top: $navbar-height;
+}
+
+.nav-menu {
+  width: $navbar-fixed-width;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  ~ #main {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .nav-menu-header {
+
+    .nav-menu-brand {
+      display: block;
+      padding: 10px 15px;
+      text-decoration: none;
+      font-size: 18px;
+    }
+  }
+
+  &.nav-menu-fixed-left {
+    right: auto;
+    left: 0;
+
+    ~ #main {
+      right: 0;
+      left: $navbar-fixed-width;
+    }
+  }
+
+  &.nav-menu-fixed-right {
+    left: auto;
+    right: 0;
+
+    ~ #main {
+      left: 0;
+      right: $navbar-fixed-width;
+    }
+  }
+
+  &.nav-menu-default {
+    background: $navbar-default-bg;
+    color: $navbar-default-color;
+
+    .nav-menu-header {
+      .nav-menu-brand {
+        color: $navbar-default-brand-color;
+
+        &:hover {
+          color: $navbar-default-brand-hover-color;
+          background-color: $navbar-default-brand-hover-bg;
+        }
+      }
+    }
+
+    .nav-menu-nav {
+      li {
+        a {
+          color: $navbar-default-link-color;
+
+          &:hover {
+            color: $navbar-default-link-hover-color;
+            background-color: $navbar-default-link-hover-bg;
+          }
+        }
+
+        &.active {
+          a {
+            color: $navbar-default-link-active-color;
+            background-color: $navbar-default-link-active-bg;
+          }
+        }
+      }
+    }
+  }
+
+  &.nav-menu-inverse {
+    background: $navbar-inverse-bg;
+    color: $navbar-inverse-color;
+
+    .nav-menu-header {
+      .nav-menu-brand {
+        color: $navbar-inverse-brand-color;
+
+        &:hover {
+          color: $navbar-inverse-brand-hover-color;
+          background-color: $navbar-inverse-brand-hover-bg;
+        }
+      }
+    }
+
+    .nav-menu-nav {
+      li {
+        a {
+          color: $navbar-inverse-link-color;
+
+          &:hover {
+            color: $navbar-inverse-link-hover-color;
+            background-color: $navbar-inverse-link-hover-bg;
+          }
+        }
+
+        &.active {
+          a {
+            color: $navbar-inverse-link-active-color;
+            background-color: $navbar-inverse-link-active-bg;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/storytime/leather/_navbar_transparent.scss

@@ -0,0 +1,23 @@
+.navbar-transparent-top {
+  @include transition(all 0.5s ease);
+}
+
+@media (min-width: $grid-float-breakpoint) {
+  .navbar-transparent-top {
+    &.affix-top {
+      background: transparent;
+      border: none;
+      padding-top: 10px;
+
+      .navbar-brand,
+      .nav > li > a,
+      .nav > li.active > a,
+      .navbar-nav > .open > a,
+      .navbar-nav > .open > a:hover,
+      .navbar-nav > .open > a:focus {
+        background-color: transparent;
+        color: $navbar-tranparent-link-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/storytime/leather/_off_canvas.scss

@@ -0,0 +1,109 @@
+@mixin off-canvas {
+  top: 0 !important;
+  @include transition(all 0.3s);
+  z-index: $zindex-modal;
+
+  ~ #off-canvas-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    visibility: hidden;
+    background-color: $modal-backdrop-bg;
+    z-index: $zindex-modal - 1;
+    @include opacity(0);
+    @include transition(all 0.3s);
+  }
+
+  &.in {
+    ~ #off-canvas-overlay {
+      visibility: visible;
+      @include opacity($modal-backdrop-opacity);
+    }
+  }
+}
+
+@mixin off-canvas-left {
+  left: -100% !important;
+  right: auto !important;
+
+  ~ #main {
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  &.in {
+    left: 0 !important;
+  }
+}
+
+@mixin off-canvas-right {
+  right: -100% !important;
+  left: auto !important;
+
+  ~ #main {
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  &.in {
+    right: 0 !important;
+  }
+}
+
+.off-canvas-left {
+  @include off-canvas;
+  @include off-canvas-left;
+}
+
+@media (max-width: $screen-xs-max) {
+  .off-canvas-left-xs {
+    @include off-canvas;
+    @include off-canvas-left;
+  }
+}
+@media (max-width: $screen-sm-max) {
+  .off-canvas-left-sm {
+    @include off-canvas;
+    @include off-canvas-left;
+  }
+}
+@media (max-width: $screen-md-max) {
+  .off-canvas-left-md {
+    @include off-canvas;
+    @include off-canvas-left;
+  }
+}
+.off-canvas-left-lg {
+  @include off-canvas;
+  @include off-canvas-left;
+}
+
+.off-canvas-right {
+  @include off-canvas;
+  @include off-canvas-right;
+}
+
+@media (max-width: $screen-xs-max) {
+  .off-canvas-right-xs {
+    @include off-canvas;
+    @include off-canvas-right;
+  }
+}
+@media (max-width: $screen-sm-max) {
+  .off-canvas-right-sm {
+    @include off-canvas;
+    @include off-canvas-right;
+  }
+}
+@media (max-width: $screen-md-max) {
+  .off-canvas-right-md {
+    @include off-canvas;
+    @include off-canvas-right;
+  }
+}
+.off-canvas-right-lg {
+  @include off-canvas;
+  @include off-canvas-right;
+}