ghostguild-org/app/components/PageHeader.vue
Jennie Robinson Faber 127d2974c8 feat(layout): add PageShell, ColumnsLayout, PageSection primitives
Introduces three new layout primitives (no consumers yet). Adds
--page-pad-x/y/collapse CSS tokens to :root and .dark. Updates
PageHeader to read padding from tokens. Removes ignored size="large"
props from welcome and series pages. Fixes stray markdown in SidebarLayout.
2026-04-08 15:51:38 +01:00

33 lines
650 B
Vue

<template>
<div class="page-header">
<h1>{{ title }}</h1>
<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
<slot />
</div>
</template>
<script setup>
defineProps({
title: { type: String, required: true },
subtitle: { type: String, default: '' },
})
</script>
<style scoped>
.page-header {
padding: var(--page-pad-y) var(--page-pad-x) 16px;
border-bottom: 1px dashed var(--border);
}
.page-header h1 {
font-family: 'Brygada 1918', serif;
font-size: 28px;
font-weight: 600;
color: var(--text-bright);
line-height: 1.2;
}
.subtitle {
font-size: 12px;
color: var(--text-faint);
margin-top: 4px;
}
</style>