NowAndNext styling

app/timetable/nownext/level-indicator.tsx

@@ -4,9 +4,9 @@ const LevelIndicator = () => {
 
   const publicLevels = ["advanced",  "intermediate",  "improver",  "beginner", "all"]
 
-  return <div className="grow flex justify-stretch my-3 text-black">
+  return <div className="grow flex items-center justify-stretch my-[0.3vw] text-black">
     {publicLevels.map((levelName)=>{
-      return <div key={levelName} className="flex grow items-center justify-center text-lg font-bold" style={{backgroundColor: levels[levelName].colour}}>{levels[levelName].title}</div>
+      return <div key={levelName} className="flex uppercase grow items-center justify-center text-[1.4vw] py-[1vw] font-bold" style={{backgroundColor: levels[levelName].colour}}>{levels[levelName].title}</div>
     })}
   </div>
 

app/timetable/nownext/now-and-next.tsx

@@ -66,7 +66,7 @@ const NowAndNext = ({classesUnordered,basic}) => {
       : ["ballroom","derby","sefton","hypostyle","terrace"]
 
 
-  return <div className="grid grid-cols-[100px_minmax(400px,_1fr)]">
+  return <div className="grid grid-cols-[8vw_minmax(400px,_1fr)]">
   <div className="">
     {/* <p>Today {todaysSessions.length}</p>
     <p>Not Finished {sessionNotFinishedYet.length}</p>
@@ -85,9 +85,9 @@ const NowAndNext = ({classesUnordered,basic}) => {
       return <Fragment key={timeSlot}>
         {/* <div className={` col-span-${maxNumRooms}`}><h2>{slot}</h2></div> */}
 
-        <div className={`border-t-3 ${timeColor} font-bold`}><span className={`bg-yellow-400 px-3 py-1 rounded-lg relative -top-3 text-black`}>{time}</span></div>
+        <div className={`border-t-[0.3vw] ${timeColor} font-bold`}><span className={`bg-yellow-400 px-[1vw] py-[0.5vw] text-[1.2vw] rounded-[0.6vw] relative -top-[1vw] text-black`}>{time}</span></div>
 
-        <div className={`grid grid-cols-${maxNumRooms}`}>
+        <div className={`grid ${roomsToCol(maxNumRooms)}`}>
         {sessionsToDisplay[timeSlot]['all'] 
           ? <SingleTimeSlot session={sessionsToDisplay[timeSlot]['all']} numberOfSessions={maxNumRooms} />
           : rooms.map((roomName) => {
@@ -103,18 +103,19 @@ const NowAndNext = ({classesUnordered,basic}) => {
 }
 
 const TimeSlot = ({session,numberOfSessions,basic}) => {
-  const titleSize = numberOfSessions == 3 ? "text-4xl" : "text-3xl"
-  const artistSize = numberOfSessions == 3 ? "text-xl" : "text-lg"
-  const infoSize = numberOfSessions == 3 ? "text-lg" : "text-sm"
+  const titleSize = numberOfSessions == 3 ? "text-[2vw]" : "text-[1.6vw]"
+  const artistSize = numberOfSessions == 3 ? "text-[1.6vw]" : "text-[1.4vw]"
+  const infoSize = numberOfSessions == 3 ? "text-[1.3vw]" : "text-[1.1vw]"
   const avatarSize = numberOfSessions == 3 ? "w-[33%]" : "w-[25%]"
-  return <div className={`text-black border-t-3 p-6 ${timeColor} flex gap-3 items-start`} 
+  const padding = numberOfSessions == 3 ? "p-[1.3vw]" : "p-[1vw]"
+  return <div className={`text-black border-t-[0.3vw] ${padding} ${timeColor} flex gap-[1.5vw] items-start`} 
   style={{backgroundColor: levels[session?.level]?.colour}}>
-    {session?.artist?.avatar && !basic ? <img src={session?.artist?.avatar} alt="" className={`${avatarSize} aspect-square rounded-full border-4 border-richblack-500`} /> : null }
+    {session?.artist?.avatar && !basic ? <img src={session?.artist?.avatar} alt="" className={`${avatarSize} aspect-square rounded-full shadow-2xl`} /> : null }
     <div>
       <h1 className={`${titleSize} font-bold leading-none`}>{session?.title}</h1>
       <p className={`${artistSize} leading-none`}>{session?.artist?.name}</p>
-      <div className={`${infoSize} leading-none mt-2`}>
-      <TinaMarkdown content={session?.details}/> {session?.location }
+      <div className={`${infoSize} leading-none mt-[1vw]`}>
+      <TinaMarkdown content={session?.details}/>
       </div>
 
       {/* {JSON.stringify(session,null,2)} */}
@@ -124,17 +125,17 @@ const TimeSlot = ({session,numberOfSessions,basic}) => {
 }
 
 const SingleTimeSlot = ({session,numberOfSessions}) => {
-  const fullWidthColor = session?.level == 'admin' ? 'text-white px-4 py-4 bg-richblack-600 ' : 'text-black px-4 py-6 flex justify-center'
-  return <div className={`${roomsToSpan(numberOfSessions)} text-lg border-t-3 ${timeColor} ${fullWidthColor}`}>
-    <h1 className="text-3xl font-bold">{session?.title}</h1>
+  const fullWidthColor = session?.level == 'admin' ? 'text-white p-[1vw] bg-richblack-600 ' : 'text-black px-[1vw] py-[1vw] flex justify-center'
+  return <div className={`${roomsToSpan(numberOfSessions)} text-[1.4vw] border-t-[0.3vw] ${timeColor} ${fullWidthColor}`}>
+    <h1 className="text-[1.8vw] font-bold">{session?.title}</h1>
     <TinaMarkdown content={session?.details}/>
   </div> 
 }
 
 const RoomHeaders = ({rooms,day,numberOfSessions}) => {
   const gridCss = roomsToCol(numberOfSessions)
   return <div className={`grid ${gridCss}`}>
-    {rooms.map((location)=>{ return <div className="bg-richblack-700 p-4 block text-center text-white text-xl font-bold uppercase col-span-1" key={`${day}-${location}`}>{location}{numberOfSessions}</div>})}
+    {rooms.map((location)=>{ return <div className="bg-richblack-700 p-[1vw] block text-center text-white text-[1.4vw] font-bold uppercase col-span-1" key={`${day}-${location}`}>{location}</div>})}
   </div>
 
 }

app/timetable/nownext/page.tsx

@@ -14,8 +14,8 @@ export default async function NowNextPage() {
   return (
     <Layout rawPageData={classes} cleanLayout={true}>
       <div className="text-white p-12 flex flex-col justify-between h-screen border">
-        <div className="flex pl-[100px] gap-12">
-          <h1 className="text-5xl font-bold uppercase ">Now & Next 
+        <div className="flex pl-[100px] gap-[3vw]">
+          <h1 className="text-[3vw] font-bold uppercase ">Coming Up
             {/* {maxNumRooms} {rooms} */}
           </h1> 
           <LevelIndicator/>

app/timetable/nownext/timetable-footer.tsx

@@ -1,7 +1,7 @@
 const TimetableFooter = () => {
-  return <div className="text-white text-4xl flex gap-6 justify-end items-center">
+  return <div className="text-white text-[2vw] flex gap-[2vw] justify-end items-center">
   <p>merseysidelatinfestival.co.uk/timetable</p>
-  <div className="w-[100px] h-[100px]" style={{backgroundImage: "url('https://kissapi-qrcode.vercel.app/api/qrcode?cht-qr&chs=200x200&chl=https%3A%2F%2Fmerseysidelatinfestival.co.uk%2Ftimetable')", backgroundPosition: "50% 50%", backgroundSize: "115px 115px"}}></div>
+  <div className="w-[6vw] h-[6vw]" style={{backgroundImage: "url('https://kissapi-qrcode.vercel.app/api/qrcode?cht-qr&chs=200x200&chl=https%3A%2F%2Fmerseysidelatinfestival.co.uk%2Ftimetable')", backgroundPosition: "50% 50%", backgroundSize: "6.5vw 6.6vw"}}></div>
 </div>
 }
 export default TimetableFooter