Merge branch 'add_content_to_about_page'

Author: Tomasz-Kluczkowski

_pages/01_about.html

@@ -5,8 +5,7 @@
 ---
 
 <section class="about">
-    <!--REPLACE THIS IMAGE WITH A NEW ONE - MIX PREVIOUS MEETUPS AND MAKE A COLLAGE -->
-    <div class="about__background-img" data-image-type="responsive">
+    <div class="about__background-img-container">
         <picture>
             <source srcset="../static/images/events_page/events_page_top_480x150px.jpg 480w,
                             ../static/images/events_page/events_page_top_960x300px.jpg 960w,
@@ -17,10 +16,9 @@
                             ../static/images/events_page/events_page_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class="responsive"
+            <img class=""
                  src="../static/images/events_page/events_page_top_960x300px.jpg"
-                 alt="Events"
-                 data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%)">
+                 alt="Events">
         </picture>
         <div class="about__page-title-container row container-fluid">
             <div class="col-sm-12">

_pages/03_events.html

@@ -4,7 +4,7 @@
 permalink: /events/
 ---
 <section class="events-page">
-    <div class="events-page__background-img" data-image-type="responsive">
+    <div class="events-page__background-img-container" data-image-type="responsive">
         <picture>
             <source srcset="../static/images/events_page/events_page_top_480x150px.jpg 480w,
                             ../static/images/events_page/events_page_top_960x300px.jpg 960w,
@@ -15,7 +15,7 @@
                             ../static/images/events_page/events_page_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class="responsive"
+            <img class=""
                  src="../static/images/events_page/events_page_top_960x300px.jpg"
                  alt="Events"
                  data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%)">

_pages/04_contact.html

@@ -4,7 +4,7 @@
 permalink: /contact/
 ---
 <section class="contact">
-    <div class="contact__background-img" data-image-type="responsive">
+    <div class="contact__background-img-container" data-image-type="responsive">
         <picture>
             <source srcset="../static/images/contact/contact_top_450x150px.jpg 450w,
                             ../static/images/contact/contact_top_960x300px.jpg 960w,
@@ -15,7 +15,7 @@
                             ../static/images/contact/contact_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class="responsive"
+            <img class=""
                  src="../static/images/contact/contact_top_960x300px.jpg"
                  alt="Contact Us"
                  data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%)">

_sass/about.scss

@@ -1,9 +1,16 @@
-.about__background-img {
-  @extend .contact__background-img;
+.about {
+  margin-top: -66px;
+}
+
+.about__background-img-container {
+  @extend .page__background-img-container;
+  &::after {
+    background: rgba(0, 0, 0, 0.65);
+  }
 }
 
 .about__page-title-container {
-  @extend .page__title-container
+  @extend .page__title-container;
 }
 
 .about__page-title {

_sass/contact.scss

@@ -2,8 +2,11 @@
   margin-top: -66px;
 }
 
-.contact__background-img {
-  height: 55vh;
+.contact__background-img-container {
+  @extend .page__background-img-container;
+  &::after {
+    background: rgba(0, 0, 0, 0.65);
+  }
 }
 
 .contact__page-title-container {

_sass/events.scss

@@ -2,8 +2,11 @@
   margin-top: -66px;
 }
 
-.events-page__background-img {
-  @extend .contact__background-img
+.events-page__background-img-container {
+  @extend .page__background-img-container;
+  &::after {
+    background: rgba(0, 0, 0, 0.65);
+  }
 }
 
 .events-page__title-container {

_sass/style.scss

@@ -1,3 +1,5 @@
+//Global styles here.
+
 .body {
   background-color: $main-background;
   overflow-x: hidden;
@@ -36,6 +38,28 @@ a {
   padding-right: 15px;
 }
 
+.page__background-img-container {
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.page__title-container {
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  -moz-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
 /* Classes to change order of collapsed columns on mobiles*/
 @media (max-width: 767px) {
   .first-on-mobile {
@@ -59,25 +83,14 @@ a {
   }
 }
 
-/* Responsive background image handling*/
-[data-image-type="responsive"] {
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
-  width: 100%;
-}
-
-[data-image-type="responsive"] .responsive {
-  display: none;
-}
-
 /*Here I need to move the background image to slide under the navigation*/
 /*Any smarter solutions are welcome!*/
 .navigation__content {
-  background-size: cover;
+  @extend .page__background-img-container;
   margin-top: -66px;
-  max-width: 100vw;
-  height: 101vh;
+  &::after {
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.8) 100%);
+  }
 }
 
 .navigation__brand {

_sass/typography.scss

@@ -35,16 +35,6 @@
 // Text styles below.
 // Page title.
 
-.page__title-container {
-  position: relative;
-  top: 50%;
-  -moz-transform: translateY(-50%);
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-
 .page__title, .page__subtitle {
   user-select: none;
   -moz-user-select: none;

index.html

@@ -2,8 +2,7 @@
 layout: default
 ---
 {% include inline_style_index.html %}
-<!--Title image will be set to display:none and used as a background image on the div below-->
-<div class="navigation__content container-fluid" data-image-type="responsive">
+<div class="navigation__content container-fluid">
     <picture>
         <source srcset="static/images/title_photo/title_glass_building_480x270.jpg 480w,
                         static/images/title_photo/title_glass_building_960x540.jpg 960w,
@@ -20,13 +19,12 @@
                         static/images/title_photo/title_glass_building_1442x2562.jpg 1442w"
                 media="(orientation: portrait)"
                 sizes="100vw">
-        <img class="responsive"
+        <img class=""
              src="static/images/title_photo/title_glass_building_960x540.jpg"
-             alt="Python Sprints Title Image"
-             data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.8) 100%)">
+             alt="Python Sprints Title Image">
     </picture>
 
-    <div class="navigation__title-container row">
+    <div class="navigation__title-container row container-fluid">
         <div class="col-md-12">
             <h1 class="navigation__title">Python Sprints</h1>
             <h2 class="navigation__subtitle"><em>The World Needs Your Code</em></h2>

static/js/site.js

@@ -15,12 +15,6 @@ $(document).ready(function () {
     navigationButtonClose.on("click", closeNav);
 });
 
-
-function readDeviceOrientation() {
-
-    return window.matchMedia("(orientation: portrait)").matches;
-}
-
 function stopBodyScrolling (bool) {
     /**
      * Required to stop body scrolling on iOS devices (safari ignores
@@ -73,45 +67,6 @@ function showCloseButton() {
     buttonCloseContainer.css("display", "inline");
 }
 
-// Responsive background image constructor.
-class ResponsiveBackgroundImage {
-
-    constructor(element) {
-        this.element = element;
-        this.img = element.querySelector('.responsive');
-        this.src = '';
-
-        this.img.addEventListener('load', () => {
-            this.update();
-        });
-
-        if (this.img.complete) {
-            this.update();
-        }
-    }
-
-    update() {
-        let src = typeof this.img.currentSrc !== 'undefined' ? this.img.currentSrc : this.img.src;
-        let image = this.img;
-        let overlay = image.getAttribute("data-overlay");
-        if (overlay === null || overlay === undefined) {
-            overlay = "";
-        }
-
-        if (this.src !== src) {
-            this.src = src;
-
-            this.element.style.backgroundImage = overlay + ', url("' + this.src + '")';
-        }
-    }
-}
-
-// Create responsive background images.
-let elements = document.querySelectorAll('[data-image-type="responsive"]');
-for (let i=0; i<elements.length; i++) {
-    new ResponsiveBackgroundImage(elements[i]);
-}
-
 // Add active class to navigation elements in the navigation overlay and
 // footer on page load.
 $(setActiveLink());