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:
parent
b93c8c7b2f
commit
0d10c43af6
1 changed files with 4 additions and 12 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue