Skip to content

Commit d23b97b

Browse files
committed
Unify headings and links style.
1 parent af326a9 commit d23b97b

File tree

15 files changed

+113
-58
lines changed

15 files changed

+113
-58
lines changed

src/components/button-link/button-link.astro

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,4 @@ const resolvedIsExternal =
3030
href={url}
3131
>
3232
<slot />
33-
34-
{
35-
resolvedIsExternal && (
36-
<span class="inline-block ml-1 font-system text-lg leading-4">↗</span>
37-
)
38-
}
3933
</a>

src/components/keynoters/keynoters.astro

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const keynoters = await getCollection("keynoters");
1111
const placeholders = Math.max(0, 5 - keynoters.length);
1212
---
1313
<Section>
14-
<div class="prose-xl relative my-12 px-6 z-10">
1514
<svg viewBox="0 0 729 704" class="absolute top-0 left-0 w-full h-full -z-10">
1615
<g
1716
stroke="none"
@@ -82,7 +81,7 @@ const placeholders = Math.max(0, 5 - keynoters.length);
8281

8382
<Headline id="keynoters" title="Keynote Speakers" center=true />
8483

85-
<ul class="p-0 mt-12 flex gap-6 flex-wrap justify-center">
84+
<ul class="p-0 flex gap-6 flex-wrap justify-center">
8685
{
8786
keynoters
8887
.sort((a, b) => a.data.order - b.data.order)
@@ -115,17 +114,13 @@ const placeholders = Math.max(0, 5 - keynoters.length);
115114
}
116115
</ul>
117116

118-
<div class="flex items-center flex-col pr-6">
117+
<div class="flex items-center flex-col pt-6">
119118
<div class="text-center">
120-
<h3 class="font-bold text-3xl mb-4">
119+
<h3 class="font-bold text-3xl m-4 ">
121120
<span class="text-body-light inline-block mr-2">#</span>
122121
See other sessions
123122
</h3>
124123
<Button url="/sessions">See sessions preview</Button>
125124
</div>
126125
</div>
127-
</div>
128126
</Section>
129-
<style>
130-
.fill-hero-primary {}
131-
</style>

src/components/sections/prague.astro

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import Section from "@ui/Section.astro"
88
---
99

1010
<Section>
11-
<div class="mt-12">
1211
<Headline id="prague" title="Prague & Venue" center=true />
13-
</div>
1412

1513
<article class="lg:grid gap-12 grid-cols-2 items-center">
1614
<div class="relative hidden lg:block">

src/components/sessions/list-sessions.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ type Session = {
2929
data-type={session.data.session_type}
3030
data-level={session.data.level}
3131
>
32-
<Prose>
32+
<Prose full>
3333
<h4>
3434
<a href={`/session/${session.id}`} class="underline">
3535
{session.data.title}

src/components/sponsors/sponsors.astro

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,6 @@ const sponsorTiers = tiers
4848
const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
4949
---
5050
<Section variant="secondary">
51-
<Fullbleed className="bg-white py-24 px-6">
52-
<section class="max-w-4xl lg:max-w-6xl mx-auto mb-16">
5351
<Headline id="sponsors" title="Sponsors & Partners" center=true />
5452
<div>
5553
{
@@ -89,6 +87,4 @@ const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
8987
</Fragment>
9088
))
9189
}
92-
</section>
93-
</Fullbleed>
9490
</Section>

src/components/ui/Headline.astro

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const isCenter = center ? "text-center" : "";
88
99
---
1010

11-
<Tag id={isAnchor ? id : undefined} class={`${isCenter} mx-5 py-2 font-bold max-w-[90vw]`}>
11+
<Tag id={isAnchor ? id : undefined} class={`${isCenter} mx-5 py-4 font-bold max-w-[90vw]`}>
1212
{isAnchor && (
1313
<a href={`#${id}`} aria-label={`Jump to ${id}`}>
1414
{Title}
@@ -18,27 +18,70 @@ const isCenter = center ? "text-center" : "";
1818
</Tag>
1919

2020
<style>
21-
h1 {
22-
font-size: calc(1.9rem + 1.5vw + 0.8vh);
23-
}
21+
h1,
22+
h2,
23+
h3,
24+
h4,
25+
h5,
26+
h6 {
27+
font-weight: bold;
28+
font-family: var(--font-display);
29+
line-height: 1.25;
2430

25-
h2 {
26-
font-size: calc(1.75rem + 1.5vw + 0.8vh);
27-
}
31+
/* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
2832

29-
h3 {
30-
font-size: calc(1.5rem + 1.2vw + 0.6vh);
31-
}
33+
--min-fs: 1;
34+
--max-fs: 1.5;
35+
--min-vw: 20;
36+
--max-vw: 45;
3237

33-
h4 {
34-
font-size: calc(1.25rem + 1vw + 0.4vh);
35-
}
38+
--min-fs-rem: var(--min-fs) * 1rem;
39+
--max-fs-rem: var(--max-fs) * 1rem;
40+
--min-vw-rem: var(--min-vw) * 1rem;
3641

37-
h5 {
38-
font-size: calc(1rem + 0.8vw + 0.3vh);
39-
}
42+
--slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) /
43+
(var(--max-vw) - var(--min-vw));
4044

41-
h6 {
42-
font-size: calc(0.875rem + 0.6vw + 0.2vh);
43-
}
45+
font-size: clamp(
46+
var(--min-fs-rem),
47+
var(--min-fs-rem) + var(--slope),
48+
var(--max-fs-rem)
49+
);
50+
}
51+
52+
h1 {
53+
/* 36 px, 48px */
54+
--min-fs: 2.25;
55+
--max-fs: 3;
56+
}
57+
58+
h2 {
59+
/* 32px, 40px */
60+
--min-fs: 2;
61+
--max-fs: 2.5;
62+
}
63+
64+
h3 {
65+
/* 28px, 36px */
66+
--min-fs: 1.75;
67+
--max-fs: 2.25;
68+
}
69+
70+
h4 {
71+
/* 24px, 32px */
72+
--min-fs: 1.5;
73+
--max-fs: 2;
74+
}
75+
76+
h5 {
77+
/* 20px, 28px */
78+
--min-fs: 1.25;
79+
--max-fs: 1.75;
80+
}
81+
82+
h6 {
83+
/* 16px, 24px */
84+
--min-fs: 1;
85+
--max-fs: 1.5;
86+
}
4487
</style>

src/components/ui/Section.astro

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
---
2-
const { full = false, variant = "default" } = Astro.props;
2+
const { full = false, variant = "default", padding=true } = Astro.props;
33
44
const variantClass = {
55
default: "",
66
primary: "bg-[#d4d5e5]",
77
secondary: "bg-white",
8-
}[variant] || "";
8+
}[variant] || "";
9+
910
---
1011

11-
<section class={variantClass}>
12+
<section class=`${variantClass} ${padding && "pt-12"}`>
1213
{
1314
full ? (
1415
<slot />

src/content/pages/beginners-day.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ subtitle:
55
This year we're hosting a special day for beginners.
66
---
77

8-
## EuroPython Beginners' Day
8+
# EuroPython Beginners' Day
99

1010
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.
1111

src/content/pages/finaid.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ You’ll find all the information you need to apply for such a grant below.
2020

2121
<div className="finaid-sponsor">
2222
<a href="https://www.europython-society.org/" target="_blank">
23-
<img src="/img/eps-logo.png" alt="Logo of the EuroPython Society" />
23+
<img class="w-full" src="/img/eps-logo.png" alt="Logo of the EuroPython Society" />
2424
</a>
2525
</div>
2626

src/layouts/Layout.astro

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
import BaseLayout from "@layouts/BaseLayout.astro";
32
import BaseHead from "@components/BaseHead.astro";
43
import Header from "@components/Header.astro";
54
import Footer from "@components/Footer.astro";
@@ -20,6 +19,8 @@ const { title, description } = Astro.props;
2019
if (!title || !description) {
2120
throw new Error(`${Astro.url.pathname} Both 'title' and 'description' must be set.`);
2221
}
22+
23+
const externalDomain = new URL(Astro.site || "").hostname;
2324
---
2425

2526
<!DOCTYPE html>
@@ -48,10 +49,15 @@ throw new Error(`${Astro.url.pathname} Both 'title' and 'description' must be se
4849
</html>
4950

5051

51-
<style is:global>
52+
<style is:global define:vars={{ externalDomain }}>
5253
main section .container {
5354
max-width: 1150px;
5455
}
56+
57+
main a[href^="http"]:not([href*="var(--externalDomain)"]):not(:has(img))::after {
58+
content: "↗";
59+
font-size: 0.8em;
60+
}
5561
</style>
5662

5763

src/layouts/ScheduleLayout.astro

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const { title, description } = Astro.props;
2121
<i class="fas fa-exclamation-triangle"></i>
2222
<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>
2323
</p>
24-
<Headline as="h2" id="schedule-main" title="2025 Schedule" />
2524

2625
<div class="layout-wrapper2">
2726
<slot />

src/pages/overview.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Section from "@ui/Section.astro";
1010
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."
1111
>
1212
<Section>
13-
<Headline id="oveview" title="Programme & Events Overview" center=true />
13+
<Headline id="oveview" as="h1" title="Programme & Events Overview" center=true />
1414

1515
<div class="events-container w-full prose prose-xl">
1616
<div class="decorative-border"></div>

src/pages/session/[slug].astro

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { formatInTimeZone } from "date-fns-tz";
77
import { YouTube } from "@astro-community/astro-embed-youtube";
88
import { Picture } from "astro:assets";
99
import Markdown from "@ui/Markdown.astro";
10+
import Section from "@ui/Section.astro";
1011
1112
export async function getStaticPaths() {
1213
const sessions = await getCollection("sessions");
@@ -52,8 +53,8 @@ const nextSessionsOrdered = sameRoomNextSession
5253
---
5354

5455
<Layout title={entry.data.title} description={entry.data.tweet}>
55-
<article class="mx-auto pb-12 px-6">
56-
<Prose>
56+
<Section>
57+
<Prose full>
5758
<h1
5859
class="relative font-title text-text font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-pretty"
5960
>
@@ -100,14 +101,14 @@ const nextSessionsOrdered = sameRoomNextSession
100101
<dd>{entry.data.duration} minutes</dd>
101102
</dl>
102103

103-
<Prose>
104+
<Prose full>
104105
<h2>Abstract</h2>
105106
<Markdown content={entry.data.abstract || ""} />
106107
</Prose>
107108

108109
{
109110
entry.data.youtube_url && (
110-
<Prose>
111+
<Prose full>
111112
<h2>Recording</h2>
112113
<YouTube id={entry.data.youtube_url} />
113114
</Prose>
@@ -118,7 +119,7 @@ const nextSessionsOrdered = sameRoomNextSession
118119
entry.data.resources && (
119120
<>
120121
<br />
121-
<Prose>
122+
<Prose full>
122123
<h2>Resources</h2>
123124
</Prose>
124125
<ul class="list-disc">
@@ -230,5 +231,5 @@ const nextSessionsOrdered = sameRoomNextSession
230231
) : null
231232
}
232233
</footer>
233-
</article>
234+
</Section>
234235
</Layout>

src/pages/speaker/[slug].astro

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Prose from "../../components/prose/prose.astro";
55
import { Image } from "astro:assets";
66
import Markdown from "@ui/Markdown.astro";
77
import Headline from "@ui/Headline.astro";
8+
import Section from "@ui/Section.astro"
89
910
1011
export async function getStaticPaths() {
@@ -83,7 +84,7 @@ function getGitHosting(url: string): string | undefined {
8384
---
8485

8586
<Layout title={entry.data.name} description={`Profile of ${entry.data.name}`}>
86-
<article class="pb-12 px-6">
87+
<Section>
8788
<Headline as="h1" id="speaker" title={entry.data.name} />
8889

8990
<div class="md:grid grid-cols-[460px_1fr] md:gap-6">
@@ -110,7 +111,7 @@ function getGitHosting(url: string): string | undefined {
110111
<h2 class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl">
111112
Biography
112113
</h2>
113-
<Prose>
114+
<Prose full>
114115
<Markdown content={entry.data.biography} />
115116
</Prose>
116117
</>
@@ -250,5 +251,5 @@ function getGitHosting(url: string): string | undefined {
250251
))
251252
}
252253
</ul>
253-
</article>
254+
</Section>
254255
</Layout>

src/styles/global.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
z-index: 9999;
2626
}
2727

28+
html {
29+
scroll-behavior: smooth;
30+
}
31+
2832
body {
2933
@apply bg-body-background text-text;
3034
}
@@ -263,3 +267,20 @@ p.cross::after {
263267
--max-fs: 1.5;
264268
}
265269
}
270+
271+
h1,
272+
h2 {
273+
scroll-margin-top: 40px;
274+
}
275+
276+
main a[href^="#"]:not([data-footnote-backref]):not([data-footnote-ref])::after {
277+
content: " ⤵";
278+
font-size: 0.9em;
279+
opacity: 0.2;
280+
}
281+
282+
main a[href^="#"]::before {
283+
content: "(in-page) ";
284+
font-size: 0;
285+
visibility: hidden;
286+
}

0 commit comments

Comments
 (0)