SCSS cleanup and reorganization, editor config added

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

dist/index.html

@@ -5,12 +5,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <meta name="description" content="" />
         <meta name="author" content="" />
-        <title>Freelancer - Start Bootstrap Theme</title>
+        <title>Agency - Start Bootstrap Theme</title>
+        <link rel="icon" type="image/png" sizes="32x32" href="https://startbootstrap.com/assets/img/icons/favicon-32x32.png" />
         <!-- Font Awesome icons (free version)-->
         <script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
         <!-- Google fonts-->
         <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
-        <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css" />
         <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
         <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
         <!-- Core theme CSS (includes Bootstrap)-->
@@ -20,7 +20,7 @@
         <!-- Navigation-->
         <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
             <div class="container">
-                <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars"></i></button>
+                <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="assets/img/navbar-logo.svg" /></a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars ml-1"></i></button>
                 <div class="collapse navbar-collapse" id="navbarResponsive">
                     <ul class="navbar-nav text-uppercase ml-auto">
                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
@@ -315,10 +315,8 @@
                         <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                     </div>
                 </div>
-                <div class="row">
-                    <div class="col-lg-12">
                 <form id="contactForm" name="sentMessage" novalidate="novalidate">
-                            <div class="row">
+                    <div class="row align-items-stretch mb-5">
                         <div class="col-md-6">
                             <div class="form-group">
                                 <input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
@@ -328,27 +326,24 @@
                                 <input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
                                 <p class="help-block text-danger"></p>
                             </div>
-                                    <div class="form-group">
+                            <div class="form-group mb-md-0">
                                 <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
                                 <p class="help-block text-danger"></p>
                             </div>
                         </div>
                         <div class="col-md-6">
-                                    <div class="form-group">
+                            <div class="form-group form-group-textarea mb-md-0">
                                 <textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
                                 <p class="help-block text-danger"></p>
                             </div>
                         </div>
-                                <div class="clearfix"></div>
+                    </div>
-                                <div class="col-lg-12 text-center">
+                    <div class="text-center">
                         <div id="success"></div>
                         <button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
                     </div>
-                            </div>
                 </form>
             </div>
-                </div>
-            </div>
         </section>
         <!-- Footer-->
         <footer class="footer">
@@ -398,7 +393,7 @@
                                         <li>Client: Threads</li>
                                         <li>Category: Illustration</li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
+                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
                                 </div>
                             </div>
                         </div>
@@ -427,7 +422,7 @@
                                         <li>Client: Explore</li>
                                         <li>Category: Graphic Design</li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
+                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
                                 </div>
                             </div>
                         </div>
@@ -456,7 +451,7 @@
                                         <li>Client: Finish</li>
                                         <li>Category: Identity</li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
+                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
                                 </div>
                             </div>
                         </div>
@@ -485,7 +480,7 @@
                                         <li>Client: Lines</li>
                                         <li>Category: Branding</li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
+                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
                                 </div>
                             </div>
                         </div>
@@ -514,7 +509,7 @@
                                         <li>Client: Southwest</li>
                                         <li>Category: Website Design</li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
+                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
                                 </div>
                             </div>
                         </div>
@@ -543,7 +538,7 @@
                                         <li>Client: Window</li>
                                         <li>Category: Photography</li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
+                                    <button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
                                 </div>
                             </div>
                         </div>

dist/js/scripts.js

@@ -8,27 +8,37 @@
 
     // Smooth scrolling using jQuery easing
     $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
-    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+        if (
+            location.pathname.replace(/^\//, "") ==
+                this.pathname.replace(/^\//, "") &&
+            location.hostname == this.hostname
+        ) {
             var target = $(this.hash);
-      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            target = target.length
+                ? target
+                : $("[name=" + this.hash.slice(1) + "]");
             if (target.length) {
-        $('html, body').animate({
+                $("html, body").animate(
-          scrollTop: (target.offset().top - 54)
+                    {
-        }, 1000, "easeInOutExpo");
+                        scrollTop: target.offset().top - 72,
+                    },
+                    1000,
+                    "easeInOutExpo"
+                );
                 return false;
             }
         }
     });
 
     // Closes responsive menu when a scroll trigger link is clicked
-  $('.js-scroll-trigger').click(function() {
+    $(".js-scroll-trigger").click(function () {
-    $('.navbar-collapse').collapse('hide');
+        $(".navbar-collapse").collapse("hide");
     });
 
     // Activate scrollspy to add active class to navbar items on scroll
-  $('body').scrollspy({
+    $("body").scrollspy({
-    target: '#mainNav',
+        target: "#mainNav",
-    offset: 56
+        offset: 74,
     });
 
     // Collapse Navbar
@@ -43,5 +53,4 @@
     navbarCollapse();
     // Collapse the navbar when page is scrolled
     $(window).scroll(navbarCollapse);
-
 })(jQuery); // End of use strict

src/js/scripts.js

@@ -3,27 +3,37 @@
 
     // Smooth scrolling using jQuery easing
     $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
-    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+        if (
+            location.pathname.replace(/^\//, "") ==
+                this.pathname.replace(/^\//, "") &&
+            location.hostname == this.hostname
+        ) {
             var target = $(this.hash);
-      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            target = target.length
+                ? target
+                : $("[name=" + this.hash.slice(1) + "]");
             if (target.length) {
-        $('html, body').animate({
+                $("html, body").animate(
-          scrollTop: (target.offset().top - 54)
+                    {
-        }, 1000, "easeInOutExpo");
+                        scrollTop: target.offset().top - 72,
+                    },
+                    1000,
+                    "easeInOutExpo"
+                );
                 return false;
             }
         }
     });
 
     // Closes responsive menu when a scroll trigger link is clicked
-  $('.js-scroll-trigger').click(function() {
+    $(".js-scroll-trigger").click(function () {
-    $('.navbar-collapse').collapse('hide');
+        $(".navbar-collapse").collapse("hide");
     });
 
     // Activate scrollspy to add active class to navbar items on scroll
-  $('body').scrollspy({
+    $("body").scrollspy({
-    target: '#mainNav',
+        target: "#mainNav",
-    offset: 56
+        offset: 74,
     });
 
     // Collapse Navbar
@@ -38,5 +48,4 @@
     navbarCollapse();
     // Collapse the navbar when page is scrolled
     $(window).scroll(navbarCollapse);
-
 })(jQuery); // End of use strict

src/pug/index.pug

@@ -8,14 +8,15 @@ html(lang='en')
         meta(name='description', content='')
         meta(name='author', content='')
 
-        title Freelancer - Start Bootstrap Theme
+        title Agency - Start Bootstrap Theme
+
+        link(rel='icon', type='image/png', sizes='32x32', href='https://startbootstrap.com/assets/img/icons/favicon-32x32.png')
 
         // Font Awesome icons (free version)
         script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous')
 
         // Google fonts
         link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css')
-        link(href='https://fonts.googleapis.com/css?family=Kaushan+Script', rel='stylesheet', type='text/css')
         link(href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', rel='stylesheet', type='text/css')
         link(href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', rel='stylesheet', type='text/css')
 
@@ -27,10 +28,11 @@ html(lang='en')
         // Navigation
         nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
             .container
-                a.navbar-brand.js-scroll-trigger(href='#page-top') Start Bootstrap
+                a.navbar-brand.js-scroll-trigger(href='#page-top')
+                    img(src='assets/img/navbar-logo.svg')
                 button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                     | Menu
-                    i.fas.fa-bars
+                    i.fas.fa-bars.ml-1
                 #navbarResponsive.collapse.navbar-collapse
                     ul.navbar-nav.text-uppercase.ml-auto
                         li.nav-item
@@ -286,10 +288,8 @@ html(lang='en')
                     .col-lg-12.text-center
                         h2.section-heading.text-uppercase Contact Us
                         h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
-                .row
-                    .col-lg-12
                 form#contactForm(name='sentMessage', novalidate='novalidate')
-                            .row
+                    .row.align-items-stretch.mb-5
                         .col-md-6
                             .form-group
                                 input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
@@ -297,15 +297,14 @@ html(lang='en')
                             .form-group
                                 input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
                                 p.help-block.text-danger
-                                    .form-group
+                            .form-group.mb-md-0
                                 input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
                                 p.help-block.text-danger
                         .col-md-6
-                                    .form-group
+                            .form-group.form-group-textarea.mb-md-0
                                 textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
                                 p.help-block.text-danger
-                                .clearfix
+                    .text-center
-                                .col-lg-12.text-center
                             #success
                             button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
 
@@ -356,7 +355,7 @@ html(lang='en')
                                         li Client: Threads
                                         li Category: Illustration
                                     button.btn.btn-primary(data-dismiss='modal', type='button')
-                                        i.fas.fa-times
+                                        i.fas.fa-times.mr-1
                                         | Close Project
         // Modal 2
         #portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
@@ -380,7 +379,7 @@ html(lang='en')
                                         li Client: Explore
                                         li Category: Graphic Design
                                     button.btn.btn-primary(data-dismiss='modal', type='button')
-                                        i.fas.fa-times
+                                        i.fas.fa-times.mr-1
                                         | Close Project
         // Modal 3
         #portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
@@ -404,7 +403,7 @@ html(lang='en')
                                         li Client: Finish
                                         li Category: Identity
                                     button.btn.btn-primary(data-dismiss='modal', type='button')
-                                        i.fas.fa-times
+                                        i.fas.fa-times.mr-1
                                         | Close Project
         // Modal 4
         #portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
@@ -428,7 +427,7 @@ html(lang='en')
                                         li Client: Lines
                                         li Category: Branding
                                     button.btn.btn-primary(data-dismiss='modal', type='button')
-                                        i.fas.fa-times
+                                        i.fas.fa-times.mr-1
                                         | Close Project
         // Modal 5
         #portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
@@ -452,7 +451,7 @@ html(lang='en')
                                         li Client: Southwest
                                         li Category: Website Design
                                     button.btn.btn-primary(data-dismiss='modal', type='button')
-                                        i.fas.fa-times
+                                        i.fas.fa-times.mr-1
                                         | Close Project
         // Modal 6
         #portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
@@ -476,7 +475,7 @@ html(lang='en')
                                         li Client: Window
                                         li Category: Photography
                                     button.btn.btn-primary(data-dismiss='modal', type='button')
-                                        i.fas.fa-times
+                                        i.fas.fa-times.mr-1
                                         | Close Project
 
         // Bootstrap core JS

src/scss/_global.scss

@@ -0,0 +1,49 @@
+// Global styling for this template
+body {
+    overflow-x: hidden;
+}
+
+p {
+    line-height: 1.75;
+}
+
+.page-section {
+    padding: 100px 0;
+    h2.section-heading {
+        font-size: 40px;
+        margin-top: 0;
+        margin-bottom: 15px;
+    }
+    h3.section-subheading {
+        font-size: 16px;
+        font-weight: 400;
+        font-style: italic;
+        margin-bottom: 75px;
+        text-transform: none;
+        font-family: $subheadings-font-family;
+    }
+}
+@media (min-width: 768px) {
+    section {
+        padding: 150px 0;
+    }
+}
+
+// Highlight color customization
+::-moz-selection {
+    background: $primary;
+    text-shadow: none;
+}
+
+::selection {
+    background: $primary;
+    text-shadow: none;
+}
+
+img::selection {
+    background: transparent;
+}
+
+img::-moz-selection {
+    background: transparent;
+}

src/scss/_variables.scss

@@ -0,0 +1,4 @@
+@import "./variables/colors.scss";
+@import "./variables/typography.scss";
+@import "./variables/spacing.scss";
+@import "./variables/grid.scss";

src/scss/base/_mixins.scss

@@ -1,13 +0,0 @@
-// Font Mixins
-@mixin serif-font {
-  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-@mixin script-font {
-  font-family: 'Kaushan Script', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-@mixin body-font {
-  font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-@mixin heading-font {
-  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}

src/scss/base/_page.scss

@@ -1,71 +0,0 @@
-// Global styling for this template
-body {
-  overflow-x: hidden;
-  @include body-font;
-}
-
-p {
-  line-height: 1.75;
-}
-
-a {
-  color: $primary;
-  &:hover {
-    color: darken($primary, 10%);
-  }
-}
-
-.text-primary {
-  color: $primary !important;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 700;
-  @include heading-font;
-}
-
-.page-section {
-  padding: 100px 0;
-  h2.section-heading {
-    font-size: 40px;
-    margin-top: 0;
-    margin-bottom: 15px;
-  }
-  h3.section-subheading {
-    font-size: 16px;
-    font-weight: 400;
-    font-style: italic;
-    margin-bottom: 75px;
-    text-transform: none;
-    @include serif-font;
-  }
-}
-@media(min-width:768px) {
-  section {
-    padding: 150px 0;
-  }
-}
-
-// Highlight color customization
-::-moz-selection {
-  background: $primary;
-  text-shadow: none;
-}
-
-::selection {
-  background: $primary;
-  text-shadow: none;
-}
-
-img::selection {
-  background: transparent;
-}
-
-img::-moz-selection {
-  background: transparent;
-}

src/scss/base/_variables.scss

@@ -1,17 +0,0 @@
-// Variables
-
-// Restated Bootstrap Variables
-
-$white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
-$primary: #fed136 !default;

src/scss/components/_buttons.scss

@@ -1,8 +1,8 @@
 // Button Styles
 
 .btn-xl {
-  @include heading-font;
-  font-weight: 700;
-  font-size: 1.125rem;
     padding: 1.25rem 2.5rem;
+    font-family: $headings-font-family;
+    font-size: 1.125rem;
+    font-weight: $headings-font-weight;
 }

src/scss/components/_navbar.scss

@@ -1,35 +1,34 @@
 // Styling for the navbar
 #mainNav {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     background-color: $gray-900;
     .navbar-toggler {
-    font-size: 12px;
+        padding: 0.75rem;
-    right: 0;
+        font-family: $headings-font-family;
-    padding: 13px;
+        font-size: 0.75rem;
+        color: $white;
         text-transform: uppercase;
-    color: white;
-    border: 0;
         background-color: $primary;
-    @include heading-font;
+        border: 0;
     }
     .navbar-brand {
         color: $primary;
-    @include script-font;
+        font-family: $headings-font-family;
-    &.active,
+        font-weight: $headings-font-weight;
-    &:active,
+        letter-spacing: $headings-letter-spacing;
-    &:focus,
+        text-transform: uppercase;
-    &:hover {
+        img {
-      color: darken($primary, 10%);
+            height: 1.5rem;
         }
     }
     .navbar-nav {
         .nav-item {
             .nav-link {
-        font-size: 90%;
+                font-family: $headings-font-family;
-        font-weight: 400;
+                font-size: 0.95rem;
-        padding: 0.75em 0;
+                color: $white;
-        letter-spacing: 1px;
+                letter-spacing: $headings-letter-spacing;
-        color: white;
-        @include heading-font;
                 &.active,
                 &:hover {
                     color: $primary;
@@ -38,35 +37,41 @@
         }
     }
 }
-@media(min-width:992px) {
+
+// Responsive styling for screen width equal to or greater than the large breakpoint
+@include media-breakpoint-up(lg) {
     #mainNav {
-    padding-top: 25px;
+        padding-top: 1.5rem;
-    padding-bottom: 25px;
+        padding-bottom: 1.5rem;
-    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
-    transition: padding-top 0.3s, padding-bottom 0.3s;
         border: none;
         background-color: transparent;
+        transition: padding-top 0.3s ease-in-out,
+            padding-bottom 0.3s ease-in-out;
         .navbar-brand {
-      font-size: 1.75em;
+            font-size: 1.5em;
-      -webkit-transition: all 0.3s;
+            transition: font-size 0.3s ease-in-out;
-      -moz-transition: all 0.3s;
+            img {
-      transition: all 0.3s;
+                height: 2rem;
-    }
+                transition: height 0.3s ease-in-out;
-    .navbar-nav {
-      .nav-item {
-        .nav-link {
-          padding: 1.1em 1em !important;
-        }
             }
         }
+        // Styling for when the navbar shrinks on larger screens
         &.navbar-shrink {
-      padding-top: 0;
+            padding-top: 1rem;
-      padding-bottom: 0;
+            padding-bottom: 1rem;
             background-color: $gray-900;
             .navbar-brand {
                 font-size: 1.25em;
-        padding: 12px 0;
+                svg,
+                img {
+                    height: 1.5rem;
+                }
+            }
+        }
+        .navbar-nav .nav-item {
+            margin-right: 1rem;
+            &:last-child {
+                margin-right: 0;
             }
         }
     }

src/scss/layout/_contact.scss

@@ -1,47 +1,56 @@
 // Styling for the contact section
 section#contact {
     background-color: $gray-900;
-  background-image: url('../assets/img/map-image.png');
+    background-image: url("../assets/img/map-image.png");
     background-repeat: no-repeat;
     background-position: center;
     .section-heading {
         color: $white;
     }
+    form#contactForm {
         .form-group {
-    margin-bottom: 25px;
+            margin-bottom: $grid-gutter-width;
             input,
             textarea {
-      padding: 20px;
+                padding: 1.25rem;
             }
             input.form-control {
                 height: auto;
             }
-    textarea.form-control {
+        }
-      height: 248px;
+        .form-group-textarea {
+            height: 100%;
+            textarea {
+                height: 100%;
+                min-height: 10rem;
             }
         }
+        p.help-block {
+            margin: 0;
+        }
         .form-control:focus {
             border-color: $primary;
             box-shadow: none;
         }
         ::-webkit-input-placeholder {
-    font-weight: 700;
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
             color: $gray-400;
-    @include heading-font;
         }
         :-moz-placeholder {
-    font-weight: 700;
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
             color: $gray-400;
-    @include heading-font;
         }
         ::-moz-placeholder {
-    font-weight: 700;
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
             color: $gray-400;
-    @include heading-font;
         }
         :-ms-input-placeholder {
-    font-weight: 700;
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
             color: $gray-400;
-    @include heading-font;
+        }
     }
 }

src/scss/layout/_footer.scss

@@ -6,14 +6,14 @@
         font-size: 90%;
         line-height: 40px;
         text-transform: none;
-    @include heading-font;
+        font-family: $headings-font-family;
     }
     ul.quicklinks {
         font-size: 90%;
         line-height: 40px;
         margin-bottom: 0;
         text-transform: none;
-    @include heading-font;
+        font-family: $headings-font-family;
     }
 }
 
@@ -29,7 +29,7 @@ ul.social-buttons {
             -webkit-transition: all 0.3s;
             -moz-transition: all 0.3s;
             transition: all 0.3s;
-      color: white;
+            color: $white;
             border-radius: 100%;
             outline: none;
             background-color: $gray-900;

src/scss/layout/_masthead.scss

@@ -1,8 +1,8 @@
 // Styling for the masthead
 header.masthead {
     text-align: center;
-  color: white;
+    color: $white;
-  background-image: url('../assets/img/header-bg.jpg');
+    background-image: url("../assets/img/header-bg.jpg");
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: center center;
@@ -15,14 +15,14 @@ header.masthead {
             font-style: italic;
             line-height: 22px;
             margin-bottom: 25px;
-      @include serif-font;
+            font-family: $subheadings-font-family;
         }
         .intro-heading {
             font-size: 50px;
             font-weight: 700;
             line-height: 50px;
             margin-bottom: 25px;
-      @include heading-font;
+            font-family: $headings-font-family;
         }
     }
 }
@@ -36,14 +36,12 @@ header.masthead {
                 font-style: italic;
                 line-height: 40px;
                 margin-bottom: 25px;
-        @include serif-font;
             }
             .intro-heading {
                 font-size: 75px;
                 font-weight: 700;
                 line-height: 75px;
                 margin-bottom: 50px;
-        @include heading-font;
             }
         }
     }

src/scss/layout/_portfolio.scss

@@ -17,7 +17,7 @@
                 -moz-transition: all ease 0.5s;
                 transition: all ease 0.5s;
                 opacity: 0;
-        background: fade-out($primary, .1);
+                background: fade-out($primary, 0.1);
                 &:hover {
                     opacity: 1;
                 }
@@ -54,7 +54,7 @@
                 font-size: 16px;
                 font-style: italic;
                 margin: 0;
-        @include serif-font;
+                font-family: $subheadings-font-family;
             }
         }
     }
@@ -89,7 +89,7 @@
             font-size: 16px;
             font-style: italic;
             margin: 20px 0 30px;
-      @include serif-font;
+            font-family: $subheadings-font-family;
         }
         ul.list-inline {
             margin-top: 0;

src/scss/layout/_timeline.scss

@@ -10,7 +10,7 @@
         left: 40px;
         width: 2px;
         margin-left: -1.5px;
-    content: '';
+        content: "";
         background-color: $gray-200;
     }
     > li {
@@ -20,7 +20,7 @@
         &:after,
         &:before {
             display: table;
-      content: ' ';
+            content: " ";
         }
         &:after {
             clear: both;

src/scss/styles.scss

@@ -1,22 +1,21 @@
-// Core variables and mixins
+// Import variables
-@import "base/variables.scss";
+@import "./variables.scss";
-@import "base/mixins.scss";
 
 // Import Bootstrap
 @import "bootstrap/scss/bootstrap.scss";
 
 // Global CSS
-@import "base/page.scss";
+@import "./global.scss";
 
 // Components
-@import "components/buttons.scss";
+@import "./components/buttons.scss";
-@import "components/navbar.scss";
+@import "./components/navbar.scss";
 
 // Layout
-@import "layout/masthead.scss";
+@import "./layout/masthead.scss";
-@import "layout/services.scss";
+@import "./layout/services.scss";
-@import "layout/portfolio.scss";
+@import "./layout/portfolio.scss";
-@import "layout/timeline.scss";
+@import "./layout/timeline.scss";
-@import "layout/team.scss";
+@import "./layout/team.scss";
-@import "layout/contact.scss";
+@import "./layout/contact.scss";
-@import "layout/footer.scss";
+@import "./layout/footer.scss";

src/scss/variables/_colors.scss

@@ -0,0 +1,11 @@
+// Override Bootstrap color system
+
+$yellow: #fed136;
+
+// Override Bootstrap default state colors
+
+$primary: $yellow;
+
+// Override Bootstrap yiq lightness value
+
+$yiq-contrasted-threshold: 205;

src/scss/variables/_grid.scss

@@ -0,0 +1,5 @@
+// Override Bootstrap grid column variables
+//
+// Override the spacing between columns to add symmetry to the layout
+
+$grid-gutter-width: $spacer * 1.5;

src/scss/variables/_spacing.scss

@@ -0,0 +1,7 @@
+// Restate and add to the Bootstrap default spacing variables
+//
+// The spacer is restated in order to add new entries to the $spacers map
+// The 10 and n1 through n10 spacers are newly added allowing for larger
+// spacing options and negative padding and margin utilities
+
+$spacer: 1rem;

src/scss/variables/_typography.scss

@@ -0,0 +1,20 @@
+// Override Bootstrap typography variables
+
+$font-family-base: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+$headings-font-family: "Montserrat", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+$subheadings-font-family: "Droid Serif", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+$font-family-script: "Kaushan Script", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+$headings-font-weight: 700;
+$headings-letter-spacing: 0.0625em;