blob: 46f86142dc7f7da9d6edfd9c3ee49f75e7c7db2e (
plain) (
blame)
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
|
---
const { class: className, background = 'color-tan', offset = 0, size = "lg", elevation = "xl", pad = 1 } = Astro.props;
let style = `--pad: ${pad}; `;
if (offset !== 0) {
style += `--offset-block: ${offset};`
}
---
<div class="astro-container px-2" style={style}>
<article class={`panel elevation-${elevation} size-${size} ${className}`} style={`--background: ${background};`}>
{Astro.slots.title && <div class="title">
<slot name="title" />
</div>}
<slot />
</article>
</div>
<style>
.astro-container {
position: relative;
z-index: 1;
margin-top: calc(var(--offset-block, 0) * -1rem);
}
.panel {
--offset-inline: 0.5rem;
background: var(--background);
border-radius: var(--corner-md);
padding: calc(1.25rem * var(--pad, 1)) 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
margin-left: calc(var(--offset-inline) * -1);
margin-right: calc(var(--offset-inline) * -1);
}
.panel.size-md {
max-width: 64rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 45rem) {
.panel {
padding: calc(3.25rem * var(--pad, 1)) 2rem;
--offset-inline: 1.625rem;
}
}
.title {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--color-dusk);
}
.panel > :not(p):nth-child(2) {
margin-top: 3rem;
}
</style>
|
