Merge branch 'add_content_to_about_page'

Author: Tomasz-Kluczkowski

_pages/01_about.html

@@ -3,7 +3,6 @@
 title: About
 permalink: /about/
 ---
-
 <section class="about">
     <div class="about__background-img-container">
         <picture>
@@ -28,7 +27,6 @@ <h2 class="about__page-subtitle">Our Goals, Our Story</h2>
             </div>
         </div>
     </div>
-
     <div class="about__container container-fluid">
         <div class="row">
             <div class="col-12 no-padding-x">
@@ -43,7 +41,7 @@ <h2 class="about__paragraph-title-dark">Python Sprints Decoded</h2>
                         We believe in sharing our skills for free to earn our good karma. If you are devoted to a particular open source project, please let us know, we could make a sprint dedicated to it!
                         Inclusion is in the nature of our group and we want to make sure that no one is underrepresented. All people are welcome.
                         </p>
-                        <h2 class="about__paragraph-title-dark-left">How It Started?</h2>
+                        <h2 class="about__paragraph-title-dark-left">How It Started</h2>
                         <hr class="about__divider-left">
                         <p class="about__paragraph-dark">
                             Our group was founded in October 2017. As all things in life the beginnings were humble with only a handful of people collaborating but the word quickly spread and now we have nearly 600 members and counting.
@@ -53,26 +51,18 @@ <h2 class="about__paragraph-title-dark-left">How It Started?</h2>
             </div>
         </div>
     </div>
-
-
-
-
-    <div class="about__img-container col-md-12">
-
+    <div class="about__img-outer-container col-md-12">
         <div class="about__img-top-container">
             <div class="about__img-top-title-container">
                 <h2 class="about__img-top-title">Passion</h2>
             </div>
         </div>
-
-
         <div class="about__img-bot-container">
             <div class="about__img-bot-title-container">
                 <h2 class="about__img-bot-title">Dedication</h2>
             </div>
         </div>
     </div>
-
     <div class="about__container container-fluid">
         <div class="row">
             <div class="col-12 no-padding-x">
@@ -98,4 +88,4 @@ <h2 class="about__paragraph-title-dark-left">What Our Meetings Look Like?</h2>
             </div>
         </div>
     </div>
-</section>
+</section>

_sass/about.scss

@@ -26,7 +26,13 @@
 }
 
 .about__container {
-  max-width: 70%;
+  max-width: 90%;
+}
+
+@media (min-width: 1200px) {
+  .about__container {
+    max-width: 70%;
+  }
 }
 
 .about__section-title-left {
@@ -63,14 +69,18 @@
   font-size: 1.65em;
 }
 
+.about__divider {
+  @extend .services__divider;
+}
+
 .about__divider-right {
+  @extend .about__divider;
   margin-right: 0;
-  width: 50%;
 }
 
 .about__divider-left {
+  @extend .about__divider;
   margin-left: 0;
-  width: 50%;
 }
 
 .about__paragraph-dark {
@@ -90,34 +100,42 @@
 }
 
 .about__paragraph-img-main {
-  width: 35%;
-  float: left;
-  margin-right: 1em;
-  margin-bottom: 0.5em;
+  width: 100%;
+  margin-bottom: 1em;
 }
 
-.about__img-container {
+@media (min-width: 768px) {
+  .about__paragraph-img-main {
+    float: left;
+    width: 35%;
+    margin-right: 1em;
+  }
+}
+
+.about__img-outer-container {
   position: relative;
   padding-bottom: 50%;
   margin-top: 10%;
 }
 
-.about__img-top-container {
+.about__img-inner-container {
   position: absolute;
-  top: 0;
-  right: 15%;
-  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/about/top_img_passion_964x643px.JPG") no-repeat top center;
-  background-size: cover;
   overflow: hidden;
   width: 40%;
   height: 50%;
-  border: $old-white 2px groove;
+  border: $old-white 1px solid;
   border-radius: 5px;
+  background-size: cover!important;
 }
 
-.about__img-top-title-container {
-  position: relative;
+.about__img-top-container {
+  @extend .about__img-inner-container;
   top: 0;
+  right: 15%;
+  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/about/top_img_passion_964x643px.JPG") no-repeat top center;
+}
+
+.about__img-title-container {
   z-index: 2;
   &::after {
     position: absolute;
@@ -126,10 +144,18 @@
     height: 100%;
     content: "";
     display: block;
-    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/about/top_img_passion_964x643px.JPG") no-repeat top center;
-    background-size: cover;
     filter: blur(2px);
     z-index: -1;
+    background-size: cover!important;
+  }
+}
+
+.about__img-top-title-container {
+  @extend .about__img-title-container;
+  position: relative;
+  top: 0;
+  &::after {
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/about/top_img_passion_964x643px.JPG") no-repeat top center;
   }
 }
 
@@ -149,34 +175,19 @@
 }
 
 .about__img-bot-container {
-  position: absolute;
+  @extend .about__img-inner-container;
   top: 40%;
   left: 15%;
-  width: 40%;
-  height: 50%;
   background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/about/bot_img_dedication_964x643px.JPG") no-repeat bottom center;
-  background-size: cover;
-  overflow: hidden;
-  border: $old-white 2px groove;
-  border-radius: 5px;
 }
 
 .about__img-bot-title-container {
+  @extend .about__img-title-container;
   position: absolute;
   width: 100%;
   bottom: 0;
-  z-index: 2;
   &::after {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    content: "";
-    display: block;
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/about/bot_img_dedication_964x643px.JPG") no-repeat bottom center;
-    background-size: cover;
-    filter: blur(2px);
-    z-index: -1;
   }
 }