Working on rearranging events / chapters section.

Loose draft so far.
Will keep the default background image for this section instead of featured images and a blueish overlay.
Need to find a way to divide the area into events and map / chapters area (probably use card like styling).
Remove borders as they make it look like a table - not nice.

Author: Tomasz-Kluczkowski

_includes/inline_style_index.html

@@ -9,12 +9,39 @@
         {% assign image = "static/images/events/default_image_800x800px.jpeg" %}
     {% endif %}
 {% endif %}
-<style>
-.upcoming__img-container {
-    background-image: linear-gradient(to bottom right,
-    rgba(255, 81, 107, 0.5),
-    rgba(7, 41, 72, 0.3) 80%,
-    rgba(0, 0, 0, 0.3) 100%),
-    url("{{ site.baseurl }}/{{ image }}");
-      }
-</style>
+<!--<style>-->
+
+<!--@mixin base-background($background-url) {-->
+    <!--background-image: linear-gradient(to bottom,-->
+    <!--rgba(0, 0, 0, 0.9),-->
+    <!--rgba(7, 41, 72, 0.73) 20%,-->
+    <!--rgba(255, 81, 107, 0.5) 50%,-->
+    <!--rgba(7, 41, 72, 0.3) 80%,-->
+    <!--rgba(0, 0, 0, 0.3) 100%),-->
+    <!--url("{{ site.baseurl }}/$background-url");-->
+<!--}-->
+
+<!--.events-chapters-container {-->
+    <!--@include base-background(static/images/events/events-chapters_background_480x205px.jpeg);-->
+<!--}-->
+
+<!--@media (min-width: 481px){-->
+    <!--.events-chapters-container {-->
+    <!--@include base-background(static/images/events/events-chapters_background_960x540px.jpeg);-->
+    <!--}-->
+<!--}-->
+
+<!--@media (min-width: 961px){-->
+    <!--.events-chapters-container {-->
+    <!--@include base-background(static/images/events/events-chapters_background_1920x1080px.jpeg");-->
+    <!--}-->
+<!--}-->
+
+<!--@media (min-width: 1921px){-->
+    <!--.events-chapters-container {-->
+    <!--@include base-background(static/images/events/events-chapters_background_3840x2160px.jpeg);-->
+    <!--}-->
+<!--}-->
+<!--</style>-->
+
+

_sass/style.scss

@@ -259,21 +259,68 @@ a {
   color: $nav-button-close-hover;
 }
 
-.mission__statement {
-  font-size: 1.1em;
-  text-align: center;
-  font-family: 'Playfair Display', serif;
+//.mission__statement {
+//  font-size: 1.1em;
+//  text-align: center;
+//  font-family: 'Playfair Display', serif;
+//}
+
+@mixin base-background($background-url) {
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0.9),
+    rgba(7, 41, 72, 0.73) 20%,
+    rgba(255, 81, 107, 0.5) 50%,
+    rgba(7, 41, 72, 0.3) 80%,
+    rgba(0, 0, 0, 0.3) 100%),
+    url($background-url);
+}
+
+.events-chapters-container {
+    @include base-background("../images/events/events-chapters_background_480x205px.jpeg");
+}
+
+@media (min-width: 481px){
+    .events-chapters-container {
+    @include base-background("../images/events/events-chapters_background_960x540px.jpeg");
+    }
+}
+
+@media (min-width: 961px){
+    .events-chapters-container {
+    @include base-background("../images/events/events-chapters_background_1920x1080px.jpeg");
+    }
+}
+
+@media (min-width: 1921px){
+    .events-chapters-container {
+    @include base-background("../images/events/events-chapters_background_3840x2160px.jpeg");
+    }
+}
+
+.events-chapters-container {
+  background-size: cover;
+  background-position: center center;
+  border-top: rgba(129, 129, 129, 0.51) 1px solid;
+
+  //border-top: rgba(7, 41, 72, 0.71) 1px solid;
+  min-height: 50vh;
+}
+
+.background {
+  height: 30vh;
+  background-color: black;
 }
 
 .upcoming {
-  margin-left: 2%;
-  margin-right: 2%;
+  //margin-left: 2%;
+  //margin-right: 2%;
+  max-height: 100vh;
 }
 
 @media (min-width: 768px) {
   .upcoming {
-  margin-left: 10%;
-  margin-right: 10%;
+  //margin-left: 10%;
+  //margin-right: 10%;
   }
 }
 
@@ -310,9 +357,11 @@ a {
   margin-bottom: 0;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
-  border-bottom: rgba(250, 235, 215, 0.85) 1px solid;
+  //border-top-left-radius: 20px;
+  //border-top-right-radius: 20px;
+  border-bottom: rgba(129, 129, 129, 0.51) 1px solid;
+
+  //border-bottom: rgba(250, 235, 215, 0.85) 1px solid;
 }
 
 .upcoming__event-label {
@@ -332,14 +381,7 @@ a {
   margin-bottom: 1em;
 }
 
-.upcoming__img-container {
-  background-size: cover;
-  background-position: center center;
-  border-radius: 20px;
-  border-top: $orange 3px solid;
-  border-bottom: $orange 3px solid;
-  min-height: 50vh;
-}
+
 
 .upcoming__content {
   margin-top: 5.5%;