Design tweaks

src/_includes/nav.html

@@ -38,5 +38,5 @@
       </ul>
     </li>
     <li><a href="/news/">News</a></li>
-    <li><a href="{{ site.ticket_link }}" class="button">Buy Tickets</a></li>
+    <li><a href="{{ site.ticket_link }}" class="button bg-mosaic-blue">Buy Tickets</a></li>
   </ul>

src/assets/css/main.css

@@ -82,12 +82,16 @@
 
   .photo-effect::before {
     @apply absolute z-10;
-    @apply block w-full h-full;
+    @apply block w-full h-full rounded;
     content: '';
 
     opacity: 0.4;
     background: linear-gradient(126deg, theme('colors.mosaic-blue') 11.2%, theme('colors.lucky-orange') 69.95%, theme('colors.brick-red') 90.34%);
   }
+
+  .photo-effect img {
+    @apply rounded;
+  }
 }
 
 @layer components {

src/index.html

@@ -24,9 +24,9 @@ <h1 class="mb-4 text-4xl font-extrabold leading-tight lg:text-5xl">
         </p>
 
         <div class="button-group">
-          <a class="button" href="{{ site.ticket_link }}">Buy Tickets</a>
+          <a class="button bg-mosaic-blue" href="{{ site.ticket_link }}">Buy Tickets</a>
           <a
-            class="button bg-mosaic-blue"
+            class="button"
             href="{{ site.hotel_reservation_link }}"
             >Book a Room</a>
 
@@ -48,14 +48,15 @@ <h1 class="mb-4 text-4xl font-extrabold leading-tight lg:text-5xl">
   </div>
 </div>
 
-<div class="text-white bg-black block-container">
+<div class="bg-gray-100 block-container">
   <div class="wrapper">
     <div class="grid-1-2">
-      <section>
-        <h2 class="mb-4 text-3xl font-bold font-heading lg:text-5xl">For Django fans<br/> of all&nbsp;levels</h2>
-        <p class="text-xl lg:text-2xl">
+      <section class="flex flex-col items-start justify-center mb-6 sm:mb-0">
+        <h2 class="mb-4 text-3xl font-bold leading-relaxed font-heading lg:text-5xl">For Django fans<br/> of all&nbsp;levels</h2>
+        <p class="text-xl lg:text-2xl mb-6">
           DjangoCon US has something for everyone, from the person who develops Django applications for a living to the person who just tinkers in their spare time.
         </p>
+        <a class="button" href="{{ site.ticket_link }}">About DjangoCon US</a>
       </section>
       <div>
         <ul class="space-y-10">
@@ -94,19 +95,19 @@ <h2 class="mb-4 text-3xl font-bold font-heading lg:text-5xl">For Django fans<br/
     <h2 class="mb-8 text-2xl font-bold text-center font-heading lg:text-5xl max-w-[20ch] mx-auto">A friendly conference for a friendly community</h2>
 
     <div class="grid gap-8 lg:grid-cols-3 lg:gap-16">
-      <section class="flex flex-col gap-4 p-6 bg-white border-2 rounded">
+      <section class="flex flex-col gap-4 p-6 bg-white border-4 rounded">
         <img src="/assets/img/theme/icons/People.svg" alt="Two people. One person is standing slightly in front of the other." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading">Code of Conduct</h3>
         <p class="lg:text-lg">Participants are expected to be respectful to each other. For details on our expectations, and who to contact if you need assistance, see our <strong><a href="/about/conduct/" class="link">Code of Conduct</a></strong>.</p>
       </section>
 
-      <section class="flex flex-col gap-4 p-6 bg-white border-2 rounded">
+      <section class="flex flex-col gap-4 p-6 bg-white border-4 rounded">
         <img src="/assets/img/theme/icons/Document.svg" alt="An official document with words written on it." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading">COVID-19</h3>
         <p class="lg:text-lg">Read our <strong><a href="/about/public-health" class="link">COVID-19 Policy</a></strong>, including mask and testing requirements.</p>
       </section>
 
-      <section class="flex flex-col gap-4 p-6 bg-white border-2 rounded">
+      <section class="flex flex-col gap-4 p-6 bg-white border-4 rounded">
         <img src="/assets/img/theme/icons/Heart.svg" alt="A heart." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading">Accessiblity</h3>
         <p class="lg:text-lg">We offer a range of accommodations, including live captioning, thoughtful lunch options, and a dedicated accessibility team to ensure everyone can fully participate.</p>
@@ -124,9 +125,9 @@ <h3 class="text-lg font-bold lg:text-2xl font-heading">Accessiblity</h3>
         {% endcomment %}
         <span class="photo-effect">
           <img
-            src="/assets/img/crowd-2.jpg"
+            src="/assets/img/noah.jpg"
             loading="lazy"
-            alt="DjangoCon US attendees smiling for a picture.">
+            alt="Noah Alorwu smiling for a picture.">
         </span>
       </figure>
       <section>

tailwind.config.js

@@ -21,6 +21,9 @@ module.exports = {
         'social-github': '#7041c0',
         'social-mastodon': '#6364FF',
       },
+      fontSize: {
+        '5xl': ['3rem', 1.1]
+      },
     },
   },
   plugins: [