alligned styleing w/@blt950

Author: bjerrecs

src/components/Announcements.tsx

@@ -46,14 +46,14 @@ const Annoucements = () => {
           <a href={'https://forum.vatsim-scandinavia.org/d/'+post.slug} target="_blank">
               <div className="flex">
                   <div className="w-[90%]">
-                      <div className="font-semibold text-lg text-secondary dark:text-white">
+                      <div className="font-semibold text-xl text-secondary dark:text-white">
                           {post.title}
                       </div>
                       <div className="text-sm line-clamp-2" dangerouslySetInnerHTML={{__html: post.content}}>
 
                       </div>
                   </div>
-                  <div className="text-grey text-right text-md dark:text-white font-bold w-[10%]">
+                  <div className="text-grey text-right text-md dark:text-gray-300 font-bold w-[10%]">
                       {((new Date(post.created).toLocaleDateString('default', { day: "2-digit",month: 'short' })).toUpperCase())}
                   </div>
               </div>

src/components/Bookings.astro

@@ -1,6 +1,6 @@
 ---
 import BookingsComponent from './BookingComponentv3.jsx'
 ---
-<div class="h-[583px] overflow-y-scroll">
+<div class="h-[513px] overflow-y-scroll">
     <BookingsComponent client:visible/>
 </div>

src/components/Events.jsx

@@ -41,29 +41,27 @@ const Events = () => {
                         <a target='_blank'  href={item.link} className='h-fit aspect-video'>
                             <img src={item.image} className={`w-full md:w-96 h-fit aspect-video rounded-sm absolute'}`} />
                         </a>
-                        <div>
-                            <h2 className='font-bold text-2xl'>{item.title}</h2>
-                            <hr />
-                            <p className='text-gray-800 font-medium'>{events.length != 0 ? dateConverter(item.start_date, item.end_date)  : ""}</p>
+                        <div className='flex flex-col justify-between'>
+                            <div className='w-fit'>
+                            <h2 className='font-semibold text-xl text-secondary dark:text-white'>{item.title}</h2>
+                            <p className='text-grey font-bold pb-4 dark:text-gray-300'>{events.length != 0 ? dateConverter(item.start_date, item.end_date)  : ""}</p>
                             <p className={`line-clamp-6 mb-1`}>{item.short_description}</p>
                             <a href={item.link} class={`bg-snow p-3 text-center text-black dark:text-white hover:brightness-[95%] d-block inline-block mt-2 text-sm rounded-sm`} target='_blank'>
                                 Read more
                             </a>
+                            </div>
+
                         </div>
                     </div>
                     : 
                     ""
                     }
                 </>
             ))}
-            <div className='flex gap-4 overflow-hidden overflow-x-scroll'>
-                {events.slice(2,6).map((item, index) => (
-                    <a key={index} className='flex flex-col' target='_blank'  href={item.link}>
-                            <img src={item.image} className={`w-64 h-fit aspect-video rounded-sm absolute'}`} />
-                        <div>
-                            <h2 className='font-bold text-2xl'>{item.title}</h2>
-                            <p className='text-gray-800 font-medium'>{events.length != 0 ? dateConverter(item.start_date, item.end_date)  : ""}</p>
-                        </div>
+            <div className='flex overflow-hidden overflow-x-scroll'>
+                {events.slice(2,9).map((item, index) => (
+                    <a key={index} className='flex flex-col rounded pr-1 pb-1 pt-1' target='_blank'  href={item.link}>
+                        <img src={item.image} className={`w-64 h-fit aspect-video rounded-sm absolute'}`} />
                     </a>
                 ))}
             </div>