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 >