diff --git a/README.md b/README.md
index 1e482f18..83430fff 100644
--- a/README.md
+++ b/README.md
@@ -17,12 +17,29 @@ Elegant styles for all natives HTML elements without `.classes` and dark mode au
## Usage
-[Download Pico](https://github.com/picocss/pico/archive/v1.0.1.zip) and link `/css/pico.min.css` in the `` of your website.
+There are 3 ways to get started with pico.css:
+
+### Install manually
+[Download Pico](https://github.com/picocss/pico/archive/v1.0.2.zip) and link `/css/pico.min.css` in the `` of your website.
```html
```
+### Install from CDN
+Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
+
+```html
+
+```
+
+### Install with NPM
+```shell
+npm install @picocss/pico
+```
+
+
+
## Examples
- [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes`
diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css
index 96f16c90..de9cfb55 100644
--- a/docs/css/pico.docs.css
+++ b/docs/css/pico.docs.css
@@ -191,11 +191,6 @@ main > aside details[open] summary {
/**
* Docs: Documentation
*/
-#start a[role="button"] svg {
- padding-left: .66rem;
- vertical-align: baseline;
-}
-
#themes button i {
font-style: normal;
}
diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css
index d363d922..474ee55f 100644
--- a/docs/css/pico.docs.min.css
+++ b/docs/css/pico.docs.min.css
@@ -1,3 +1,3 @@
/*!
* Pico: Customs styles for Docs
- */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#start a[role=button] svg{padding-left:.66rem;vertical-align:baseline}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:1rem}}
\ No newline at end of file
+ */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:1rem}}
\ No newline at end of file
diff --git a/docs/img/logo.svg b/docs/img/logo.svg
deleted file mode 100644
index 5d47017a..00000000
--- a/docs/img/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/docs/index.html b/docs/index.html
index bea13454..43705c89 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -99,19 +99,15 @@
Usage
Work without package manager or dependencies 🙂!
- 1. Download Pico:
-
-
- Download pico.css
-
-
-
- 2. Link the CSS:
- (5.6 KB minified and gzipped)
-
+ There are 3 ways to get started with pico.css:
+ Install manually
+ Download Pico and link /css/pico.min.css in the <head> of your website.
<link rel="stylesheet" href="css/pico.min.css">
+ Install from CDN
+ Alternatively, you can use the unpkg CDN to link pico.css
+ <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+ Install with NPM
+ npm install @picocss/pico
Starter template:
<!doctype html>
diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss
index a396beb2..93833a02 100644
--- a/docs/scss/layout/_documentation.scss
+++ b/docs/scss/layout/_documentation.scss
@@ -5,16 +5,6 @@
// Docs: Themes
// ––––––––––––––––––––
-#start {
- a[role="button"] svg {
- padding-left: .66rem;
- vertical-align: baseline;
- }
-}
-
-// Docs: Themes
-// ––––––––––––––––––––
-
#themes {
button i {
font-style: normal;
diff --git a/package.json b/package.json
index a66aafeb..6e0fef46 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
{
"name": "@picocss/pico",
- "version": "1.0.1",
+ "version": "1.0.2",
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
- "author": "Lucas Larroche ",
- "main": "css/pico.min.css",
+ "author": "Lucas Larroche",
+ "main": "./css/pico.min.css",
"homepage": "https://picocss.com",
"license": "MIT",
"repository": {
"type": "git",
- "url": "https://github.com/picocss/pico.git"
+ "url": "git+https://github.com/picocss/pico.git"
},
"keywords": [
"css",
@@ -18,7 +18,7 @@
"semantic",
"minimal",
"lightweight",
- "scss-framwork",
+ "scss-framework",
"native-html"
],
"bugs": {