Skip to content

Instantly share code, notes, and snippets.

@jnf

jnf/_variables.scss

Created July 11, 2017 03:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jnf/5deed67e8bb6e335615c8cced974cc92 to your computer and use it in GitHub Desktop.
Save jnf/5deed67e8bb6e335615c8cced974cc92 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_variables.scss
$black: #111;
$margins: 0 2rem 2rem;
$pink: rgb(255, 0, 255);
$note-bg-color: $black;
$note-bg-color-alt: $pink;
$note-box-size: 8rem;
$note-map: (
// regular bg, hover bg, active bg
c: (#3e181b, #661920, #db1d2d),
d: (#422018, #6e2819, #f0421c),
e: (#45391b, #735b20, #fec02d),
f: (#193c29, #1b613b, #20d071),
g: (#18323e, #184d65, #1a9ddb),
a: (#331f35, #4e2753, #a13fad),
b: (#43293d, #6f3a62, #f26fd4)
);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NOISE</title>
<link rel="stylesheet" href="new-noise.css">
</head>
<body>
<div id="#audioEmbeds">
<audio id="cAudio">
<source src="media/c_note.mp3" type="audio/mpeg"></source>
<source src="media/c_note.ogg" type="audio/ogg"></source>
<source src="media/c_note.wav" type="audio/wav"></source>
</audio>
<audio id="dAudio">
<source src="media/d_note.mp3" type="audio/mpeg"></source>
<source src="media/d_note.ogg" type="audio/ogg"></source>
<source src="/media/d_note.wav" type="audio/wav"></source>
</audio>
<audio id="eAudio">
<source src="media/e_note.mp3" type="audio/mpeg"></source>
<source src="media/e_note.ogg" type="audio/ogg"></source>
<source src="media/e_note.wav" type="audio/wav"></source>
</audio>
<audio id="fAudio">
<source src="media/f_note.mp3" type="audio/mpeg"></source>
<source src="media/f_note.ogg" type="audio/ogg"></source>
<source src="media/f_note.wav" type="audio/wav"></source>
</audio>
<audio id="gAudio">
<source src="media/g_note.mp3" type="audio/mpeg"></source>
<source src="media/g_note.ogg" type="audio/ogg"></source>
<source src="media/g_note.wav" type="audio/wav"></source>
</audio>
<audio id="aAudio">
<source src="media/a_note.mp3" type="audio/mpeg"></source>
<source src="media/a_note.ogg" type="audio/ogg"></source>
<source src="media/a_note.wav" type="audio/wav"></source>
</audio>
<audio id="bAudio">
<source src="media/b_note.mp3" type="audio/mpeg"></source>
<source src="media/b_note.ogg" type="audio/ogg"></source>
<source src="media/b_note.wav" type="audio/wav"></source>
</audio>
</div>
<main class="instrument">
<button class="note c">c</button>
<button class="note d">d</button>
<button class="note e">e</button>
<button class="note f">f</button>
<button class="note g">g</button>
<button class="note a">a</button>
<button class="note b">b</button>
</main>
<script type="text/javascript" src="noise.js"></script>
</body>
</html>
Raw
new-noice.scss
@import "variables";
html {
font-size: 16px;
}
body {
background-color: $black;
display: flex;
height: 100vh;
flex-direction: column;
justify-content: center;
}
.instrument {
display: flex;
justify-content: center;
margin: 0 auto;
}
.note {
border: 0.25rem solid currentColor;
cursor: pointer;
font-size: 3rem;
margin: 0 0.25rem;
padding: 0;
transition: all 0.2s ease;
height: $note-box-size;
width: $note-box-size;
// produces .note:hover and .note:focus
&:hover,
&:focus {
font-size: 3.5rem;
outline: none;
}
}
// set up an @each loop to go over the note map
// and build the relevant color styles
@each $note, $colors in $note-map {
.#{$note} { // interpolating $note into ".c"
// colors are in regular, hover, active order
$regular: nth($colors, 1); // #3e181b
$hover: nth($colors, 2); // #661920
$active: nth($colors, 3); // #db1d2d
background-color: $regular;
color: $active;
&:hover,
&:focus {
background-color: $hover;
}
&:active {
background-color: $active;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment