Changed classes for page title section to match new css rules (more concise naming structure).

Further unified text classes across the site.
Added function to prevent body scrolling on iOS devices - safari there ignores overflow: hidden set on body (live test needed).

Author: Tomasz-Kluczkowski

_pages/03_events.html

@@ -19,8 +19,8 @@
     <div class="events-page__background-img">
         <div class="row container-fluid">
             <div class="col-sm-12">
-                <h2 class="section-title page__title">Events</h2>
-                <h3 class="page__subtitle">See what's coming up. Check what we did recently</h3>
+                <h2 class="events-page__page-title">Events</h2>
+                <h3 class="events-page__page-subtitle">See what's coming up. Check what we did recently.</h3>
             </div>
         </div>
     </div>

_pages/04_contact.html

@@ -19,8 +19,8 @@
     <div class="contact__background-img">
         <div class="row container-fluid">
             <div class="col-sm-12">
-                <h2 class="contact__section-title">Contact Us</h2>
-                <h3 class="contact__section-subtitle">Got an idea? Can you or your company support us? Let us know.</h3>
+                <h2 class="contact__page-title">Contact Us</h2>
+                <h3 class="contact__page-subtitle">Got an idea? Can you or your company support us? Let us know.</h3>
             </div>
         </div>
     </div>

_sass/contact.scss

@@ -14,17 +14,12 @@
   }
 }
 
-.contact__section-title {
-  @extend .section-title-light;
-  margin-top: 20vh;
-  color: $page-title;
+.contact__page-title {
+  @extend .page-title-light;
 }
 
-.contact__section-subtitle {
-  @extend .subtitle;
-  font-size: 1.75em;
-  text-align: center;
-  margin-bottom: 10vh;
+.contact__page-subtitle {
+  @extend .page-subtitle;
 }
 
 .contact__form {

_sass/events.scss

@@ -4,4 +4,12 @@
 
 .events-page__background-img {
   @extend .contact__background-img
+}
+
+.events-page__page-title {
+  @extend .page-title-light;
+}
+
+.events-page__page-subtitle {
+  @extend .page-subtitle
 }

_sass/style.scss

@@ -295,7 +295,7 @@ a {
   width: 100%;
   background: rgba(0, 0, 0, 0.9);
   font-size: 2.5em;
-  color: $section-title-light;
+  color: $title-light;
   margin-top: 0;
   padding-top: 0.5em;
   padding-bottom: 0.5em;

_sass/typography.scss

@@ -60,6 +60,20 @@
   color: $section-title-light;
 }
 
+.page-title-light {
+  @extend .section-title;
+  margin-top: 20vh;
+  color: $page-title;
+}
+
+.page-subtitle {
+  font-family: 'Encode Sans Expanded', sans-serif;
+  color: $subtitle;
+  font-size: 1.75em;
+  text-align: center;
+  margin-bottom: 10vh;
+}
+
 .event-label {
   font-family: 'Encode Sans Expanded', sans-serif;
   background: linear-gradient(45deg, $grey, $grey 80%, transparent 80%,  transparent 100%);

static/js/site.js

@@ -5,13 +5,29 @@ var buttonCloseContainer = $(".navigation__button-close-container");
 var navigationButtonClose = $(".navigation__button-close");
 var scrollPosition = 0;
 var scrollBarWidth = 0;
+var preventDefaultAction = function(e) {
+    e.preventDefault();
+};
 
 
 $(document).ready(function () {
     buttonOpenContainer.on("click", openNav);
     navigationButtonClose.on("click", closeNav);
 });
 
+
+function stopBodyScrolling (bool) {
+    /**
+     * Required to stop body scrolling on iOS devices (safari ignores
+     * body overflow: hidden in css.
+     */
+    if (bool === true) {
+        document.body.addEventListener("touchmove", preventDefaultAction, false);
+    } else {
+        document.body.removeEventListener("touchmove", preventDefaultAction, false);
+    }
+}
+
 function setActiveLink() {
     var currentURL = window.location.href;
     $('.navigation__link, .footer__link').each(function () {
@@ -24,10 +40,11 @@ function setActiveLink() {
 function openNav() {
     scrollPosition = $(window).scrollTop();
     scrollBarWidth = (window.innerWidth - $(window).width());
-    $("body").addClass("no-scroll");
+    $(".body").addClass("no-scroll");
+    stopBodyScrolling(true);
     // To prevent content from jumping when scrollbar disappears.
     $(window).scrollTop(scrollPosition);
-    $("body").css("padding-right", scrollBarWidth + "px");
+    $(".body").css("padding-right", scrollBarWidth + "px");
     buttonOpenContainer.css("pointer-events", "none");
     buttonOpenContainer.toggle(500, showCloseButton);
     hamburgerBar.css("background-color", "transparent");
@@ -36,9 +53,10 @@ function openNav() {
 
 /* Close when someone clicks on the "x" symbol inside the overlay */
 function closeNav() {
-    $("body").removeClass("no-scroll");
+    $(".body").removeClass("no-scroll");
+    stopBodyScrolling(false);
     // To stop content jerking left-right when scrollbar is restored.
-    $("body").css("padding-right", "");
+    $(".body").css("padding-right", "");
     hamburgerBar.css("background-color", "#ffffff");
     navigationOverlay.css("width", "0%");
     buttonOpenContainer.css("display", "inline");