Skip to content

Commit 589c3a6

Browse files
clytaemnestraclytaemnestra
committed
Adjust design
1 parent d9bed42 commit 589c3a6

1 file changed

Lines changed: 149 additions & 152 deletions

File tree

‎src/pages/overview.astro‎

Lines changed: 149 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -5,168 +5,165 @@ import Section from "@ui/Section.astro";
55
66
import { Image } from "astro:assets";
77
8-
const imageStyle = "m-2 md:float-right lg:float-none max-w-[300px] md:max-w-[400px] lg:max-w-[400px] w-full border-4 border-white rounded-lg shadow-lg ";
8+
const categories = [
9+
{
10+
title: "Talks, Tutorials & Posters",
11+
image: "/overview/conference.jpg",
12+
items: [
13+
{ name: "Talks", href: "/sessions/" },
14+
{ name: "Tutorials", href: "/sessions/" },
15+
{ name: "Keynotes", href: "/sessions/" },
16+
{ name: "Posters", href: "/sessions/" },
17+
],
18+
},
19+
{
20+
title: "Summits",
21+
image: "/overview/summits.jpg",
22+
items: [
23+
{ name: "Language Summit", href: "/language-summit/" },
24+
{ name: "Packaging Summit", href: "/packaging-summit/" },
25+
{ name: "Rust Summit", href: "/rust-summit/" },
26+
],
27+
},
28+
{
29+
title: "PyLadies Events",
30+
image: "/overview/pyladies-lunch.jpg",
31+
items: [
32+
{ name: "PyLadies Booth", href: "/pyladies" },
33+
{ name: "PyLadies Workshops", href: "/pyladies" },
34+
{ name: "PyLadies Lunch", href: "/pyladies" },
35+
{ name: "Organizer Open Space", href: "/pyladies" },
36+
],
37+
},
38+
];
939
---
1040

1141
<Layout
1242
title="Programme & Events Overview | EuroPython 2026 | July 13th-19th 2026 | Kraków, Poland"
1343
description="An overview of the talks, tutorials, summits and community events happening at EuroPython 2026 in Kraków, Poland."
1444
>
1545
<Section>
16-
<Headline id="overview" as="h1" title="Programme & Events Overview" center=true />
17-
18-
<div class="events-container w-full prose prose-xl">
19-
<div class="decorative-border"></div>
20-
21-
<div class="events-grid">
22-
<div class="event-category">
23-
<h3>Talks, Tutorials & Posters</h3>
24-
25-
<Image
26-
src="/overview/conference.jpg"
27-
alt=""
28-
height={250}
29-
width={250}
30-
class={imageStyle}
31-
/>
32-
33-
<ul class="event-list">
34-
<li><a href="/sessions/">Talks</a></li>
35-
<li><a href="/sessions/">Tutorials</a></li>
36-
<li><a href="/sessions/">Keynotes</a></li>
37-
<li><a href="/sessions/">Posters</a></li>
38-
</ul>
39-
</div>
40-
41-
<div class="event-category">
42-
<h3>Summits</h3>
43-
44-
<Image
45-
src="/overview/summits.jpg"
46-
alt=""
47-
height={250}
48-
width={250}
49-
class={imageStyle}
50-
/>
51-
52-
<ul class="event-list">
53-
<li><a href="/language-summit/">Language Summit</a></li>
54-
<li><a href="/packaging-summit/">Packaging Summit</a></li>
55-
<li><a href="/rust-summit/">Rust Summit</a></li>
56-
</ul>
57-
</div>
58-
59-
<div class="event-category">
60-
<h3>PyLadies Events</h3>
61-
62-
<Image
63-
src="/overview/pyladies-lunch.jpg"
64-
alt=""
65-
height={250}
66-
width={250}
67-
class={imageStyle}
68-
/>
69-
70-
<ul class="event-list">
71-
<li><a href="/pyladies">PyLadies Booth</a></li>
72-
<li><a href="/pyladies">PyLadies Workshops</a></li>
73-
<li><a href="/pyladies">PyLadies Lunch</a></li>
74-
<li><a href="/pyladies">Organizer Open Space</a></li>
75-
</ul>
76-
</div>
46+
<Headline id="overview" as="h1" title="Programme & Events Overview" center=true />
47+
48+
<p class="overview-intro">
49+
A week packed with talks, tutorials, summits and community events. Here's a
50+
quick look at what's happening at EuroPython 2026 in Kraków.
51+
</p>
52+
53+
<div class="overview-grid">
54+
{categories.map((category) => (
55+
<article class="overview-card">
56+
<div class="card-media">
57+
<Image
58+
src={category.image}
59+
alt={category.title}
60+
height={340}
61+
width={600}
62+
class="card-img"
63+
/>
64+
</div>
65+
<div class="card-body">
66+
<h2 class="card-title">{category.title}</h2>
67+
<ul class="card-list">
68+
{category.items.map((item) => (
69+
<li><a href={item.href}>{item.name}</a></li>
70+
))}
71+
</ul>
72+
</div>
73+
</article>
74+
))}
7775
</div>
78-
79-
<div class="decorative-border"></div>
80-
</div>
8176
</Section>
8277
</Layout>
8378

8479
<style>
85-
:root {
86-
--primary-blue: #3A4CA3;
87-
--accent-pink: #F3B719;
88-
--bg-cream: #F7F1E6;
89-
--text-dark: #333;
90-
}
91-
.prose {
92-
max-width: initial;
93-
}
94-
.events-container {
95-
margin: 0 auto;
96-
padding: 2rem;
97-
}
98-
99-
.header {
100-
display: flex;
101-
align-items: center;
102-
justify-content: space-between;
103-
margin-bottom: 2rem;
104-
}
105-
106-
.page-title {
107-
color: var(--primary-blue);
108-
font-size: 1.8rem;
109-
margin-top: 0;
110-
}
111-
112-
.events-grid {
113-
display: grid;
114-
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
115-
gap: 2rem;
116-
}
117-
118-
.event-category {
119-
margin-bottom: 2rem;
120-
}
121-
122-
.event-category h3 {
123-
color: var(--primary-blue);
124-
font-size: 1.4rem;
125-
margin-bottom: 0.5rem;
126-
border-bottom: 4px solid var(--accent-pink);
127-
padding-bottom: 5px;
128-
}
129-
130-
.event-list {
131-
list-style-type: none;
132-
padding-left: 0;
133-
margin: 0;
134-
}
135-
136-
.event-list li {
137-
margin-bottom: 0.5rem;
138-
position: relative;
139-
padding-left: 20px;
140-
}
141-
142-
.event-list li::before {
143-
content: "•";
144-
position: absolute;
145-
left: 0;
146-
color: var(--accent-pink);
147-
font-weight: bold;
148-
}
149-
150-
.decorative-border {
151-
height: 16px;
152-
background-image: url('/hr.png');
153-
154-
margin: 20px 0;
155-
border-radius: 3px;
156-
}
157-
158-
@media (max-width: 768px) {
159-
.header {
160-
flex-direction: column;
161-
text-align: center;
162-
}
163-
164-
.logo-container {
165-
margin-bottom: 1rem;
166-
}
167-
168-
.events-grid {
169-
grid-template-columns: 1fr;
170-
}
171-
}
80+
.overview-intro {
81+
max-width: 720px;
82+
margin: 0 auto 2.5rem;
83+
text-align: center;
84+
font-size: 1.125rem;
85+
line-height: 1.6;
86+
color: var(--color-text-secondary);
87+
}
88+
89+
.overview-grid {
90+
display: grid;
91+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
92+
gap: 1.75rem;
93+
max-width: 1100px;
94+
margin: 0 auto 2rem;
95+
}
96+
97+
.overview-card {
98+
display: flex;
99+
flex-direction: column;
100+
background: var(--color-surface-subtle);
101+
border: 1px solid var(--color-border);
102+
border-radius: 16px;
103+
overflow: hidden;
104+
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
105+
}
106+
107+
.overview-card:hover {
108+
transform: translateY(-4px);
109+
border-color: var(--color-accent);
110+
box-shadow: 0 12px 30px oklch(0 0 0 / 0.25);
111+
}
112+
113+
.card-media {
114+
aspect-ratio: 16 / 9;
115+
overflow: hidden;
116+
}
117+
118+
.card-img {
119+
width: 100%;
120+
height: 100%;
121+
object-fit: cover;
122+
display: block;
123+
}
124+
125+
.card-body {
126+
padding: 1.25rem 1.5rem 1.5rem;
127+
}
128+
129+
.card-title {
130+
margin: 0 0 0.85rem;
131+
padding-bottom: 0.5rem;
132+
font-size: 1.35rem;
133+
font-weight: 600;
134+
color: var(--color-text-primary);
135+
border-bottom: 3px solid var(--color-accent);
136+
}
137+
138+
.card-list {
139+
list-style: none;
140+
padding: 0;
141+
margin: 0;
142+
}
143+
144+
.card-list li {
145+
position: relative;
146+
padding-left: 1.25rem;
147+
margin-bottom: 0.5rem;
148+
}
149+
150+
.card-list li::before {
151+
content: "•";
152+
position: absolute;
153+
left: 0;
154+
color: var(--color-accent);
155+
font-weight: bold;
156+
}
157+
158+
.card-list a {
159+
color: var(--color-text);
160+
text-decoration: none;
161+
transition: color 0.15s ease;
162+
}
163+
164+
.card-list a:hover,
165+
.card-list a:focus-visible {
166+
color: var(--color-accent);
167+
text-decoration: underline;
168+
}
172169
</style>

0 commit comments

Comments
 (0)