Initial conversion to white scheme for the events display.

Button to be further defined.

Author: Tomasz-Kluczkowski

_sass/buttons.scss

@@ -11,4 +11,19 @@
     background: $button-background-hover;
     border: $button-border-hover;
   }
+}
+
+.button-minimal {
+  font-size: 1.5em;
+  font-family: 'Playfair Display', serif;
+  //background: $button-background;
+  color: $black;
+  //border: $button-border;
+  min-width: 30%;
+  transition: all 0.5s ease-in-out;
+  &:hover {
+    color: $button-text-hover;
+    background: $button-background-hover;
+    border: $button-border-hover;
+  }
 }

_sass/style.scss

@@ -314,16 +314,17 @@ a {
 }
 
 .upcoming-divider {
-  border-bottom: rgba(127, 160, 194, 0.35) 1px solid;
-  width: 20%;
-  margin: 10% auto 10%;
+  border-bottom: rgba(127, 160, 194, 0.05) 1px solid;
+  width: 30%;
+  margin: 0.25em 0;
 }
 
 .upcoming__col {
-  background: rgba(0, 0, 0, 0.7);
+  //background: rgba(0, 0, 0, 0.7);
+  background: $bright-white;
   border-radius: 5px;
   border: #000000 1px solid;
-  box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
+  //box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
   min-height: 100%;
   margin-top: 1em;
 }
@@ -351,21 +352,23 @@ a {
 //}
 
 .upcoming__event-title {
-  @extend .title-light;
+  @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: $light-blue;
+  color: $black;
   margin-bottom: 0.25em;
 }
 

_sass/typography.scss

@@ -137,13 +137,17 @@
   border-radius: 0 5px 5px 5px;
   }
 
+.title {
+    font-family: 'Encode Sans Expanded', sans-serif;
+}
+
 .title-dark {
-  font-family: 'Encode Sans Expanded', sans-serif;
+  @extend .title;
   color: $title-dark;
 }
 
 .title-light {
-  font-family: 'Encode Sans Expanded', sans-serif;
+  @extend .title;
   color: $title-light;
 }
 

index.html

@@ -75,6 +75,7 @@ <h2 class="upcoming__event-subtitle"> {{ post.subtitle }}</h2>
                                             <div class="col-6 no-padding-x">
                                                 <div class="row">
                                                     <div class="col-12 no-padding-x">
+                                                        <hr class="upcoming-divider">
                                                         <p class="upcoming__paragraph">
                                                             <i class="upcoming__icon fas fa-map-marker-alt"></i>{{ host_sponsor.address }}
                                                         </p>
@@ -90,7 +91,7 @@ <h2 class="upcoming__event-subtitle"> {{ post.subtitle }}</h2>
                                             </div>
                                             <div class="upcoming__link-col col-6">
                                                 <a class="upcoming__link" href="{{ post.url }}">
-                                                    <button class="button-standard btn btn-lg">
+                                                    <button class="button-minimal btn btn-lg">
                                                         Learn More
                                                     </button>
                                                 </a>