js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve example

Browse Source
This commit is contained in:
Cory LaViska
2017-08-22 21:52:46 -04:00
parent 771da63bc2
commit fe124e0b13
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@@ -30,8 +30,8 @@
<p>
You can use Shoelace with just about every browser. The CDN version is great for
prototyping, but to take full advantage you should
<a href="docs/installing.html#building-from-source">build it from source</a>.
prototyping, but to take advantage of all its features you should
<a href="docs/installing.html#building-from-source">build Shoelace from source</a>.
</p>
<p>
@@ -39,15 +39,20 @@
</p>
<pre><code class="language-css">:root {
--info-color: white;
--info-bg: color(teal shade(25%));
/* Use CSS variables */
--state-primary: #09d;
/* Use color functions instead of hard-coding values */
--alert-bg-color: color(var(--state-primary) tint(75%));
--alert-color: color(var(--state-primary) lightness(25%));
}
.info {
color: var(--info-color);
background: var(--info-bg);
/* Nest selectors for better legibility */
.alert {
background-color: var(--alert-bg-color);
color: var(--alert-color);
&amp;.info-big {
&amp;.alert-lg {
font-size: 2rem;
}
}