Continuing work on Resume section

www/themes/jason-williamsca/assets/css/resume.css

@@ -1,12 +1,25 @@
-h1 {
+h1.master {
+    margin: 0;
     font-family: var(--title-font);
-    font-size: 5rem;
-    font-weight: 500;
-    word-spacing: -0.8rem;
+    font-size: 3.5rem;
+    word-spacing: -0.15em;
 }
 
-.altaccent {
-    color: var(--alt-accent-color);
+h2 {
+    font-size: 1.5rem;
+}
+
+h1 + h2 {
+    margin-top: 0;
+}
+
+.card {
+    /*width: 25rem;*/
+    margin-bottom: 1rem;
+}
+
+#card-gutter {
+    width: 0;
 }
 
 /* lg Breakpoint */

www/themes/jason-williamsca/assets/css/sidemenu.css

@@ -2,34 +2,39 @@
 @media (min-width: 992px) {
     body {
         /*padding-left: 17rem;*/
+        padding-left: 25%;
+    }
+    
+    #main-nav {
+        min-height: 8rem;
     }
 
-    #sideNav {
+    #side-nav {
         text-align: center;
         position: fixed;
         top: 0;
         left: 0;
         display: flex;
         flex-direction: column;
-        /*width: 17rem;*/
+        width: 25%;
         height: 100vh;
         padding: 0;
         background-color: var(--main-accent-color);
     }
 
-    #sideNav .navbar-brand {
+    #side-nav .navbar-brand {
         display: flex;
         margin: auto auto 0;
         /*padding: 0.5rem;*/
     }
     
-    #sideNav .navbar-brand .img-profile {
+    #side-nav .navbar-brand .img-profile {
         max-width: 10rem;
         max-height: 10rem;
-        border: 0.5rem solid rgba(255, 255, 255, 0.2);
+        /*border: 0.5rem solid rgba(255, 255, 255, 0.2);*/
     }
 
-    #sideNav .navbar-collapse {
+    #side-nav .navbar-collapse {
         display: flex;
         align-items: flex-start;
         flex-grow: 0;
@@ -37,16 +42,16 @@
         margin-bottom: auto;
     }
 
-    #sideNav .navbar-collapse .navbar-nav {
+    #side-nav .navbar-collapse .navbar-nav {
         flex-direction: column;
         width: 100%;
     }
 
-    #sideNav .navbar-collapse .navbar-nav .nav-item {
+    #side-nav .navbar-collapse .navbar-nav .nav-item {
         display: block;
     }
 
-    #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
+    #side-nav .navbar-collapse .navbar-nav .nav-item .nav-link {
         display: block;
     }
     /*section.resume-section {
@@ -55,6 +60,6 @@
     
     /* Possibly a different breakpoint on this one */
     main {
-        margin-top: -121px;
+        margin-top: -8rem;
     }
 }

www/themes/jason-williamsca/assets/css/theme.css

@@ -9,13 +9,12 @@
     --body-font: 'Raleway', sans-serif;
 }
 
-/* Structural elements */
+/* Structural elements (including style for them) */
 html, body { height: 100%; }
 
 body {
     background-color: var(--main-bg-color);
     font-family: var(--body-font);
-    font-weight: 500;
     color: var(--main-accent-color);
 }
 
@@ -32,6 +31,7 @@ body {
     background-repeat: no-repeat;
     background-size: 4.5rem;
     color: var(--main-accent-color);
+    word-spacing: -0.15em;
 }
 
 footer {
@@ -61,11 +61,11 @@ footer ul {
 }
 
 footer, h1, h2 {
-    margin-top: 1rem;
+    margin-top: 2rem;
 }
 
 footer {
-    margin-top: 1rem;
+    margin-top: 2rem;
 }
 
 /* Responsive element spacing - lg breakpoint */
@@ -96,6 +96,35 @@ a:hover {
 }
 
 /* Custom styles */
+html { overflow-y: scroll; }
+
+html::-webkit-scrollbar-track {
+	background-color: rgba(48, 43, 68, 0.2);
+}
+
+html::-webkit-scrollbar {
+	width: 0.5rem;
+	background-color: rgba(48, 43, 68, 0.2);
+}
+
+html::-webkit-scrollbar-thumb {
+	border-radius: 0.5rem;
+	background-color: rgba(48, 43, 68, 0.5);
+}
+
+#main-nav .nav-item .nav-link {
+    color: rgba(48, 43, 68, 0.5);
+    text-decoration: none;
+}
+
+#main-nav .nav-item.active .nav-link {
+    color: var(--main-accent-color);
+}
+
+#main-nav .nav-item .nav-link:hover {
+    color: var(--alt-accent-color);
+}
+
 .social-icons {
     font-size: 0;
 }
@@ -118,15 +147,14 @@ a:hover {
     color: white;
 }
 
-#main-nav .nav-item .nav-link {
-    color: rgba(48, 43, 68, 0.5);
-    text-decoration: none;
+.card h1, .card h2, .card h3 {
+    margin-top: 0;
 }
 
-#main-nav .nav-item.active .nav-link {
-    color: var(--main-accent-color);
+.card p {
+    font-size: 0.9rem;
 }
 
-#main-nav .nav-item .nav-link:hover {
+.altaccent {
     color: var(--alt-accent-color);
 }

www/themes/jason-williamsca/assets/javascript/resume.js

@@ -0,0 +1,32 @@
+(function($) {
+    "use strict"; // Start of use strict
+    
+    // Apply masonry layout to cards
+    $('.masonry').masonry({
+        itemSelector: '.masonry-wrapper'
+    });
+
+    // 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) {
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            if (target.length) {
+                $('html, body').animate({
+                    scrollTop: (target.offset().top)
+                }, 1000, "easeInOutExpo");
+                return false;
+            }
+        }
+    });
+
+    // Closes responsive menu when a scroll trigger link is clicked
+    $('.js-scroll-trigger').click(function() {
+        $('.navbar-collapse').collapse('hide');
+    });
+
+    // Activate scrollspy to add active class to navbar items on scroll
+    $('body').scrollspy({
+        target: '#side-nav'
+    });
+})(jQuery); // End of use strict