This commit is contained in:
Lucas 2019-11-28 17:51:54 +07:00
parent 1c00483376
commit 2dff66136c
9 changed files with 48 additions and 63 deletions

View file

@ -25,7 +25,7 @@
<li>Documentation</li>
</ul>
<ul>
<li><a href="#start" class="secondary">Start</a></li>
<li><a href="#" class="secondary">Examples</a></li>
<li><a href="#docs" class="secondary">Docs</a></li>
<li>
<a href="https://github.com/picocss/pico" class="secondary">
@ -182,7 +182,7 @@
<a name="customization"></a>
<hgroup>
<h2>Customization</h2>
<p>You can customize themes with Sass or you can simply edit the CSS variables.</p>
<p>You can customize themes with SCSS or you can simply edit the CSS variables.</p>
</hgroup>
<h5>Pick a color!</h5>
<article data-theme="generated">
@ -206,7 +206,7 @@
</fieldset>
</article>
<p>Sass:</p>
<p>SCSS:</p>
<pre data-theme="generated"><code>// <span class="name">Custom colors</span>
<i>$primary-500</i>: <u class="c500">...</u>;
@ -452,31 +452,66 @@
<article>
<hgroup>
<h1>Heading 1</h1>
<p><small><code>32px</code> on extra small devices, <code>40px</code> on extra large devices</small></p>
<p>
<small>
<code>32px</code> on extra small devices<br>
<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> on extra large devices</small></p>
<p>
<small>
<code>28px</code> on extra small devices<br>
<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> on extra large devices</small></p>
<p>
<small>
<code>24px</code> on extra small devices<br>
<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> on extra large devices</small></p>
<p>
<small>
<code>20px</code> on extra small devices<br>
<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> on extra large devices</small></p>
<p>
<small>
<code>18px</code> on extra small devices<br>
<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> on extra large devices</small></p>
<p>
<small>
<code>16px</code> on extra small devices<br>
<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> on extra large devices</small></p>
<p>
<small>
<code>16px</code> on extra small devices<br>
<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;