andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 143 [cron]

Browse Source
This commit is contained in:
30secondsofcode
2019-01-15 21:19:31 +00:00
parent f94ddcc223
commit bb566c6277
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@ -677,7 +677,7 @@ li:not(:last-child) {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
</code></pre> <h4>Demo</h4> <div class="snippet-demo" data-scope="system-font-stack.md"> <p class="system-font-stack">This text uses the system font.</p> </div> <h4>Explanation</h4> <p>The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).</p> <ol> <li><code>-apple-system</code> is San Francisco, used on iOS and macOS (not Chrome however)</li> <li><code>BlinkMacSystemFont</code> is San Francisco, used on macOS Chrome</li> <li><code>Segoe UI</code> is used on Windows 10</li> <li><code>Roboto</code> is used on Android</li> <li><code>Oxygen-Sans</code> is used on GNU+Linux</li> <li><code>Ubuntu</code> is used on Linux</li> <li><code>"Helvetica Neue"</code> and <code>Helvetica</code> is used on macOS 10.10 and below (wrapped in quotes because it has a space)</li> <li><code>Arial</code> is a font widely supported by all operating systems</li> <li><code>sans-serif</code> is the fallback sans-serif font if none of the other fonts are supported</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> </div> <div class="snippet"> <h3 id="toggle-switch"><span>Toggle switch</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3> <p>Creates a toggle switch with CSS only.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;input type="checkbox" id="toggle" class="offscreen" /&gt; &lt;label for="toggle" class="switch"&gt;&lt;/label&gt;
</code></pre> <h4>Demo</h4> <div class="snippet-demo" data-scope="system-font-stack.md"> <p class="system-font-stack">This text uses the system font.</p> </div> <h4>Explanation</h4> <p>The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).</p> <ol> <li><code>-apple-system</code> is San Francisco, used on iOS and macOS (not Chrome however)</li> <li><code>BlinkMacSystemFont</code> is San Francisco, used on macOS Chrome</li> <li><code>Segoe UI</code> is used on Windows 10</li> <li><code>Roboto</code> is used on Android</li> <li><code>Oxygen-Sans</code> is used on Linux with KDE</li> <li><code>Ubuntu</code> is used on Ubuntu (all variants)</li> <li><code>Cantarell</code> is used on Linux with GNOME Shell</li> <li><code>"Helvetica Neue"</code> and <code>Helvetica</code> is used on macOS 10.10 and below (wrapped in quotes because it has a space)</li> <li><code>Arial</code> is a font widely supported by all operating systems</li> <li><code>sans-serif</code> is the fallback sans-serif font if none of the other fonts are supported</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> </div> <div class="snippet"> <h3 id="toggle-switch"><span>Toggle switch</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3> <p>Creates a toggle switch with CSS only.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;input type="checkbox" id="toggle" class="offscreen" /&gt; &lt;label for="toggle" class="switch"&gt;&lt;/label&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.switch {
position: relative;
display: inline-block;