Merge branch 'make_universal_responsive_background_images'

Author: Tomasz-Kluczkowski

_layouts/post.html

@@ -89,7 +89,9 @@ <h1 class="post__content-title">Event's sponsors</h1>
                                     <div class="post__logo-col col-sm-3 col-12">
                                         <h3 class="post__sponsor-name">{{ sponsor_obj.sponsor_name }}</h3>
                                             <a class="post__sponsor-container post__sponsor-link" href="{{ sponsor_obj.sponsor_link }}">
-                                                <img class="post__sponsor-img" src="{{ site.baseurl }}/{{ sponsor_obj.sponsor_logo }}">
+                                                <img class="post__sponsor-img"
+                                                     src="{{ site.baseurl }}/{{ sponsor_obj.sponsor_logo }}"
+                                                     alt="Sponsor logo">
                                             </a>
                                     </div >
                                     <div class="post__sponsor-info-col col-12 col-sm-auto col-xl-7 ">

_pages/03_events.html

@@ -3,27 +3,31 @@
 title: Events
 permalink: /events/
 ---
-
-<style>
-    .events-page__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="events-page">
-    <div class="events-page__background-img">
+    <div class="events-page__background-img" 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,
+                            ../static/images/events_page/events_page_top_1920x600px.jpg 1920w"
+                    media="(orientation: landscape)"
+                    sizes="100vw">
+            <source srcset="../static/images/events_page/events_page_top_750x650px.jpg 750w,
+                            ../static/images/events_page/events_page_top_1650x1100px.jpg 1650w"
+                    media="(orientation: portrait)"
+                    sizes="100vw">
+            <img class="responsive"
+                 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%)">
+        </picture>
         <div class="row container-fluid">
             <div class="col-sm-12">
                 <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>
+                <h3 class="events-page__page-subtitle">See what's coming up and what we did recently.</h3>
             </div>
         </div>
     </div>
+
     <!--Contact form-->
         <form class="contact__form container" method="POST" action="//formspree.io/py.sprints@gmail.com" role="form">
             <div class="row">

_pages/04_contact.html

@@ -3,27 +3,31 @@
 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>
                 <h3 class="contact__page-subtitle">Got an idea? Can you or your company support us? Let us know.</h3>
             </div>
         </div>
     </div>
+
     <!--Contact form-->
         <form class="contact__form container" method="POST" action="//formspree.io/py.sprints@gmail.com" role="form">
             <div class="row">

_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>
@@ -98,7 +100,9 @@ <h2 class="upcoming__event-label">Project</h2>
                             <div class="row">
                                 <div class="upcoming__event-title col-12 text-center">
                                     <a href="{{ post.project_link }}">
-                                        <img class="upcoming__project-logo" src="{{ site.baseurl }}/{{ post.project_logo }}">
+                                        <img class="upcoming__project-logo"
+                                             src="{{ site.baseurl }}/{{ post.project_logo }}"
+                                             alt="Upcoming project logo">
                                     </a>
                                 </div>
                             </div>
@@ -152,7 +156,9 @@ <h2 class="upcoming__event-label">Sponsors</h2>
                                             {% assign sponsor = event_sponsors[sponsor_index] %}
                                             <div class="footer__sponsor-col col-md-12 col-lg-6">
                                                 <a class="footer__sponsor-link" href="{{ sponsor.sponsor_link }}">
-                                                    <img class="footer__img" src="{{ site.baseurl }}/{{ sponsor.sponsor_logo }}">
+                                                    <img class="footer__img"
+                                                         src="{{ site.baseurl }}/{{ sponsor.sponsor_logo }}"
+                                                         alt="Sponsor logo">
                                                 </a>
                                             </div>
                                         {% endfor %}
@@ -196,7 +202,9 @@ <h2 class="services__section-title">What Do We Do?</h2>
 
     <div class="row">
         <div class="second-on-mobile no-gutters__col col-md-6">
-            <img class="services__img img-fluid rounded" src="static/images/services/educating_devs_840x561px.jpg">
+            <img class="services__img img-fluid rounded"
+                 src="static/images/services/educating_devs_840x561px.jpg"
+                 alt="Educating developers">
         </div>
         <div class="first-on-mobile no-gutters__col col-md-6">
             <h2 class="services__title text-right">Helping Beginners To Get Good</h2>
@@ -212,7 +220,9 @@ <h2 class="services__title text-left">Engaging Core Developers</h2>
             <p class="services__content text-left">For those of you who are programming on the advanced level there are always new tasks to test your mettle. We fix bugs, we improve implementations and add features. No matter your style you will be able to find a ticket to your liking. The sprints are always advertised well ahead of the time so you can prepare yourself by checking on the issues that will be worked on early enough.</p>
         </div>
         <div class="no-gutters__col col-md-6">
-            <img class="services__img img-fluid rounded" src="static/images/services/advanced_lvl_840x560px.jpg">
+            <img class="services__img img-fluid rounded"
+                 src="static/images/services/advanced_lvl_840x560px.jpg"
+                 alt="Core developers in action">
         </div>
     </div>
 </section>

static/credits.txt

@@ -9,3 +9,5 @@
 
 contact photo: Photo by Alejandro Escamilla on Unsplash / Photo by NordWood Themes on Unsplash
 contact: <a href='https://www.freepik.com/free-photo/blank-business-cards-and-cup-of-coffee-on-wooden-table-corporate-stationary-branding-mock-up_1187395.htm'>Designed by Freepik</a>
+
+events photo: Photo by Alex Kotliarskyi on Unsplash

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 + '")';
         }
     }
 }