feat: Jamstack Conf overlays

src/components/boop-drop.js

@@ -27,7 +27,7 @@ export function BoopDrop() {
     <canvas
       ref={boopRef}
       style={{
-        height: 570,
+        height: 580,
         left: 0,
         position: 'absolute',
         top: 0,

src/components/socket-studio-overlays.js

@@ -17,7 +17,7 @@ export function SocketStudioOverlays() {
   return (
     <Fragment>
       <Helmet>
-        <link rel="stylesheet" href="/styles/socket-studio-overlays.css" />
+        <link rel="stylesheet" href="/styles/socket-studio-overlays.css?v2" />
       </Helmet>
       <div className="socket-studio-overlays">
         <Submarine />

src/hooks/use-current-lwj-episode.js

@@ -10,10 +10,10 @@ export function useCurrentLWJEpisode() {
       if (!loading || episode) return;
 
       // if an episode is in progress, we still want to show it.
-      const nowMinus3Hours = new Date().getTime() - 180 * 60 * 1000;
+      const nowMinus3Hours = new Date().getTime() - 70 * 60 * 1000;
       const episode = await fetch('https://www.learnwithjason.dev/api/schedule')
         .then((res) => res.json())
-        .then((episodes) => episodes[0])
+        .then((episodes) => episodes[2])
         .catch((err) => {
           setError(err);
           setLoading(false);

src/pages/index.js

@@ -24,15 +24,15 @@ export default () => {
       </Helmet>
       <SocketStudioProvider client={client}>
         <main className="overlay">
-          <div className="top-bar" />
+          {/* <div className="top-bar" /> */}
           <Fragment>
             {isBrowser ? (
               <Router>
                 <Content />
                 <SocketStudioOverlays />
               </Router>
             ) : null}
-            <div className="bottom-bar" />
+            {/* <div className="bottom-bar" /> */}
             <LowerThird />
           </Fragment>
         </main>

static/styles/content.css

@@ -3,6 +3,7 @@
   background-size: cover;
   display: grid;
   grid-template-columns: 1fr 280px;
+  height: calc(100vh - 140px);
 }
 
 .videos {
@@ -56,9 +57,10 @@
 }
 
 .content.interview {
-  background-image: url('https://res.cloudinary.com/jlengstorf/image/upload/f_auto,q_auto/v1596392767/lwj/interview-overlay.webp');
-  grid-template-columns: 1fr 480px 80px 480px 1fr;
-  grid-template-rows: 56px 462px 1fr;
+  background-image: url('https://res.cloudinary.com/jlengstorf/image/upload/v1635121778/f_auto,q_auto/lwj/jamstack-conf-2021-interview.webp');
+  grid-template-columns: 120px 481px 76px 482px 1fr;
+  grid-template-rows: 69px 462px 1fr;
+  background-size: 1280px;
 }
 
 .content.connecting-the-dots {
@@ -98,5 +100,5 @@
 .connecting-the-dots h2::after,
 .interview h2::after,
 .monologue h2::after {
-  background: transparent;
+  height: 18px;
 }

static/styles/global.css

@@ -5,7 +5,7 @@
   --blue: #a6fffa;
   --light-gray: #e0e0e0;
   --dark-gray: #1a2a3b;
-  --black: #011627;
+  --black: #161a2b;
   --black-transparent: #01162700;
   --font-family: mallory, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',

static/styles/lower-third.css

@@ -4,7 +4,8 @@
   background: var(--black);
   display: grid;
   grid-template-columns: 280px 1fr 380px;
-  position: relative;
+  position: absolute;
+  bottom: 0;
   z-index: 100;
 }
 

static/styles/socket-studio-overlays.css

@@ -1,5 +1,5 @@
 .socket-studio-overlays {
-  bottom: 150px;
+  bottom: 140px;
   left: 0;
   position: absolute;
   right: 0;
@@ -300,7 +300,7 @@
   width: 100px;
   heigth: auto;
   top: calc(100% - 30px);
-  left: calc(100% - 100px);
+  left: 91%;
   transition: all 300ms ease-in-out;
-  transform: scaleX(1);
+  transform: scaleX(-1);
 }