Tweak styling of hero headline (#44)

directus · Jul 28, 2023 · b6451b1 · b6451b1
1 parent 99f613c
commit b6451b1
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 28 deletions.
diff --git a/components/Base/Heading.vue b/components/Base/Heading.vue
@@ -25,25 +25,31 @@ const iconSize = computed(() => {
 </script>
 
 <template>
-	<component
-		:is="tag"
-		:class="[
-			'base-heading',
-			size,
-			{
-				display: font === 'display',
-				body: font === 'body',
-			},
-		]"
-	>
-		<BaseIcon v-if="icon && size !== 'title'" :name="icon" :size="iconSize" :weight="700" />
-
-		<!-- eslint-disable-next-line vue/no-v-html -->
-		<span v-html="content" />
-	</component>
+	<div class="base-heading-container">
+		<component
+			:is="tag"
+			:class="[
+				'base-heading',
+				size,
+				{
+					display: font === 'display',
+					body: font === 'body',
+				},
+			]"
+		>
+			<BaseIcon v-if="icon && size !== 'title'" :name="icon" :size="iconSize" :weight="700" />
+
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<span v-html="content" />
+		</component>
+	</div>
 </template>
 
 <style scoped>
+.base-heading-container {
+	container-type: inline-size;
+}
+
 .display {
 	font-family: var(--family-display);
 }
@@ -72,8 +78,8 @@ const iconSize = computed(() => {
 }
 
 .title {
-	font-size: var(--font-size-8xl);
-	line-height: var(--line-height-8xl);
+	font-size: clamp(var(--font-size-4xl), 10cqi, var(--font-size-8xl));
+	line-height: 1;
 }
 
 .large {

diff --git a/components/Base/Text.vue b/components/Base/Text.vue
@@ -13,14 +13,26 @@ defineProps<BaseTextProps>();
 
 <template>
 	<!-- eslint-disable-next-line vue/no-v-html -->
-	<div class="base-text" v-html="content" />
+	<div class="base-text" :class="[`align-${align}`]" v-html="content" />
 </template>
 
 <style scoped>
 .base-text {
 	font-family: var(--family-body);
 	color: var(--gray-500);
 
-	/* TODO: Add styling for all base elements */
+	/* @TODO: Add styling for all base elements */
+}
+
+.align-start {
+	text-align: start;
+}
+
+.align-center {
+	text-align: center;
+}
+
+.align-end {
+	text-align: end;
 }
 </style>
diff --git a/components/Block/HeroHeadline.vue b/components/Block/HeroHeadline.vue
@@ -8,7 +8,11 @@ const props = defineProps<BlockProps>();
 const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_hero_headline', props.uuid, {
-			fields: ['heading', 'subheading', { button_group: [{ buttons: ['page', 'external_url', 'variant', 'label'] }] }],
+			fields: [
+				'heading',
+				'subheading',
+				{ button_group: [{ buttons: ['page', 'external_url', 'variant', 'label', 'color', 'pulse'] }] },
+			],
 		})
 	)
 );
@@ -24,6 +28,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 				:key="idx"
 				:href="button.page ?? button.external_url ?? undefined"
 				:variant="button.variant"
+				:color="button.color"
+				:pulse="button.pulse"
 			>
 				{{ button.label }}
 			</BaseButton>
@@ -33,10 +39,7 @@ const { data: block } = useAsyncData(props.uuid, () =>
 
 <style scoped>
 .hero-headline {
-	padding-top: var(--space-12);
-	padding-bottom: var(--space-12);
-	max-width: 64rem;
-	margin-inline: auto;
+	grid-column: narrow !important;
 }
 
 .hero-headline > * + * {

diff --git a/components/PageSection.vue b/components/PageSection.vue
@@ -11,12 +11,42 @@ withDefaults(defineProps<PageSectionProps>(), {
 </script>
 
 <template>
-	<div :class="[`bg-${background}`]">
+	<div class="page-section" :class="[`bg-${background}`]">
 		<slot />
 	</div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.page-section {
+	padding-block: var(--space-12);
+
+	&:first-of-type {
+		/* Extra padding block start for the fixed NavHeader on mobile */
+		padding-block-start: var(--space-32);
+	}
+}
+
+@media (width > 50rem) {
+	.page-section {
+		padding-block: var(--space-24);
+
+		&:first-of-type {
+			/* Extra padding block start for the fixed NavHeader on mobile */
+			padding-block-start: var(--space-44);
+		}
+	}
+}
+
+@media (width > 80rem) {
+	.page-section {
+		padding-block: var(--space-28);
+
+		&:first-of-type {
+			padding-block-start: var(--space-28);
+		}
+	}
+}
+
 .bg-white {
 	background-color: var(--white);
 }
@@ -34,7 +64,6 @@ withDefaults(defineProps<PageSectionProps>(), {
 	background-image: url('~/assets/svg/waves.svg');
 	background-repeat: no-repeat;
 	background-position: cover;
-	overflow: hidden;
 }
 
 .bg-gradient-pink-to-white {