Lots of update to standardize events page (#1117)

* Moved events.html to an events folder

* add permalinks and change title

* Add style and render days of week with liquid

* Adjust size/margin of Our Events and Our Locations

* Change css for .event-title

* change padding in .getting-started-page-card-hack-nights

* change css for .title-meetup class

* put subheading and paragraphs in same div and align righ of image

* Constraint fixes
- 72px margin between between each Meetup category
- 16px margin between subheadings and paragraphs
- 80px margin between last paragraph and Meetup button

* componentize left col

* Change heading spacing
- Add 72px margin between heading and first paragraph (same as in the Meetup column card)

* Fix Onboarding Link
- Onboarding link leads to wrong url- should be to Getting Started page (https://www.hackforla.org/getting-started)

* Make time zone text bold
- Make time zone text bold, should be font-weight: 700
- In .userTimeZone class

* Change css for .day-header-1 class
- Make all of the days of week ALL CAPS (MONDAY, TUESDAY, etc. - in the html), bold, and 18px - should be-
    font-size: 1.125rem (18px)
    font-weight: 700
    + in HTML: all-caps titles
- In .day-header-1 class
- Add 30px margin above the days of week and 10px margin belo
    margin: 30px 0 10px 0

* Remove padding from .day-header-1 class
- Remove the padding that pushes the meeting times to the right- Add:
	padding: 0
- Add to .day-header-1 class

* css changes and refactors
- created new yml files to loop over events in left-col-container.html
- Adjust banner font size, weight, and margin - should be -
	font-size: 1rem         (16px)
	font-weight: 700
	margin: auto 29%

* Add mobile view css overrides
- Decrease the padding of the page cards in their collapsed form- should be-
	padding: 5px 15px
- Adjust the border radius- should be -
	border-radius: 20px

* Some css changes

* Moved Javascript
- Moved content in the previously second script tag into righ-col-content.html. Because everything the code within that script
  tag is doing is very tighty tied to everything within the right-col-content.html, i.e the scheduler.

* path to refactor

* Major refactor of existing js. This can now be separated into its own .js file

* Please align the images with the text in both left and right column cards

* In .notification-banner p class please remove the line-height property (it should go to default line height)

* Addresses point 4 made in the change request

* Addresses point 5 in the change request

* Adresses point 6

* Adress point 1 made in change request
- Can you please actually remove the content-section class?
  It's causing the yellow banner to have 16px margin on both sides, which makes it look especially weird in mobile-

* I was promised these are the last changes

* Multi column events display now working

* Add time zone text

_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;
+}