From f8f3c0742415dfc7dc24d16b5386389937fa04c5 Mon Sep 17 00:00:00 2001
From: David Rubinstein <david@grubbylogic.com>
Date: Thu, 1 Oct 2020 18:14:47 -0700
Subject: [PATCH 1/5] MVP events mobile

---
 _sass/components/_events.scss | 29 +++++++++++++++++++++++++++--
 events.html                   | 23 ++++++++++++++++++-----
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/_sass/components/_events.scss b/_sass/components/_events.scss
index 84981ff45f..ab544b1f69 100644
--- a/_sass/components/_events.scss
+++ b/_sass/components/_events.scss
@@ -48,7 +48,8 @@
   margin-left: 40px;
   margin-bottom: -7%;
   @media #{$bp-below-tablet} {
-    flex-direction: column;
+    flex-direction: row-reverse;
+    flex-grow: 6;
     margin: 0;
   }
 }
@@ -72,7 +73,7 @@
   font-size: 18px;
   margin: 0 6px;
 
-  @media #{$bp-below-mobile} {
+  @media #{$bp-below-tablet} {
     content: "\226A";
     transform: rotate(90deg);
     transition: transform 0.25s ease-in;
@@ -458,6 +459,30 @@
   }
 }
 
+/* These styles are for the mobile view of the events page */
+
+@media #{$bp-below-tablet} {
+  .hacknights--header-container {
+    padding: 2rem 2rem 2rem 2rem;
+  }
+
+  //This hides the fullscreen positioned video for mobile
+  .mobile--hide-video {
+    display:none;
+  }
+
+  .hacknights--head-content {
+    margin: 60px 0 0 0;
+    text-align: initial;
+  }
+}
+//This hides the mobile positioned video on displays larger than mobile
+@media #{$bp-tablet-up} {
+  .fullscreen--hide-video {
+    display:none;
+  }
+}
+
 /* The below styles were moved from _hack-nights.scss, which has been deleted along with it's page namesake. 
     They have been saved because they are still being used in other places on the site. */
     .section-hack-nights {
diff --git a/events.html b/events.html
index 63fce64a8d..a2d757fbe1 100644
--- a/events.html
+++ b/events.html
@@ -15,21 +15,34 @@ <h2 class="header-desc">
           toward using the web as a platform for local government and community
           service.
         </h2>
+        <!--This is hidden when full screen and shown when mobile-->
+        <div class="fullscreen--hide-video" style="width: 100%">
+          <div style="position: relative; height: 0; padding-bottom: 56.25%">
+            <iframe
+              class="video-size"
+              src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
+              width="854":w3
+              height="480"
+              frameborder="0"
+              scrolling="no"
+              allowfullscreen
+            ></iframe>
+          </div>
+        </div>
 
-        <p id="head-content" class="hacknights--head-content">
+        <div id="head-content" class="hacknights--head-content">
           To learn more, watch the
           <a href="https://www.ted.com/talks/jennifer_pahlka_coding_a_better_government" target="_blank">Ted Talk</a>
           by Code for America founder, Jennifer Pahlka, on maintaining a better government through code.
-        </p>
+        </div>
       </div>
 
-
-      <div style="width: 100%">
+      <div class="mobile--hide-video" style="width: 100%">
         <div style="position: relative; height: 0; padding-bottom: 56.25%">
           <iframe
             class="video-size"
             src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
-            width="854"
+            width="854":w3
             height="480"
             frameborder="0"
             scrolling="no"

From 2cb44015bd19ebb121a4ea9443a182758adde6f4 Mon Sep 17 00:00:00 2001
From: David Rubinstein <david@grubbylogic.com>
Date: Tue, 6 Oct 2020 17:03:21 -0700
Subject: [PATCH 2/5] PR changes

---
 _sass/components/_events.scss | 22 +++++++---------------
 events.html                   | 10 +++++-----
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/_sass/components/_events.scss b/_sass/components/_events.scss
index ab544b1f69..2c62f7be94 100644
--- a/_sass/components/_events.scss
+++ b/_sass/components/_events.scss
@@ -22,21 +22,18 @@
   font-weight: 530;
   font-size: 25px;
   line-height: 29px;
-  margin: 2% 0 0% 5%;
+  margin: 2% 0 20px 5%;
 
   @media #{$bp-below-tablet} {
     font-size: 16px;
     line-height: 19px;
-    margin: 0;
+    margin-bottom: 20px;
   }
 }
 
 .show-desc {
-  // margin: 15px 44px;
   margin-left: 43%;
   @media #{$bp-below-tablet} {
-    // display: flex;
-    // flex-direction: column;
     margin: 74px 0px;
     font-size: 13px;
     line-height: 15px;
@@ -66,14 +63,13 @@
 #head-content::before {
   content: "\226A";
   float: left;
-  // transform: rotate(-45deg);
   transition: transform 0.25s ease-in;
   color: #000000;
   font-weight: normal;
   font-size: 18px;
   margin: 0 6px;
 
-  @media #{$bp-below-tablet} {
+  @media #{$bp-below-desktop} {
     content: "\226A";
     transform: rotate(90deg);
     transition: transform 0.25s ease-in;
@@ -128,7 +124,6 @@
     top: 0;
     width: 325px;
     height: 215px;
-    margin-top: 22px;
   }
 }
 
@@ -184,7 +179,6 @@
   align-content: center;
 
   @media #{$bp-below-tablet} {
-    // margin: 25px 0;
     flex-direction: column;
   }
 }
@@ -233,7 +227,6 @@
   height: fit-content;
 
   @media #{$bp-below-tablet} {
-    // max-width: 335px;
     padding: 16px 16px;
   }
 }
@@ -363,7 +356,6 @@
   }
 }
 .active::after {
-  // display: none;
   @media #{$bp-below-tablet} {
     content: "\221F";
     transform: rotate(135deg);
@@ -461,7 +453,7 @@
 
 /* These styles are for the mobile view of the events page */
 
-@media #{$bp-below-tablet} {
+@media #{$bp-below-desktop} {
   .hacknights--header-container {
     padding: 2rem 2rem 2rem 2rem;
   }
@@ -472,12 +464,12 @@
   }
 
   .hacknights--head-content {
-    margin: 60px 0 0 0;
-    text-align: initial;
+    margin: 20px 0 0 0;
   }
 }
+
 //This hides the mobile positioned video on displays larger than mobile
-@media #{$bp-tablet-up} {
+@media #{$bp-desktop-up} {
   .fullscreen--hide-video {
     display:none;
   }
diff --git a/events.html b/events.html
index a2d757fbe1..c1db994286 100644
--- a/events.html
+++ b/events.html
@@ -15,9 +15,9 @@ <h2 class="header-desc">
           toward using the web as a platform for local government and community
           service.
         </h2>
-        <!--This is hidden when full screen and shown when mobile-->
-        <div class="fullscreen--hide-video" style="width: 100%">
-          <div style="position: relative; height: 0; padding-bottom: 56.25%">
+        <!--This is hidden when full screen and shown when mobile and tablet-->
+        <div class="fullscreen--hide-video">
+          <div>
             <iframe
               class="video-size"
               src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
@@ -37,8 +37,8 @@ <h2 class="header-desc">
         </div>
       </div>
 
-      <div class="mobile--hide-video" style="width: 100%">
-        <div style="position: relative; height: 0; padding-bottom: 56.25%">
+      <div class="mobile--hide-video">
+        <div class=".events-video_usedToBeInLine">
           <iframe
             class="video-size"
             src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"

From 0bc7ea27d64204b55bbae50b5bdd6d02658f2396 Mon Sep 17 00:00:00 2001
From: David Rubinstein <david@grubbylogic.com>
Date: Tue, 6 Oct 2020 20:10:59 -0700
Subject: [PATCH 3/5] Removed :w3

---
 events.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/events.html b/events.html
index c1db994286..44e63e1b09 100644
--- a/events.html
+++ b/events.html
@@ -21,7 +21,7 @@ <h2 class="header-desc">
             <iframe
               class="video-size"
               src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
-              width="854":w3
+              width="854"
               height="480"
               frameborder="0"
               scrolling="no"
@@ -42,7 +42,7 @@ <h2 class="header-desc">
           <iframe
             class="video-size"
             src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
-            width="854":w3
+            width="854"
             height="480"
             frameborder="0"
             scrolling="no"

From 5ced16c3af1cb7ae9ef37bc1e72e98c94f5935f7 Mon Sep 17 00:00:00 2001
From: Kian Badie <kianbadie@gmail.com>
Date: Thu, 8 Oct 2020 15:16:40 -0700
Subject: [PATCH 4/5] Add classes for old inline styles

---
 _sass/components/_events.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/_sass/components/_events.scss b/_sass/components/_events.scss
index 2c62f7be94..5797e6117f 100644
--- a/_sass/components/_events.scss
+++ b/_sass/components/_events.scss
@@ -475,6 +475,16 @@
   }
 }
 
+.fullscreen-video {
+  width: 100%;
+}
+
+.events-video-fullscreen-container {
+  position: relative; 
+  height: 0; 
+  padding-bottom: 56.25%;
+}
+
 /* The below styles were moved from _hack-nights.scss, which has been deleted along with it's page namesake. 
     They have been saved because they are still being used in other places on the site. */
     .section-hack-nights {
@@ -484,4 +494,4 @@
 
     .btn {
       margin: 0 20px 20px 0;
-    }
\ No newline at end of file
+    }

From 61bcc9ca375447cd8b31d6f6751af6995fe41e9a Mon Sep 17 00:00:00 2001
From: Kian Badie <kianbadie@gmail.com>
Date: Thu, 8 Oct 2020 15:19:53 -0700
Subject: [PATCH 5/5] Cahnge div tag back to p tag and add classes where inline
 styles used to be.

---
 events.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/events.html b/events.html
index 44e63e1b09..1d067af97f 100644
--- a/events.html
+++ b/events.html
@@ -30,15 +30,15 @@ <h2 class="header-desc">
           </div>
         </div>
 
-        <div id="head-content" class="hacknights--head-content">
+        <p id="head-content" class="hacknights--head-content">
           To learn more, watch the
           <a href="https://www.ted.com/talks/jennifer_pahlka_coding_a_better_government" target="_blank">Ted Talk</a>
           by Code for America founder, Jennifer Pahlka, on maintaining a better government through code.
-        </div>
+        </p>
       </div>
 
-      <div class="mobile--hide-video">
-        <div class=".events-video_usedToBeInLine">
+      <div class="mobile--hide-video fullscreen-video">
+        <div class="events-video-fullscreen-container">
           <iframe
             class="video-size"
             src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"