Styling unification for homepage sections.

Author: nikoshell

astro.config.mjs

@@ -24,7 +24,13 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        $: path.resolve(__dirname, "./src"),
+        "@components": path.resolve("./src/components"),
+        "@sections": path.resolve("./src/components/sections"),
+        "@layouts": path.resolve("./src/layouts"),
+        "@ui": path.resolve("./src/components/ui"),
+        "@assets": path.resolve("./src/assets"),
+        "@i18n": path.resolve("./src/i18n"),
+        "@src": path.resolve("./src"),
       },
     },
   },

src/components/card/card.astro

@@ -17,20 +17,20 @@ const { title, subtitle, url, image } = Astro.props;
   class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
 >
   <a href={url} class="block">
-    <div class="relative w-full mb-4">
+    <div class="relative w-full">
       <Image
         src={image}
         width={600}
         height={375}
         alt=""
-        class="rounded-xl aspect-[3/2] w-full"
+        class="not-prose rounded-xl aspect-[3/2] w-full"
         loading="lazy"
       />
     </div>
   </a>
   <div class="flex items-center flex-col flex-grow mb-2">
     <a href={url} class="block hover:underline">
-      <h3 class="text-2xl text-primary">{title}</h3>
+      <h3 >{title}</h3>
     </a>
     <slot />
   </div>

src/components/keynoters/keynoters.astro

@@ -1,7 +1,7 @@
 ---
 import ButtonLink from "../button-link/button-link.astro";
-import { Title } from "../typography/title";
 import Keynoter from "./keynoter.astro";
+import Headline from "@ui/Headline.astro"
 
 import { getCollection } from "astro:content";
 
@@ -10,7 +10,7 @@ const keynoters = await getCollection("keynoters");
 const placeholders = Math.max(0, 6 - keynoters.length);
 ---
 
-<section class="relative my-12 px-6">
+<section class="prose-xl relative my-12 px-6">
   <svg viewBox="0 0 729 704" class="absolute top-0 left-0 w-full h-full -z-10">
     <g
       stroke="none"
@@ -79,9 +79,7 @@ const placeholders = Math.max(0, 6 - keynoters.length);
     </g>
   </svg>
 
-  <Title className="text-primary">
-    <a href="/keynoters">Keynote Speakers</a>
-  </Title>
+  <Headline id="keynoters" title="Keynote Speakers" />
 
   <ul class="mt-12 mb-24 flex gap-6 flex-wrap">
     {

src/components/sections/prague.astro

@@ -0,0 +1,9 @@
+---
+import Prague from "@components/hero-section/prague.astro";
+import * as venue from "../../data/home/prague.mdx";
+---
+  <div class="mt-2 px-6 pb-40 overflow-visible">
+    <Prague title={venue.frontmatter.title}>
+      <venue.Content />
+    </Prague>
+  </div>

src/components/sections/updates.astro

@@ -0,0 +1,21 @@
+---
+
+import { CardContainer } from "@components/card/card-container";
+import { Title } from "@components/typography/title";
+import DeadlineCard from "@components/deadline-card.astro";
+import Headline from "@ui/Headline.astro"
+import { getCollection } from "astro:content";
+
+let deadlines = await getCollection("deadlines");
+deadlines = deadlines
+  .sort((a, b) => a.slug.localeCompare(b.slug))
+  .reverse()
+  .slice(0, 3);
+
+---
+  <section class="prose-xl m-0 p-0">
+    <Headline id="updates" title="Updates" />
+    <CardContainer>
+      {deadlines.map((deadline) => <DeadlineCard id={deadline.slug} />)}
+    </CardContainer>
+  </section>

src/components/sponsors/sponsors.astro

@@ -3,9 +3,9 @@ import { getCollection } from "astro:content";
 import { Separator } from "../separator/separator";
 import { Fragment } from "react";
 import { Fullbleed } from "../layout/fullbleed";
+import Headline from "@ui/Headline.astro"
 
 import ButtonLink from "../button-link/button-link.astro";
-import { Title } from "../typography/title";
 
 import SponsorTier from "./sponsor-tier.astro";
 
@@ -48,19 +48,17 @@ const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
 
 <Fullbleed className="bg-white py-24 px-6">
   <section class="max-w-4xl lg:max-w-6xl mx-auto mb-16">
+          <Headline id="sponsors" title="Sponsors" />
     <div>
-      <div class="flex gap-6">
-        <div class="max-w-[1000px]">
-          <Title level={2}>Sponsors</Title>
           {
             hasSponsors ? (
-              <p>
+              <p class="text-center">
                 EuroPython wouldn't be such an affordable event without the help
                 of the sponsors. We'd like to thank all of them for their
                 support.
               </p>
             ) : (
-              <p>
+              <p class="text-center">
                 Sponsoring EuroPython guarantees you highly targeted visibility
                 and the opportunity to present yourself and your company to one
                 of the largest and most diverse Python communities in Europe and
@@ -69,10 +67,8 @@ const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
             )
           }
 
-          <div class="mt-4">
+          <div class="mt-4 text-center">
             <ButtonLink url="/sponsor">Become a sponsor</ButtonLink>
-          </div>
-        </div>
       </div>
       {
         topTier && topTier.sponsors.length > 0 && (

src/components/ui/Headline.astro

@@ -0,0 +1,16 @@
+---
+const { as = "h2", id, title, href} = Astro.props;
+const Tag = as;
+const Title = title;
+const isAnchor = !!id;
+const isLink = !!href;
+---
+
+<Tag id={isAnchor ? id : undefined} class={`m-5 py-2 text-center font-bold text-6xl`}>
+  {isAnchor && (
+    <a href={`#${id}`} aria-label={`Jump to ${id}`}>
+      {Title}
+    </a>
+  )}
+  {isLink && <a aria-label="Read more about {Title}" href={href} class="hover:underline">{Title}</a> }
+</Tag>

src/layouts/HomePageLayout.astro

@@ -1,5 +1,4 @@
 ---
-import "../styles/global.css";
 import Header from "../components/header/header.astro";
 import Footer from "../components/footer.astro";
 import BaseHead from "../components/BaseHead.astro";

src/layouts/Layout.astro

@@ -1,5 +1,4 @@
 ---
-import "../styles/global.css";
 import Header from "../components/header/header.astro";
 import Footer from "../components/footer.astro";
 import BaseHead from "../components/BaseHead.astro";

src/pages/index.astro

@@ -1,26 +1,10 @@
 ---
-import { CardContainer } from "../components/card/card-container";
 import Hero from "../components/hero2/hero.astro";
-import HeroWithCTA from "../components/hero-section/hero-with-cta.astro";
-import { Fullbleed } from "../components/layout/fullbleed";
-import Prose from "../components/prose/prose.astro";
-import { Title } from "../components/typography/title";
 import Layout from "../layouts/HomePageLayout.astro";
-import DeadlineCard from "../components/deadline-card.astro";
-import { getCollection } from "astro:content";
-import Accent from "../components/accent/accent.astro";
-import Prague from "../components/hero-section/prague.astro";
 import Sponsors from "../components/sponsors/sponsors.astro";
 import KeynotersComponent from "../components/keynoters/keynoters.astro";
-
-import * as intro from "../data/home/intro.md";
-import * as venue from "../data/home/prague.mdx";
-
-let deadlines = await getCollection("deadlines");
-deadlines = deadlines
-  .sort((a, b) => a.slug.localeCompare(b.slug))
-  .reverse()
-  .slice(0, 3);
+import Updates from "@sections/updates.astro";
+import Prague from "@sections/prague.astro";
 ---
 
 <Layout
@@ -29,16 +13,11 @@ deadlines = deadlines
 >
   <Hero />
 
-  <h2 class="text-7xl text-center m-16">Updates</h2>
-  <CardContainer>
-    {deadlines.map((deadline) => <DeadlineCard id={deadline.slug} />)}
-  </CardContainer>
+  <Updates />
+
+  <KeynotersComponent />
+
+  <Prague />
 
-    <KeynotersComponent />
-  <div class="mt-40 px-6 pb-40 overflow-visible">
-    <Prague title={venue.frontmatter.title}>
-      <venue.Content />
-    </Prague>
-  </div>
   <Sponsors />
 </Layout>