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

rebuild docs

Browse Source
This commit is contained in:
atomiks
2018-03-05 18:18:21 +10:00
parent 3972cebd3c 48eab1afa0
commit a1399bee32
4 changed files with 117 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

File diff suppressed because one or more lines are too long

13
docs/index.html
View File

File diff suppressed because one or more lines are too long

43
index.html
View File

@ -30,6 +30,7 @@
</section>
<section data-type="visual" class="sidebar__section">
<h4 class="sidebar__section-heading">visual</h4>
<a class="sidebar__link" href="#circle"><span>Circle</span></a>
<a class="sidebar__link" href="#custom-scrollbar"><span>Custom scrollbar</span></a>
<a class="sidebar__link" href="#custom-text-selection"><span>Custom text selection</span></a>
<a class="sidebar__link" href="#etched-text"><span>Etched text</span></a>
@ -244,6 +245,48 @@
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="circle"><span>Circle</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
<p>Creates a circle shape with pure CSS.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="circle"&gt;&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo">
<div class="snippet-demo__circle"></div>
</div>
<style>
.snippet-demo__circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
</style>
<h4>Explanation</h4>
<p><code>border-radius: 50%</code> curves the borders of an element to create a circle.</p>
<p>Since a circle has the same radius at any given point, the <code>width</code> and <code>height</code> must be the same. Differing values will create an ellipse.</p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.0%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=border-radius" target="_blank">https://caniuse.com/#feat=border-radius</a>
</li>
</ul>
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="clearfix"><span>Clearfix</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Ensures that an element self-clears its children.</p>

50
snippets/circle.md Normal file
View File

@ -0,0 +1,50 @@
### Circle
Creates a circle shape with pure CSS.
#### HTML
```html
<div class="circle"></div>
```
#### CSS
```css
.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__circle"></div>
</div>
<style>
.snippet-demo__circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
</style>
#### Explanation
`border-radius: 50%` curves the borders of an element to create a circle.
Since a circle has the same radius at any given point, the `width` and `height` must be the same. Differing
values will create an ellipse.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=border-radius
<!-- tags: visual -->