Update mobile view.

Author: nikoshell

src/components/schedule/day.astro

@@ -432,7 +432,7 @@ const dateText = format(date, "eeee - do MMMM");
 
   .schedule-wrapper
 {
-  min-width: 780px;
+  min-width: 360px;
   width: 100%;
 }
   :global(body) {
@@ -465,7 +465,7 @@ const dateText = format(date, "eeee - do MMMM");
 
   header,
   .time {
-    display: none;
+    /*display: none;*/
   }
 
   :global(.session) {
@@ -490,7 +490,29 @@ const dateText = format(date, "eeee - do MMMM");
     display: none;
   }
 
+
+  .schedule-container.header {
+    display:none;
+  }
+
+  @media screen and (max-width: 799px) {
+    .time {
+      background:transparent;
+    }
+    .time h2 {
+      text-align:center;
+      color:#333332;
+      font-size:2rem;
+    }
+    .room-info {
+      text-align:center;
+    }
+  }
   @media screen and (min-width: 800px) {
+
+  .schedule-container.header {
+    display: inherit;
+  }
     .schedule-container {
       /*overflow-x: auto;*/
       padding-bottom: 2px;
@@ -510,7 +532,7 @@ const dateText = format(date, "eeee - do MMMM");
       position: sticky;
       top: 0;
       background: var(--color-body-background);
-      z-index: 20;
+      z-index: 20;inherit
 
       > div > div {
         padding: 8px;

src/components/schedule/session.astro

@@ -2,6 +2,7 @@
 import { formatInTimeZone } from "date-fns-tz";
 import Speakers from "./speakers.astro";
 import { slugify } from "@utils/content";
+import Icon from "@ui/Icon.astro";
 
 export interface props {
   style: any;
@@ -47,6 +48,16 @@ const hasFooter = true;
     }
     </header>
     -->
+    <header>
+
+        {session.rooms.length === 1 && (
+          <div class="room-info">
+            <span class="sr-only">Room:</span>
+            {session.rooms && session.rooms.join(", ")} ⇢
+          </div>
+        )}
+    </header>
+
 
   <!--   <div class="time">
     <span class="sr-only">Session start:</span>
@@ -65,18 +76,12 @@ const hasFooter = true;
   {
     hasFooter && (
       <footer class:list={{ "has-room": hasRoom, "has-speakers": hasSpeakers }}>
-        {session.rooms.length === 1 && (
-          <div class="room-info">
-            <span class="sr-only">Room:</span>
-            {session.rooms && session.rooms.join(", ")}
-            {hasSpeakers && <span aria-hidden="true"> • </span>}
-          </div>
-        )}
         {session.speakers && (
           <>
             <Speakers speakers={session.speakers} />
           </>
         )}
+
       </footer>
     )
   }
@@ -91,7 +96,7 @@ const hasFooter = true;
 
     border: 1px solid transparent;
     font-weight: bold;
-    display: grid;
+    display: flex;
     flex-direction: column;
     /*background-color: var(--color-body-background);*/
 
@@ -109,15 +114,17 @@ const hasFooter = true;
 
     grid-template-columns: 60px 1fr;
 
-    @media screen and (min-width: 640px) {
-      display: flex;
-    }
+    /*@media screen and (min-width: 640px) {*/
+    /*  display: flex;*/
+    /*}*/
   }
 
   .room-info {
-    display: inline;
+    display: block;
+    text-align:center;
 
-    @media screen and (min-width: 640px) {
+
+    @media screen and (min-width: 800px) {
       display: none;
     }
   }
@@ -141,7 +148,15 @@ const hasFooter = true;
     z-index: 2;
   }
 
-  @media screen and (max-width: 639px) {
+  @media screen and (max-width: 800px) {
+    header {
+      /*text-align:right;*/
+    }
+    .session h2{
+      padding:0 8px ;
+      margin:0;
+    }
+
     .session > .time {
       grid-area: time;
       padding-block: 8px;
@@ -159,7 +174,7 @@ const hasFooter = true;
 
     .session > h2 {
       grid-area: title;
-      padding-block: 8px;
+      padding-block: 0;
     }
 
     .session > footer {
@@ -214,24 +229,24 @@ const hasFooter = true;
   }
 
   header {
-    background-color: var(--color-primary);
+    /*background-color: var(--color-primary);*/
     /*border-bottom: 2px solid var(--color-primary);*/
-    color: black;
+    /*background-color: #e6c8ac;*/
     text-transform: capitalize;
     font-size: 0.8em;
     font-weight: 500;
   }
 
   .beginner header {
-    background-color: var(--color-session-beginner);
+    /*background-color: var(--color-session-beginner);*/
   }
 
   .intermediate header {
-    background-color: var(--color-session-intermediate);
+    /*background-color: var(--color-session-intermediate);*/
   }
 
   .advanced header {
-    background-color: var(--color-session-advanced);
+    /*background-color: var(--color-session-advanced);*/
   }
 
   .poster header {

src/components/ui/Headline.astro

@@ -8,7 +8,7 @@ const isCenter = center ? "text-center" : "";
 
 ---
 
-<Tag id={isAnchor ? id : undefined} class={`${isCenter} $m-5 py-2 font-bold max-w-[90vw]`}>
+<Tag id={isAnchor ? id : undefined} class={`${isCenter} mx-5 py-2 font-bold max-w-[90vw]`}>
   {isAnchor && (
     <a href={`#${id}`} aria-label={`Jump to ${id}`}>
       {Title}

src/layouts/Layout.astro

@@ -22,12 +22,7 @@ const { title, description } = Astro.props;
 <BaseLayout title={title} description={description}>
     <Fragment slot="head">
     <BaseHead title={title} description={description} />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-    <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap" rel="stylesheet">
-
-    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap" rel="stylesheet">
+    <slot name="head" />
     </Fragment>
 
   <body>

src/layouts/ScheduleLayout.astro

@@ -8,13 +8,15 @@ export interface Props {
 
 const { title, description } = Astro.props;
 ---
-
 <Layout title="Schedule" description="Schedule" >
+  <Fragment slot="head">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=block" rel="stylesheet">
+  </Fragment>
   <div class="layout-wrapper2">
   <slot />
   </div>
-
-  </Layout>
+</Layout>
 
 <style is:global>
 .layout-wrapper2 {