mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Small improvements

Browse source 
- Edit small font-size
- Update docs
This commit is contained in:
Lucas Larroche 2021-07-03 11:18:07 +07:00
parent 537f5008c2
commit c874560a24
15 changed files with 115 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

2
css/pico.classless.css
View file

@ -117,7 +117,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 0.875rem; --font-size: 87.5%;
} }
h1, h1,

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

File diff suppressed because one or more lines are too long

2
css/pico.css
View file

@ -117,7 +117,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 0.875rem; --font-size: 87.5%;
} }
h1, h1,

2
css/pico.fluid.classless.css
View file

@ -117,7 +117,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 0.875rem; --font-size: 87.5%;
} }
h1, h1,

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.css
View file

@ -60,7 +60,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 0.875rem; --font-size: 87.5%;
} }
h1, h1,

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

File diff suppressed because one or more lines are too long

2
css/themes/default.css
View file

@ -113,7 +113,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 0.875rem; --font-size: 87.5%;
} }
h1, h1,

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

@ -281,10 +281,10 @@ main > aside details[open] summary {
#grids .grid > * { #grids .grid > * {
padding: calc(var(--spacing) / 2) 0; padding: calc(var(--spacing) / 2) 0;
background: var(--secondary); border-radius: var(--border-radius);
color: var(--secondary-inverse); background: var(--code-background-color);
font-size: 87.5%;
text-align: center; text-align: center;
opacity: .5;
} }
#grids details { #grids details {

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

File diff suppressed because one or more lines are too long

181
docs/index.html
View file

@ -289,10 +289,11 @@
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
<p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p> <p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p>
<pre><code><em>// Centered viewports</em> <pre><code><em>// Centered viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"</u>&gt; &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"</u>&gt;
</code></pre>
<em>// Fluid viewports</em> <pre><code><em>// Fluid viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>&gt; &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>&gt;
</code></pre> </code></pre>
@ -312,7 +313,7 @@
&lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt; &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
&lt;/<b>body</b>&gt;</code></pre> &lt;/<b>body</b>&gt;</code></pre>
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/4.3/layout/grid/#grid-options">Bootstrap</a>.</p> <p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
<figure> <figure>
<table role="grid"> <table role="grid">
<thead> <thead>
@ -328,19 +329,19 @@
<tbody> <tbody>
<tr> <tr>
<th>Breakpoint</th> <th>Breakpoint</th>
<td>&lt;576px</td> <td>&lt;576<small>px</small></td>
<td>≥576px</td> <td>≥576<small>px</small></td>
<td>≥768px</td> <td>≥768<small>px</small></td>
<td>≥992px</td> <td>≥992<small>px</small></td>
<td>≥1200px</td> <td>≥1200<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>Viewport</th> <th>Viewport</th>
<td>None&nbsp;<small>(auto)</small></td> <td>100<small>%</small></td>
<td>540px</td> <td>540<small>px</small></td>
<td>720px</td> <td>720<small>px</small></td>
<td>960px</td> <td>960<small>px</small></td>
<td>1140px</td> <td>1140<small>px</small></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -467,7 +468,7 @@
<section id="typography"> <section id="typography">
<hgroup> <hgroup>
<h2>Typography</h2> <h2>Typography</h2>
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</h3> <h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.</h3>
</hgroup> </hgroup>
<figure> <figure>
<table role="grid"> <table role="grid">
@ -484,59 +485,67 @@
<tbody> <tbody>
<tr> <tr>
<th>Base&nbsp;font</th> <th>Base&nbsp;font</th>
<td>16px</td> <td>16<small>px</small></td>
<td>17px</td> <td>17<small>px</small></td>
<td>18px</td> <td>18<small>px</small></td>
<td>19px</td> <td>19<small>px</small></td>
<td>20px</td> <td>20<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h1</th> <th><code>&lt;<b>h1</b>&gt;</code></th>
<td>32px</td> <td>32<small>px</small></td>
<td>34px</td> <td>34<small>px</small></td>
<td>36px</td> <td>36<small>px</small></td>
<td>38px</td> <td>38<small>px</small></td>
<td>40px</td> <td>40<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h2</th> <th><code>&lt;<b>h2</b>&gt;</code></th>
<td>28px</td> <td>28<small>px</small></td>
<td>29px</td> <td>29<small>px</small></td>
<td>31.5px</td> <td>31<small><small>.5px</small></td>
<td>33.25px</td> <td>33<small>.25px</small></td>
<td>35px</td> <td>35<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h3</th> <th><code>&lt;<b>h3</b>&gt;</code></th>
<td>24px</td> <td>24<small>px</small></td>
<td>25.5px</td> <td>25<small>.5px</small></td>
<td>27px</td> <td>27<small>px</small></td>
<td>28.5px</td> <td>28<small>.5px</small></td>
<td>30px</td> <td>30<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h4</th> <th><code>&lt;<b>h4</b>&gt;</code></th>
<td>20px</td> <td>20<small>px</small></td>
<td>21.25px</td> <td>21<small>.25px</small></td>
<td>22.5px</td> <td>22<small>.5px</small></td>
<td>23.75px</td> <td>23<small>.75px</small></td>
<td>25px</td> <td>25<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h5</th> <th><code>&lt;<b>h5</b>&gt;</code></th>
<td>18px</td> <td>18<small>px</small></td>
<td>19.125px</td> <td>19<small>.125px</small></td>
<td>20.25px</td> <td>20<small>.25px</small></td>
<td>21.375px</td> <td>21<small>.375px</small></td>
<td>22.5px</td> <td>22<small>.5px</small></td>
</tr> </tr>
<tr> <tr>
<th>h6</th> <th><code>&lt;<b>h6</b>&gt;</code></th>
<td>16px</td> <td>16<small>px</small></td>
<td>17px</td> <td>17<small>px</small></td>
<td>18px</td> <td>18<small>px</small></td>
<td>19px</td> <td>19<small>px</small></td>
<td>20px</td> <td>20<small>px</small></td>
</tr>
<tr>
<th><code>&lt;<b>small</b>&gt;</code></th>
<td>14<small>px</small></td>
<td>14<small>.875px</small></td>
<td>15<small>.75px</small></td>
<td>16<small>.625px</small></td>
<td>27<small>.5px</small></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -671,7 +680,7 @@
<section id="forms"> <section id="forms">
<hgroup> <hgroup>
<h2>Forms</h2> <h2>Forms</h2>
<h3>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</h3> <h3>All form elements are in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewports.</h3>
</hgroup> </hgroup>
<p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p> <p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customized and themables with CSS variables.</p> <p>All natives form elements are fully customized and themables with CSS variables.</p>
@ -740,24 +749,28 @@
<p><code>&lt;<b>fieldset</b>&gt;</code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p> <p><code>&lt;<b>fieldset</b>&gt;</code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
<p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p> <p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
<article aria-label="Select, radios, checkboxes, switch examples"> <article aria-label="Select, radios, checkboxes, switch examples">
<label for="country">Country</label> <label for="fruit">Fruit</label>
<select id="country"> <select id="fruit" required>
<option selected>Choose...</option> <option value="" selected>Select a fruit...</option>
<option>...</option> <option>Banana</option>
<option>Watermelon</option>
<option>Apple</option>
<option>Orange</option>
<option>Mangoe</option>
</select> </select>
<fieldset> <fieldset>
<legend>Gender</legend> <legend>Size</legend>
<label for="male"> <label for="small">
<input type="radio" id="male" name="gender" value="male" checked> <input type="radio" id="small" name="size" value="small" checked>
Male Small
</label> </label>
<label for="female"> <label for="medium">
<input type="radio" id="female" name="gender" value="female"> <input type="radio" id="medium" name="size" value="medium">
Female Medium
</label> </label>
<label for="other"> <label for="large">
<input type="radio" id="other" name="gender" value="other"> <input type="radio" id="large" name="size" value="large">
Other Large
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
@ -774,26 +787,26 @@
</fieldset> </fieldset>
<pre><code><em>&lt;!-- Select --&gt;</em> <pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"country"</u>&gt;Country&lt;/<b>label</b>&gt; &lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"country</u>"&gt; &lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
&lt;<b>option</b> <i>selected</i>&gt;Choose...&lt;/<b>option</b>&gt; &lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit...&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt; &lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt; &lt;/<b>select</b>&gt;
<em>&lt;!-- Radios --&gt;</em> <em>&lt;!-- Radios --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>legend</b>&gt;Gender&lt;/<b>legend</b>&gt; &lt;<b>legend</b>&gt;Size&lt;/<b>legend</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"male"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"male"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"male"</u> <i>checked</i>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u> <i>checked</i>&gt;
Male Small
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"female"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"female"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"female"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Female Medium
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"other"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"other"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"other"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Other Large
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
@ -1030,7 +1043,7 @@
<section id="cards"> <section id="cards">
<hgroup> <hgroup>
<h2>Cards</h2> <h2>Cards</h2>
<h3>A flexible container with graceful spacings across devices and viewport sizes.</h3> <h3>A flexible container with graceful spacings across devices and viewports.</h3>
</hgroup> </hgroup>
<article aria-label="Card example"> <article aria-label="Card example">
I'm a card! I'm a card!

6
docs/scss/layout/_documentation.scss
View file

@ -98,10 +98,10 @@
.grid { .grid {
> * { > * {
padding: calc(var(--spacing) / 2) 0; padding: calc(var(--spacing) / 2) 0;
background: var(--secondary); border-radius: var(--border-radius);
color: var(--secondary-inverse); background: var(--code-background-color);
font-size: 87.5%;
text-align: center; text-align: center;
opacity: .5;
} }
} }

2
scss/themes/default/_styles.scss
View file

@ -138,7 +138,7 @@ a {
// Small // Small
small { small {
--font-size: 0.875rem; --font-size: 87.5%;
} }
// Headings // Headings