Molecules
Form elements
These include the above ommitted atoms, which are each individual input/label etc...
One
Two
<!-- label/input pairs - add modifier on class for select, range, check -->
<div class="form--group">
<label for="textIn">Text Input</label>
<input type="text" name="textIn" id="textIn" />
</div>Site nav
I'm not gonna go all out doing dif navs styles, if anything crops up which needs specifics sure, but for the most part a top header is cool.
A simple header is basically this with header.header-site wrapped around.
<nav class="site__nav">
<ul>
<li><a href="/">⇍ Studio</a></li>
<li><a href="https://rumyra.com" aria-label="RJ"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 246 284" width="30" height="35">
<g fill="currentColor">
<path d="M169.126 62.138v142.03l-15.375 8.876.036-17.732-30.786-17.776-30.75 17.753v35.509l30.75 17.753 92.25-53.262V88.811z"/>
<path d="M123.037 35.529L30.788 88.79l-.037 106.499 46.125 26.673.036-142.048 15.339-8.856.036 17.733 30.751 17.752 30.713-17.731V53.304z"/>
<path d="M123.001 0L0 71.014v142.029l123.001 71.015 123.001-71.015V71.014L123.001 0zm107.625 204.166l-107.625 62.139-107.625-62.139V79.892l107.625-62.138 107.625 62.138v124.274z"/>
</g></svg></a></li>
<li><a href="https://ruthjohn.com">About</a></li>
<li><a href="https://blog.rumyra.com">Blog</a></li>
</ul>
</nav>Social links
You can find svgs for all the accounts on my various sites
Select buttons
<div class="select--btns">
<button data-selected="true">Original Sound</button>
<button data-selected="false">Big Hall 1</button>
<button data-selected="false">Big Hall 2</button>
<button data-selected="false">Big Hall 3</button>
</div>// quick & dirty: grab our buttons
const buttons = document.querySelectorAll('.select--btns button');
for (const butt of buttons) {
butt.addEventListener('click', () => {
// change the current button state
const curButt = document.querySelector('button[data-selected="true"]');
curButt.dataset.selected = 'false';
// switch to our new button
butt.dataset.selected = 'true';
// functionality to do on button select
})
}Github Corner
Remember to add your url to this!
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>