mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 17:36:15 -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. No dependencies, package manager, external files, or JavaScript.
**Responsive everything** **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** **Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference. Shipped with two beautiful color themes, automatically enabled according to the user preference.
@ -70,9 +70,9 @@ npm install @picocss/pico
## Class-less version ## 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: 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 { main > aside nav {
width: 100%; width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2); padding-bottom: var(--block-spacing-vertical);
} }
@media (min-width: 992px) { @media (min-width: 992px) {
main > aside nav { main > aside nav {
position: fixed; position: fixed;
width: 200px; width: 200px;
max-height: calc(100vh - 5.5rem); max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
@ -118,9 +117,6 @@ main > aside nav a#toggle-docs-navigation svg {
display: none; 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 { main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
display: none; 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 { nav {
width: 100%; width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2); padding-bottom: var(--block-spacing-vertical);
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
position: fixed; position: fixed;
width: 200px; width: 200px;
max-height: calc(100vh - 5.5rem); max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
@ -35,7 +34,6 @@ main > aside {
} }
&.closed-on-mobile { &.closed-on-mobile {
margin-bottom: var(--block-spacing-vertical);
a#toggle-docs-navigation { a#toggle-docs-navigation {
svg.collapse { svg.collapse {

2
docs/src/containers.html
View file

@ -62,7 +62,7 @@
</table> </table>
</figure> </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>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> </section>
${require('./_footer.html')} ${require('./_footer.html')}