Introduced responsive background image to contact page (title image).

Styled contact form to have small x margins on mobiles.
Increased home page subtitle size (readability).
Added set of images for contact page.
Added function allowing orientation checking in javascript for future use.
Added custom image overlay option to responsive background images (so we can have different colours / angles etc. for each one of them).
The overlay is read from data-overlay attribute in responsive image element.

Author: Tomasz-Kluczkowski

_pages/04_contact.html

@@ -3,20 +3,24 @@
 title: Contact
 permalink: /contact/
 ---
-
-<style>
-    .contact__background-img {
-        background-size: contain;
-        background: linear-gradient(90deg,
-            rgba(0, 0, 0, 0.75),
-            rgba(0, 0, 0, 0.75)),
-            url("{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg") top center no-repeat;
-    }
-</style>
-
-
 <section class="contact">
-    <div class="contact__background-img">
+    <div class="contact__background-img" data-image-type="responsive">
+        <picture>
+            <source srcset="../static/images/contact/contact_top_450x150px.jpg 450w,
+                            ../static/images/contact/contact_top_960x300px.jpg 960w,
+                            ../static/images/contact/contact_top_1920x600px.jpg 1920w"
+                    media="(orientation: landscape)"
+                    sizes="100vw">
+            <source srcset="../static/images/contact/contact_top_750x650px.jpg 750w,
+                            ../static/images/contact/contact_top_1650x1100px.jpg 1650w"
+                    media="(orientation: portrait)"
+                    sizes="100vw">
+            <img class="responsive"
+                 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%)">
+        </picture>
+
         <div class="row container-fluid">
             <div class="col-sm-12">
                 <h2 class="contact__page-title">Contact Us</h2>

_sass/contact.scss

@@ -22,6 +22,12 @@
   @extend .page-subtitle;
 }
 
+@media (max-width: 576px) {
+  .contact__form {
+      max-width: 96%;
+  }
+}
+
 .contact__form {
   margin-top: 5em;
   border-radius: 5px;

_sass/style.scss

@@ -132,7 +132,7 @@ a {
 }
 
 .navigation__subtitle {
-  font-size: 1.16em;
+  font-size: 1.75em;
   font-family: 'Share Tech Mono', monospace;
   color: $page-subtitle;
   text-align: center;
@@ -145,7 +145,7 @@ a {
     margin-top: 40vh;
   }
   .navigation__subtitle {
-    font-size: 1.43em;
+    font-size: 1.9em;
   }
 }
 
@@ -155,7 +155,7 @@ a {
     margin-top: 40vh;
   }
   .navigation__subtitle {
-    font-size: 1.66em;
+    font-size: 2em;
   }
 }
 
@@ -165,7 +165,7 @@ a {
     margin-top: 40vh;
   }
   .navigation__subtitle {
-    font-size: 2em;
+    font-size: 2.25em;
   }
 }
 
@@ -286,6 +286,7 @@ a {
 
 @media (min-width: 768px) {
   .upcoming__col {
+    margin-top: 0;
     margin-left: auto;
     margin-right: auto;
   }
@@ -298,6 +299,7 @@ a {
   font-size: 2.5em;
   color: $title-light;
   margin-top: 0;
+  margin-bottom: 0;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   border-top-left-radius: 20px;
@@ -343,6 +345,7 @@ a {
 @media (min-width: 768px) {
   .upcoming__button-row {
     margin-top: 5.5%;
+    margin-bottom: 5.5%;
   }
 }
 

index.html

@@ -17,17 +17,19 @@
                         static/images/title_photo/title_glass_building_1080x1920.jpg 1080w,
                         static/images/title_photo/title_glass_building_1125x2436.jpg 1125w,
                         static/images/title_photo/title_glass_building_1242x2436.jpg 1242w,
-                        static/images/title_photo/title_glass_building_1442x2562.jpg 1442w,
-                        "
+                        static/images/title_photo/title_glass_building_1442x2562.jpg 1442w"
                 media="(orientation: portrait)"
                 sizes="100vw">
-        <img class="responsive" src="static/images/title_photo/title_glass_building_960x540.jpg" alt="Python Sprints Title Image">
+        <img class="responsive"
+             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%)">
     </picture>
 
     <div class="row">
         <div class="col-md-12">
             <h1 class="navigation__title">Python Sprints</h1>
-            <h2 class="navigation__subtitle"><em>The World Is Waiting For Your Code</em></h2>
+            <h2 class="navigation__subtitle"><em>The World Needs Your Code</em></h2>
         </div>
     </div>
 </div>

static/images/contact/contact_top_1650x1100px.jpg

@@ -16,6 +16,11 @@ $(document).ready(function () {
 });
 
 
+function readDeviceOrientation() {
+
+    return window.matchMedia("(orientation: portrait)").matches;
+}
+
 function stopBodyScrolling (bool) {
     /**
      * Required to stop body scrolling on iOS devices (safari ignores
@@ -87,9 +92,16 @@ class ResponsiveBackgroundImage {
 
     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 = 'linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url("' + this.src + '")';
+
+            this.element.style.backgroundImage = overlay + ', url("' + this.src + '")';
         }
     }
 }