Minor css fixes to the conf page (#1387)

Author: beerose

src/components/Conf/Footer/index.tsx

@@ -24,19 +24,19 @@ const links = [
 const FooterConf = () => {
   return (
     <footer className="text-gray-600 bg-[#0E031C]">
-      <div className="container py-24 flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
-        <div className="w-64 shrink-0 md:mx-0 mx-auto text-center md:text-left">
+      <div className="container px-5 md:py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+        <div className="w-64 shrink-0 md:mx-0 text-left">
           <a
             href="/conf/"
-            className="flex font-medium items-center md:justify-start justify-center text-gray-900"
+            className="flex font-medium md:items-center justify-start text-gray-900"
           >
             <img src="/img/conf/graphql-conf-logo.svg" className="w-[200px]" />
           </a>
         </div>
-        <div className="grow flex flex-wrap lg:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
+        <div className="grow flex flex-wrap justify-between lg:pl-20 -mb-10 md:mt-0 mt-10 text-left">
           {links.map((link, i) => (
-            <div key={i} className="md:w-1/3 w-full px-4">
-              <div className="list-none mb-20">
+            <div key={i} className="md:w-1/3 md:px-4">
+              <div className="list-none mb-10 md:mb-20">
                 {link.map((link, i) => (
                   <li key={i}>
                     <a
@@ -53,7 +53,7 @@ const FooterConf = () => {
         </div>
       </div>
       <div>
-        <div className="container py-4 flex flex-wrap flex-col sm:flex-row">
+        <div className="container mt-5 sm:mt-0 py-4 flex flex-wrap flex-col sm:flex-row">
           <p className="text-white text-sm text-center sm:text-left">
             Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
             All rights reserved.

src/components/Conf/SF/index.tsx

@@ -44,10 +44,16 @@ const SFConf = () => {
       <h1 className="text-4xl text-center mb-5 text-[#0E031C] font-bold pb-6">
         About San Francisco
       </h1>
-      <div className="container flex max-xl:flex-wrap justify-center gap-10 ">
-        {images.map(image => (
-          <div key={image.name} className="max-w-sm w-full">
-            <AspectRatio title={image.name} src={image.src} href={image.link} />
+      <div className="flex flex-wrap w-full justify-center">
+        {images.map((image, i) => (
+          <div key={i} className="w-full lg:w-1/5 mx-5 mb-5">
+            <div className="max-w-sm">
+              <AspectRatio
+                title={image.name}
+                src={image.src}
+                href={image.link}
+              />
+            </div>
           </div>
         ))}
       </div>

src/components/Conf/Schedule/index.tsx

@@ -21,29 +21,31 @@ const Days: Day[] = [
 const ScheduleGlanceConf = () => {
   return (
     <div id="schedule">
-      <div className="bg-[#0E031C] mt-20 mb-6 container">
+      <div className="bg-[#0E031C] w-full mt-10 mb-6">
         <div className="text-center mx-auto text-white">
           <h1 className="text-4xl text-white font-bold mb-8">Schedule</h1>
         </div>
-        <div className="flex max-md:flex-wrap justify-center gap-8 mb-5">
-          {Days.map((day, i) => (
-            <div key={i}>
-              <div className="h-full p-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
-                <div className="p-4">
-                  <p className="text-2xl text-center text-white font-bold mb-2">
-                    {day.date}
-                  </p>
-                  <ul className="list-disc pl-6 marker:text-[#B48EF1]">
-                    {day.list.map((item, i) => (
-                      <li key={i} className="text-white mb-2">
-                        {item}
-                      </li>
-                    ))}
-                  </ul>
+        <div className="max-w-[80ch] mx-auto">
+          <div className="mx-auto w-full grid grid-rows-1 md:grid-cols-3 justify-center gap-8 mb-5">
+            {Days.map((day, i) => (
+              <div key={i}>
+                <div className="h-full mx-auto w-64 p-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
+                  <div className="p-4">
+                    <p className="text-2xl text-center text-white font-bold mb-2">
+                      {day.date}
+                    </p>
+                    <ul className="list-disc pl-6 marker:text-[#B48EF1]">
+                      {day.list.map((item, i) => (
+                        <li key={i} className="text-white mb-2">
+                          {item}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </div>

src/components/Conf/Venue/index.tsx

@@ -5,12 +5,12 @@ import { ReactComponent as ParkingIcon } from "../../../../static/img/conf/parki
 
 const VenueConf = () => {
   return (
-    <div id="location" className="container">
+    <div id="location">
       <h1 className="text-4xl text-white font-bold mt-8 mb-6 mx-auto text-center">
         Location &amp; Venue
       </h1>
-      <div className="flex flex-wrap">
-        <div className="p-4 sm:w-full grid grid-rows-1 md:grid-cols-2 gap-20">
+      <div className="container flex flex-wrap">
+        <div className="sm:w-full grid grid-rows-1 md:grid-cols-2 gap-20">
           <div>
             <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
               Hotel Information