Merge branch 'add_content_to_about_page'

Author: Tomasz-Kluczkowski

_pages/01_about.html

@@ -16,7 +16,7 @@
                             ../static/images/events_page/events_page_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class=""
+            <img class="about__background-img"
                  src="../static/images/events_page/events_page_top_960x300px.jpg"
                  alt="Events">
         </picture>

_pages/03_events.html

@@ -4,7 +4,7 @@
 permalink: /events/
 ---
 <section class="events-page">
-    <div class="events-page__background-img-container" data-image-type="responsive">
+    <div class="events-page__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,
@@ -15,10 +15,9 @@
                             ../static/images/events_page/events_page_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class=""
+            <img class="events-page__background-img"
                  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="events-page__title-container row container-fluid">
             <div class="col-sm-12">

_pages/04_contact.html

@@ -4,7 +4,7 @@
 permalink: /contact/
 ---
 <section class="contact">
-    <div class="contact__background-img-container" data-image-type="responsive">
+    <div class="contact__background-img-container">
         <picture>
             <source srcset="../static/images/contact/contact_top_450x150px.jpg 450w,
                             ../static/images/contact/contact_top_960x300px.jpg 960w,
@@ -15,10 +15,9 @@
                             ../static/images/contact/contact_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class=""
+            <img class="contact__background-img"
                  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%)">
+                 alt="Contact Us">
         </picture>
         <div class="contact__page-title-container row container-fluid">
             <div class="col-sm-12">

_sass/about.scss

@@ -9,6 +9,10 @@
   }
 }
 
+.about__background-img {
+  @extend .page__background-img;
+}
+
 .about__page-title-container {
   @extend .page__title-container;
 }

_sass/contact.scss

@@ -9,6 +9,10 @@
   }
 }
 
+.contact__background-img {
+  @extend .page__background-img;
+}
+
 .contact__page-title-container {
   @extend .page__title-container;
 }

_sass/events.scss

@@ -48,6 +48,10 @@
   border-top-right-radius: 5px;
 }
 
+.events-page__background-img {
+  @extend .page__background-img;
+}
+
 .events-page__event-col {
   @extend .post__event-col;
   border-bottom-left-radius: 5px;

_sass/style.scss

@@ -41,6 +41,7 @@ a {
 .page__background-img-container {
   position: relative;
   &::after {
+    width: 100vw;
     content: "";
     position: absolute;
     top: 0;
@@ -50,6 +51,12 @@ a {
   }
 }
 
+@media (orientation: landscape){
+  .page__background-img {
+    min-height: 250px;
+  }
+}
+
 .page__title-container {
   z-index: 2;
   position: absolute;
@@ -85,6 +92,7 @@ a {
 
 /*Here I need to move the background image to slide under the navigation*/
 /*Any smarter solutions are welcome!*/
+
 .navigation__content {
   @extend .page__background-img-container;
   margin-top: -66px;
@@ -93,12 +101,21 @@ a {
   }
 }
 
+.navigation__background-img {
+  height: calc(100vh + 2px);
+  width: 100%;
+}
+
 .navigation__brand {
+  position: relative;
   background-color: rgba(0, 0, 0, 0.2);
   border: rgba(0, 0, 0, 0.2) 1px solid;
   border-radius: 6px;
 }
 
+.navigation__brand-link {
+}
+
 .navigation__brand-name {
   font-size: 0.8em;
   color: $brand-name;

_sass/typography.scss

@@ -115,7 +115,7 @@
 
 .event-label {
   font-family: 'Encode Sans Expanded', sans-serif;
-  background: linear-gradient(45deg, $grey, $grey 80%, transparent 80%,  transparent 100%);
+  background-image: linear-gradient(45deg, $grey, $grey 80%, transparent 80%,  transparent 100%);
   font-size: 1.25em;
   text-align: left;
   color: $title-dark;

index.html

@@ -19,7 +19,7 @@
                         static/images/title_photo/title_glass_building_1442x2562.jpg 1442w"
                 media="(orientation: portrait)"
                 sizes="100vw">
-        <img class=""
+        <img class="navigation__background-img"
              src="static/images/title_photo/title_glass_building_960x540.jpg"
              alt="Python Sprints Title Image">
     </picture>