wcp/docs/.vitepress/theme/components/FeaturePageSection.vue at main · ghzhost/wcp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script>
export default {
	props: ["image"],
};
</script>

<template>
	<div class="FeaturePageSection">
		<div class="container">
			<figure v-if="image">
				<img :src="image" alt="" />
			</figure>
			<div>
				<h2>
					<slot name="title" />
				</h2>
				<p v-if="$slots.lead" class="lead">
					<slot name="lead" />
				</p>
				<slot name="list" />
			</div>
		</div>
	</div>
</template>

<style scoped>
.FeaturePageSection {
	margin: 0 0 0.5em;
	padding: 0 24px;
}

.PageHeader + .FeaturePageSection {
	padding: 48px 24px 0;
}

.FeaturePageSection:last-child {
	padding: 0 24px 48px;
}

.FeaturePageSection + .FeaturePageSection {
	margin: 2em 0 0.5em;
}

.FeaturePageSection h2 {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: inherit;
}

.FeaturePageSection .lead {
	margin: 0.5em 0;
	font-style: italic;
}

@media (min-width: 640px) {
	.FeaturePageSection {
		padding: 0 48px;
	}

	.PageHeader + .FeaturePageSection {
		padding: 48px 48px 0;
	}

	.FeaturePageSection:last-child {
		padding: 0 48px 48px;
	}

	.FeaturePageSection + .FeaturePageSection {
		margin: 4em 0 0.5em;
	}

	.FeaturePageSection h2 {
		font-size: 1.85rem;
	}

	.FeaturePageSection .lead {
		font-size: 1.15rem;
	}
}

@media (min-width: 960px) {
	.FeaturePageSection {
		padding: 0 64px;
	}

	.PageHeader + .FeaturePageSection {
		padding: 64px 64px 0;
	}

	.FeaturePageSection:last-child {
		padding: 0 64px 64px;
	}
}

.FeaturePageSection .container {
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 640px) {
	.FeaturePageSection .container {
		flex-direction: row;
		align-items: flex-start;
	}

	.FeaturePageSection:nth-child(2n + 1) .container {
		flex-direction: row-reverse;
	}

	.FeaturePageSection .container > * {
		width: 50%;
	}
}

figure {
	padding: 2rem;
	border-radius: 8px;
	background-color: var(--vp-c-bg-alt);
}
</style>