senat campaign: CSS update

senat_campaign/static/senat_campaign/assets/css/style.css

@@ -65,7 +65,7 @@ h6, h6.lead {
   }
 }
 
-h1.lead, h2.lead, h3.lead, h4.lead, h5.lead, h6.lead, .richtext h1, .richtext h2, .richtext h3, .richtext h4, .richtext h5, .richtext h6 {
+h1.lead, h2.lead, h3.lead, h4.lead, h5.lead, h6.lead {
   font-family: "Bebas Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1;
   text-transform: uppercase;
@@ -252,6 +252,20 @@ section {
   background: #212121;
 }
 
+@media screen and (max-width: 1199.99px) {
+  .navbar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1030;
+  }
+
+  main {
+    margin-top: 80px;
+  }
+}
+
 .navbar-dark .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
@@ -262,9 +276,6 @@ section {
   margin-right: -1rem;
 }
 
-.navbar.sticky-top {
-  top: -1px;
-}
 
 .nav-link {
   display: block;
@@ -1110,21 +1121,16 @@ article img {
 
 
 
-/* ALT PRIORITIES */
-
-.priority-alt {
-	margin-bottom: 3rem;
-}
+/* ARTICLE CONTENT */
 
 .priority-alt__icon {
-	width: 5rem;
+	max-width: 8rem;
 	margin-right: 1.6rem;
-	flex-shrink: 0;
 }
 
 
 .priority-alt__content {
 	display: flex;
 	align-items: center;
-	margin-bottom: 1rem;
+	margin-bottom: 2rem;
 }

senat_campaign/static/senat_campaign/assets/js/scripts.js

+(function ($) {
 
-  // Scroll to an element
-  function scrollToElement(elementId, margin, upOnly) {
-
-        // Defaults
-        if (margin === undefined) {
-          margin = 30;
-        }
-        if (upOnly === undefined) {
-          upOnly = 0;
-        }
-
-        // Target position and current position
-        var targetOffset = $(elementId).offset().top - (margin);
-        var currentOffset = $(window).scrollTop();
-
-        if (upOnly == 1) {
-          // Check if target position is higher, we don't scroll down
-          if (targetOffset < currentOffset) {
-            // Animate the body to the position
-            $('html, body').animate({
-              scrollTop: targetOffset
-            }, 400);
-           }
-        } else {
-          $('html, body').animate({
-             scrollTop: targetOffset
-          }, 400);
-        }
-
-  }
-
-  // Universal scrolling
-  $(document).on('click','.js-scroll-anchor', {} ,function(e){
-    e.preventDefault();
-    scrollToElement($(this).attr("href"), 79);
-  });
+    // Initialization
+    "use strict";
+    var nav = $('nav');
+    var navHeight = nav.outerHeight();
 
+    // Fancybox
     $('[data-fancybox="gallery"]').fancybox({
       buttons: [
         // "zoom",
@@ -47,3 +17,35 @@
         "close"
       ],
     });
+
+
+    // Scroll function
+    $('a.js-scroll-anchor[href*="#"]:not([href="#"])').on("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 - navHeight + 5)
+          }, 1000);
+          return false;
+        }
+      }
+    });
+
+
+    // Closes responsive menu when a scroll trigger link is clicked
+    $('.js-scroll-anchor').on("click", function () {
+      $('.navbar-collapse').collapse('hide');
+    });
+
+    // Activate scrollspy to add active class to navbar items on scroll
+    $('body').scrollspy({
+      target: '#mainNavigation',
+      offset: navHeight + 200
+    });
+    /*--/ End Scrolling nav /--*/
+
+    $(window).trigger('scroll');
+
+  })(jQuery);

senat_campaign/templates/senat_campaign/base.html

@@ -39,7 +39,7 @@
   {% endif %}
 </head>
 
-<body id="top" data-spy="scroll" data-offset="120" data-target="#mainNavigation">
+<body id="top">
 
   {% wagtailuserbar %}
 
@@ -62,7 +62,7 @@
     </div>
   </div>
 
-  <nav class="navbar navbar-expand-xl navbar-dark sticky-top">
+  <nav class="navbar navbar-expand-xl navbar-dark">
     <div class="container">
 
       <!-- Candidate name -->