spoko-design-system 0.2.12 → 0.2.14
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/astro.config.mjs +1 -1
- package/dev-dist/sw.js +1 -1
- package/package.json +3 -3
- package/src/components/Headline.vue +1 -1
- package/src/components/ProductDetailsList.vue +1 -1
- package/src/config.ts +1 -0
- package/src/pages/core/grid.mdx +160 -0
- package/src/styles/base/_base.scss +37 -5
- package/src/styles/base/grid.scss +99 -0
- package/src/styles/main.scss +1 -0
package/astro.config.mjs
CHANGED
package/dev-dist/sw.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.14",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "astro dev",
|
|
@@ -69,12 +69,12 @@
|
|
|
69
69
|
"astro-meta-tags": "^0.2.1",
|
|
70
70
|
"astro-navbar": "^2.3.1",
|
|
71
71
|
"astro-pagefind": "^1.4.0",
|
|
72
|
-
"i18next": "^23.
|
|
72
|
+
"i18next": "^23.9.0",
|
|
73
73
|
"i18next-browser-languagedetector": "^7.2.0",
|
|
74
74
|
"i18next-fs-backend": "^2.3.1",
|
|
75
75
|
"i18next-http-backend": "^2.4.3",
|
|
76
76
|
"i18next-vue": "^4.0.0",
|
|
77
|
-
"sass": "^1.
|
|
77
|
+
"sass": "^1.71.0",
|
|
78
78
|
"swiper": "^11.0.6",
|
|
79
79
|
"unocss": "^0.58.5",
|
|
80
80
|
"vite": "^5.1.3",
|
package/src/config.ts
CHANGED
|
@@ -21,6 +21,7 @@ export const SIDEBAR = [
|
|
|
21
21
|
{ text: "Colors", link: "/core/colors/" },
|
|
22
22
|
{ text: "Typography", link: "/core/typography/" },
|
|
23
23
|
{ text: "Shadows", link: "/core/shadows/" },
|
|
24
|
+
{ text: "Grid", link: "/core/grid/" },
|
|
24
25
|
|
|
25
26
|
{ text: "Components", header: true },
|
|
26
27
|
{ text: "Badges", link: "/components/badges/" },
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: ../../layouts/MainLayout.astro
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import Container from '../../components/layout/Container.astro'
|
|
6
|
+
import Header from '../../components/layout/Header.astro'
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
# Grid
|
|
10
|
+
|
|
11
|
+
Grid templates
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## No more container:
|
|
16
|
+
Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
|
|
17
|
+
<div class="component-preview" style="display: block">
|
|
18
|
+
<main class="flow content-grid text-xl bg-white pt-8">
|
|
19
|
+
<h1 class='article-title'>Content without containers</h1>
|
|
20
|
+
<p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls
|
|
21
|
+
to action or blockquotes, or other things you want to call attention to.</p>
|
|
22
|
+
<p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid,
|
|
23
|
+
and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
|
|
24
|
+
<p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to
|
|
25
|
+
the old pattern.</p>
|
|
26
|
+
<p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
|
|
27
|
+
|
|
28
|
+
<section class="full-width bg-primary text-white section-padding flow">
|
|
29
|
+
<h2>This section has a different background-color</h2>
|
|
30
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis
|
|
31
|
+
molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum
|
|
32
|
+
nobis maiores doloremque, nostrum deleniti!</p>
|
|
33
|
+
<p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam
|
|
34
|
+
facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium
|
|
35
|
+
ex
|
|
36
|
+
alias?</p>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
<h2>Back to normal</h2>
|
|
40
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p>
|
|
41
|
+
<p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
|
|
42
|
+
<p>Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.</p>
|
|
43
|
+
<p class='breakout call-to-action border-l-4 border-blue-400 text-2xl font-headlight'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
|
|
44
|
+
<p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
|
|
45
|
+
<p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
|
|
46
|
+
<p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
|
|
47
|
+
<p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
|
|
48
|
+
<p class='breakout call-to-action border-2 border-blue-700 font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
|
|
49
|
+
<p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
|
|
50
|
+
<h3>Images as full-bleed works too</h3>
|
|
51
|
+
<img class='full-width' src="https://unsplash.it/1600/400" alt="" />
|
|
52
|
+
<p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi
|
|
53
|
+
repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
|
|
54
|
+
|
|
55
|
+
<p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in,
|
|
56
|
+
necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam,
|
|
57
|
+
voluptate
|
|
58
|
+
voluptas natus corporis.</p>
|
|
59
|
+
<p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum
|
|
60
|
+
ratione
|
|
61
|
+
vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
|
|
62
|
+
<p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam
|
|
63
|
+
voluptas
|
|
64
|
+
magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
|
|
65
|
+
<section class="bg-primary text-white full-width">
|
|
66
|
+
<h3>content</h3>
|
|
67
|
+
</section>
|
|
68
|
+
</main>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
### Code
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<main class="flow content-grid text-xl bg-white pt-8">
|
|
75
|
+
<h1 class='article-title'>Content without containers</h1>
|
|
76
|
+
<p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls
|
|
77
|
+
to action or blockquotes, or other things you want to call attention to.</p>
|
|
78
|
+
<p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid,
|
|
79
|
+
and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
|
|
80
|
+
<p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to
|
|
81
|
+
the old pattern.</p>
|
|
82
|
+
<p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
|
|
83
|
+
|
|
84
|
+
<section class="full-width bg-primary text-white section-padding flow">
|
|
85
|
+
<h2>This section has a different background-color</h2>
|
|
86
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis
|
|
87
|
+
molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum
|
|
88
|
+
nobis maiores doloremque, nostrum deleniti!</p>
|
|
89
|
+
<p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam
|
|
90
|
+
facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium
|
|
91
|
+
ex
|
|
92
|
+
alias?</p>
|
|
93
|
+
</section>
|
|
94
|
+
|
|
95
|
+
<h2>Back to normal</h2>
|
|
96
|
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p>
|
|
97
|
+
<p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
|
|
98
|
+
<p>Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.</p>
|
|
99
|
+
<p class='breakout call-to-action border-l-4 border-blue-400 text-2xl font-headlight'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
|
|
100
|
+
<p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
|
|
101
|
+
<p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
|
|
102
|
+
<p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
|
|
103
|
+
<p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
|
|
104
|
+
<p class='breakout call-to-action border-2 border-blue-700 font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
|
|
105
|
+
<p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
|
|
106
|
+
<h3>Images as full-bleed works too</h3>
|
|
107
|
+
<img class='full-width' src="https://unsplash.it/1600/400" alt="" />
|
|
108
|
+
<p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi
|
|
109
|
+
repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
|
|
110
|
+
|
|
111
|
+
<p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in,
|
|
112
|
+
necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam,
|
|
113
|
+
voluptate
|
|
114
|
+
voluptas natus corporis.</p>
|
|
115
|
+
<p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum
|
|
116
|
+
ratione
|
|
117
|
+
vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
|
|
118
|
+
<p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam
|
|
119
|
+
voluptas
|
|
120
|
+
magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
|
|
121
|
+
<section class="bg-primary text-white full-width">
|
|
122
|
+
<h3>content</h3>
|
|
123
|
+
</section>
|
|
124
|
+
</main>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
## Container FullWidth (max-w-full)
|
|
129
|
+
|
|
130
|
+
<div class="component-preview" style="display: block">
|
|
131
|
+
<Container class="bg-white" isFullWidth>content</Container>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
### Code
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<Container class="bg-white" isFullWidth>content</Container>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Header
|
|
141
|
+
|
|
142
|
+
<div class="component-preview" style="display: block">
|
|
143
|
+
<Header class="static">
|
|
144
|
+
<div slot="logo" class="flex-shrink-0 flex items-center h-8">
|
|
145
|
+
<div class="bg-gray">LOGO</div>
|
|
146
|
+
</div>
|
|
147
|
+
<input type="text" slot="search" class="h-full w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
|
|
148
|
+
</Header>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
### Code
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
<Header>
|
|
155
|
+
<div slot="logo" class="flex-shrink-0 flex items-center h-8">
|
|
156
|
+
<div class="bg-gray">LOGO</div>
|
|
157
|
+
</div>
|
|
158
|
+
<input type="text" slot="search" class="h-full w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
|
|
159
|
+
</Header>
|
|
160
|
+
```
|
|
@@ -1,7 +1,35 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--
|
|
2
|
+
--color-scheme: light;
|
|
3
|
+
|
|
4
|
+
--clr-primary-400: hsl(198, 100%, 43%) // #{$blue};
|
|
3
5
|
--secondary: #{$gray-500};
|
|
4
6
|
--tertiary: #{$verydarkblue};
|
|
7
|
+
|
|
8
|
+
--font-family: 'vw_textregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;;
|
|
9
|
+
|
|
10
|
+
// variables for future changes:
|
|
11
|
+
|
|
12
|
+
// font sies
|
|
13
|
+
--fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
|
|
14
|
+
--fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
|
|
15
|
+
--fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
|
|
16
|
+
--fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
|
|
17
|
+
--fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
|
|
18
|
+
--fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
|
|
19
|
+
--fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
|
|
20
|
+
|
|
21
|
+
// colors
|
|
22
|
+
--clr-primary-300: rgb(53, 114, 227);
|
|
23
|
+
--clr-primary-400: hsl(198, 100%, 43%);
|
|
24
|
+
--clr-primary-500: hsl(219, 76%, 25%);
|
|
25
|
+
--clr-secondary-300: hsl(269, 75%, 55%);
|
|
26
|
+
--clr-secondary-400: hsl(269, 75%, 40%);
|
|
27
|
+
--clr-secondary-500: hsl(269, 75%, 25%);
|
|
28
|
+
--clr-accent-200: hsl(358, 85%, 80%);
|
|
29
|
+
--clr-accent-300: hsl(358, 72%, 65%);
|
|
30
|
+
--clr-accent-400: hsl(358, 72%, 50%);
|
|
31
|
+
--clr-accent-500: hsl(358, 72%, 35%);
|
|
32
|
+
|
|
5
33
|
}
|
|
6
34
|
|
|
7
35
|
* {
|
|
@@ -10,7 +38,7 @@
|
|
|
10
38
|
}
|
|
11
39
|
|
|
12
40
|
body {
|
|
13
|
-
font-family:
|
|
41
|
+
font-family: var(--font-family);
|
|
14
42
|
overflow-y: scroll;
|
|
15
43
|
overflow-x: hidden;
|
|
16
44
|
}
|
|
@@ -34,14 +62,14 @@ body {
|
|
|
34
62
|
|
|
35
63
|
::-webkit-scrollbar-thumb {
|
|
36
64
|
border-radius: 0;
|
|
37
|
-
background-color: var(--primary);
|
|
65
|
+
background-color: var(--clr-primary-400);
|
|
38
66
|
}
|
|
39
67
|
|
|
40
68
|
// Fallback to browsers without webkit-scrollbar support
|
|
41
69
|
@supports not selector(::-webkit-scrollbar) {
|
|
42
70
|
* {
|
|
43
71
|
scrollbar-width: thin;
|
|
44
|
-
scrollbar-color: var(--primary) rgba(0, 0, 0, 0.1)
|
|
72
|
+
scrollbar-color: var(--clr-primary-400) rgba(0, 0, 0, 0.1)
|
|
45
73
|
}
|
|
46
74
|
}
|
|
47
75
|
|
|
@@ -62,6 +90,10 @@ body {
|
|
|
62
90
|
color: #fff;
|
|
63
91
|
}
|
|
64
92
|
|
|
93
|
+
.bg-primary {
|
|
94
|
+
background: var(--clr-primary-500);
|
|
95
|
+
}
|
|
96
|
+
|
|
65
97
|
.display-3 {
|
|
66
98
|
letter-spacing: -0.96px;
|
|
67
99
|
}
|
|
@@ -80,7 +112,7 @@ html {
|
|
|
80
112
|
:root {
|
|
81
113
|
// --swiper-navigation-color: #0099da;
|
|
82
114
|
--swiper-navigation-size: 22px;
|
|
83
|
-
--swiper-scrollbar-drag-bg-color: var(--primary);
|
|
115
|
+
--swiper-scrollbar-drag-bg-color: var(--clr-primary-400);
|
|
84
116
|
--swiper-scrollbar-size: 1px;
|
|
85
117
|
--swiper-scrollbar-bottom: 0px;
|
|
86
118
|
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
.content-grid {
|
|
2
|
+
--padding-inline: 1rem;
|
|
3
|
+
--content-max-width: 900px;
|
|
4
|
+
--breakout-max-width: 1200px;
|
|
5
|
+
|
|
6
|
+
--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
|
|
7
|
+
|
|
8
|
+
display: grid;
|
|
9
|
+
grid-template-columns:
|
|
10
|
+
[full-width-start] minmax(var(--padding-inline), 1fr)
|
|
11
|
+
[breakout-start] minmax(0, var(--breakout-size))
|
|
12
|
+
[content-start] min(
|
|
13
|
+
100% - (var(--padding-inline) * 2),
|
|
14
|
+
var(--content-max-width)
|
|
15
|
+
)
|
|
16
|
+
[content-end]
|
|
17
|
+
minmax(0, var(--breakout-size)) [breakout-end]
|
|
18
|
+
minmax(var(--padding-inline), 1fr) [full-width-end];
|
|
19
|
+
|
|
20
|
+
h1, h2, h3, h4, h5 {
|
|
21
|
+
font-weight: bold;
|
|
22
|
+
@apply font-textbold;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&> :not(.breakout, .full-width),
|
|
26
|
+
.full-width> :not(.breakout, .full-width) {
|
|
27
|
+
grid-column: content;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&>.breakout {
|
|
31
|
+
grid-column: breakout;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&>.full-width {
|
|
35
|
+
grid-column: full-width;
|
|
36
|
+
|
|
37
|
+
display: grid;
|
|
38
|
+
grid-template-columns: inherit;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
img.full-width {
|
|
44
|
+
width: 100%;
|
|
45
|
+
max-height: 45vh;
|
|
46
|
+
object-fit: cover;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
*,
|
|
50
|
+
*::before,
|
|
51
|
+
*::after {
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.article-title {
|
|
56
|
+
@apply font-textbold;
|
|
57
|
+
font-size: var(--fs-800);
|
|
58
|
+
line-height: 1.05;
|
|
59
|
+
text-transform: uppercase;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.section-title {
|
|
63
|
+
font-size: var(--fs-800);
|
|
64
|
+
line-height: 1.1;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.visually-hidden {
|
|
68
|
+
clip: rect(0 0 0 0);
|
|
69
|
+
clip-path: inset(50%);
|
|
70
|
+
height: 1px;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
position: absolute;
|
|
73
|
+
white-space: nowrap;
|
|
74
|
+
width: 1px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.call-to-action {
|
|
78
|
+
@apply px-8 py-6 ; //border-2 border-black;
|
|
79
|
+
// background: var(--clr-primary-400);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.wrapper {
|
|
83
|
+
width: calc(100% - 3rem);
|
|
84
|
+
max-width: var(--content-max-width);
|
|
85
|
+
margin-inline: auto;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.flow>*+* {
|
|
89
|
+
margin-top: var(--flow-spacing, 1em);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.section-padding {
|
|
93
|
+
padding-block: 2.5rem;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.even-columns {
|
|
97
|
+
display: flex;
|
|
98
|
+
gap: 1rem;
|
|
99
|
+
}
|