source.css
Buttons
Button
Primary
Secondary
Tertiary
Danger
Warning
Success
<div class="button-container">
<button>Button</button>
<button class="button-primary">Primary</button>
<button class="button-secondary">Secondary</button>
<button class="button-tertiary">Tertiary</button>
<button class="button-danger">Danger</button>
<button class="button-warning">Warning</button>
<button class="button-success">Success</button>
</div>
Text
Anchors
Anchor
Anchor Primary
Anchor Secondary
Anchor Tertiary
<a href="#">Anchor</a>
<a href="#" class="anchor-primary">Anchor Primary</a>
<a href="#" class="anchor-secondary">Anchor Secondary</a>
<a href="#" class="anchor-tertiary">Anchor Tertiary</a>
Blockquote
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
Someone famous in Cited Source Title
<blockquote>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
<footer>
Someone famous in <cite title="Source Title">Cited Source Title</cite>
</footer>
</blockquote>
Code Blocks
Collapsable Code Block
<div class="code-block collapsable collapsed" id="collapsable-block" >
<div class="top-bar">
<div class="top-bar-element clickable" onclick="toggleCodeBlock('collapsable-block')">
<svg width="72px" height="20px" viewBox="0 0 72 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="10" r="8" fill="#FF5F56" stroke="#E0443E" stroke-width="2px">
</circle>
<circle cx="34" cy="10" r="8" fill="#FFBD2E" stroke="#DEA123" stroke-width="2px">
</circle>
<circle cx="58" cy="10" r="8" fill="#27C93F" stroke="#1AAB29" stroke-width="2px">
</circle>
</svg>
</div>
</div>
<pre class="code-block-body">
<code class="language-html">
</code>
</pre>
</div>
Full Code Block
<div class="code-block collapsable" id="code-block" >
<div class="top-bar">
<div class="top-bar-element clickable" onclick="toggleCodeBlock('code-block')">
<svg width="72px" height="20px" viewBox="0 0 72 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="10" r="8" fill="#FF5F56" stroke="#E0443E" stroke-width="2px">
</circle>
<circle cx="34" cy="10" r="8" fill="#FFBD2E" stroke="#DEA123" stroke-width="2px">
</circle>
<circle cx="58" cy="10" r="8" fill="#27C93F" stroke="#1AAB29" stroke-width="2px">
</circle>
</svg>
</div>
<div class="top-bar-element">
<div>filename</div>
</div>
<div class="top-bar-element">
<button class="copy-button" onclick="copyToClipboard('copy-id')">Copy</button>
</div>
</div>
<pre class="code-block-body">
<code class="language-py" id="copy-id">
</code>
</pre>
</div>
Mini Code Block
Font Size 1
<div class="code-block">
<pre class="code-block-body font-size-1">
<code class="language-html">
...
</code>
</pre>
</div>
Font Size 2
<div class="code-block">
<pre class="code-block-body font-size-2">
<code class="language-html">
...
</code>
</pre>
</div>
Font Size 3
<div class="code-block">
<pre class="code-block-body font-size-3">
<code class="language-html">
...
</code>
</pre>
</div>