beercss 3.11.12 → 3.11.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.
Files changed (12) hide show
  1. package/README.md +9 -10
  2. package/dist/cdn/beer.css +48 -45
  3. package/dist/cdn/beer.custom-element.js +2 -2
  4. package/dist/cdn/beer.custom-element.min.js +1 -1
  5. package/dist/cdn/beer.min.css +1 -1
  6. package/dist/cdn/beer.scoped.css +48 -45
  7. package/dist/cdn/beer.scoped.min.css +1 -1
  8. package/package.json +1 -1
  9. package/src/cdn/customElement.js +2 -2
  10. package/src/cdn/elements/navigations.css +10 -6
  11. package/src/cdn/elements/shapes.css +36 -36
  12. package/src/cdn/settings/fonts.css +4 -4
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
  <p align="center">
5
5
  <a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="License"></a>
6
6
  <a href="https://github.com/beercss/beercss"><img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads"></a>
7
- <a href="https://bundlephobia.com/package/beercss@3.11.12" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.12" alt="minzipped size"></a>
7
+ <a href="https://bundlephobia.com/package/beercss@3.11.14" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.14" alt="minzipped size"></a>
8
8
  <a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="Version"></a>
9
9
  <a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="Pull Request"></a>
10
10
  <a href="https://github.com/beercss/beercss/issues"><img src="https://img.shields.io/github/issues/beercss/beercss" alt="Issues"></a>
@@ -131,8 +131,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
131
131
  ### DEFAULT VERSION
132
132
 
133
133
  ```html
134
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.min.css" rel="stylesheet" />
135
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.min.js"></script>
134
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.min.css" rel="stylesheet" />
135
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.min.js"></script>
136
136
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
137
137
  ```
138
138
 
@@ -150,8 +150,8 @@ import "material-dynamic-colors";
150
150
  Applied on child elements of `<* class="beer">...</*>`.
151
151
 
152
152
  ```html
153
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
154
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.min.js"></script>
153
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
154
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.min.js"></script>
155
155
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
156
156
  ```
157
157
 
@@ -169,7 +169,7 @@ import "material-dynamic-colors";
169
169
  Applied on child elements of `<beer-css>...</beer-css>`.
170
170
 
171
171
  ```html
172
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.custom-element.min.js"></script>
172
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.custom-element.min.js"></script>
173
173
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
174
174
  ```
175
175
 
@@ -195,8 +195,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
195
195
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
196
196
  <meta name="google" content="notranslate">
197
197
  <title>Hello world</title>
198
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.min.css" rel="stylesheet">
199
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.min.js"></script>
198
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.min.css" rel="stylesheet">
199
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.min.js"></script>
200
200
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
201
201
  </head>
202
202
  <body class="dark">
@@ -224,7 +224,6 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
224
224
  <div>More</div>
225
225
  </a>
226
226
  <div class="divider"></div>
227
- <label>Label</label>
228
227
  <a>
229
228
  <i>widgets</i>
230
229
  <div>Widgets</div>
@@ -277,7 +276,7 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
277
276
  </nav>
278
277
 
279
278
  <main class="responsive">
280
- <img src="https://www.beercss.com/beer-and-woman.svg" class="responsive round">
279
+ <img src="https://www.beercss.com/beer-and-woman.svg" class="responsive round medium-height">
281
280
  <h3>Welcome</h3>
282
281
  <h5>The beer is ready!</h5>
283
282
  </main>
package/dist/cdn/beer.css CHANGED
@@ -99,7 +99,7 @@ body.dark {
99
99
  font-style: normal;
100
100
  font-weight: 400;
101
101
  font-display: block;
102
- src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/material-symbols-outlined.woff2) format("woff2");
102
+ src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/material-symbols-outlined.woff2) format("woff2");
103
103
  }
104
104
  /* rounded icons */
105
105
  @font-face {
@@ -107,7 +107,7 @@ body.dark {
107
107
  font-style: normal;
108
108
  font-weight: 400;
109
109
  font-display: block;
110
- src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/material-symbols-rounded.woff2) format("woff2");
110
+ src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/material-symbols-rounded.woff2) format("woff2");
111
111
  }
112
112
  /* sharp icons */
113
113
  @font-face {
@@ -115,7 +115,7 @@ body.dark {
115
115
  font-style: normal;
116
116
  font-weight: 400;
117
117
  font-display: block;
118
- src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/material-symbols-sharp.woff2) format("woff2");
118
+ src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/material-symbols-sharp.woff2) format("woff2");
119
119
  }
120
120
  /* subset of only required icons */
121
121
  @font-face {
@@ -123,7 +123,7 @@ body.dark {
123
123
  font-style: normal;
124
124
  font-weight: 400;
125
125
  font-display: block;
126
- src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/material-symbols-subset.woff2) format("woff2");
126
+ src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/material-symbols-subset.woff2) format("woff2");
127
127
  }
128
128
  * {
129
129
  -webkit-tap-highlight-color: transparent;
@@ -3245,6 +3245,11 @@ nav > header {
3245
3245
  gap: 1rem;
3246
3246
  background: none !important;
3247
3247
  }
3248
+ nav:is(.top, .bottom) > header {
3249
+ flex-direction: row;
3250
+ align-items: center;
3251
+ margin: 0 1rem 0 0;
3252
+ }
3248
3253
  nav > header > * {
3249
3254
  margin: 0;
3250
3255
  }
@@ -3255,11 +3260,6 @@ nav > header > .extend:hover {
3255
3260
  nav > header > .extend:hover > span {
3256
3261
  display: none;
3257
3262
  }
3258
- nav:is(.top, .bottom) > header {
3259
- flex-direction: row;
3260
- align-items: center;
3261
- margin: 0 1rem 0 0;
3262
- }
3263
3263
  nav > :is(ol, ul) {
3264
3264
  all: inherit;
3265
3265
  min-inline-size: auto;
@@ -3280,6 +3280,9 @@ nav.max > :is(ol, ul) {
3280
3280
  nav.max > header {
3281
3281
  margin: 0 0 1.25rem 0;
3282
3282
  }
3283
+ nav.max:is(.top, .bottom) > header {
3284
+ margin: 0 1.25rem 0 0;
3285
+ }
3283
3286
  nav.max > header > .extend {
3284
3287
  --_padding: 1.5rem;
3285
3288
  inline-size: auto;
@@ -3838,112 +3841,112 @@ progress.max + * {
3838
3841
  border: none;
3839
3842
  }
3840
3843
  .shape.arch {
3841
- mask-image: url(arch.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/arch.svg);
3844
+ mask-image: url(arch.svg);
3842
3845
  }
3843
3846
  .shape.arrow {
3844
- mask-image: url(arrow.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/arrow.svg);
3847
+ mask-image: url(arrow.svg);
3845
3848
  }
3846
3849
  .shape.boom {
3847
- mask-image: url(boom.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/boom.svg);
3850
+ mask-image: url(boom.svg);
3848
3851
  }
3849
3852
  .shape.bun {
3850
- mask-image: url(bun.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/bun.svg);
3853
+ mask-image: url(bun.svg);
3851
3854
  }
3852
3855
  .shape.burst {
3853
- mask-image: url(burst.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/burst.svg);
3856
+ mask-image: url(burst.svg);
3854
3857
  }
3855
3858
  .shape.circle {
3856
- mask-image: url(circle.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/circle.svg);
3859
+ mask-image: url(circle.svg);
3857
3860
  }
3858
3861
  .shape.clamshell {
3859
- mask-image: url(clamshell.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/clamshell.svg);
3862
+ mask-image: url(clamshell.svg);
3860
3863
  }
3861
3864
  .shape.diamond {
3862
- mask-image: url(diamond.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/diamond.svg);
3865
+ mask-image: url(diamond.svg);
3863
3866
  }
3864
3867
  .shape.fan {
3865
- mask-image: url(fan.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/fan.svg);
3868
+ mask-image: url(fan.svg);
3866
3869
  }
3867
3870
  .shape.flower {
3868
- mask-image: url(flower.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/flower.svg);
3871
+ mask-image: url(flower.svg);
3869
3872
  }
3870
3873
  .shape.gem {
3871
- mask-image: url(gem.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/gem.svg);
3874
+ mask-image: url(gem.svg);
3872
3875
  }
3873
3876
  .shape.ghost-ish {
3874
- mask-image: url(ghost-ish.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/ghost-ish.svg);
3877
+ mask-image: url(ghost-ish.svg);
3875
3878
  }
3876
3879
  .shape.heart {
3877
- mask-image: url(heart.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/heart.svg);
3880
+ mask-image: url(heart.svg);
3878
3881
  }
3879
3882
  .shape.leaf-clover4 {
3880
- mask-image: url(leaf-clover4.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/leaf-clover4.svg);
3883
+ mask-image: url(leaf-clover4.svg);
3881
3884
  }
3882
3885
  .shape.leaft-clover8 {
3883
- mask-image: url(leaf-clover8.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/leaf-clover8.svg);
3886
+ mask-image: url(leaf-clover8.svg);
3884
3887
  }
3885
3888
  .shape.loading-indicator {
3886
- mask-image: url(loading-indicator.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/loading-indicator.svg);
3889
+ mask-image: url(loading-indicator.svg);
3887
3890
  }
3888
3891
  .shape.oval {
3889
- mask-image: url(oval.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/oval.svg);
3892
+ mask-image: url(oval.svg);
3890
3893
  }
3891
3894
  .shape.pentagon {
3892
- mask-image: url(pentagon.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/pentagon.svg);
3895
+ mask-image: url(pentagon.svg);
3893
3896
  }
3894
3897
  .shape.pill {
3895
- mask-image: url(pill.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/pill.svg);
3898
+ mask-image: url(pill.svg);
3896
3899
  }
3897
3900
  .shape.pixel-circle {
3898
- mask-image: url(pixel-circle.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/pixel-circle.svg);
3901
+ mask-image: url(pixel-circle.svg);
3899
3902
  }
3900
3903
  .shape.pixel-triangle {
3901
- mask-image: url(pixel-triangle.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/pixel-triangle.svg);
3904
+ mask-image: url(pixel-triangle.svg);
3902
3905
  }
3903
3906
  .shape.puffy {
3904
- mask-image: url(puffy.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/puffy.svg);
3907
+ mask-image: url(puffy.svg);
3905
3908
  }
3906
3909
  .shape.puffy-diamond {
3907
- mask-image: url(puffy-diamond.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/puffy-diamond.svg);
3910
+ mask-image: url(puffy-diamond.svg);
3908
3911
  }
3909
3912
  .shape.semicircle {
3910
- mask-image: url(semicircle.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/semicircle.svg);
3913
+ mask-image: url(semicircle.svg);
3911
3914
  }
3912
3915
  .shape.sided-cookie4 {
3913
- mask-image: url(sided-cookie4.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/sided-cookie4.svg);
3916
+ mask-image: url(sided-cookie4.svg);
3914
3917
  }
3915
3918
  .shape.sided-cookie6 {
3916
- mask-image: url(sided-cookie6.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/sided-cookie6.svg);
3919
+ mask-image: url(sided-cookie6.svg);
3917
3920
  }
3918
3921
  .shape.sided-cookie7 {
3919
- mask-image: url(sided-cookie7.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/sided-cookie7.svg);
3922
+ mask-image: url(sided-cookie7.svg);
3920
3923
  }
3921
3924
  .shape.sided-cookie9 {
3922
- mask-image: url(sided-cookie9.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/sided-cookie9.svg);
3925
+ mask-image: url(sided-cookie9.svg);
3923
3926
  }
3924
3927
  .shape.sided-cookie12 {
3925
- mask-image: url(sided-cookie12.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/sided-cookie12.svg);
3928
+ mask-image: url(sided-cookie12.svg);
3926
3929
  }
3927
3930
  .shape.slanted {
3928
- mask-image: url(slanted.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/slanted.svg);
3931
+ mask-image: url(slanted.svg);
3929
3932
  }
3930
3933
  .shape.soft-boom {
3931
- mask-image: url(soft-boom.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/soft-boom.svg);
3934
+ mask-image: url(soft-boom.svg);
3932
3935
  }
3933
3936
  .shape.soft-burst {
3934
- mask-image: url(soft-burst.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/soft-burst.svg);
3937
+ mask-image: url(soft-burst.svg);
3935
3938
  }
3936
3939
  .shape.square {
3937
- mask-image: url(square.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/square.svg);
3940
+ mask-image: url(square.svg);
3938
3941
  }
3939
3942
  .shape.sunny {
3940
- mask-image: url(sunny.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/sunny.svg);
3943
+ mask-image: url(sunny.svg);
3941
3944
  }
3942
3945
  .shape.triangle {
3943
- mask-image: url(triangle.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/triangle.svg);
3946
+ mask-image: url(triangle.svg);
3944
3947
  }
3945
3948
  .shape.very-sunny {
3946
- mask-image: url(very-sunny.svg), url(https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/very-sunny.svg);
3949
+ mask-image: url(very-sunny.svg);
3947
3950
  }
3948
3951
  @keyframes to-shape-rotate {
3949
3952
  0% {
package/dist/cdn/beer.custom-element.js CHANGED
@@ -12,7 +12,7 @@ class BeerCssCustomElement extends HTMLElement {
12
12
  BeerCssCustomElement.isJsLoaded = true;
13
13
 
14
14
  if (window.ui) return;
15
- return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.min.js");
15
+ return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.min.js");
16
16
  }
17
17
 
18
18
  async addCss() {
@@ -23,7 +23,7 @@ class BeerCssCustomElement extends HTMLElement {
23
23
 
24
24
  const head = document.querySelector("head");
25
25
  const element = document.createElement("link");
26
- element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.scoped.min.css");
26
+ element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.scoped.min.css");
27
27
  element.setAttribute("rel", "stylesheet");
28
28
  head.appendChild(element);
29
29
  }
package/dist/cdn/beer.custom-element.min.js CHANGED
@@ -1 +1 @@
1
- class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.12/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {this.classList.add("beer");await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;
1
+ class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.14/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {this.classList.add("beer");await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;