Merge branch 'add_content_to_events_page'

python-sprints · Mar 7, 2018 · 0ff2716 · 0ff2716
2 parents 3dbf498 + 3ca89ec
commit 0ff2716
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 79 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -26,7 +26,7 @@ <h2 class="footer__section-title">Our Sponsors</h2>
         <div class="col-md-3">
             <h2 class="footer__section-title">Python Sprints</h2>
             <hr class="footer__divider">
-            <ul class="pl-0 text-center">
+            <ul class="footer__navigation-list text-center">
                 <li><a class="footer__link" href="{{ '/' | prepend: site.baseurl }}">Home</a></li>
             {% for page in site.pages %}
                 {% if page.title %}

diff --git a/_includes/head.html b/_includes/head.html
@@ -1,6 +1,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name=”description”
+          content=”Python Sprints is a non for profit group gathering coders who want to help improve open source projects using Python programming language.”>
     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">

diff --git a/_pages/01_about.html b/_pages/01_about.html
@@ -4,5 +4,64 @@
 permalink: /about/
 ---
 
-<h1>This is the content of the about page</h1>
-<h2>Fill it in !!!!</h2>
+<section class="about">
+    <!--REPLACE THIS IMAGE WITH A NEW ONE - MIX PREVIOUS MEETUPS AND MAKE A COLLAGE -->
+    <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,
+                            ../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="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>
+            </div>
+        </div>
+    </div>
+
+    <div class="about__container container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="section-title">Python Sprints Decoded</h2>
+                <h2 class="about__title">Why We Work Together?</h2>
+                <p class="about__paragraph-dark">
+                    Python Sprints is a non for profit group of like minded programmers who care about making open source projects better.
+                    We all use them for free but often do not put any thought to how much effort it takes to create and maintain this software. Very often the amount of core developers working on a particular project can be counted on fingers of one hand and yet literally thousands of people use their work.
+                    We believe that we all should share our skills and earn our good karma.
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <h2 class="about__title">How It Started?</h2>
+                <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 above 500 members and counting.
+                </p>
+            </div>
+        </div>
+         <div class="row">
+            <div class="col-12">
+                <h2 class="about__title">What Our Meetings Look Like?</h2>
+                <p class="about__paragraph-dark">
+                    Usually there is a subject advertised well ahead of the time with clear setup instructions so that everyone can come prepared.
+                    But you should not worry if setting up is difficult - part of our creed is to help new people get introduced into the world of open source.
+                    Help will be provided even if it is just creating a git repository and learning how to contribute. It is all part of growing our group organically and all people are welcome!
+                    All the coding aside there is always time for joyful banter with pizza and beers to hand.
+                </p>
+            </div>
+        </div>
+    </div>
+
+
+</section>
diff --git a/_pages/03_events.html b/_pages/03_events.html
@@ -20,10 +20,10 @@
                  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 coming up and what we did recently.</h2>
+                <h2 class="events-page__page-subtitle">See What's New And What We Did Already</h2>
             </div>
         </div>
     </div>

diff --git a/_pages/04_contact.html b/_pages/04_contact.html
@@ -20,10 +20,10 @@
                  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 or your company support us? Let us know.</h2>
+                <h2 class="contact__page-subtitle">Got An Idea? Can You Help Us? Let Us Know</h2>
             </div>
         </div>
     </div>

diff --git a/_sass/about.scss b/_sass/about.scss
@@ -0,0 +1,31 @@
+.about__background-img {
+  @extend .contact__background-img;
+}
+
+.about__page-title-container {
+  @extend .page__title-container
+}
+
+.about__page-title {
+  @extend .page__title;
+}
+
+.about__page-subtitle {
+  @extend .page__subtitle;
+}
+
+.about__container {
+  max-width: 80%;
+}
+
+.about__title {
+  @extend .title-dark;
+  margin-top: 5%;
+  font-size: 1.65em;
+}
+
+.about__paragraph-dark {
+  @extend .paragraph-dark;
+  padding-left: 0;
+  padding-right: 0;
+}
diff --git a/_sass/contact.scss b/_sass/contact.scss
@@ -2,24 +2,20 @@
   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-light;
+  @extend .page__title;
 }
 
 .contact__page-subtitle {
-  @extend .page-subtitle;
+  @extend .page__subtitle;
 }
 
 @media (max-width: 576px) {

diff --git a/_sass/events.scss b/_sass/events.scss
@@ -6,12 +6,16 @@
   @extend .contact__background-img
 }
 
+.events-page__title-container {
+  @extend .page__title-container;
+}
+
 .events-page__page-title {
-  @extend .page-title-light;
+  @extend .page__title;
 }
 
 .events-page__page-subtitle {
-  @extend .page-subtitle
+  @extend .page__subtitle
 }
 
 .events-page__upcoming-section-title {

diff --git a/_sass/style.scss b/_sass/style.scss
@@ -115,58 +115,26 @@ a {
   background-color: rgba(7, 41, 72, 0.7);
 }
 
-.navigation__title, .navigation__subtitle, .navigation__button-close {
-  user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
+
+.navigation__title-container {
+  @extend .page__title-container;
 }
 
 .navigation__title {
-  font-family: 'Share Tech Mono', monospace;
-  color: $page-title;
-  font-size: 3.5em;
-  margin-top: 40vh;
-  text-align: center;
+  @extend .page__title;
 }
 
-.navigation__subtitle {
-  font-size: 1.75em;
-  font-family: 'Share Tech Mono', monospace;
-  color: $page-subtitle;
-  text-align: center;
-  margin-bottom: 50%;
-}
 
-@media (min-width: 450px) {
-  .navigation__title {
-    font-size: 4.3em;
-    margin-top: 40vh;
-  }
-  .navigation__subtitle {
-    font-size: 1.9em;
-  }
-}
-
-@media (min-width: 650px) {
-  .navigation__title {
-    font-size: 5em;
-    margin-top: 40vh;
-  }
-  .navigation__subtitle {
-    font-size: 2em;
-  }
+.navigation__subtitle {
+  @extend .page__subtitle;
 }
 
-@media (min-width: 1200px) {
-  .navigation__title {
-    font-size: 6em;
-    margin-top: 40vh;
-  }
-  .navigation__subtitle {
-    font-size: 2.25em;
-  }
+.navigation__button-close {
+  user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
 }
 
 .navigation__hamburger-bar {
@@ -294,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;
@@ -321,6 +289,7 @@ a {
   background: rgba(7, 41, 72, 0.52);
   border: $dark-blue 2px groove;
   border-radius: 0 5px 5px 5px;
+  margin-bottom: 1em;
 }
 
 .upcoming__img-container {
@@ -633,4 +602,9 @@ a {
   width: 30%;
   margin-top: 1%;
   margin-bottom: 3%;
+}
+
+.footer__navigation-list {
+  list-style-type: none;
+  padding-left: 0;
 }
diff --git a/_sass/typography.scss b/_sass/typography.scss
@@ -33,6 +33,69 @@
 }
 
 // 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;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.page__title {
+  font-family: 'Share Tech Mono', monospace;
+  color: $page-title;
+  font-size: 3.5em;
+  text-align: center;
+}
+
+.page__subtitle {
+  font-size: 1.75em;
+  font-family: 'Share Tech Mono', monospace;
+  color: $page-subtitle;
+  text-align: center;
+}
+
+@media (min-width: 450px) {
+  .page__title {
+    font-size: 4.3em;
+  }
+  .page__subtitle {
+    font-size: 1.9em;
+  }
+}
+
+@media (min-width: 650px) {
+  .page__title {
+    font-size: 5em;
+  }
+  .page__subtitle {
+    font-size: 2em;
+  }
+}
+
+@media (min-width: 1200px) {
+  .page__title {
+    font-size: 6em;
+  }
+  .page__subtitle {
+    font-size: 2.25em;
+  }
+}
+
+// Section titles.
+
 
 .section-title {
   font-size: 2.5em;
@@ -60,20 +123,6 @@
   color: $section-title-light;
 }
 
-.page-title-light {
-  @extend .section-title;
-  margin-top: 20vh;
-  color: $page-title;
-}
-
-.page-subtitle {
-  font-family: 'Encode Sans Expanded', sans-serif;
-  color: $subtitle;
-  font-size: 1.75em;
-  text-align: center;
-  margin-bottom: 10vh;
-}
-
 .event-label {
   font-family: 'Encode Sans Expanded', sans-serif;
   background: linear-gradient(45deg, $grey, $grey 80%, transparent 80%,  transparent 100%);

diff --git a/index.html b/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>