checkpoint
This commit is contained in:
Vendored
+2
@@ -1 +1,3 @@
|
||||
/// <reference types="astro/client" />
|
||||
|
||||
declare module '*.css';
|
||||
|
||||
@@ -22,20 +22,21 @@ const pageTitle = title ? `${title} · ${site.name}` : site.name;
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="container topbar-inner">
|
||||
<div>
|
||||
<p class="eyebrow">{site.name}</p>
|
||||
<p class="topline">{site.tagline}</p>
|
||||
</div>
|
||||
<div class="topbar-meta">
|
||||
<span>{site.openingHours}</span>
|
||||
<span>{site.phone}</span>
|
||||
</div>
|
||||
<details class="mobile-nav">
|
||||
<summary>Menu</summary>
|
||||
<div class="mobile-nav-panel">
|
||||
{site.navigation.map((item) => (
|
||||
<a href={item.href}>{item.label}</a>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="navshell" aria-label="Primary">
|
||||
<div class="container nav-inner">
|
||||
<a class="brand" href="/">Swansea Airport</a>
|
||||
|
||||
<div class="nav-links">
|
||||
{site.navigation.map((item) => (
|
||||
<a href={item.href}>{item.label}</a>
|
||||
|
||||
+50
-12
@@ -20,21 +20,60 @@ const latestNews = news.slice(0, 3);
|
||||
|
||||
<BaseLayout title="Home" description="Fast, clear airfield information for pilots and visitors.">
|
||||
<section class="hero">
|
||||
<div class="container hero-grid">
|
||||
<div class="container hero-stack">
|
||||
<div class="hero-panel">
|
||||
<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">
|
||||
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>
|
||||
<div class="cta-row">
|
||||
<a class="button primary" href="/visiting-pilots/">Visiting pilots</a>
|
||||
<a class="button secondary" href="/procedures-safety-noise-abatement/">Procedures and safety</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="hero-rail">
|
||||
<div class="surface">
|
||||
<section class="container story-flow">
|
||||
<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>
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
@@ -46,20 +85,19 @@ const latestNews = news.slice(0, 3);
|
||||
<span class="muted">Licensed hours</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="surface">
|
||||
</article>
|
||||
|
||||
<article class="surface">
|
||||
<p class="eyebrow">Runway overview</p>
|
||||
<ul class="compact-list">
|
||||
{site.runwayFacts.map((fact) => (
|
||||
<li>{fact}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container stack">
|
||||
<NoticeBanner notices={notices} />
|
||||
<FuelPricesWidget fuelPrices={fuelPrices} />
|
||||
|
||||
|
||||
+172
-50
@@ -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 {
|
||||
color-scheme: light;
|
||||
--bg: #f5f1e8;
|
||||
--panel: #fffaf0;
|
||||
--bg: #eef5fb;
|
||||
--bg-accent: #dcecff;
|
||||
--panel: rgba(255, 255, 255, 0.82);
|
||||
--panel-strong: #ffffff;
|
||||
--text: #12212c;
|
||||
--muted: #5b6570;
|
||||
--brand: #11384d;
|
||||
--brand-2: #8d5f2d;
|
||||
--line: rgba(18, 33, 44, 0.12);
|
||||
--critical: #8e1f1b;
|
||||
--warning: #b36a09;
|
||||
--info: #245b7d;
|
||||
--shadow: 0 18px 40px rgba(18, 33, 44, 0.08);
|
||||
--text: #102233;
|
||||
--muted: #516475;
|
||||
--brand: #0b4f7a;
|
||||
--brand-2: #1d76b8;
|
||||
--brand-soft: rgba(11, 79, 122, 0.12);
|
||||
--line: rgba(16, 34, 51, 0.12);
|
||||
--critical: #a11f3a;
|
||||
--warning: #bb6800;
|
||||
--info: #1974b6;
|
||||
--shadow: 0 18px 42px rgba(16, 34, 51, 0.1);
|
||||
--radius: 1.1rem;
|
||||
--radius-sm: 0.8rem;
|
||||
--content: 1120px;
|
||||
@@ -27,10 +31,11 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", sans-serif;
|
||||
font-family: 'Manrope', system-ui, sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(141, 95, 45, 0.16), transparent 35%),
|
||||
radial-gradient(circle at right 20%, rgba(18, 57, 77, 0.12), transparent 30%),
|
||||
radial-gradient(circle at top left, rgba(29, 118, 184, 0.18), transparent 34%),
|
||||
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);
|
||||
color: var(--text);
|
||||
line-height: 1.55;
|
||||
@@ -67,7 +72,7 @@ img {
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(245, 241, 232, 0.84);
|
||||
background: rgba(248, 251, 255, 0.88);
|
||||
}
|
||||
|
||||
.topbar-inner,
|
||||
@@ -83,17 +88,9 @@ img {
|
||||
padding: 0.85rem 0;
|
||||
}
|
||||
|
||||
.topbar-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem 1.2rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.navshell {
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(255, 250, 240, 0.88);
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
@@ -103,7 +100,7 @@ img {
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -122,6 +119,72 @@ img {
|
||||
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 {
|
||||
padding-block: 1.5rem 4rem;
|
||||
}
|
||||
@@ -134,18 +197,16 @@ section {
|
||||
padding-block: 1rem 2rem;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
.hero-stack {
|
||||
display: grid;
|
||||
grid-template-columns: 1.35fr 0.95fr;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-panel,
|
||||
.card,
|
||||
.surface,
|
||||
.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-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
@@ -157,13 +218,12 @@ section {
|
||||
|
||||
.hero-title {
|
||||
margin: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-size: clamp(2.2rem, 5vw, 4.6rem);
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 62ch;
|
||||
color: var(--muted);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
@@ -190,16 +250,12 @@ section {
|
||||
.button.primary {
|
||||
background: var(--brand);
|
||||
color: white;
|
||||
box-shadow: 0 12px 24px rgba(11, 79, 122, 0.2);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: transparent;
|
||||
border-color: rgba(18, 57, 77, 0.18);
|
||||
}
|
||||
|
||||
.hero-rail {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border-color: rgba(11, 79, 122, 0.18);
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
@@ -209,6 +265,39 @@ section {
|
||||
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 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@@ -250,7 +339,7 @@ section {
|
||||
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-size: clamp(1.4rem, 2.8vw, 2.2rem);
|
||||
}
|
||||
|
||||
@@ -299,7 +388,7 @@ section {
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(141, 95, 45, 0.1);
|
||||
background: rgba(29, 118, 184, 0.1);
|
||||
color: var(--brand-2);
|
||||
}
|
||||
|
||||
@@ -312,6 +401,17 @@ section {
|
||||
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 h4,
|
||||
.surface h3,
|
||||
@@ -334,8 +434,8 @@ section {
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--line);
|
||||
background: rgba(18, 33, 44, 0.93);
|
||||
color: rgba(255, 250, 240, 0.88);
|
||||
background: linear-gradient(180deg, #0d2e47, #091d2f);
|
||||
color: rgba(245, 250, 255, 0.9);
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
@@ -350,7 +450,7 @@ section {
|
||||
|
||||
.site-footer .eyebrow,
|
||||
.site-footer .muted {
|
||||
color: rgba(255, 250, 240, 0.66);
|
||||
color: rgba(245, 250, 255, 0.68);
|
||||
}
|
||||
|
||||
.prose {
|
||||
@@ -359,7 +459,7 @@ section {
|
||||
|
||||
.prose h2,
|
||||
.prose h3 {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
}
|
||||
|
||||
.stack {
|
||||
@@ -368,19 +468,41 @@ section {
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.hero-grid,
|
||||
.split-grid,
|
||||
.footer-grid {
|
||||
.footer-grid,
|
||||
.operational-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.story-flow {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.topbar-inner,
|
||||
.nav-inner,
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 0.7rem 1rem;
|
||||
.topbar-inner {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user