Added css classes to automatically center page titles on all pages.

Author: Tomasz-Kluczkowski

_pages/01_about.html

@@ -6,7 +6,7 @@
 
 <section class="about">
     <!--REPLACE THIS IMAGE WITH A NEW ONE - MIX PREVIOUS MEETUPS AND MAKE A COLLAGE -->
-    <div class="events-page__background-img" data-image-type="responsive">
+    <div class="about__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,
@@ -22,7 +22,7 @@
                  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="about__page-title-container row container-fluid">
             <div class="col-sm-12">
                 <h1 class="about__page-title">About Us</h1>
                 <h2 class="about__page-subtitle">Our Goals, Our Story</h2>

_pages/03_events.html

@@ -20,7 +20,7 @@
                  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="events-page__title-container row container-fluid">
             <div class="col-sm-12">
                 <h1 class="events-page__page-title">Events</h1>
                 <h2 class="events-page__page-subtitle">See What's New And What We Did Already</h2>

_pages/04_contact.html

@@ -20,7 +20,7 @@
                  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="contact__page-title-container row container-fluid">
             <div class="col-sm-12">
                 <h1 class="contact__page-title">Contact Us</h1>
                 <h2 class="contact__page-subtitle">Got An Idea? Can You Help Us? Let Us Know</h2>

_sass/about.scss

@@ -1,6 +1,13 @@
+.about__background-img {
+  @extend .contact__background-img;
+}
+
+.about__page-title-container {
+  @extend .page__title-container
+}
+
 .about__page-title {
   @extend .page__title;
-  margin-top: 15vh;
 }
 
 .about__page-subtitle {

_sass/contact.scss

@@ -2,21 +2,16 @@
   margin-top: -66px;
 }
 
-@media (orientation: landscape) {
-  .contact__background-img {
-  min-height: 55vh;
-  }
+.contact__background-img {
+  height: 55vh;
 }
 
-@media (orientation: portrait) {
-  .contact__background-img {
-  min-height: 25vh;
-  }
+.contact__page-title-container {
+  @extend .page__title-container;
 }
 
 .contact__page-title {
   @extend .page__title;
-  margin-top: 15vh;
 }
 
 .contact__page-subtitle {

_sass/events.scss

@@ -6,9 +6,12 @@
   @extend .contact__background-img
 }
 
+.events-page__title-container {
+  @extend .page__title-container;
+}
+
 .events-page__page-title {
   @extend .page__title;
-  margin-top: 15vh;
 }
 
 .events-page__page-subtitle {

_sass/style.scss

@@ -115,15 +115,18 @@ a {
   background-color: rgba(7, 41, 72, 0.7);
 }
 
+
+.navigation__title-container {
+  @extend .page__title-container;
+}
+
 .navigation__title {
   @extend .page__title;
-  margin-top: 40vh;
 }
 
 
 .navigation__subtitle {
   @extend .page__subtitle;
-  margin-bottom: 50%;
 }
 
 .navigation__button-close {
@@ -259,8 +262,8 @@ a {
 
 .upcoming__title {
   @extend .section-title;
+  background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
-  background: rgba(0, 0, 0, 0.9);
   font-size: 2.5em;
   color: $title-light;
   margin-top: 0;

_sass/typography.scss

@@ -35,6 +35,16 @@
 // 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

@@ -26,7 +26,7 @@
              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="navigation__title-container row">
         <div class="col-md-12">
             <h1 class="navigation__title">Python Sprints</h1>
             <h2 class="navigation__subtitle"><em>The World Needs Your Code</em></h2>