mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Slight corrections

Browse source
This commit is contained in:
Lucas 2019-11-27 22:11:01 +07:00
parent ec866e1e5a
commit 80ce6f23c1
1 changed files with 19 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

36
docs/index.html
View file

@ -17,7 +17,7 @@
<ul>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem">
<path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
</svg>
</a>
@ -86,7 +86,7 @@
<li>
<a href="#love" class="secondary">
We
<svg xmlns="http://www.w3.org/2000/svg" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
.classes
@ -112,7 +112,7 @@
<p>2. Link the CSS <small>(~5KB minified and gzipped)</small>:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<p><strong>Customization:</strong></p>
<p>You can compile your own version of Pico: SCSS sources are included.</p>
<p>You can compile your own version of Pico: Sass sources are included.</p>
<p>A <a href="#classless">class-less version</a> is also included in the library.</p>
<p></p>
</section><!-- ./ Docs: Start -->
@ -171,7 +171,7 @@
<a name="customization"></a>
<hgroup>
<h2>Customization</h2>
<p>You can customize themes with SCSS or you can simply edit the CSS variables.</p>
<p>You can customize themes with Sass or you can simply edit the CSS variables.</p>
</hgroup>
<h5>Pick a color!</h5>
<article data-theme="generated">
@ -195,7 +195,7 @@
</fieldset>
</article>
<p>SCSS:</p>
<p>Sass:</p>
<pre data-theme="generated"><code>// <span class="name">Custom colors</span>
<i>$primary-500</i>: <u class="c500">...</u>;
@ -238,6 +238,8 @@
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}</code></pre>
<p>Colors can be modified in <a href="https://github.com/picocss/pico/tree/master/scss/themes">scss/themes/</a>.</p>
<p>Spacings, Typography, Rounded, Transitions, Breakpoints, etc. can be modified in <a href="https://github.com/picocss/pico/blob/master/scss/_variables.scss">scss/_variables.scss</a>.</p>
</section><!-- ./ Docs: Customization -->
@ -343,7 +345,7 @@
<a name="scroller"></a>
<hgroup>
<h2>Horizontal scroller</h2>
<p><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content horizontally scrollable.</p>
<p><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</p>
</hgroup>
</figure>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code>.</p>
@ -425,7 +427,7 @@
</thead>
<tbody>
<tr>
<th>Root&nbsp;size&nbsp;<code>rem</code></th>
<th>Base&nbsp;size</th>
<td>16px</td>
<td>17px</td>
<td>18px</td>
@ -439,31 +441,31 @@
<article>
<hgroup>
<h1>Heading 1</h1>
<p><small><code>32px</code> on extra small devices, <code>40px</code> extra large devices</small></p>
<p><small><code>32px</code> on extra small devices, <code>40px</code> on extra large devices</small></p>
</hgroup>
<hgroup>
<h2>Heading 2</h2>
<p><small><code>28px</code> on extra small devices, <code>35px</code> extra large devices</small></p>
<p><small><code>28px</code> on extra small devices, <code>35px</code> on extra large devices</small></p>
</hgroup>
<hgroup>
<h3>Heading 3</h3>
<p><small><code>24px</code> on extra small devices, <code>30px</code> extra large devices</small></p>
<p><small><code>24px</code> on extra small devices, <code>30px</code> on extra large devices</small></p>
</hgroup>
<hgroup>
<h4>Heading 4</h4>
<p><small><code>20px</code> on extra small devices, <code>25px</code> extra large devices</small></p>
<p><small><code>20px</code> on extra small devices, <code>25px</code> on extra large devices</small></p>
</hgroup>
<hgroup>
<h5>Heading 5</h5>
<p><small><code>18px</code> on extra small devices, <code>22.5px</code> extra large devices</small></p>
<p><small><code>18px</code> on extra small devices, <code>22.5px</code> on extra large devices</small></p>
</hgroup>
<hgroup>
<h6>Heading 6</h6>
<p><small><code>16px</code> on extra small devices, <code>20px</code> extra large devices</small></p>
<p><small><code>16px</code> on extra small devices, <code>20px</code> on extra large devices</small></p>
</hgroup>
<hgroup>
<p>Paragraph</p>
<p><small><code>16px</code> on extra small devices, <code>20px</code> extra large devices</small></p>
<p><small><code>16px</code> on extra small devices, <code>20px</code> on extra large devices</small></p>
</hgroup>
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b></b>&gt;
@ -825,7 +827,7 @@
<ul>
<li>
<a href="#" class="secondary">
<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12">
</line><line x1="3" y1="6" x2="21" y2="6">
</line><line x1="3" y1="18" x2="21" y2="18">
@ -840,7 +842,7 @@
<ul>
<li>
<a href="#" class="secondary">
<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</a>
@ -911,7 +913,7 @@
<hgroup>
<h2>
We
<svg xmlns="http://www.w3.org/2000/svg" height="1.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1.75rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<code>.classes</code>