Lots of update to standardize events page

_data/events.yml

@@ -0,0 +1,11 @@
+---
+- name: Onboarding
+  text: If you are new to the community, join us for Onboarding Night! We offer both Guided Onboarding and Self Onboarding options on our <a target='_blank' href='getting-started'>Getting Started</a> page.
+  link: '../assets/images/getting-started/step1.png'
+- name: Workshops
+  text: We host workshops on a range of topics, from development best practices to project management methodologies. Please check back for the current workshop schedule.
+  link: '../assets/images/hack-nights/building.png'
+- name: Happy Hour
+  text: Bars and cafes are shut down, but that doesn’t mean we can’t enjoy each other’s company! Grab your beverage of choice and socialize with fellow hackers following some organizational announcements.
+  link: ../assets/images/hack-nights/happy-hour.png
+---

_sass/components/_events.scss

@@ -87,21 +87,21 @@
   text-align: center;
   max-width: 150px;
 }
-.getting-started-page-card-hack-nights {
+.column-card-lg--events {
   background: #fff;
   border: 0 solid rgba(51, 51, 51, 0.06);
-  border-radius: 16px;
+  border-radius: 20px;
   box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
   overflow: hidden;
   max-width: 489px;
   margin-bottom: 0;
-  padding: 18px;
+  padding: 32px;
   margin: 8px;
   font-family: "Roboto" sans-serif;
 
   // NEW MOBILE FRIENDLY RULES
   @media #{$bp-below-tablet} {
-    padding: 30px 15px;
+    padding: 5px 15px;
   }
 }
 
@@ -129,7 +129,8 @@
 
 .meetup-steps {
   display: flex;
-  margin: 17px 0;
+  align-items: center;
+  margin: 24px 0;
 
   @media #{$bp-below-mobile} {
     flex-direction: column;
@@ -138,6 +139,8 @@
 }
 .meetup-steps-2 {
   display: flex;
+  align-items: center;
+  margin: 24px 0;
   @media #{$bp-below-mobile} {
     flex-direction: column;
     text-align: center;
@@ -151,8 +154,6 @@
 
   @media #{$bp-below-mobile} {
     padding: 0;
-    font-size: 12px;
-    line-height: 14px;
     text-align: initial;
     margin: 37px;
   }
@@ -164,8 +165,6 @@
 
   @media #{$bp-below-mobile} {
     padding: 8px;
-    font-size: 12px;
-    line-height: 14px;
     text-align: initial;
     margin-bottom: 25px;
   }
@@ -185,11 +184,10 @@
 
 .notification-banner p {
   text-align: center;
-  margin: auto 18%;
+  margin: auto 29%;
   padding: 20px;
-  font-size: 25px;
-  line-height: 29px;
-  font-weight: normal;
+  font-size: 1rem;
+  font-weight: 700;
 
   @media #{$bp-below-mobile} {
     text-align: justify;
@@ -286,14 +284,13 @@
 }
 
 .title-meetup {
-  font-size: 25px;
+  font-size: 1.25rem;
   text-align: center;
-  margin: 30px;
-  font-weight: normal;
+  font-weight: 700;
+  text-align: left;
+  margin-bottom: 16px;
+
 
-  @media #{$bp-below-mobile} {
-    margin: 0;
-  }
 }
 
 // .btn-meet {
@@ -321,15 +318,15 @@
 
 .class-btn {
   text-align: center;
-  // margin-top: 33%;
+  margin-top: 8px;
 
   @media #{$bp-below-mobile} {
     margin: 0;
   }
 }
 
 .btn--events {
-  margin-top: 32px;
+  margin-bottom: 32px;
 }
 
 .event-title-1 {
@@ -344,6 +341,8 @@
     font-size: 17px;
     display: flex;
     justify-content: space-between;
+    margin-bottom: 16px;
+
   }
 }
 
@@ -369,17 +368,19 @@
 }
 .event-title {
   text-align: center;
-  font-size: 30px;
+  font-size: 1.5rem;
   margin-top: 20px;
-  line-height: 35px;
-  font-weight: normal;
+  font-weight: 700;
+  margin-bottom: 15px;
+
 }
 
 @media #{$bp-below-tablet} {
   .event-title {
     font-size: 17px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
   .event-title::after {
     content: "\221F";
@@ -430,16 +431,26 @@
   list-style: none;
   font-size: 16px;
   line-height: 19px;
+
+  grid-template-columns: repeat(2, 1fr);
+  display: grid;
+
+
+
+
   @media #{$bp-below-tablet} {
     font-size: 13px;
     line-height: 15px;
   }
 }
 
 .day-header-1 {
+  text-transform: uppercase;
   margin-block-end: 0.25em;
-  line-height: 21px;
-  font-size: 16px;
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 30px 0 10px 0;
+  padding:0;
   @media #{$bp-below-tablet} {
     font-size: 15px;
     line-height: 18px;
@@ -496,3 +507,20 @@
       color: $color-white;
     }
 
+
+
+.events-page{
+  background: #030c2c;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: "Roboto"sans-serif;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.userTimeZone {
+  font-weight: 700;
+}