@slicemachine/adapter-sveltekit 0.3.78-alpha.lh-svelte5.2 → 0.3.78-alpha.xru-e2e-tests-logged-in.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AlternateGrid/javascript.svelte +2 -2
- package/dist/AlternateGrid/typescript.svelte +1 -5
- package/dist/CallToAction/javascript.svelte +3 -3
- package/dist/CallToAction/typescript.svelte +2 -6
- package/dist/CustomerLogos/javascript.svelte +2 -2
- package/dist/CustomerLogos/typescript.svelte +1 -5
- package/dist/Hero/javascript.svelte +2 -2
- package/dist/Hero/typescript.svelte +1 -5
- package/dist/hooks/documentation-read.cjs +2 -9
- package/dist/hooks/documentation-read.cjs.map +1 -1
- package/dist/hooks/documentation-read.js +2 -9
- package/dist/hooks/documentation-read.js.map +1 -1
- package/dist/hooks/project-init.cjs.map +1 -1
- package/dist/hooks/project-init.js.map +1 -1
- package/dist/hooks/slice-create.cjs +7 -22
- package/dist/hooks/slice-create.cjs.map +1 -1
- package/dist/hooks/slice-create.js +7 -22
- package/dist/hooks/slice-create.js.map +1 -1
- package/dist/plugin.cjs +2 -4
- package/dist/plugin.cjs.map +1 -1
- package/dist/plugin.js +2 -4
- package/dist/plugin.js.map +1 -1
- package/package.json +3 -5
- package/src/hooks/documentation-read.ts +8 -28
- package/src/hooks/project-init.ts +0 -2
- package/src/hooks/slice-create.ts +22 -55
- package/src/plugin.ts +2 -9
- package/dist/AlternateGrid/javascript.with-let-props.svelte +0 -227
- package/dist/AlternateGrid/typescript.with-let-props.svelte +0 -224
- package/dist/CallToAction/javascript.with-let-props.svelte +0 -127
- package/dist/CallToAction/typescript.with-let-props.svelte +0 -124
- package/dist/CustomerLogos/javascript.with-let-props.svelte +0 -124
- package/dist/CustomerLogos/typescript.with-let-props.svelte +0 -121
- package/dist/Hero/javascript.with-let-props.svelte +0 -190
- package/dist/Hero/typescript.with-let-props.svelte +0 -187
- package/dist/lib/checkIsSvelte5.cjs +0 -31
- package/dist/lib/checkIsSvelte5.cjs.map +0 -1
- package/dist/lib/checkIsSvelte5.d.ts +0 -7
- package/dist/lib/checkIsSvelte5.js +0 -31
- package/dist/lib/checkIsSvelte5.js.map +0 -1
- package/src/lib/checkIsSvelte5.ts +0 -49
@@ -1,227 +0,0 @@
|
|
1
|
-
<script>
|
2
|
-
import { PrismicImage, PrismicRichText } from "@prismicio/svelte";
|
3
|
-
import { isFilled } from "@prismicio/client";
|
4
|
-
|
5
|
-
/**
|
6
|
-
* @type {import("@prismicio/client").Content.${PascalNameToReplace}Slice}
|
7
|
-
*/
|
8
|
-
export let slice;
|
9
|
-
</script>
|
10
|
-
|
11
|
-
<section
|
12
|
-
data-slice-type={slice.slice_type}
|
13
|
-
data-slice-variation={slice.variation}
|
14
|
-
class="es-bounded es-alternate-grid"
|
15
|
-
>
|
16
|
-
<div
|
17
|
-
class={`
|
18
|
-
es-alternate-grid__content
|
19
|
-
${
|
20
|
-
isFilled.image(slice.primary.image)
|
21
|
-
? "es-alternate-grid__content--with-image"
|
22
|
-
: ""
|
23
|
-
}
|
24
|
-
`}
|
25
|
-
>
|
26
|
-
{#if isFilled.image(slice.primary.image)}
|
27
|
-
<PrismicImage
|
28
|
-
field={slice.primary.image}
|
29
|
-
class={`
|
30
|
-
es-alternate-grid__image
|
31
|
-
${
|
32
|
-
slice.variation === "imageRight"
|
33
|
-
? "es-alternate-grid__image--right"
|
34
|
-
: "es-alternate-grid__image--left"
|
35
|
-
}
|
36
|
-
`}
|
37
|
-
/>
|
38
|
-
{/if}
|
39
|
-
<div class="es-alternate-grid__primary-content">
|
40
|
-
<div class="es-alternate-grid__primary-content__intro">
|
41
|
-
{#if isFilled.keyText(slice.primary.eyebrowHeadline)}
|
42
|
-
<p class="es-alternate-grid__primary-content__intro__eyebrow">
|
43
|
-
{slice.primary.eyebrowHeadline}
|
44
|
-
</p>
|
45
|
-
{/if}
|
46
|
-
{#if isFilled.richText(slice.primary.title)}
|
47
|
-
<div class="es-alternate-grid__primary-content__intro__headline">
|
48
|
-
<PrismicRichText field={slice.primary.title} />
|
49
|
-
</div>
|
50
|
-
{/if}
|
51
|
-
{#if isFilled.richText(slice.primary.description)}
|
52
|
-
<div class="es-alternate-grid__primary-content__intro__description">
|
53
|
-
<PrismicRichText field={slice.primary.description} />
|
54
|
-
</div>
|
55
|
-
{/if}
|
56
|
-
</div>
|
57
|
-
{#if slice.primary.items && slice.primary.items.length}
|
58
|
-
<div class="es-alternate-grid__primary-content__items">
|
59
|
-
{#each slice.primary.items as item, i}
|
60
|
-
<div class="es-alternate-grid__item">
|
61
|
-
{#if isFilled.richText(item.title)}
|
62
|
-
<div class="es-alternate-grid__item__heading">
|
63
|
-
<PrismicRichText field={item.title} />
|
64
|
-
</div>
|
65
|
-
{/if}
|
66
|
-
{#if isFilled.richText(item.description)}
|
67
|
-
<div class="es-alternate-grid__item__description">
|
68
|
-
<PrismicRichText field={item.description} />
|
69
|
-
</div>
|
70
|
-
{/if}
|
71
|
-
</div>
|
72
|
-
{/each}
|
73
|
-
</div>
|
74
|
-
{/if}
|
75
|
-
</div>
|
76
|
-
</div>
|
77
|
-
|
78
|
-
<style>
|
79
|
-
.es-bounded {
|
80
|
-
margin: 0px;
|
81
|
-
min-width: 0px;
|
82
|
-
position: relative;
|
83
|
-
padding: 8vw 1.25rem;
|
84
|
-
}
|
85
|
-
|
86
|
-
.es-alternate-grid {
|
87
|
-
font-family: system-ui, sans-serif;
|
88
|
-
background-color: #fff;
|
89
|
-
color: #333;
|
90
|
-
}
|
91
|
-
|
92
|
-
.es-alternate-grid__content {
|
93
|
-
display: grid;
|
94
|
-
gap: 1.5rem;
|
95
|
-
grid-auto-flow: dense;
|
96
|
-
}
|
97
|
-
|
98
|
-
@media (min-width: 640px) {
|
99
|
-
.es-alternate-grid__content--with-image {
|
100
|
-
grid-template-columns: repeat(2, 1fr);
|
101
|
-
}
|
102
|
-
}
|
103
|
-
|
104
|
-
@media (min-width: 1200px) {
|
105
|
-
.es-alternate-grid__content--with-image {
|
106
|
-
grid-template-columns: repeat(2, 1fr);
|
107
|
-
}
|
108
|
-
}
|
109
|
-
|
110
|
-
.es-alternate-grid__image {
|
111
|
-
width: auto;
|
112
|
-
height: auto;
|
113
|
-
max-width: 100%;
|
114
|
-
align-self: center;
|
115
|
-
}
|
116
|
-
|
117
|
-
.es-alternate-grid__image--left {
|
118
|
-
order: 1;
|
119
|
-
}
|
120
|
-
|
121
|
-
.es-alternate-grid__image--left + div {
|
122
|
-
order: 2;
|
123
|
-
}
|
124
|
-
|
125
|
-
.es-alternate-grid__image--right {
|
126
|
-
order: 2;
|
127
|
-
}
|
128
|
-
|
129
|
-
.es-alternate-grid__image--right + div {
|
130
|
-
order: 1;
|
131
|
-
}
|
132
|
-
|
133
|
-
.es-alternate-grid__primary-content {
|
134
|
-
display: grid;
|
135
|
-
gap: 2rem;
|
136
|
-
}
|
137
|
-
|
138
|
-
.es-alternate-grid__primary-content__intro {
|
139
|
-
display: grid;
|
140
|
-
gap: 0.5rem;
|
141
|
-
}
|
142
|
-
|
143
|
-
.es-alternate-grid__primary-content__intro__eyebrow {
|
144
|
-
color: #8592e0;
|
145
|
-
font-size: 1.15rem;
|
146
|
-
font-weight: 500;
|
147
|
-
margin: 0;
|
148
|
-
}
|
149
|
-
|
150
|
-
.es-alternate-grid__primary-content__intro__headline {
|
151
|
-
font-size: 1.625rem;
|
152
|
-
font-weight: 700;
|
153
|
-
}
|
154
|
-
|
155
|
-
.es-alternate-grid__primary-content__intro__headline * {
|
156
|
-
margin: 0;
|
157
|
-
}
|
158
|
-
|
159
|
-
@media (min-width: 640px) {
|
160
|
-
.es-alternate-grid__primary-content__intro__headline {
|
161
|
-
font-size: 2rem;
|
162
|
-
}
|
163
|
-
}
|
164
|
-
|
165
|
-
@media (min-width: 1024px) {
|
166
|
-
.es-alternate-grid__primary-content__intro__headline {
|
167
|
-
font-size: 2.5rem;
|
168
|
-
}
|
169
|
-
}
|
170
|
-
|
171
|
-
@media (min-width: 1200px) {
|
172
|
-
.es-alternate-grid__primary-content__intro__headline {
|
173
|
-
font-size: 2.75rem;
|
174
|
-
}
|
175
|
-
}
|
176
|
-
|
177
|
-
.es-alternate-grid__primary-content__intro__description {
|
178
|
-
font-size: 1.15rem;
|
179
|
-
max-width: 38rem;
|
180
|
-
}
|
181
|
-
|
182
|
-
.es-alternate-grid__primary-content__intro__description > p {
|
183
|
-
margin: 0;
|
184
|
-
}
|
185
|
-
|
186
|
-
@media (min-width: 1200px) {
|
187
|
-
.es-alternate-grid__primary-content__intro__description {
|
188
|
-
font-size: 1.4rem;
|
189
|
-
}
|
190
|
-
}
|
191
|
-
|
192
|
-
.es-alternate-grid__primary-content__items {
|
193
|
-
display: grid;
|
194
|
-
gap: 2rem;
|
195
|
-
}
|
196
|
-
|
197
|
-
@media (min-width: 640px) {
|
198
|
-
.es-alternate-grid__primary-content__items {
|
199
|
-
grid-template-columns: repeat(2, 1fr);
|
200
|
-
}
|
201
|
-
}
|
202
|
-
|
203
|
-
.es-alternate-grid__item {
|
204
|
-
display: grid;
|
205
|
-
align-content: start;
|
206
|
-
}
|
207
|
-
|
208
|
-
.es-alternate-grid__item__heading {
|
209
|
-
font-weight: 700;
|
210
|
-
font-size: 1.17rem;
|
211
|
-
margin-top: 0;
|
212
|
-
margin-bottom: 0.5rem;
|
213
|
-
}
|
214
|
-
|
215
|
-
.es-alternate-grid__item__heading * {
|
216
|
-
margin: 0;
|
217
|
-
}
|
218
|
-
|
219
|
-
.es-alternate-grid__item__description {
|
220
|
-
font-size: 0.9rem;
|
221
|
-
}
|
222
|
-
|
223
|
-
.es-alternate-grid__item__description * {
|
224
|
-
margin: 0;
|
225
|
-
}
|
226
|
-
</style>
|
227
|
-
</section>
|
@@ -1,224 +0,0 @@
|
|
1
|
-
<script lang="ts">
|
2
|
-
import { PrismicImage, PrismicRichText } from "@prismicio/svelte";
|
3
|
-
import { type Content, isFilled } from "@prismicio/client";
|
4
|
-
|
5
|
-
export let slice: Content.PascalNameToReplaceSlice;
|
6
|
-
</script>
|
7
|
-
|
8
|
-
<section
|
9
|
-
data-slice-type={slice.slice_type}
|
10
|
-
data-slice-variation={slice.variation}
|
11
|
-
class="es-bounded es-alternate-grid"
|
12
|
-
>
|
13
|
-
<div
|
14
|
-
class={`
|
15
|
-
es-alternate-grid__content
|
16
|
-
${
|
17
|
-
isFilled.image(slice.primary.image)
|
18
|
-
? "es-alternate-grid__content--with-image"
|
19
|
-
: ""
|
20
|
-
}
|
21
|
-
`}
|
22
|
-
>
|
23
|
-
{#if isFilled.image(slice.primary.image)}
|
24
|
-
<PrismicImage
|
25
|
-
field={slice.primary.image}
|
26
|
-
class={`
|
27
|
-
es-alternate-grid__image
|
28
|
-
${
|
29
|
-
slice.variation === "imageRight"
|
30
|
-
? "es-alternate-grid__image--right"
|
31
|
-
: "es-alternate-grid__image--left"
|
32
|
-
}
|
33
|
-
`}
|
34
|
-
/>
|
35
|
-
{/if}
|
36
|
-
<div class="es-alternate-grid__primary-content">
|
37
|
-
<div class="es-alternate-grid__primary-content__intro">
|
38
|
-
{#if isFilled.keyText(slice.primary.eyebrowHeadline)}
|
39
|
-
<p class="es-alternate-grid__primary-content__intro__eyebrow">
|
40
|
-
{slice.primary.eyebrowHeadline}
|
41
|
-
</p>
|
42
|
-
{/if}
|
43
|
-
{#if isFilled.richText(slice.primary.title)}
|
44
|
-
<div class="es-alternate-grid__primary-content__intro__headline">
|
45
|
-
<PrismicRichText field={slice.primary.title} />
|
46
|
-
</div>
|
47
|
-
{/if}
|
48
|
-
{#if isFilled.richText(slice.primary.description)}
|
49
|
-
<div class="es-alternate-grid__primary-content__intro__description">
|
50
|
-
<PrismicRichText field={slice.primary.description} />
|
51
|
-
</div>
|
52
|
-
{/if}
|
53
|
-
</div>
|
54
|
-
{#if slice.primary.items && slice.primary.items.length}
|
55
|
-
<div class="es-alternate-grid__primary-content__items">
|
56
|
-
{#each slice.primary.items as item, i}
|
57
|
-
<div class="es-alternate-grid__item">
|
58
|
-
{#if isFilled.richText(item.title)}
|
59
|
-
<div class="es-alternate-grid__item__heading">
|
60
|
-
<PrismicRichText field={item.title} />
|
61
|
-
</div>
|
62
|
-
{/if}
|
63
|
-
{#if isFilled.richText(item.description)}
|
64
|
-
<div class="es-alternate-grid__item__description">
|
65
|
-
<PrismicRichText field={item.description} />
|
66
|
-
</div>
|
67
|
-
{/if}
|
68
|
-
</div>
|
69
|
-
{/each}
|
70
|
-
</div>
|
71
|
-
{/if}
|
72
|
-
</div>
|
73
|
-
</div>
|
74
|
-
|
75
|
-
<style>
|
76
|
-
.es-bounded {
|
77
|
-
margin: 0px;
|
78
|
-
min-width: 0px;
|
79
|
-
position: relative;
|
80
|
-
padding: 8vw 1.25rem;
|
81
|
-
}
|
82
|
-
|
83
|
-
.es-alternate-grid {
|
84
|
-
font-family: system-ui, sans-serif;
|
85
|
-
background-color: #fff;
|
86
|
-
color: #333;
|
87
|
-
}
|
88
|
-
|
89
|
-
.es-alternate-grid__content {
|
90
|
-
display: grid;
|
91
|
-
gap: 1.5rem;
|
92
|
-
grid-auto-flow: dense;
|
93
|
-
}
|
94
|
-
|
95
|
-
@media (min-width: 640px) {
|
96
|
-
.es-alternate-grid__content--with-image {
|
97
|
-
grid-template-columns: repeat(2, 1fr);
|
98
|
-
}
|
99
|
-
}
|
100
|
-
|
101
|
-
@media (min-width: 1200px) {
|
102
|
-
.es-alternate-grid__content--with-image {
|
103
|
-
grid-template-columns: repeat(2, 1fr);
|
104
|
-
}
|
105
|
-
}
|
106
|
-
|
107
|
-
.es-alternate-grid__image {
|
108
|
-
width: auto;
|
109
|
-
height: auto;
|
110
|
-
max-width: 100%;
|
111
|
-
align-self: center;
|
112
|
-
}
|
113
|
-
|
114
|
-
.es-alternate-grid__image--left {
|
115
|
-
order: 1;
|
116
|
-
}
|
117
|
-
|
118
|
-
.es-alternate-grid__image--left + div {
|
119
|
-
order: 2;
|
120
|
-
}
|
121
|
-
|
122
|
-
.es-alternate-grid__image--right {
|
123
|
-
order: 2;
|
124
|
-
}
|
125
|
-
|
126
|
-
.es-alternate-grid__image--right + div {
|
127
|
-
order: 1;
|
128
|
-
}
|
129
|
-
|
130
|
-
.es-alternate-grid__primary-content {
|
131
|
-
display: grid;
|
132
|
-
gap: 2rem;
|
133
|
-
}
|
134
|
-
|
135
|
-
.es-alternate-grid__primary-content__intro {
|
136
|
-
display: grid;
|
137
|
-
gap: 0.5rem;
|
138
|
-
}
|
139
|
-
|
140
|
-
.es-alternate-grid__primary-content__intro__eyebrow {
|
141
|
-
color: #8592e0;
|
142
|
-
font-size: 1.15rem;
|
143
|
-
font-weight: 500;
|
144
|
-
margin: 0;
|
145
|
-
}
|
146
|
-
|
147
|
-
.es-alternate-grid__primary-content__intro__headline {
|
148
|
-
font-size: 1.625rem;
|
149
|
-
font-weight: 700;
|
150
|
-
}
|
151
|
-
|
152
|
-
.es-alternate-grid__primary-content__intro__headline * {
|
153
|
-
margin: 0;
|
154
|
-
}
|
155
|
-
|
156
|
-
@media (min-width: 640px) {
|
157
|
-
.es-alternate-grid__primary-content__intro__headline {
|
158
|
-
font-size: 2rem;
|
159
|
-
}
|
160
|
-
}
|
161
|
-
|
162
|
-
@media (min-width: 1024px) {
|
163
|
-
.es-alternate-grid__primary-content__intro__headline {
|
164
|
-
font-size: 2.5rem;
|
165
|
-
}
|
166
|
-
}
|
167
|
-
|
168
|
-
@media (min-width: 1200px) {
|
169
|
-
.es-alternate-grid__primary-content__intro__headline {
|
170
|
-
font-size: 2.75rem;
|
171
|
-
}
|
172
|
-
}
|
173
|
-
|
174
|
-
.es-alternate-grid__primary-content__intro__description {
|
175
|
-
font-size: 1.15rem;
|
176
|
-
max-width: 38rem;
|
177
|
-
}
|
178
|
-
|
179
|
-
.es-alternate-grid__primary-content__intro__description > p {
|
180
|
-
margin: 0;
|
181
|
-
}
|
182
|
-
|
183
|
-
@media (min-width: 1200px) {
|
184
|
-
.es-alternate-grid__primary-content__intro__description {
|
185
|
-
font-size: 1.4rem;
|
186
|
-
}
|
187
|
-
}
|
188
|
-
|
189
|
-
.es-alternate-grid__primary-content__items {
|
190
|
-
display: grid;
|
191
|
-
gap: 2rem;
|
192
|
-
}
|
193
|
-
|
194
|
-
@media (min-width: 640px) {
|
195
|
-
.es-alternate-grid__primary-content__items {
|
196
|
-
grid-template-columns: repeat(2, 1fr);
|
197
|
-
}
|
198
|
-
}
|
199
|
-
|
200
|
-
.es-alternate-grid__item {
|
201
|
-
display: grid;
|
202
|
-
align-content: start;
|
203
|
-
}
|
204
|
-
|
205
|
-
.es-alternate-grid__item__heading {
|
206
|
-
font-weight: 700;
|
207
|
-
font-size: 1.17rem;
|
208
|
-
margin-top: 0;
|
209
|
-
margin-bottom: 0.5rem;
|
210
|
-
}
|
211
|
-
|
212
|
-
.es-alternate-grid__item__heading * {
|
213
|
-
margin: 0;
|
214
|
-
}
|
215
|
-
|
216
|
-
.es-alternate-grid__item__description {
|
217
|
-
font-size: 0.9rem;
|
218
|
-
}
|
219
|
-
|
220
|
-
.es-alternate-grid__item__description * {
|
221
|
-
margin: 0;
|
222
|
-
}
|
223
|
-
</style>
|
224
|
-
</section>
|
@@ -1,127 +0,0 @@
|
|
1
|
-
<script>
|
2
|
-
import { isFilled } from "@prismicio/client";
|
3
|
-
import {
|
4
|
-
PrismicLink,
|
5
|
-
PrismicImage,
|
6
|
-
PrismicRichText,
|
7
|
-
} from "@prismicio/svelte";
|
8
|
-
|
9
|
-
/**
|
10
|
-
* @type {import("@prismicio/client").Content.${PascalNameToReplace}Slice}
|
11
|
-
*/
|
12
|
-
export let slice;
|
13
|
-
|
14
|
-
$: alignment = slice.variation === "alignLeft" ? "left" : "center";
|
15
|
-
</script>
|
16
|
-
|
17
|
-
<section
|
18
|
-
data-slice-type={slice.slice_type}
|
19
|
-
data-slice-variation={slice.variation}
|
20
|
-
class="es-bounded es-call-to-action"
|
21
|
-
style="--alignment: {alignment}"
|
22
|
-
>
|
23
|
-
<div class="es-bounded__content es-call-to-action__content">
|
24
|
-
{#if isFilled.image(slice.primary.image)}
|
25
|
-
<PrismicImage
|
26
|
-
class="es-call-to-action__image"
|
27
|
-
field={slice.primary.image}
|
28
|
-
/>
|
29
|
-
{/if}
|
30
|
-
<div class="es-call-to-action__content">
|
31
|
-
{#if isFilled.richText(slice.primary.title)}
|
32
|
-
<div class="es-call-to-action__content__heading">
|
33
|
-
<PrismicRichText field={slice.primary.title} />
|
34
|
-
</div>
|
35
|
-
{/if}
|
36
|
-
{#if isFilled.richText(slice.primary.paragraph)}
|
37
|
-
<div class="es-call-to-action__content__paragraph">
|
38
|
-
<PrismicRichText field={slice.primary.paragraph} />
|
39
|
-
</div>
|
40
|
-
{/if}
|
41
|
-
</div>
|
42
|
-
<PrismicLink
|
43
|
-
class="es-call-to-action__button"
|
44
|
-
field={slice.primary.buttonLink}
|
45
|
-
/>
|
46
|
-
</div>
|
47
|
-
<style>
|
48
|
-
.es-bounded {
|
49
|
-
padding: 8vw 2rem;
|
50
|
-
}
|
51
|
-
|
52
|
-
.es-bounded__content {
|
53
|
-
margin-left: auto;
|
54
|
-
margin-right: auto;
|
55
|
-
}
|
56
|
-
|
57
|
-
@media screen and (min-width: 640px) {
|
58
|
-
.es-bounded__content {
|
59
|
-
max-width: 90%;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
@media screen and (min-width: 896px) {
|
64
|
-
.es-bounded__content {
|
65
|
-
max-width: 80%;
|
66
|
-
}
|
67
|
-
}
|
68
|
-
|
69
|
-
@media screen and (min-width: 1280px) {
|
70
|
-
.es-bounded__content {
|
71
|
-
max-width: 75%;
|
72
|
-
}
|
73
|
-
}
|
74
|
-
|
75
|
-
.es-call-to-action {
|
76
|
-
font-family: system-ui, sans-serif;
|
77
|
-
background-color: #fff;
|
78
|
-
color: #333;
|
79
|
-
}
|
80
|
-
|
81
|
-
.es-call-to-action__image {
|
82
|
-
max-width: 14rem;
|
83
|
-
height: auto;
|
84
|
-
width: auto;
|
85
|
-
justify-self: var(--alignment);
|
86
|
-
}
|
87
|
-
|
88
|
-
.es-call-to-action__content {
|
89
|
-
display: grid;
|
90
|
-
gap: 1rem;
|
91
|
-
justify-items: var(--alignment);
|
92
|
-
}
|
93
|
-
|
94
|
-
.es-call-to-action__content__heading {
|
95
|
-
font-size: 2rem;
|
96
|
-
font-weight: 700;
|
97
|
-
text-align: var(--alignment);
|
98
|
-
}
|
99
|
-
|
100
|
-
.es-call-to-action__content__heading * {
|
101
|
-
margin: 0;
|
102
|
-
}
|
103
|
-
|
104
|
-
.es-call-to-action__content__paragraph {
|
105
|
-
font-size: 1.15rem;
|
106
|
-
max-width: 38rem;
|
107
|
-
text-align: var(--alignment);
|
108
|
-
}
|
109
|
-
|
110
|
-
.es-call-to-action__button {
|
111
|
-
justify-self: var(--alignment);
|
112
|
-
border-radius: 0.25rem;
|
113
|
-
display: inline-block;
|
114
|
-
font-size: 0.875rem;
|
115
|
-
line-height: 1.3;
|
116
|
-
padding: 1rem 2.625rem;
|
117
|
-
text-align: var(--alignment);
|
118
|
-
transition: background-color 100ms linear;
|
119
|
-
background-color: #16745f;
|
120
|
-
color: #fff;
|
121
|
-
}
|
122
|
-
|
123
|
-
.es-call-to-action__button:hover {
|
124
|
-
background-color: #0d5e4c;
|
125
|
-
}
|
126
|
-
</style>
|
127
|
-
</section>
|
@@ -1,124 +0,0 @@
|
|
1
|
-
<script lang="ts">
|
2
|
-
import { type Content, isFilled } from "@prismicio/client";
|
3
|
-
import {
|
4
|
-
PrismicLink,
|
5
|
-
PrismicImage,
|
6
|
-
PrismicRichText,
|
7
|
-
} from "@prismicio/svelte";
|
8
|
-
|
9
|
-
export let slice: Content.PascalNameToReplaceSlice;
|
10
|
-
|
11
|
-
$: alignment = slice.variation === "alignLeft" ? "left" : "center";
|
12
|
-
</script>
|
13
|
-
|
14
|
-
<section
|
15
|
-
data-slice-type={slice.slice_type}
|
16
|
-
data-slice-variation={slice.variation}
|
17
|
-
class="es-bounded es-call-to-action"
|
18
|
-
style="--alignment: {alignment}"
|
19
|
-
>
|
20
|
-
<div class="es-bounded__content es-call-to-action__content">
|
21
|
-
{#if isFilled.image(slice.primary.image)}
|
22
|
-
<PrismicImage
|
23
|
-
class="es-call-to-action__image"
|
24
|
-
field={slice.primary.image}
|
25
|
-
/>
|
26
|
-
{/if}
|
27
|
-
<div class="es-call-to-action__content">
|
28
|
-
{#if isFilled.richText(slice.primary.title)}
|
29
|
-
<div class="es-call-to-action__content__heading">
|
30
|
-
<PrismicRichText field={slice.primary.title} />
|
31
|
-
</div>
|
32
|
-
{/if}
|
33
|
-
{#if isFilled.richText(slice.primary.paragraph)}
|
34
|
-
<div class="es-call-to-action__content__paragraph">
|
35
|
-
<PrismicRichText field={slice.primary.paragraph} />
|
36
|
-
</div>
|
37
|
-
{/if}
|
38
|
-
</div>
|
39
|
-
<PrismicLink
|
40
|
-
class="es-call-to-action__button"
|
41
|
-
field={slice.primary.buttonLink}
|
42
|
-
/>
|
43
|
-
</div>
|
44
|
-
<style>
|
45
|
-
.es-bounded {
|
46
|
-
padding: 8vw 2rem;
|
47
|
-
}
|
48
|
-
|
49
|
-
.es-bounded__content {
|
50
|
-
margin-left: auto;
|
51
|
-
margin-right: auto;
|
52
|
-
}
|
53
|
-
|
54
|
-
@media screen and (min-width: 640px) {
|
55
|
-
.es-bounded__content {
|
56
|
-
max-width: 90%;
|
57
|
-
}
|
58
|
-
}
|
59
|
-
|
60
|
-
@media screen and (min-width: 896px) {
|
61
|
-
.es-bounded__content {
|
62
|
-
max-width: 80%;
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
@media screen and (min-width: 1280px) {
|
67
|
-
.es-bounded__content {
|
68
|
-
max-width: 75%;
|
69
|
-
}
|
70
|
-
}
|
71
|
-
|
72
|
-
.es-call-to-action {
|
73
|
-
font-family: system-ui, sans-serif;
|
74
|
-
background-color: #fff;
|
75
|
-
color: #333;
|
76
|
-
}
|
77
|
-
|
78
|
-
.es-call-to-action__image {
|
79
|
-
max-width: 14rem;
|
80
|
-
height: auto;
|
81
|
-
width: auto;
|
82
|
-
justify-self: var(--alignment);
|
83
|
-
}
|
84
|
-
|
85
|
-
.es-call-to-action__content {
|
86
|
-
display: grid;
|
87
|
-
gap: 1rem;
|
88
|
-
justify-items: var(--alignment);
|
89
|
-
}
|
90
|
-
|
91
|
-
.es-call-to-action__content__heading {
|
92
|
-
font-size: 2rem;
|
93
|
-
font-weight: 700;
|
94
|
-
text-align: var(--alignment);
|
95
|
-
}
|
96
|
-
|
97
|
-
.es-call-to-action__content__heading * {
|
98
|
-
margin: 0;
|
99
|
-
}
|
100
|
-
|
101
|
-
.es-call-to-action__content__paragraph {
|
102
|
-
font-size: 1.15rem;
|
103
|
-
max-width: 38rem;
|
104
|
-
text-align: var(--alignment);
|
105
|
-
}
|
106
|
-
|
107
|
-
.es-call-to-action__button {
|
108
|
-
justify-self: var(--alignment);
|
109
|
-
border-radius: 0.25rem;
|
110
|
-
display: inline-block;
|
111
|
-
font-size: 0.875rem;
|
112
|
-
line-height: 1.3;
|
113
|
-
padding: 1rem 2.625rem;
|
114
|
-
text-align: var(--alignment);
|
115
|
-
transition: background-color 100ms linear;
|
116
|
-
background-color: #16745f;
|
117
|
-
color: #fff;
|
118
|
-
}
|
119
|
-
|
120
|
-
.es-call-to-action__button:hover {
|
121
|
-
background-color: #0d5e4c;
|
122
|
-
}
|
123
|
-
</style>
|
124
|
-
</section>
|