spoko-design-system 0.2.14 → 0.2.16

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.
Files changed (13) hide show
  1. package/.astro/icon.d.ts +3 -1
  2. package/.github/workflows/deploy.yml +1 -1
  3. package/README.md +6 -1
  4. package/astro.config.mjs +141 -141
  5. package/dev-dist/sw.js +91 -91
  6. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  7. package/package.json +34 -34
  8. package/src/components/Breadcrumbs.vue +3 -3
  9. package/src/components/Button.vue +0 -1
  10. package/src/pages/components/breadcrumbs.mdx +2 -2
  11. package/src/pages/core/grid.mdx +25 -96
  12. package/src/pages/core/introduction.mdx +3 -1
  13. package/src/pages/index.astro +23 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "0.2.14",
3
+ "version": "0.2.16",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "astro dev",
@@ -28,20 +28,20 @@
28
28
  ],
29
29
  "dependencies": {
30
30
  "@algolia/client-search": "^4.22.1",
31
- "@astrojs/mdx": "^2.1.1",
32
- "@astrojs/node": "^8.2.0",
33
- "@astrojs/sitemap": "^3.0.5",
34
- "@astrojs/vue": "^4.0.8",
35
- "@docsearch/css": "^3.5.2",
31
+ "@astrojs/mdx": "^2.2.0",
32
+ "@astrojs/node": "^8.2.3",
33
+ "@astrojs/sitemap": "^3.1.1",
34
+ "@astrojs/vue": "^4.0.9",
35
+ "@docsearch/css": "^3.6.0",
36
36
  "@iconify-json/ant-design": "^1.1.15",
37
37
  "@iconify-json/bi": "^1.1.23",
38
38
  "@iconify-json/bx": "^1.1.10",
39
- "@iconify-json/carbon": "^1.1.30",
39
+ "@iconify-json/carbon": "^1.1.31",
40
40
  "@iconify-json/circle-flags": "^1.1.46",
41
41
  "@iconify-json/el": "^1.1.8",
42
42
  "@iconify-json/eos-icons": "^1.1.10",
43
- "@iconify-json/flowbite": "^1.1.1",
44
- "@iconify-json/fluent": "^1.1.48",
43
+ "@iconify-json/flowbite": "^1.1.3",
44
+ "@iconify-json/fluent": "^1.1.50",
45
45
  "@iconify-json/fluent-emoji": "1.1.18",
46
46
  "@iconify-json/icon-park-outline": "^1.1.15",
47
47
  "@iconify-json/la": "^1.1.8",
@@ -49,43 +49,43 @@
49
49
  "@iconify-json/noto-v1": "^1.1.11",
50
50
  "@iconify-json/octicon": "^1.1.52",
51
51
  "@iconify-json/ph": "^1.1.11",
52
- "@iconify-json/simple-icons": "^1.1.91",
52
+ "@iconify-json/simple-icons": "^1.1.95",
53
53
  "@iconify-json/uil": "^1.1.8",
54
- "@iconify/json": "^2.2.183",
54
+ "@iconify/json": "^2.2.192",
55
55
  "@iconify/vue": "^4.1.1",
56
- "@types/node": "^20.11.19",
57
- "@unocss/astro": "^0.58.5",
58
- "@unocss/preset-attributify": "^0.58.5",
59
- "@unocss/preset-typography": "^0.58.5",
60
- "@unocss/preset-uno": "^0.58.5",
61
- "@unocss/preset-web-fonts": "^0.58.5",
62
- "@unocss/preset-wind": "^0.58.5",
63
- "@unocss/reset": "^0.58.5",
64
- "@vite-pwa/astro": "^0.2.0",
65
- "@vueuse/core": "^10.7.2",
66
- "astro-compress": "^2.2.10",
56
+ "@types/node": "^20.11.28",
57
+ "@unocss/astro": "^0.58.6",
58
+ "@unocss/preset-attributify": "^0.58.6",
59
+ "@unocss/preset-typography": "^0.58.6",
60
+ "@unocss/preset-uno": "^0.58.6",
61
+ "@unocss/preset-web-fonts": "^0.58.6",
62
+ "@unocss/preset-wind": "^0.58.6",
63
+ "@unocss/reset": "^0.58.6",
64
+ "@vite-pwa/astro": "^0.3.0",
65
+ "@vueuse/core": "^10.9.0",
66
+ "astro-compress": "^2.2.15",
67
67
  "astro-i18next": "1.0.0-beta.21",
68
68
  "astro-icon": "^1.1.0",
69
- "astro-meta-tags": "^0.2.1",
69
+ "astro-meta-tags": "^0.2.2",
70
70
  "astro-navbar": "^2.3.1",
71
- "astro-pagefind": "^1.4.0",
72
- "i18next": "^23.9.0",
71
+ "astro-pagefind": "^1.5.0",
72
+ "i18next": "^23.10.1",
73
73
  "i18next-browser-languagedetector": "^7.2.0",
74
74
  "i18next-fs-backend": "^2.3.1",
75
- "i18next-http-backend": "^2.4.3",
75
+ "i18next-http-backend": "^2.5.0",
76
76
  "i18next-vue": "^4.0.0",
77
- "sass": "^1.71.0",
78
- "swiper": "^11.0.6",
79
- "unocss": "^0.58.5",
80
- "vite": "^5.1.3",
81
- "vue": "^3.4.19"
77
+ "sass": "^1.72.0",
78
+ "swiper": "^11.0.7",
79
+ "unocss": "^0.58.6",
80
+ "vite": "^5.1.6",
81
+ "vue": "^3.4.21"
82
82
  },
83
83
  "devDependencies": {
84
- "@unocss/transformer-variant-group": "^0.58.5",
85
- "astro": "^4.4.0",
84
+ "@unocss/transformer-variant-group": "^0.58.6",
85
+ "astro": "^4.5.5",
86
86
  "unocss": "^0.58.3"
87
87
  },
88
- "packageManager": "pnpm@8.15.2",
88
+ "packageManager": "pnpm@8.15.4",
89
89
  "pnpm": {
90
90
  "default": "8.15.2",
91
91
  "overrides": {
package/src/components/Breadcrumbs.vue CHANGED
@@ -39,10 +39,10 @@ const isLast = (index: Number) => {
39
39
 
40
40
  <template>
41
41
  <nav>
42
- <ul class="breadcrumbs flex items-center p-0 leading-none ">
43
- <li v-if="props.showBack" class="breadcrumb-item flex">
42
+ <ul class="breadcrumbs flex items-center p-0 overflow-x-auto sm:mr-12 leading-none h-full">
43
+ <li v-if="props.showBack" class="breadcrumb-item flex h-full">
44
44
  <button
45
- class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-500 whitespace-nowrap px-3 my-auto"
45
+ class="breadcrumb-link flex items-center px-0 h-full sm:(py-1 h-auto) hover:text-lightBlue-500 whitespace-nowrap px-3 my-auto"
46
46
  :title="props.textBack" onclick="history.back()" i-bx-bx-arrow-back />
47
47
  </li>
48
48
  </ul>
package/src/components/Button.vue CHANGED
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { defineProps } from "vue";
3
2
 
4
3
  const props = defineProps<{
5
4
  href?: string;
package/src/pages/components/breadcrumbs.mdx CHANGED
@@ -28,7 +28,7 @@ https://schema.org/ListItem
28
28
  product-number="6R0XXXXXX"
29
29
  class="py-1 order-0 px-1 max-w-full flex bg-white"
30
30
  show-back
31
- text-back="Home"
31
+ text-back="Back"
32
32
  />
33
33
  </div>
34
34
 
@@ -44,7 +44,7 @@ https://schema.org/ListItem
44
44
  product-number="6R0XXXXXX"
45
45
  class="py-1 order-0 px-1 max-w-full flex bg-white"
46
46
  show-back
47
- text-back="Home"
47
+ text-back="Back"
48
48
  />
49
49
  ```
50
50
 
package/src/pages/core/grid.mdx CHANGED
@@ -2,14 +2,9 @@
2
2
  layout: ../../layouts/MainLayout.astro
3
3
  ---
4
4
 
5
- import Container from '../../components/layout/Container.astro'
6
- import Header from '../../components/layout/Header.astro'
7
-
8
-
9
5
  # Grid
10
6
 
11
- Grid templates
12
-
7
+ Grid templates for articles, special sections, call to action etc.
13
8
 
14
9
 
15
10
  ## No more container:
@@ -17,31 +12,23 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
17
12
  <div class="component-preview" style="display: block">
18
13
  <main class="flow content-grid text-xl bg-white pt-8">
19
14
  <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>
15
+ <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 to action or blockquotes, or other things you want to call attention to.</p>
16
+ <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
17
+ <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 the old pattern.</p>
26
18
  <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
27
19
 
28
20
  <section class="full-width bg-primary text-white section-padding flow">
29
21
  <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>
22
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!</p>
23
+ <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?</p>
37
24
  </section>
38
25
 
39
26
  <h2>Back to normal</h2>
40
27
  <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
28
  <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>
29
+ <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>
30
+ <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>
31
+ <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
32
  <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
33
  <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
34
  <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>
@@ -49,19 +36,12 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
49
36
  <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
37
  <h3>Images as full-bleed works too</h3>
51
38
  <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>
39
+ <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
54
40
 
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>
41
+ <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate voluptas natus corporis.</p>
42
+ <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
62
43
  <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>
44
+ voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
65
45
  <section class="bg-primary text-white full-width">
66
46
  <h3>content</h3>
67
47
  </section>
@@ -73,31 +53,23 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
73
53
  ```html
74
54
  <main class="flow content-grid text-xl bg-white pt-8">
75
55
  <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>
56
+ <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 to action or blockquotes, or other things you want to call attention to.</p>
57
+ <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
58
+ <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 the old pattern.</p>
82
59
  <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
83
60
 
84
61
  <section class="full-width bg-primary text-white section-padding flow">
85
62
  <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>
63
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!</p>
64
+ <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?</p>
93
65
  </section>
94
66
 
95
67
  <h2>Back to normal</h2>
96
68
  <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
69
  <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>
70
+ <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>
71
+ <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>
72
+ <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
73
  <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
74
  <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
75
  <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>
@@ -105,56 +77,13 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
105
77
  <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
78
  <h3>Images as full-bleed works too</h3>
107
79
  <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>
80
+ <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
110
81
 
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>
82
+ <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate voluptas natus corporis.</p>
83
+ <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
84
+ <p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
121
85
  <section class="bg-primary text-white full-width">
122
86
  <h3>content</h3>
123
87
  </section>
124
88
  </main>
125
89
  ```
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
- ```
package/src/pages/core/introduction.mdx CHANGED
@@ -10,7 +10,9 @@ import Button from '../../components/Button.vue'
10
10
  SDS is the easiest way to start with some my websites.
11
11
  Since Astro is compatible with many frameworks, we can import components and document them right in the markdown files.
12
12
 
13
- The project is still in the development phase, use at your own risk ;-)
13
+ The project was inspired by the Astroship starter and Astro Design System Theme (the latter is currently not developed, nor is it responsive, but the nice organization in the configuration files appealed to me a lot).
14
+
15
+ It's still in the development phase, use at your own risk ;-)
14
16
 
15
17
 
16
18
  ## Getting started
package/src/pages/index.astro CHANGED
@@ -88,19 +88,37 @@ const navItems = [
88
88
  </Quote>
89
89
  </div>
90
90
 
91
- <div class="flex flex-col py-12">
91
+ <div class="px-4 grid lg:grid-cols-2 gap-4 md:gap-10 max-w-5xl mx-auto text-center py-12 md:px-0">
92
+
93
+ <div>
94
+ <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
95
+ <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
96
+ <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-light-blue-400">
97
+ <Icon name="mdi:npm"/>
98
+ </a>
99
+ <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-light-blue-400">
100
+ <Icon name="mdi:github"/>
101
+ </a>
102
+ </div>
103
+ </div>
104
+
105
+
106
+ <div>
92
107
  <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
93
- <ul class="mx-auto flex flex-wrap items-center justify-center text-2xl py-6">
94
- <li class="leading-5 me-6">
108
+ <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
109
+ <li class="leading-5 me-6 mb-4 lg:mb-0">
95
110
  <a href="https://catalog.polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> catalog.polo.blue</a>
96
111
  </li>
97
- <li class="leading-5 me-6">
112
+ <li class="leading-5 me-6 mb-4 lg:mb-0">
98
113
  <a href="https://polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> polo.blue</a>
99
114
  </li>
100
- <li class="leading-5 me-6">
115
+ <li class="leading-5 me-6 mb-4 lg:mb-0">
101
116
  <a href="https://spoko.space" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> spoko.space</a>
102
117
  </li>
103
118
  </ul>
119
+ </div>
120
+
121
+
104
122
  </div>
105
123
  </div>
106
124
  <script is:inline></script>