mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 09:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'dev' into pr/72

Browse source
This commit is contained in:
Lucas Larroche 2021-12-24 00:41:47 +07:00
commit 0edf2e2d70
8 changed files with 11 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -28,7 +28,7 @@ Pico uses simple native HTML tags as much as possible. Less than 10 .classes are
No dependencies, package manager, external files, or JavaScript.
**Responsive everything**
Elegant and consistent adaptative spacings and typography on all devices.
Elegant and consistent adaptive spacings and typography on all devices.
**Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference.
@ -70,9 +70,9 @@ npm install @picocss/pico
## Class-less version
Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
In this version, `header`, `main` and `footer` act as container.
In this version, `header`, `main` and `footer` act as containers.
Use the default `.classless` version if you need centered viewports:

2
docs/containers.html
View file

File diff suppressed because one or more lines are too long

6
docs/css/pico.docs.css
View file

@ -90,14 +90,13 @@ svg {
*/
main > aside nav {
width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2);
padding-bottom: var(--block-spacing-vertical);
}
@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;
}
@ -118,9 +117,6 @@ main > aside nav a#toggle-docs-navigation svg {
display: none;
}
}
main > aside nav.closed-on-mobile {
margin-bottom: var(--block-spacing-vertical);
}
main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
display: none;
}

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View file

File diff suppressed because one or more lines are too long

4
docs/scss/layout/_aside.scss
View file

@ -6,13 +6,12 @@ main > aside {
nav {
width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2);
padding-bottom: var(--block-spacing-vertical);
@media (min-width: map-get($breakpoints, "lg")) {
position: fixed;
width: 200px;
max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto;
}
@ -35,7 +34,6 @@ main > aside {
}
&.closed-on-mobile {
margin-bottom: var(--block-spacing-vertical);
a#toggle-docs-navigation {
svg.collapse {

2
docs/src/containers.html
View file

@ -62,7 +62,7 @@
</table>
</figure>
<p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
<p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
<p><code>&lt;<b>section</b>&gt;</code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
</section>
${require('./_footer.html')}