clean up details page, enforce font sizes for header elements universally

src/components/courses/CoursesCarousel.js

@@ -9,12 +9,12 @@ import { formatTimestampToHowLongAgo } from '@/utils/time';
 
 const responsiveOptions = [
     {
-        breakpoint: '1199px',
+        breakpoint: '3000px',
         numVisible: 3,
         numScroll: 1
     },
     {
-        breakpoint: '767px',
+        breakpoint: '1462px',
         numVisible: 2,
         numScroll: 1
     },
@@ -25,6 +25,7 @@ const responsiveOptions = [
     }
 ];
 
+
 export default function CoursesCarousel() {
     const courses = useSelector((state) => state.events.courses);
     const [processedCourses, setProcessedCourses] = useState([]);
@@ -107,7 +108,7 @@ export default function CoursesCarousel() {
 
     return (
         <>
-            <h1 className="text-2xl ml-[6%] mt-4">courses</h1>
+            <h2 className="ml-[6%] mt-4">courses</h2>
             <Carousel value={processedCourses} numVisible={2} itemTemplate={courseTemplate} responsiveOptions={responsiveOptions} />
         </>
     );

src/components/navbar/Navbar.js

@@ -92,7 +92,7 @@ const Navbar = () => {
                 <Menubar
                     start={start}
                     end={UserAvatar}
-                    className='px-[2%] py-[2%] bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw] max-tab:px-[5%] max-mob:px-[5%]'
+                    className='px-[2%] py-8 bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw] max-tab:px-[5%] max-mob:px-[5%]'
                     style={{ height: navbarHeight }}
                 />
             </div>

src/components/workshops/WorkshopsCarousel.js

@@ -9,12 +9,12 @@ import { formatTimestampToHowLongAgo } from '@/utils/time';
 
 const responsiveOptions = [
     {
-        breakpoint: '1199px',
+        breakpoint: '3000px',
         numVisible: 3,
         numScroll: 1
     },
     {
-        breakpoint: '767px',
+        breakpoint: '1462px',
         numVisible: 2,
         numScroll: 1
     },
@@ -105,7 +105,7 @@ export default function WorkshopsCarousel() {
 
     return (
         <>
-            <h1 className="text-2xl ml-[6%] mt-4">workshops</h1>
+            <h2 className="ml-[6%] mt-4">workshops</h2>
             <Carousel value={processedWorkshops} numVisible={2} itemTemplate={workshopTemplate} responsiveOptions={responsiveOptions} />
         </>
     );

src/pages/details/[slug].js

@@ -8,6 +8,20 @@ import { Tag } from 'primereact/tag';
 import Image from 'next/image';
 import 'primeicons/primeicons.css';
 
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+const MarkdownContent = ({ content }) => {
+    console.log('content:', content);
+    return (
+        <div>
+            <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                {content}
+            </ReactMarkdown>
+        </div>
+    );
+};
+
 export default function Details() {
     const [event, setEvent] = useState(null);
     const [processedEvent, setProcessedEvent] = useState({});
@@ -55,10 +69,12 @@ export default function Details() {
     }, [event]);
 
     return (
-        <div className='w-[80vw] flex flex-row justify-between mx-auto mt-4'>
+        <div className='w-full px-24 pt-12 mx-auto mt-4'>
+            <div className='w-full flex flex-row justify-between'>
                 <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75' onClick={() => router.push('/')} />
-            <div className='flex flex-col items-start'>
+                <div className='w-[75vw] mx-auto flex flex-row items-start justify-between'>
-                <div className='flex flex-row justify-start w-full'>
+                    <div className='flex flex-col items-start max-w-[45vw]'>
+                        <div className='pt-2 flex flex-row justify-start w-full'>
                             <Tag className='mr-2' value="Primary"></Tag>
                             <Tag className='mr-2' severity="success" value="Success"></Tag>
                             <Tag className='mr-2' severity="info" value="Info"></Tag>
@@ -110,5 +126,12 @@ export default function Details() {
                         )}
                     </div>
                 </div>
+            </div>
+            <div className='w-[75vw] mx-auto mt-32 p-12 border-t-2 border-gray-300'>
+            {
+                    processedEvent?.content && <MarkdownContent content={processedEvent.content} />
+                }
+            </div>
+        </div>
     );
 }

src/styles/globals.css

@@ -10,9 +10,20 @@
 }
 
 body {
-  font-family: 'Blinker', sans-serif;
+  @apply font-blinker;
 }
 
+h1 {
+  @apply text-h1 font-blinker;
+}
+
+h2 {
+  @apply text-h2 font-blinker;
+}
+
+h3 {
+  @apply text-h3 font-blinker;
+}
 
 .p-tabmenu .p-tabmenu-nav {
   background-color: transparent !important;

tailwind.config.js

@@ -18,6 +18,11 @@ module.exports = {
       fontFamily: {
         'blinker': ['Blinker', 'sans-serif'],
       },
+      fontSize: {
+        'h1': ['2.25rem', { lineHeight: '2.5rem' }],
+        'h2': ['1.5rem', { lineHeight: '2rem' }],
+        'h3': ['1.25rem', { lineHeight: '1.75rem' }],
+      },
     },
   },
   plugins: [],