simplifying the upcoming events section

Author: datapythonista

_includes/event_layout.html

@@ -1,5 +1,3 @@
-//Global styles here.
-
 .body {
   //background-color: $main-background;
   overflow-x: hidden;
@@ -9,11 +7,14 @@
 
 }
 
-h2 {
-  font-size: 24px;
+h2, h2 a {
+  font-size: 30px;
+  margin-bottom: 20px;
+  color: black;
 }
-h3 {
-  font-size: 20px;
+h3, h3 a {
+  font-size: 22px;
+  color: black;
 }
 p, a {
   font-size: 16px;
@@ -32,6 +33,10 @@ a {
   }
 }
 
+section {
+    padding: 20px 40px;
+}
+
 .row {
   margin-left: 0;
   margin-right: 0;
@@ -134,6 +139,7 @@ a {
 }
 
 #home {
+  padding: 0;
   margin-top: -56px;
 }
 
@@ -300,7 +306,7 @@ a {
   color: $nav-link-hover!important;
 }
 
-.active {
+.navigation .active {
   color: $nav-active!important;
 }
 
@@ -332,190 +338,45 @@ a {
 
 
 .upcoming-chapters-container {
-  //background-size: cover;
-  //background-position: center center;
   padding-bottom: 1em;
   min-height: 100vh;
 }
 
-//.upcoming-chapters-container {
-//  @include base-background("../images/events/events-chapters_background_480x205px.jpeg");
-//}
-//
-//@media (min-width: 481px){
-//    .upcoming-chapters-container {
-//    @include base-background("../images/events/events-chapters_background_960x540px.jpeg");
-//    }
-//}
-//
-//@media (min-width: 961px){
-//    .upcoming-chapters-container {
-//    @include base-background("../images/events/events-chapters_background_1920x1080px.jpeg");
-//    }
-//}
-//
-//@media (min-width: 1921px){
-//    .upcoming-chapters-container {
-//    @include base-background("../images/events/events-chapters_background_3840x2160px.jpeg");
-//    }
-//}
-
-.upcoming {
+#events img {
+    height: 30px;
 }
-
-@media (min-width: 768px) {
-  .upcoming {
-  }
-}
-
-.upcoming__divider {
+#events hr {
   border-bottom: rgba(127, 160, 194, 0.05) 1px solid;
   width: 100%;
   margin: 0.25em 0 1em 0;
 }
 
-.upcoming__col {
-  background: $section-background;
-  border-right: $blue 1px solid;
-  border-left: $blue 1px solid;
-  min-height: 100%;
-  //box-shadow: $black-shadow;
-  &:first-child {
-    border-top: $blue 1px solid;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-  &:last-child {
-    border-bottom: $blue 1px solid;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-  }
-}
-
-@media (min-width: 768px) {
-  .upcoming__col {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-.upcoming__title {
-  @extend .section-title;
-  //background-color: rgba(0, 0, 0, 0.5);
-  width: 100%;
-  color: $title-dark;
-  margin-top: 1.5em;
-  margin-bottom: 0;
-  padding-top: 0.25em;
-  padding-bottom: 0.25em;
-}
-
-.upcoming__date {
+#events .date {
   @extend .title;
   color: $blue;
-  font-size: 1.5em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
-
-.upcoming__project-logo {
-  max-width: 33%;
-}
-
-.upcoming__date-divider {
-  border-bottom: $black 1px solid;
-  width: 100%;
-  margin: 0.25em 0;
-}
-
-.upcoming__event-title {
-  @extend .title;
-  color: $black;
-  font-size: 2em;
-  margin-top: 0.5em;
-  margin-bottom: 0.1em;
-}
-
-.upcoming__event-subtitle {
-  @extend .subtitle;
-  color: $black;
-  font-size: 1.25em;
-  margin-bottom: 0.5em;
-}
-
-.upcoming__paragraph {
-  @extend .subtitle;
-  color: $black;
-  margin-bottom: 0.25em;
-}
-
-.upcoming__icon {
-  margin-right: 0.5em;
-}
-
-.upcoming__sponsor-col {
-  background: rgba(7, 41, 72, 0.52);
-  border: $dark-blue 2px groove;
-  border-radius: 0 5px 5px 5px;
-  margin-bottom: 1em;
-}
-
-.upcoming__content {
-  margin-top: 5.5%;
-  border-radius: 5px;
-  box-shadow: $black-shadow;
-  margin-left: 15px;
-  margin-right: 15px;
-}
-
-.upcoming__events-container {
-}
-
-.upcoming__button-row {
-  margin-top: 10%;
-  margin-bottom: 10%;
-}
-
-@media (min-width: 768px) {
-  .upcoming__button-row {
-    margin-top: 5.5%;
-    margin-bottom: 5.5%;
-  }
-}
-
-.upcoming__link-col {
-  padding-right: 0.5em;
-  text-align: right;
-  margin-top: auto;
-  margin-bottom: 0.5em;
-}
-
-.upcoming__button {
-  @extend .button-minimal;
-  min-width: 50%;
-  padding: 0;
-}
-
-.upcoming__button-icon {
-}
-
-.chapters {
-}
-
-.chapters__title {
-  @extend .upcoming__title;
+#events .content {
+  height: 50px;
+  text-overflow: ellipsis;
 }
 
 .chapters__content {
   margin-top: 5.5%;
 }
 
+#chapters {
+    background-color: $light-white;
+    margin: 30px 5px 0 0;
+}
 #chapters__map {
   height: 40vh;
   width: 100%;
   border-radius: 5px;
   border: $blue 1px solid;
   box-shadow: $black-shadow;
+  margin-bottom: 10px;
 }
 
 .chapters__card-container {
@@ -783,6 +644,10 @@ a {
   }
 }
 
+#contact {
+  padding: 0;
+}
+
 .footer {
   margin-top: 5em;
   background: $footer-background;