diff --git a/basic-layout.html b/basic-layout.html
index 0f7fa7e..089a80b 100644
--- a/basic-layout.html
+++ b/basic-layout.html
@@ -4,9 +4,9 @@
Basic layout - css-ui
-
-
-
+
+
+
diff --git a/components/header/popdown/popdown.css b/components/header/popdown/popdown.css
index 77f8d2a..dd14054 100644
--- a/components/header/popdown/popdown.css
+++ b/components/header/popdown/popdown.css
@@ -1,4 +1,4 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
body > header > ol {
float: right;
height: 100%
diff --git a/components/header/popdown/popdown.min.css b/components/header/popdown/popdown.min.css
index 1686947..0f97b7e 100644
--- a/components/header/popdown/popdown.min.css
+++ b/components/header/popdown/popdown.min.css
@@ -1,2 +1,2 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
body>header>ol{float:right;height:100%}body>header>ol>li{display:inline-block;width:var(--css-ui--header-height);height:var(--css-ui--header-height);float:left}body>header>ol>li>a{color:var(--css-ui--header--popdown-color);position:absolute;display:block;text-align:center;z-index:1;width:var(--css-ui--header-height);line-height:var(--css-ui--header-height);top:0}body>header>ol>li>a:first-of-type,body>header>ol>li>a:first-of-type:focus~a,body>header>ol>li>a:first-of-type:focus~p{z-index:2}body>header>ol>li>a~p,body>header>ol>li>ol{width:var(--css-ui--header--popdown-width);overflow-x:hidden;line-height:var(--css-ui--header-height);top:var(--css-ui--header-height);position:absolute;margin-left:calc(-1 * var(--css-ui--header--popdown-width) + var(--css-ui--header-height));z-index:-1;transform:scaleY(0);transform-origin:top;transition:transform .2s .2s}body>header>ol>li>ol{text-align:right}body>header>ol>li>a~p,body>header>ol>li>ol>li{background:var(--css-ui--header--popdown-item-bg);text-align:justify}body>header>ol>li>p{overflow-x:hidden;top:0;padding:0 var(--css-ui--padding) 0 var(--css-ui--padding)}body>header>ol>li>a:focus+ol:empty+p,body>header>ol>li>a:focus+ol:not(:empty),body>header>ol>li>a:focus+p{max-height:calc(100vh - var(--css-ui--header-height) - var(--css-ui--padding));transform:scaleY(1)}body>header>ol>li{counter-reset:items}body>header>ol>li>ol>li{counter-increment:items}body>header>ol>li>a:not(:focus)+ol:not(:empty)~a::after{content:counter(items);color:var(--css-ui--header--popdown-counter-color);background:var(--css-ui--header--popdown-counter-bg);font-size:var(--css-ui--header--popdown-counter-font-size);padding:var(--css-ui--header--popdown-counter-padding);line-height:calc(var(--css-ui--header--popdown-counter-font-size) - var(--css-ui--header--popdown-counter-padding));border-radius:var(--css-ui--header--popdown-counter-padding);position:absolute;display:inline-block;vertical-align:super;top:var(--css-ui--padding);margin-left:calc(-1 * var(--css-ui--padding));z-index:2} @media(prefers-reduced-motion:reduce){body>header>ol>li>ol,body>header>ol>li>a~p{transition:none}}
diff --git a/components/header/popdown/readme.md b/components/header/popdown/readme.md
index 471df9b..0a9e145 100644
--- a/components/header/popdown/readme.md
+++ b/components/header/popdown/readme.md
@@ -3,7 +3,7 @@
## CDN
```html
-
+
```
## Usage
diff --git a/components/main/card/card.min.css b/components/main/card/card.min.css
index 9535da6..c6385d3 100644
--- a/components/main/card/card.min.css
+++ b/components/main/card/card.min.css
@@ -1,2 +1,2 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
a>figure:first-child:last-child{display:inline-block;position:relative;border:var(--css-ui--main--card--border);min-width:100%;text-align:center}a>figure:first-child:last-child img{max-width:100%;min-width:100%;display:inline-block}a>figure:first-child:last-child figcaption{position:absolute;display:block;width:100%;border-top:var(--css-ui--main--card--border);background:var(--css-ui--main--card--bg);bottom:0}
diff --git a/components/main/card/readme.md b/components/main/card/readme.md
index 7817b32..54c80f2 100644
--- a/components/main/card/readme.md
+++ b/components/main/card/readme.md
@@ -3,7 +3,7 @@
## CDN
```html
-
+
```
## Usage
diff --git a/components/menu/expanded/expanded.css b/components/menu/expanded/expanded.css
index 50e2d9a..c6fab3a 100644
--- a/components/menu/expanded/expanded.css
+++ b/components/menu/expanded/expanded.css
@@ -1,4 +1,4 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
@media only screen and (min-width: 50em) {
body {
width: calc(100vw - var(--css-ui--menu--width));
diff --git a/components/menu/expanded/expanded.min.css b/components/menu/expanded/expanded.min.css
index fdb08be..6d855d4 100644
--- a/components/menu/expanded/expanded.min.css
+++ b/components/menu/expanded/expanded.min.css
@@ -1,2 +1,2 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
@media only screen and (min-width:50em){body{width:calc(100vw - var(--css-ui--menu--width));margin-left:var(--css-ui--menu--width)}body>header>h1{left:1em}body>nav>[tabindex="-1"],body>nav>[tabindex="1"]{display:none}body>nav>[tabindex="1"]+a+ol,body>nav>[tabindex="1"]+a+ol>li>a{width:var(--css-ui--menu--width)}}
diff --git a/components/menu/expanded/readme.md b/components/menu/expanded/readme.md
index d1bfddd..ddd2e2d 100644
--- a/components/menu/expanded/readme.md
+++ b/components/menu/expanded/readme.md
@@ -3,7 +3,7 @@
## CDN
```html
-
+
```
## Usage
diff --git a/components/menu/mini/mini.min.css b/components/menu/mini/mini.min.css
index 90b5332..46129e7 100644
--- a/components/menu/mini/mini.min.css
+++ b/components/menu/mini/mini.min.css
@@ -1,2 +1,2 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
@media only screen and (min-width:50em){body{width:calc(100vw - var(--css-ui--menu--icon-size));margin-left:var(--css-ui--menu--icon-size)}body>nav>[tabindex="1"]:not(:focus)+a+ol,body>nav>[tabindex="1"]:not(:focus)+a+ol>li>a{width:var(--css-ui--menu--icon-size)}}
diff --git a/components/menu/mini/readme.md b/components/menu/mini/readme.md
index 39e11ce..664a972 100644
--- a/components/menu/mini/readme.md
+++ b/components/menu/mini/readme.md
@@ -3,7 +3,7 @@
## CDN
```html
-
+
```
## Usage
diff --git a/css-ui.css b/css-ui.css
index 2b7c41f..81b9088 100644
--- a/css-ui.css
+++ b/css-ui.css
@@ -1,4 +1,4 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
::after, ::before, a, abbr, acronym, address, article, aside, audio, b, big, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, output, p, pre, progress, q, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {
font: inherit;
vertical-align: baseline;
@@ -30,6 +30,7 @@ html {
body {
display: table;
width: 100%;
+ padding-top: var(--css-ui--header-height);
height: 100%
}
@@ -132,7 +133,6 @@ body > nav > [tabindex="1"]:focus + a + ol::before {
}
main {
- top: var(--css-ui--header-height);
position: relative;
display: table-cell;
vertical-align: middle;
diff --git a/css-ui.min.css b/css-ui.min.css
index 5e764df..3fb9c2c 100644
--- a/css-ui.min.css
+++ b/css-ui.min.css
@@ -1,2 +1,2 @@
-/* {"name":"css-ui","version":"3.0.2","author":"Lcf.vs ","license":"MIT"} */
-::after,::before,a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,button,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,progress,q,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{font:inherit;vertical-align:baseline;box-sizing:border-box;border:none;outline:0;list-style:none;text-decoration:none;background:0 0;margin:0;padding:0;color:inherit}:active,:focus{outline:0}html{background:var(--css-ui--bg);font-family:var(--css-ui--font);scroll-snap-type:y mandatory;height:100vh;font-size:1em;overflow-x:hidden}body{display:table;width:100%;height:100%}body>header,body>nav{position:fixed;top:0;left:0;user-select:none}body>header{background:var(--css-ui--header-bg);width:100%;height:var(--css-ui--header-height);z-index:1}body>header>h1{position:fixed;left:var(--css-ui--menu--icon-size);line-height:var(--css-ui--header-height)}body>nav{bottom:0;margin-top:var(--css-ui--header-height);z-index:1}body>nav>[tabindex="-1"],body>nav>[tabindex="1"]{background:var(--css-ui--header-bg);position:fixed;top:0;display:block;width:var(--css-ui--menu--icon-size);text-align:center;line-height:var(--css-ui--menu--icon-size);z-index:1}body>nav>[tabindex="1"]{z-index:2}body>nav>[tabindex="1"]:focus{opacity:0;pointer-events:none}body>nav>[tabindex="1"]+a+ol{background:var(--css-ui--menu--bg);color:var(--css-ui--menu--color);height:var(--css-ui--menu--height);width:0;transition:width .2s .2s}body>nav>[tabindex="1"]:focus+a+ol,body>nav>[tabindex="1"]:focus+a+ol>li>a{width:var(--css-ui--menu--width)}body>nav>[tabindex="-1"]+ol>li{height:var(--css-ui--menu--icon-size);border-bottom:var(--css-ui--menu--border)}body>nav>[tabindex="-1"]+ol>li>a{-webkit-transition:width .2s .2s;transition:width .2s .2s;overflow-x:hidden;line-height:var(--css-ui--menu--icon-size);display:inline-block;min-width:100%;white-space:nowrap;width:0}body>nav>[tabindex="-1"]+ol>li>a::before{width:var(--css-ui--menu--icon-size);display:inline-block;text-align:center}body>nav>[tabindex="-1"]+ol>li>a:focus,body>nav>[tabindex="-1"]+ol>li>a:hover{background:rgba(255,255,255,.3)}body>nav>[tabindex="1"]:focus+a+ol::before{content:'';display:block;width:100%;height:100%;position:fixed;top:var(--css-ui--header-height);left:0;z-index:-1;background-color:var(--css-ui--menu--overlay-bg)}main{top:var(--css-ui--header-height);position:relative;display:table-cell;vertical-align:middle;text-align:center;padding:1em;height:calc(100vh - var(--css-ui--header-height))}main>h1{font-weight:700;margin:auto;display:block}main>*{display:inline-block;margin:var(--css-ui--padding);padding:var(--css-ui--padding);width:95%;text-align:left}@media screen and (min-width:50em){main>*{width:var(--css-ui--contents-width)}} @media(prefers-reduced-motion:reduce){body>nav>[tabindex="1"]+a+ol,body>nav>[tabindex="-1"]+ol>li>a{transition:none}}
+/* {"name":"css-ui","version":"3.0.3","author":"Lcf.vs ","license":"MIT"} */
+::after,::before,a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,button,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,progress,q,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{font:inherit;vertical-align:baseline;box-sizing:border-box;border:none;outline:0;list-style:none;text-decoration:none;background:0 0;margin:0;padding:0;color:inherit}:active,:focus{outline:0}html{background:var(--css-ui--bg);font-family:var(--css-ui--font);scroll-snap-type:y mandatory;height:100vh;font-size:1em;overflow-x:hidden}body{display:table;width:100%;padding-top:var(--css-ui--header-height);height:100%}body>header,body>nav{position:fixed;top:0;left:0;user-select:none}body>header{background:var(--css-ui--header-bg);width:100%;height:var(--css-ui--header-height);z-index:1}body>header>h1{position:fixed;left:var(--css-ui--menu--icon-size);line-height:var(--css-ui--header-height)}body>nav{bottom:0;margin-top:var(--css-ui--header-height);z-index:1}body>nav>[tabindex="-1"],body>nav>[tabindex="1"]{background:var(--css-ui--header-bg);position:fixed;top:0;display:block;width:var(--css-ui--menu--icon-size);text-align:center;line-height:var(--css-ui--menu--icon-size);z-index:1}body>nav>[tabindex="1"]{z-index:2}body>nav>[tabindex="1"]:focus{opacity:0;pointer-events:none}body>nav>[tabindex="1"]+a+ol{background:var(--css-ui--menu--bg);color:var(--css-ui--menu--color);height:var(--css-ui--menu--height);width:0;transition:width .2s .2s}body>nav>[tabindex="1"]:focus+a+ol,body>nav>[tabindex="1"]:focus+a+ol>li>a{width:var(--css-ui--menu--width)}body>nav>[tabindex="-1"]+ol>li{height:var(--css-ui--menu--icon-size);border-bottom:var(--css-ui--menu--border)}body>nav>[tabindex="-1"]+ol>li>a{transition:width .2s .2s;overflow-x:hidden;line-height:var(--css-ui--menu--icon-size);display:inline-block;min-width:100%;white-space:nowrap;width:0}body>nav>[tabindex="-1"]+ol>li>a::before{width:var(--css-ui--menu--icon-size);display:inline-block;text-align:center}body>nav>[tabindex="-1"]+ol>li>a:focus,body>nav>[tabindex="-1"]+ol>li>a:hover{background:rgba(255,255,255,.3)}body>nav>[tabindex="1"]:focus+a+ol::before{content:'';display:block;width:100%;height:100%;position:fixed;top:var(--css-ui--header-height);left:0;z-index:-1;background-color:var(--css-ui--menu--overlay-bg)}main{position:relative;display:table-cell;vertical-align:middle;text-align:center;padding:1em;height:calc(100vh - var(--css-ui--header-height))}main>h1{font-weight:700;margin:auto;display:block}main>*{display:inline-block;margin:var(--css-ui--padding);padding:var(--css-ui--padding);width:95%;text-align:left}@media screen and (min-width:50em){main>*{width:var(--css-ui--contents-width)}}@media (prefers-reduced-motion:reduce){body>nav>[tabindex="-1"]+ol>li>a,body>nav>[tabindex="1"]+a+ol{transition:none}}
diff --git a/package.json b/package.json
index 6491909..613a9ed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@lcf.vs/css-ui",
- "version": "3.0.2",
+ "version": "3.0.3",
"description": "A pure CSS base to make a responsive user interface",
"main": "css-ui.min.css",
"scripts": {
diff --git a/readme.md b/readme.md
index 84260f2..d9245a9 100644
--- a/readme.md
+++ b/readme.md
@@ -23,7 +23,7 @@ A pure CSS base to make a responsive user interface.
### Using a CDN
```html
-
+
```
```html
@@ -33,9 +33,9 @@ A pure CSS base to make a responsive user interface.
Basic layout - css-ui
-
-
-
+
+
+