design update for modals and hide navbar on modal show

css/agency.css

@@ -12,7 +12,7 @@ p {
 
 a {
   color: #fed136; }
-  a.active, a:active, a:focus, a:hover {
+  a:hover {
     color: #fec503; }
 
 .text-primary {
@@ -49,47 +49,20 @@ section {
   font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 700; }
 
-.btn-primary {
-  color: white;
-  border-color: #fed136;
-  background-color: #fed136; }
-  .btn-primary.focus, .btn-primary:focus {
-    color: white;
-    border-color: #b48b01;
-    background-color: #fec503; }
-  .btn-primary:hover {
-    color: white;
-    border-color: #f6bf01;
-    background-color: #fec503; }
-  .btn-primary.active, .btn-primary:active,
-  .open > .btn-primary.dropdown-toggle {
-    color: white;
-    border-color: #f6bf01;
-    background-color: #fec503; }
-    .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
-    .open > .btn-primary.dropdown-toggle.focus,
-    .open > .btn-primary.dropdown-toggle:focus,
-    .open > .btn-primary.dropdown-toggle:hover {
-      color: white;
-      border-color: #b48b01;
-      background-color: #dcab01; }
-  .btn-primary.active, .btn-primary:active,
-  .open > .btn-primary.dropdown-toggle {
-    background-image: none; }
-  .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover,
-  fieldset[disabled] .btn-primary.focus,
-  fieldset[disabled] .btn-primary:focus,
-  fieldset[disabled] .btn-primary:hover {
-    border-color: #fed136;
-    background-color: #fed136; }
-  .btn-primary .badge {
-    color: #fed136;
-    background-color: white; }
-
 .btn-xl {
   font-size: 18px;
   padding: 20px 40px; }
 
+.btn-primary {
+  background-color: #fed136;
+  border-color: #fed136; }
+  .btn-primary:active, .btn-primary:focus, .btn-primary:hover {
+    background-color: #fec810 !important;
+    border-color: #fec810 !important;
+    color: white; }
+  .btn-primary:active, .btn-primary:focus {
+    box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important; }
+
 ::-moz-selection {
   background: #fed136;
   text-shadow: none; }
@@ -261,20 +234,14 @@ header.masthead {
   #portfolio .portfolio-item {
     margin: 0 0 30px; } }
 
-.portfolio-modal .modal-dialog {
+.portfolio-modal {
-  max-width: none;
+  padding-right: 0px !important; }
-  height: 100%;
+  .portfolio-modal .modal-dialog {
-  margin: 0; }
+    margin: 1rem;
-
+    max-width: 100vw; }
-.portfolio-modal .modal-content {
+  .portfolio-modal .modal-content {
-  min-height: 100%;
     padding: 100px 0;
-  text-align: center;
+    text-align: center; }
-  border: none;
-  border-radius: 0;
-  background-clip: border-box;
-  -webkit-box-shadow: none;
-  box-shadow: none; }
     .portfolio-modal .modal-content h2 {
       font-size: 3em;
       margin-bottom: 15px; }
@@ -292,8 +259,7 @@ header.masthead {
       margin-bottom: 30px; }
     .portfolio-modal .modal-content button {
       cursor: pointer; }
-
+  .portfolio-modal .close-modal {
-.portfolio-modal .close-modal {
     position: absolute;
     top: 25px;
     right: 25px;
@@ -325,10 +291,6 @@ header.masthead {
         transform: rotate(90deg);
         background-color: #212529; }
 
-.portfolio-modal .modal-backdrop {
-  display: none;
-  opacity: 0; }
-
 .timeline {
   position: relative;
   padding: 0;

js/agency.js

@@ -39,4 +39,12 @@
   // Collapse the navbar when page is scrolled
   $(window).scroll(navbarCollapse);
 
+  // Hide navbar when modals trigger
+  $('.portfolio-modal').on('show.bs.modal', function(e) {
+    $(".navbar").addClass("d-none");
+  })
+  $('.portfolio-modal').on('hidden.bs.modal', function(e) {
+    $(".navbar").removeClass("d-none");
+  })
+
 })(jQuery); // End of use strict

js/agency.min.js

@@ -3,4 +3,4 @@
  * Copyright 2013-2017 Start Bootstrap
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
  */
-!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var e=a(this.hash);if((e=e.length?e:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:e.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var e=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};e(),a(window).scroll(e)}(jQuery);
+!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var o=a(this.hash);if((o=o.length?o:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:o.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var o=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};o(),a(window).scroll(o),a(".portfolio-modal").on("show.bs.modal",function(o){a(".navbar").addClass("d-none")}),a(".portfolio-modal").on("hidden.bs.modal",function(o){a(".navbar").removeClass("d-none")})}(jQuery);

scss/_global.scss

@@ -10,9 +10,6 @@ p {
 
 a {
   color: $primary;
-  &.active,
-  &:active,
-  &:focus,
   &:hover {
     color: darken($primary, 10%);
   }
@@ -60,15 +57,27 @@ section {
   font-weight: 700;
 }
 
-.btn-primary {
-  @include button-variant(white, $primary, $primary);
-}
-
 .btn-xl {
   font-size: 18px;
   padding: 20px 40px;
 }
 
+.btn-primary {
+  background-color: $primary;
+  border-color: $primary;
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: darken($primary, 7.5%) !important;
+    border-color: darken($primary, 7.5%) !important;
+    color: white;
+  }
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 0.2rem rgba(254, 209, 55,.5) !important;
+  }
+}
+
 // Highlight color customization
 ::-moz-selection {
   background: $primary;

scss/_mixins.scss

@@ -1,55 +1,4 @@
 // Mixins
-// Bootstrap Button Variant
-@mixin button-variant($color, $background, $border) {
-  color: $color;
-  border-color: $border;
-  background-color: $background;
-  &.focus,
-  &:focus {
-    color: $color;
-    border-color: darken($border, 25%);
-    background-color: darken($background, 10%);
-  }
-  &:hover {
-    color: $color;
-    border-color: darken($border, 12%);
-    background-color: darken($background, 10%);
-  }
-  &.active,
-  &:active,
-  .open > &.dropdown-toggle {
-    color: $color;
-    border-color: darken($border, 12%);
-    background-color: darken($background, 10%);
-    &.focus,
-    &:focus,
-    &:hover {
-      color: $color;
-      border-color: darken($border, 25%);
-      background-color: darken($background, 17%);
-    }
-  }
-  &.active,
-  &:active,
-  .open > &.dropdown-toggle {
-    background-image: none;
-  }
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    &.focus,
-    &:focus,
-    &:hover {
-      border-color: $border;
-      background-color: $background;
-    }
-  }
-  .badge {
-    color: $background;
-    background-color: $color;
-  }
-}
-
 // Background Cover Mixin
 @mixin background-cover {
   -webkit-background-size: cover;

scss/_portfolio.scss

@@ -71,20 +71,14 @@
 }
 
 .portfolio-modal {
+  padding-right: 0px !important;
   .modal-dialog {
-    max-width: none;
+    margin: 1rem;
-    height: 100%;
+    max-width: 100vw;
-    margin: 0;
   }
   .modal-content {
-    min-height: 100%;
     padding: 100px 0;
     text-align: center;
-    border: none;
-    border-radius: 0;
-    background-clip: border-box;
-    -webkit-box-shadow: none;
-    box-shadow: none;
     h2 {
       font-size: 3em;
       margin-bottom: 15px;
@@ -145,7 +139,6 @@
     }
   }
   .modal-backdrop {
-    display: none;
+
-    opacity: 0;
   }
 }

scss/_variables.scss

@@ -14,22 +14,4 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black: #000 !default;
 
-$blue:    #007bff !default;
+$primary: #fed136 !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #e83e8c !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #fed136 !default;
-$green:   #28a745 !default;
-$teal:    #20c997 !default;
-$cyan:    #17a2b8 !default;
-
-$primary:       $yellow !default;
-$secondary:     $gray-600 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-800 !default;