Unify headings and links style.

nikoshell · nikoshell · commit d23b97b75feb · 2025-05-05T10:57:49.000+02:00
diff --git a/src/components/button-link/button-link.astro b/src/components/button-link/button-link.astro
@@ -30,10 +30,4 @@ const resolvedIsExternal =
   href={url}
 >
   <slot />
-
-  {
-    resolvedIsExternal && (
-      <span class="inline-block ml-1 font-system text-lg leading-4">↗</span>
-    )
-  }
 </a>
diff --git a/src/components/keynoters/keynoters.astro b/src/components/keynoters/keynoters.astro
@@ -11,7 +11,6 @@ const keynoters = await getCollection("keynoters");
 const placeholders = Math.max(0, 5 - keynoters.length);
 ---
 <Section>
-<div class="prose-xl relative my-12 px-6 z-10">
   <svg viewBox="0 0 729 704" class="absolute top-0 left-0 w-full h-full -z-10">
     <g
       stroke="none"
@@ -82,7 +81,7 @@ const placeholders = Math.max(0, 5 - keynoters.length);
 
   <Headline id="keynoters" title="Keynote Speakers"  center=true />
 
-  <ul class="p-0 mt-12 flex gap-6 flex-wrap justify-center">
+  <ul class="p-0 flex gap-6 flex-wrap justify-center">
     {
       keynoters
         .sort((a, b) => a.data.order - b.data.order)
@@ -115,17 +114,13 @@ const placeholders = Math.max(0, 5 - keynoters.length);
     }
   </ul>
 
-  <div class="flex items-center flex-col pr-6">
+  <div class="flex items-center flex-col pt-6">
     <div class="text-center">
-      <h3 class="font-bold text-3xl mb-4">
+      <h3 class="font-bold text-3xl m-4 ">
         <span class="text-body-light inline-block mr-2">#</span>
         See other sessions
       </h3>
       <Button url="/sessions">See sessions preview</Button>
     </div>
   </div>
-</div>
 </Section>
-<style>
-  .fill-hero-primary {}
-</style>
diff --git a/src/components/sections/prague.astro b/src/components/sections/prague.astro
@@ -8,9 +8,7 @@ import Section from "@ui/Section.astro"
 ---
 
 <Section>
-<div class="mt-12">
   <Headline id="prague" title="Prague & Venue" center=true />
-</div>
 
 <article class="lg:grid gap-12 grid-cols-2 items-center">
   <div class="relative hidden lg:block">
diff --git a/src/components/sessions/list-sessions.astro b/src/components/sessions/list-sessions.astro
@@ -29,7 +29,7 @@ type Session = {
         data-type={session.data.session_type}
         data-level={session.data.level}
       >
-        <Prose>
+        <Prose full>
           <h4>
             <a href={`/session/${session.id}`} class="underline">
               {session.data.title}
diff --git a/src/components/sponsors/sponsors.astro b/src/components/sponsors/sponsors.astro
@@ -48,8 +48,6 @@ const sponsorTiers = tiers
 const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
 ---
 <Section variant="secondary">
-<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 & Partners" center=true />
     <div>
           {
@@ -89,6 +87,4 @@ const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
         </Fragment>
       ))
     }
-  </section>
-</Fullbleed>
 </Section>
diff --git a/src/components/ui/Headline.astro b/src/components/ui/Headline.astro
@@ -8,7 +8,7 @@ const isCenter = center ? "text-center" : "";
 
 ---
 
-<Tag id={isAnchor ? id : undefined} class={`${isCenter} mx-5 py-2 font-bold max-w-[90vw]`}>
+<Tag id={isAnchor ? id : undefined} class={`${isCenter} mx-5 py-4 font-bold max-w-[90vw]`}>
   {isAnchor && (
     <a href={`#${id}`} aria-label={`Jump to ${id}`}>
       {Title}
@@ -18,27 +18,70 @@ const isCenter = center ? "text-center" : "";
 </Tag>
 
 <style>
-h1 {
-  font-size: calc(1.9rem + 1.5vw + 0.8vh);
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    font-family: var(--font-display);
+    line-height: 1.25;
 
-h2 {
-  font-size: calc(1.75rem + 1.5vw + 0.8vh);
-}
+    /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
 
-h3 {
-  font-size: calc(1.5rem + 1.2vw + 0.6vh);
-}
+    --min-fs: 1;
+    --max-fs: 1.5;
+    --min-vw: 20;
+    --max-vw: 45;
 
-h4 {
-  font-size: calc(1.25rem + 1vw + 0.4vh);
-}
+    --min-fs-rem: var(--min-fs) * 1rem;
+    --max-fs-rem: var(--max-fs) * 1rem;
+    --min-vw-rem: var(--min-vw) * 1rem;
 
-h5 {
-  font-size: calc(1rem + 0.8vw + 0.3vh);
-}
+    --slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) /
+      (var(--max-vw) - var(--min-vw));
 
-h6 {
-  font-size: calc(0.875rem + 0.6vw + 0.2vh);
-}
+    font-size: clamp(
+      var(--min-fs-rem),
+      var(--min-fs-rem) + var(--slope),
+      var(--max-fs-rem)
+    );
+  }
+
+  h1 {
+    /* 36 px, 48px */
+    --min-fs: 2.25;
+    --max-fs: 3;
+  }
+
+  h2 {
+    /* 32px, 40px */
+    --min-fs: 2;
+    --max-fs: 2.5;
+  }
+
+  h3 {
+    /* 28px, 36px */
+    --min-fs: 1.75;
+    --max-fs: 2.25;
+  }
+
+  h4 {
+    /* 24px, 32px */
+    --min-fs: 1.5;
+    --max-fs: 2;
+  }
+
+  h5 {
+    /* 20px, 28px */
+    --min-fs: 1.25;
+    --max-fs: 1.75;
+  }
+
+  h6 {
+    /* 16px, 24px */
+    --min-fs: 1;
+    --max-fs: 1.5;
+  }
 </style>
diff --git a/src/components/ui/Section.astro b/src/components/ui/Section.astro
@@ -1,14 +1,15 @@
 ---
-const { full = false, variant = "default" } = Astro.props;
+const { full = false, variant = "default", padding=true } = Astro.props;
 
 const variantClass = {
   default: "",
   primary: "bg-[#d4d5e5]",
   secondary: "bg-white",
-}[variant] || "";
+  }[variant] || "";
+
 ---
 
-<section class={variantClass}>
+<section class=`${variantClass} ${padding && "pt-12"}`>
   {
     full ? (
       <slot />
diff --git a/src/content/pages/beginners-day.mdx b/src/content/pages/beginners-day.mdx
@@ -5,7 +5,7 @@ subtitle:
   This year we're hosting a special day for beginners.
 ---
 
-## EuroPython Beginners' Day
+# EuroPython Beginners' Day
 
 On **Saturday 19th July**, we'll be hosting a day to help introduce people to programming and its applications, which will feature three tracks running in parallel. The events are designed to welcome newcomers to the Python ecosystem, including a series of talks and panels by junior developers and two workshops designed to introduce complete beginners to web development and data science.
 
diff --git a/src/content/pages/finaid.mdx b/src/content/pages/finaid.mdx
@@ -20,7 +20,7 @@ You’ll find all the information you need to apply for such a grant below.
 
 <div className="finaid-sponsor">
   <a href="https://www.europython-society.org/" target="_blank">
-    <img src="/img/eps-logo.png" alt="Logo of the EuroPython Society" />
+    <img class="w-full" src="/img/eps-logo.png" alt="Logo of the EuroPython Society" />
   </a>
 </div>
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,5 +1,4 @@
 ---
-import BaseLayout from "@layouts/BaseLayout.astro";
 import BaseHead from "@components/BaseHead.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
@@ -20,6 +19,8 @@ const { title, description } = Astro.props;
 if (!title || !description) {
 throw new Error(`${Astro.url.pathname} Both 'title' and 'description' must be set.`);
 }
+
+const externalDomain = new URL(Astro.site || "").hostname;
 ---
 
 <!DOCTYPE html>
@@ -48,10 +49,15 @@ throw new Error(`${Astro.url.pathname} Both 'title' and 'description' must be se
 </html>
 
 
-<style is:global>
+<style is:global define:vars={{ externalDomain }}>
   main section .container {
     max-width: 1150px;
   }
+
+  main a[href^="http"]:not([href*="var(--externalDomain)"]):not(:has(img))::after {
+    content: "↗";
+    font-size: 0.8em;
+  }
 </style>
 
 
diff --git a/src/layouts/ScheduleLayout.astro b/src/layouts/ScheduleLayout.astro
@@ -21,7 +21,6 @@ const { title, description } = Astro.props;
       <i class="fas fa-exclamation-triangle"></i>
       <span><strong>Important:</strong> This is an early version of the schedule and may still change. If you're planning travel around specific sessions, please keep that in mind.</span>
     </p>
-    <Headline as="h2" id="schedule-main" title="2025 Schedule" />
 
     <div class="layout-wrapper2">
       <slot />
diff --git a/src/pages/overview.astro b/src/pages/overview.astro
@@ -10,7 +10,7 @@ import Section from "@ui/Section.astro";
   description="EuroPython is the largest Python conference in Europe. We are looking forward to seeing you in Prague, Czech Republic & Remote from July 14th-20th 2025."
 >
   <Section>
-  <Headline id="oveview" title="Programme & Events Overview" center=true />
+  <Headline id="oveview" as="h1" title="Programme & Events Overview" center=true />
 
   <div class="events-container w-full prose prose-xl">
     <div class="decorative-border"></div>
diff --git a/src/pages/session/[slug].astro b/src/pages/session/[slug].astro
@@ -7,6 +7,7 @@ import { formatInTimeZone } from "date-fns-tz";
 import { YouTube } from "@astro-community/astro-embed-youtube";
 import { Picture } from "astro:assets";
 import Markdown from "@ui/Markdown.astro";
+import Section from "@ui/Section.astro";
 
 export async function getStaticPaths() {
   const sessions = await getCollection("sessions");
@@ -52,8 +53,8 @@ const nextSessionsOrdered = sameRoomNextSession
 ---
 
 <Layout title={entry.data.title} description={entry.data.tweet}>
-  <article class="mx-auto pb-12 px-6">
-    <Prose>
+  <Section>
+    <Prose full>
       <h1
         class="relative font-title text-text font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-pretty"
       >
@@ -100,14 +101,14 @@ const nextSessionsOrdered = sameRoomNextSession
       <dd>{entry.data.duration} minutes</dd>
     </dl>
 
-    <Prose>
+    <Prose full>
       <h2>Abstract</h2>
       <Markdown content={entry.data.abstract || ""} />
     </Prose>
 
     {
       entry.data.youtube_url && (
-        <Prose>
+        <Prose full>
           <h2>Recording</h2>
           <YouTube id={entry.data.youtube_url} />
         </Prose>
@@ -118,7 +119,7 @@ const nextSessionsOrdered = sameRoomNextSession
       entry.data.resources && (
         <>
           <br />
-          <Prose>
+          <Prose full>
             <h2>Resources</h2>
           </Prose>
           <ul class="list-disc">
@@ -230,5 +231,5 @@ const nextSessionsOrdered = sameRoomNextSession
         ) : null
       }
     </footer>
-  </article>
+  </Section>
 </Layout>
diff --git a/src/pages/speaker/[slug].astro b/src/pages/speaker/[slug].astro
@@ -5,6 +5,7 @@ import Prose from "../../components/prose/prose.astro";
 import { Image } from "astro:assets";
 import Markdown from "@ui/Markdown.astro";
 import Headline from "@ui/Headline.astro";
+import Section from "@ui/Section.astro"
 
 
 export async function getStaticPaths() {
@@ -83,7 +84,7 @@ function getGitHosting(url: string): string | undefined {
 ---
 
 <Layout title={entry.data.name} description={`Profile of ${entry.data.name}`}>
-  <article class="pb-12 px-6">
+  <Section>
     <Headline as="h1" id="speaker" title={entry.data.name} />
 
               <div class="md:grid grid-cols-[460px_1fr] md:gap-6">
@@ -110,7 +111,7 @@ function getGitHosting(url: string): string | undefined {
           <h2 class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl">
             Biography
           </h2>
-          <Prose>
+          <Prose full>
             <Markdown content={entry.data.biography} />
           </Prose>
         </>
@@ -250,5 +251,5 @@ function getGitHosting(url: string): string | undefined {
         ))
       }
     </ul>
-  </article>
+  </Section>
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -25,6 +25,10 @@
   z-index: 9999;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   @apply bg-body-background text-text;
 }
@@ -263,3 +267,20 @@ p.cross::after {
     --max-fs: 1.5;
   }
 }
+
+h1,
+h2 {
+  scroll-margin-top: 40px;
+}
+
+main a[href^="#"]:not([data-footnote-backref]):not([data-footnote-ref])::after {
+  content: " ⤵";
+  font-size: 0.9em;
+  opacity: 0.2;
+}
+
+main a[href^="#"]::before {
+  content: "(in-page) ";
+  font-size: 0;
+  visibility: hidden;
+}

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ type Session = {`
`29`	`29`	`data-type={session.data.session_type}`
`30`	`30`	`data-level={session.data.level}`
`31`	`31`	`>`
`32`		`- <Prose>`
	`32`	`+ <Prose full>`
`33`	`33`	`<h4>`
`34`	`34`	<a href={`/session/${session.id}`} class="underline">
`35`	`35`	`{session.data.title}`