refactor(about): migrate about page to PageShell + ColumnsLayout

- Replace .about-page wrapper with <PageShell>
- Replace <SidebarLayout> with <ColumnsLayout cols=events-sidebar :limit=3>
- Drop .about-page flex-chain CSS
- Leave bespoke .about-hero alone (intentional two-column hero)
This commit is contained in:
Jennie Robinson Faber 2026-04-08 17:00:46 +01:00
parent b93c8c7b2f
commit 0d10c43af6

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="about-page"> <PageShell>
<!-- ABOUT HERO (side by side) --> <!-- ABOUT HERO (side by side) -->
<div class="about-hero"> <div class="about-hero">
<div class="about-hero-left"> <div class="about-hero-left">
@ -31,7 +31,7 @@
</div> </div>
<!-- CONTENT AREA WITH EVENTS SIDEBAR --> <!-- CONTENT AREA WITH EVENTS SIDEBAR -->
<SidebarLayout> <ColumnsLayout cols="events-sidebar" :limit="3">
<!-- THE CIRCLES --> <!-- THE CIRCLES -->
<div class="about-section" id="circles"> <div class="about-section" id="circles">
<div class="section-label">The Circles</div> <div class="section-label">The Circles</div>
@ -111,21 +111,13 @@
> >
</p> </p>
</div> </div>
</SidebarLayout> </ColumnsLayout>
</div> </PageShell>
</template> </template>
<script setup></script> <script setup></script>
<style scoped> <style scoped>
/* Flex chain from layout .main-body: hero + grid grow so sidebar column matches main height */
.about-page {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
/* ---- ABOUT HERO ---- */ /* ---- ABOUT HERO ---- */
.about-hero { .about-hero {
display: grid; display: grid;