Atoms

Headings

.heading--large This is a big heading

.heading--medium This is a medium heading

.heading--small This is a small heading

Typography

.text--lede This is a block of lede text.

.text This is a normal block of text Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, repellat exercitationem. Unde temporibus cupiditate dolorem ^repudiandae assumenda commodi _{ad alias} illum. Hic nihil rem quis neque alias, aut assumenda ipsam.

.text--small This is a small block of text Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, repellat exercitationem. Unde temporibus cupiditate dolorem ^repudiandae assumenda commodi _{ad alias} illum. Hic nihil rem quis neque alias, aut assumenda ipsam.

.link This link might take you somewhere

Media

• .list
• List item one
• List item two
• List item three

1. .list--numbered
2. List item one
3. List item two
4. List item three

Term .list--desc

Definition

Term

Definition One

Definition Two

Same as below but a .note class instead.

Someone said something once .quote Said somebody

.quote--callout Someone said something once Lorem ipsum dolor sit amet consectetur adipisicing elit. Said somebody

.note--callout For code highlighting you'll need to include prism.js (again same styling as above but dif class)

// mapping
// you want b and you have a

// k is scale
k = bmax-bmin/amax-amin;
// map
b = k(a-amin) + bmin;

<a href="https://ko-fi.com/rumyra#checkoutModal" class="btn--kofi">
	<svg width="45" height="35" viewBox="0 0 190 125" xmlns="http://www.w3.org/2000/svg">
		<g>
  		<path d="M181.665,40.452c-2.442,-12.898 -9.385,-20.933 -16.501,-25.902c-7.359,-5.138 -16.174,-7.778 -25.15,-7.778l-127.379,0c-4.431,0 -6.129,4.326 -6.146,6.493c-0.001,0.283 0.009,1.414 0.009,1.414c-0,-0 -0.209,56.354 0.186,86.453c1.203,17.77 19.007,17.764 19.007,17.764c0,0 58.128,-0.17 86.006,-0.343c1.307,-0.009 2.613,-0.15 3.882,-0.467c15.872,-3.971 17.514,-18.716 17.344,-26.936c31.904,1.772 54.414,-20.74 48.742,-50.698Zm-35.839,29.247c-6.804,0.851 -12.332,0.212 -12.332,0.212l0,-41.661l8.372,0c5.534,0 10.871,2.304 14.482,6.497c2.541,2.952 4.574,7.107 4.574,12.845c0,14.029 -7.228,19.556 -15.096,22.107Z" style="fill:rgb(246,236,223);stroke:rgb(66,62,65);stroke-width:4.17px;"/>
  		<path d="M68.885,95.526c1.385,0.698 2.27,-0.169 2.27,-0.169c0,-0 20.274,-18.504 29.407,-29.161c8.124,-9.533 8.654,-25.598 -5.297,-31.601c-13.951,-6.003 -25.429,7.062 -25.429,7.062c-9.954,-10.948 -25.019,-10.394 -31.986,-2.985c-6.968,7.409 -4.535,20.126 0.663,27.203c4.879,6.643 26.327,25.759 29.578,28.992c-0,-0 0.236,0.247 0.794,0.659Z" style="fill:rgb(221,105,132);fill-rule:nonzero;"/>
		</g>
	</svg>
	<span>Buy Me A Coffee!</span>
</a>