jamesp/egfh-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkpoint

Browse Source
This commit is contained in:
James Pattinson
2026-05-12 12:12:24 -04:00
parent ed1293933f
commit d1ef51e636
7 changed files with 238 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker-compose.yml
+1
View File
@@ -81,6 +81,7 @@ services:
- "${FRONTEND_PORT}:80" - "${FRONTEND_PORT}:80"
volumes: volumes:
- ./:/app - ./:/app
- ./public/images:/app/public/images
- web_node_modules:/app/node_modules - web_node_modules:/app/node_modules
- web_astro:/app/.astro - web_astro:/app/.astro
public/images/cessna.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

public/images/test.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120" viewBox="0 0 240 120" role="img" aria-label="Test image">
<rect width="240" height="120" fill="#0b4f7a"/>
<text x="50%" y="50%" fill="#ffffff" font-family="Arial, sans-serif" font-size="24" text-anchor="middle" dominant-baseline="middle">Image OK</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 330 B

src/env.d.ts
Vendored
+2
View File
@@ -1 +1,3 @@
/// <reference types="astro/client" /> /// <reference types="astro/client" />
declare module '*.css';
src/layouts/BaseLayout.astro
+9 -8
View File
@@ -22,20 +22,21 @@ const pageTitle = title ? `${title} · ${site.name}` : site.name;
<body> <body>
<header class="topbar"> <header class="topbar">
<div class="container topbar-inner"> <div class="container topbar-inner">
<div> <details class="mobile-nav">
<p class="eyebrow">{site.name}</p> <summary>Menu</summary>
<p class="topline">{site.tagline}</p> <div class="mobile-nav-panel">
</div> {site.navigation.map((item) => (
<div class="topbar-meta"> <a href={item.href}>{item.label}</a>
<span>{site.openingHours}</span> ))}
<span>{site.phone}</span> </div>
</div> </details>
</div> </div>
</header> </header>
<nav class="navshell" aria-label="Primary"> <nav class="navshell" aria-label="Primary">
<div class="container nav-inner"> <div class="container nav-inner">
<a class="brand" href="/">Swansea Airport</a> <a class="brand" href="/">Swansea Airport</a>
<div class="nav-links"> <div class="nav-links">
{site.navigation.map((item) => ( {site.navigation.map((item) => (
<a href={item.href}>{item.label}</a> <a href={item.href}>{item.label}</a>
src/pages/index.astro
+50 -12
View File
@@ -20,21 +20,60 @@ const latestNews = news.slice(0, 3);
<BaseLayout title="Home" description="Fast, clear airfield information for pilots and visitors."> <BaseLayout title="Home" description="Fast, clear airfield information for pilots and visitors.">
<section class="hero"> <section class="hero">
<div class="container hero-grid"> <div class="container hero-stack">
<div class="hero-panel"> <div class="hero-panel">
<p class="eyebrow">Operational website</p> <p class="eyebrow">Operational website</p>
<h1 class="hero-title">Clear airfield information, built for speed.</h1> <h1 class="hero-title">Welcome to Swansea Airport - Fairwood Common</h1>
<p class="hero-copy"> <p class="hero-copy">
Visitor-critical information stays visible up front, while Directus supplies notices, news, events, and fuel pricing at build time. Serving Swansea City and the Swansea Bay Region. Located on the stunning Gower Peninsula, just 15 minutes from Swansea City Centre - Swansea Airport is perfectly located for quick and convenient access to Swansea City, the vast, beautiful Gower Peninsula Area of Outstanding Natural Beauty and the rest of South & West Wales.
</p>
<p class="hero-copy">
There are a whole host of aviation activities at Swansea Airport. If you're looking to learn to fly, or charter an aircraft, Swansea is more convenient and more cost effective than other Welsh and West of England airports. No queues and no expensive handling fees.
</p> </p>
<div class="cta-row"> <div class="cta-row">
<a class="button primary" href="/visiting-pilots/">Visiting pilots</a> <a class="button primary" href="/visiting-pilots/">Visiting pilots</a>
<a class="button secondary" href="/procedures-safety-noise-abatement/">Procedures and safety</a> <a class="button secondary" href="/procedures-safety-noise-abatement/">Procedures and safety</a>
</div> </div>
</div> </div>
</div>
</section>
<aside class="hero-rail"> <section class="container story-flow">
<div class="surface"> <article class="story-copy surface">
<p class="eyebrow">Flying from Swansea</p>
<h2 class="section-title">A practical base for training, touring, and quick access</h2>
<p>
Swansea Airport is set up for straightforward arrivals and departures, with a compact layout, a clear operating rhythm, and enough room to keep the focus on flying rather than logistics.
</p>
</article>
<figure class="story-image surface">
<img src="/images/cessna.jpg" alt="A Cessna aircraft on the apron at Swansea Airport" loading="lazy" />
<figcaption>
A light aircraft on the apron, shown here as an example of the kind of general aviation traffic the site is designed to support.
</figcaption>
</figure>
<article class="story-copy surface">
<p class="eyebrow">For pilots and visitors</p>
<h2 class="section-title">Useful information stays close at hand</h2>
<p>
Operational notices, fuel pricing, events, and visitor guidance are presented together so people can scan what they need without digging through the page.
</p>
</article>
</section>
<div class="container stack">
<section class="operational-info">
<div class="section-head">
<div>
<p class="eyebrow">Operational information</p>
<h2 class="section-title">Essential details for today</h2>
</div>
</div>
<div class="operational-grid">
<article class="surface">
<p class="eyebrow">Today at the airfield</p> <p class="eyebrow">Today at the airfield</p>
<div class="stats-grid"> <div class="stats-grid">
<div class="stat"> <div class="stat">
@@ -46,20 +85,19 @@ const latestNews = news.slice(0, 3);
<span class="muted">Licensed hours</span> <span class="muted">Licensed hours</span>
</div> </div>
</div> </div>
</div> </article>
<div class="surface">
<article class="surface">
<p class="eyebrow">Runway overview</p> <p class="eyebrow">Runway overview</p>
<ul class="compact-list"> <ul class="compact-list">
{site.runwayFacts.map((fact) => ( {site.runwayFacts.map((fact) => (
<li>{fact}</li> <li>{fact}</li>
))} ))}
</ul> </ul>
</div> </article>
</aside> </div>
</div> </section>
</section>
<div class="container stack">
<NoticeBanner notices={notices} /> <NoticeBanner notices={notices} />
<FuelPricesWidget fuelPrices={fuelPrices} /> <FuelPricesWidget fuelPrices={fuelPrices} />
src/styles/global.css
+172 -50
View File
@@ -1,17 +1,21 @@
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
:root { :root {
color-scheme: light; color-scheme: light;
--bg: #f5f1e8; --bg: #eef5fb;
--panel: #fffaf0; --bg-accent: #dcecff;
--panel: rgba(255, 255, 255, 0.82);
--panel-strong: #ffffff; --panel-strong: #ffffff;
--text: #12212c; --text: #102233;
--muted: #5b6570; --muted: #516475;
--brand: #11384d; --brand: #0b4f7a;
--brand-2: #8d5f2d; --brand-2: #1d76b8;
--line: rgba(18, 33, 44, 0.12); --brand-soft: rgba(11, 79, 122, 0.12);
--critical: #8e1f1b; --line: rgba(16, 34, 51, 0.12);
--warning: #b36a09; --critical: #a11f3a;
--info: #245b7d; --warning: #bb6800;
--shadow: 0 18px 40px rgba(18, 33, 44, 0.08); --info: #1974b6;
--shadow: 0 18px 42px rgba(16, 34, 51, 0.1);
--radius: 1.1rem; --radius: 1.1rem;
--radius-sm: 0.8rem; --radius-sm: 0.8rem;
--content: 1120px; --content: 1120px;
@@ -27,10 +31,11 @@ html {
body { body {
margin: 0; margin: 0;
font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", sans-serif; font-family: 'Manrope', system-ui, sans-serif;
background: background:
radial-gradient(circle at top left, rgba(141, 95, 45, 0.16), transparent 35%), radial-gradient(circle at top left, rgba(29, 118, 184, 0.18), transparent 34%),
radial-gradient(circle at right 20%, rgba(18, 57, 77, 0.12), transparent 30%), radial-gradient(circle at right 18%, rgba(11, 79, 122, 0.12), transparent 28%),
linear-gradient(180deg, #f8fbff 0%, var(--bg) 44%, #eef6fd 100%),
var(--bg); var(--bg);
color: var(--text); color: var(--text);
line-height: 1.55; line-height: 1.55;
@@ -67,7 +72,7 @@ img {
top: 0; top: 0;
z-index: 20; z-index: 20;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: rgba(245, 241, 232, 0.84); background: rgba(248, 251, 255, 0.88);
} }
.topbar-inner, .topbar-inner,
@@ -83,17 +88,9 @@ img {
padding: 0.85rem 0; padding: 0.85rem 0;
} }
.topbar-meta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem 1.2rem;
color: var(--muted);
font-size: 0.95rem;
}
.navshell { .navshell {
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: rgba(255, 250, 240, 0.88); background: rgba(255, 255, 255, 0.84);
} }
.nav-inner { .nav-inner {
@@ -103,7 +100,7 @@ img {
} }
.brand { .brand {
font-family: Georgia, "Times New Roman", serif; font-family: 'Fraunces', Georgia, serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@@ -122,6 +119,72 @@ img {
text-decoration: none; text-decoration: none;
} }
.nav-links a:hover,
.mobile-nav-panel a:hover {
color: var(--brand);
}
.mobile-nav {
display: none;
position: relative;
margin-left: auto;
}
.mobile-nav summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 2.75rem;
padding: 0.7rem 1rem;
border: 1px solid var(--line);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(228, 240, 252, 0.95));
color: var(--brand);
font-weight: 800;
cursor: pointer;
box-shadow: var(--shadow);
}
.mobile-nav summary::-webkit-details-marker {
display: none;
}
.mobile-nav summary::after {
content: '▾';
font-size: 0.9rem;
color: var(--brand-2);
}
.mobile-nav[open] summary::after {
content: '▴';
}
.mobile-nav-panel {
position: absolute;
top: calc(100% + 0.65rem);
right: 0;
width: min(18rem, calc(100vw - 2rem));
display: grid;
gap: 0.35rem;
padding: 0.8rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--shadow);
z-index: 22;
}
.mobile-nav-panel a {
display: block;
padding: 0.7rem 0.8rem;
border-radius: 0.75rem;
text-decoration: none;
color: var(--text);
font-weight: 700;
}
main { main {
padding-block: 1.5rem 4rem; padding-block: 1.5rem 4rem;
} }
@@ -134,18 +197,16 @@ section {
padding-block: 1rem 2rem; padding-block: 1rem 2rem;
} }
.hero-grid { .hero-stack {
display: grid; display: grid;
grid-template-columns: 1.35fr 0.95fr; gap: 1rem;
gap: 1.5rem;
align-items: start;
} }
.hero-panel, .hero-panel,
.card, .card,
.surface, .surface,
.notice { .notice {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 240, 0.94)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 245, 253, 0.94));
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
@@ -157,13 +218,12 @@ section {
.hero-title { .hero-title {
margin: 0; margin: 0;
font-family: Georgia, "Times New Roman", serif; font-family: 'Fraunces', Georgia, serif;
font-size: clamp(2.2rem, 5vw, 4.6rem); font-size: clamp(2.2rem, 5vw, 4.6rem);
line-height: 0.98; line-height: 0.98;
} }
.hero-copy { .hero-copy {
max-width: 62ch;
color: var(--muted); color: var(--muted);
font-size: 1.05rem; font-size: 1.05rem;
} }
@@ -190,16 +250,12 @@ section {
.button.primary { .button.primary {
background: var(--brand); background: var(--brand);
color: white; color: white;
box-shadow: 0 12px 24px rgba(11, 79, 122, 0.2);
} }
.button.secondary { .button.secondary {
background: transparent; background: rgba(255, 255, 255, 0.72);
border-color: rgba(18, 57, 77, 0.18); border-color: rgba(11, 79, 122, 0.18);
}
.hero-rail {
display: grid;
gap: 1rem;
} }
.stats-grid, .stats-grid,
@@ -209,6 +265,39 @@ section {
gap: 1rem; gap: 1rem;
} }
.story-flow {
display: grid;
gap: 1rem;
margin-top: 0.5rem;
}
.story-copy {
display: grid;
gap: 0.75rem;
}
.story-copy p:last-child {
margin-bottom: 0;
}
.story-image {
overflow: hidden;
padding: 0;
}
.story-image img {
width: 100%;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.story-image figcaption {
padding: 0.9rem 1rem 1rem;
color: var(--muted);
font-size: 0.95rem;
}
.stats-grid { .stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
@@ -250,7 +339,7 @@ section {
.section-title { .section-title {
margin: 0; margin: 0;
font-family: Georgia, "Times New Roman", serif; font-family: 'Fraunces', Georgia, serif;
font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-size: clamp(1.4rem, 2.8vw, 2.2rem);
} }
@@ -299,7 +388,7 @@ section {
} }
.tag { .tag {
background: rgba(141, 95, 45, 0.1); background: rgba(29, 118, 184, 0.1);
color: var(--brand-2); color: var(--brand-2);
} }
@@ -312,6 +401,17 @@ section {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
} }
.operational-info {
display: grid;
gap: 1rem;
}
.operational-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.card h3, .card h3,
.card h4, .card h4,
.surface h3, .surface h3,
@@ -334,8 +434,8 @@ section {
.site-footer { .site-footer {
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
background: rgba(18, 33, 44, 0.93); background: linear-gradient(180deg, #0d2e47, #091d2f);
color: rgba(255, 250, 240, 0.88); color: rgba(245, 250, 255, 0.9);
padding: 2rem 0; padding: 2rem 0;
} }
@@ -350,7 +450,7 @@ section {
.site-footer .eyebrow, .site-footer .eyebrow,
.site-footer .muted { .site-footer .muted {
color: rgba(255, 250, 240, 0.66); color: rgba(245, 250, 255, 0.68);
} }
.prose { .prose {
@@ -359,7 +459,7 @@ section {
.prose h2, .prose h2,
.prose h3 { .prose h3 {
font-family: Georgia, "Times New Roman", serif; font-family: 'Fraunces', Georgia, serif;
} }
.stack { .stack {
@@ -368,19 +468,41 @@ section {
} }
@media (max-width: 860px) { @media (max-width: 860px) {
.hero-grid,
.split-grid, .split-grid,
.footer-grid { .footer-grid,
.operational-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.story-flow {
gap: 0.85rem;
}
.topbar-inner, .topbar-inner,
.nav-inner,
.footer-grid { .footer-grid {
display: grid; display: grid;
} }
.nav-links { .topbar-inner {
gap: 0.7rem 1rem; grid-template-columns: 1fr auto;
align-items: center;
}
.topbar-meta {
grid-column: 1 / -1;
gap: 0.5rem 0.8rem;
font-size: 0.88rem;
}
.nav-inner {
display: none;
}
.navshell {
display: none;
}
.mobile-nav {
display: block;
} }
} }