Skip to content

Instantly share code, notes, and snippets.

@basilbeltran
Forked from fwartner/#DaftPunKonsole.markdown
Last active November 27, 2018 20:22
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 basilbeltran/7d93302e074f2a0d214a40c42098270b to your computer and use it in GitHub Desktop.
Save basilbeltran/7d93302e074f2a0d214a40c42098270b to your computer and use it in GitHub Desktop.
#DaftPunKonsole

#DaftPunKonsole

A console to recreate the famous "Harder, Better, Faster, Stronger" by Daft Punk. Use your keyboard ! not the mouse (hey, it's a console). Use the other keys to get different sounds (Normal, High, Low). You can do it !

Forked from Malik Dellidj's Pen #DaftPunKonsole.

A Pen by Florian Wartner on CodePen.

License.

Basil

  • keyboard extracted, (i like the keyboard)
  • otherwiser objectified, conventionalized, genericized, reductionalized, unpreprocesserized, boringalated & neutered.
<div class="wk">
<div class="k">
<div class="r">
<i data-code="" data-lyric="Work it"><span></span><b>Work it</b></i>
<i data-code="" data-lyric="Make it"><span></span><b>Make it</b></i>
<i data-code="" data-lyric="Do it"><span></span><b>Do it</b></i>
<i data-code="" data-lyric="Makes us"><span></span><b>Makes us</b></i>
<i data-code="" data-lyric=""><span></span></i>
<i data-code="" data-lyric=""><span></span></i>
<i data-code="" data-lyric="More than"><span></span><b>More than</b></i>
<i data-code="" data-lyric="Hour"><span></span><b>Hour</b></i>
<i data-code="" data-lyric="Our"><span></span><b>Our</b></i>
<i data-code="" data-lyric="Never"><span></span><b>Never</b></i>
</div>
<div class="r">
<i data-code="" data-lyric="Harder"><span></span><b>Harder</b></i>
<i data-code="" data-lyric="Better"><span></span><b>Better</b></i>
<i data-code="" data-lyric="Faster"><span></span><b>Faster</b></i>
<i data-code="" data-lyric="Stronger"><span></span><b>Stronger</b></i>
<i data-code="" data-lyric=""><span></span></i>
<i data-code="" data-lyric=""><span></span></i>
<i data-code="" data-lyric="Ever"><span></span><b>Ever</b></i>
<i data-code="" data-lyric="After"><span></span><b>After</b></i>
<i data-code="" data-lyric="Work is"><span></span><b>Work is</b></i>
<i data-code="" data-lyric="Over"><span></span><b>Over</b></i>
</div>
<div class="r level">
<i data-code="" data-level="Normal"><span></span><b>Normal</b></i>
<i data-code="" data-level="High"><span></span><b>High</b></i>
<i data-code="" data-level=""><span></span></i>
<i data-code="" data-level=""><span></span></i>
<i data-code="" data-level=""><span></span></i>
<i data-code="" data-level="Low"><span></span><b>Low</b></i>
<i data-code="" data-level=""><span></span></i>
<i data-code="" data-level=""><span></span></i>
</div>
<div class="r">
<div class="space" data-action="play" data-code="32">
<div class="jp-audio" id="jp_container_1">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<button class="jp-play">Instrumental</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-jplayer" id="js-daft_1"></div>
<div class="credits">
<p>
<del><a class="extra" href="https://twitter.com/Dathink" target="_blank"></a>#DaftPunKonsole.com </del>
</p>
<p>
Made with <i class="fa fa-heart"></i> by Malik Dellidj
</p>
<ul class="links">
<li>
<a href="https://github.com/KOWLOR/DaftPunKonsole" target="_blank"><i class="fa fa-github-alt"></i></a>
</li>
<li>
<a href="https://codepen.io/kowlor" target="_blank"><i class="fa fa-codepen"></i></a>
</li>
<li>
<i class="fa fa-twitter"></i> <a href="https://twitter.com/Dathink" target="_blank">@Dathink </a>
</li>
</ul>
</div>
<div class="modal animated">
<h1 class="extra">
“Harder, Better, Faster, Stronger”
</h1>
<h2>
1 Million views, the console will now be updated at <a href="https://twitter.com/Dathink" target="_blank"><del>Daftpunkonsole.com </del></a>
</h2>
<div class="msg">
I'll disable the sound until I get an official permission, sorry....
</div>
<ul>
<li>
<a class="js-qwerty btn" href="#">QWERTY </a>
</li>
<li>
<a class="js-azerty btn" href="#">AZERTY </a>
</li>
</ul>
<p class="credit">
<i class="fa fa-twitter"></i> <a href="https://twitter.com/Dathink" target="_blank">@Dathink </a>
</p>
</div>
(function() {
var init, initJson;
initJson = function(index_type) {
return $.ajax({
url: 'http://s.cdpn.io/190177/keyboard_.json',
type: 'get',
dataType: 'json'
}).done(function(data) {
return _.each(data.keyboard.type[index_type].row, function(row, index_row) {
return _.each(row.key, function(key, index_key) {
var row_selected, span_selected;
row_selected = $(".r:nth-child(" + (index_row + 1) + ")");
span_selected = $(row_selected).find("span")[index_key];
$(span_selected).text(key.char);
return $(span_selected).parent('*[data-code]').attr('data-code', key.code);
});
});
});
};
init = function() {
var level;
level = 'Normal';
$('body').addClass('Normal');
return $('.level').find('i[data-level=' + level + ']').addClass('is-active');
};
ion.sound({
sounds: [
{
name: 'beat'
}, {
name: 'WorkIt1'
}, {
name: 'MakeIt1'
}, {
name: 'DoIt1'
}, {
name: 'MakesUs1'
}, {
name: 'Harder1'
}, {
name: 'Better1'
}, {
name: 'Faster1'
}, {
name: 'Stronger1'
}, {
name: 'MoreThan1'
}, {
name: 'Hour1'
}, {
name: 'Our1'
}, {
name: 'Never1'
}, {
name: 'Ever1'
}, {
name: 'After1'
}, {
name: 'WorkIs1'
}, {
name: 'Over1'
}, {
name: 'WorkIt2'
}, {
name: 'MakeIt2'
}, {
name: 'DoIt2'
}, {
name: 'MakesUs2'
}, {
name: 'Harder2'
}, {
name: 'Better2'
}, {
name: 'Faster2'
}, {
name: 'Stronger2'
}, {
name: 'MoreThan2'
}, {
name: 'Hour2'
}, {
name: 'Our2'
}, {
name: 'Never2'
}, {
name: 'Ever2'
}, {
name: 'After2'
}, {
name: 'WorkIs2'
}, {
name: 'Over2'
}, {
name: 'MoreThan3'
}, {
name: 'Hour3'
}, {
name: 'Our3'
}, {
name: 'Never3'
}, {
name: 'Ever3'
}, {
name: 'After3'
}, {
name: 'WorkIs3'
}, {
name: 'Over3'
}
],
path: 'http://s.cdpn.io/190177/',
preload: true
});
$(function() {
var k;
init();
k = $('.k');
$('.js-azerty').on('click', function(e) {
e.preventDefault();
initJson(0);
$('.k').addClass('azerty');
return $(this).closest('.modal').remove();
});
$('.js-qwerty').on('click', function(e) {
e.preventDefault();
initJson(1);
$('.k').addClass('qwerty');
return $(this).closest('.modal').remove();
});
$(document).keydown(function(e) {
var code, curClass, key;
e.preventDefault();
code = e.keyCode || e.which;
key = $('[data-code=' + code + ']');
if (key.data('level')) {
curClass = key.data('level');
key.addClass('is-active');
key.closest('.level').find('.is-active').not(key).removeClass('is-active');
$('body').removeClass().addClass(curClass);
} else {
key.addClass('is-active');
$('#js-lyrics').html('<span class="animated"/>').find('span').addClass('fadeOutUp').html(key.data('lyric'));
}
if ($('.level').find('i.is-active').data('level') === 'Normal') {
if (k.hasClass('qwerty')) {
switch (code) {
case 81:
return ion.sound.play('WorkIt1');
case 87:
return ion.sound.play('MakeIt1');
case 69:
return ion.sound.play('DoIt1');
case 82:
return ion.sound.play('MakesUs1');
case 65:
return ion.sound.play('Harder1');
case 83:
return ion.sound.play('Better1');
case 68:
return ion.sound.play('Faster1');
case 70:
return ion.sound.play('Stronger1');
case 85:
return ion.sound.play('MoreThan1');
case 73:
return ion.sound.play('Hour1');
case 79:
return ion.sound.play('Our1');
case 80:
return ion.sound.play('Never1');
case 74:
return ion.sound.play('Ever1');
case 75:
return ion.sound.play('After1');
case 76:
return ion.sound.play('WorkIs1');
case 186:
case 59:
return ion.sound.play('Over1');
}
} else {
switch (code) {
case 65:
return ion.sound.play('WorkIt1');
case 90:
return ion.sound.play('MakeIt1');
case 69:
return ion.sound.play('DoIt1');
case 82:
return ion.sound.play('MakesUs1');
case 81:
return ion.sound.play('Harder1');
case 83:
return ion.sound.play('Better1');
case 68:
return ion.sound.play('Faster1');
case 70:
return ion.sound.play('Stronger1');
case 85:
return ion.sound.play('MoreThan1');
case 73:
return ion.sound.play('Hour1');
case 79:
return ion.sound.play('Our1');
case 80:
return ion.sound.play('Never1');
case 74:
return ion.sound.play('Ever1');
case 75:
return ion.sound.play('After1');
case 76:
return ion.sound.play('WorkIs1');
case 77:
return ion.sound.play('Over1');
}
}
} else if ($('.level').find('i.is-active').data('level') === 'High') {
if (k.hasClass('qwerty')) {
switch (code) {
case 81:
return ion.sound.play('WorkIt2');
case 87:
return ion.sound.play('MakeIt2');
case 69:
return ion.sound.play('DoIt2');
case 82:
return ion.sound.play('MakesUs2');
case 65:
return ion.sound.play('Harder2');
case 83:
return ion.sound.play('Better2');
case 68:
return ion.sound.play('Faster2');
case 70:
return ion.sound.play('Stronger2');
case 85:
return ion.sound.play('MoreThan2');
case 73:
return ion.sound.play('Hour2');
case 79:
return ion.sound.play('Our2');
case 80:
return ion.sound.play('Never2');
case 74:
return ion.sound.play('Ever2');
case 75:
return ion.sound.play('After2');
case 76:
return ion.sound.play('WorkIs2');
case 186:
case 59:
return ion.sound.play('Over2');
}
} else {
switch (code) {
case 65:
return ion.sound.play('WorkIt2');
case 90:
return ion.sound.play('MakeIt2');
case 69:
return ion.sound.play('DoIt2');
case 82:
return ion.sound.play('MakesUs2');
case 81:
return ion.sound.play('Harder2');
case 83:
return ion.sound.play('Better2');
case 68:
return ion.sound.play('Faster2');
case 70:
return ion.sound.play('Stronger2');
case 85:
return ion.sound.play('MoreThan2');
case 73:
return ion.sound.play('Hour2');
case 79:
return ion.sound.play('Our2');
case 80:
return ion.sound.play('Never2');
case 74:
return ion.sound.play('Ever2');
case 75:
return ion.sound.play('After2');
case 76:
return ion.sound.play('WorkIs2');
case 77:
return ion.sound.play('Over2');
}
}
} else if ($('.level').find('i.is-active').data('level') === 'Low') {
if (k.hasClass('qwerty')) {
switch (code) {
case 85:
return ion.sound.play('MoreThan3');
case 73:
return ion.sound.play('Hour3');
case 79:
return ion.sound.play('Our3');
case 80:
return ion.sound.play('Never3');
case 74:
return ion.sound.play('Ever3');
case 75:
return ion.sound.play('After3');
case 76:
return ion.sound.play('WorkIs3');
case 186:
case 59:
return ion.sound.play('Over3');
}
} else {
switch (code) {
case 85:
return ion.sound.play('MoreThan3');
case 73:
return ion.sound.play('Hour3');
case 79:
return ion.sound.play('Our3');
case 80:
return ion.sound.play('Never3');
case 74:
return ion.sound.play('Ever3');
case 75:
return ion.sound.play('After3');
case 76:
return ion.sound.play('WorkIs3');
case 77:
return ion.sound.play('Over3');
}
}
}
});
$(document).keyup(function(e) {
var code, key;
e.preventDefault();
code = e.keyCode || e.which;
key = $('[data-code=' + code + ']');
if (!key.data('level')) {
return key.removeClass('is-active');
}
});
return $('#js-daft_1').jPlayer({
ready: function(event) {
return $(this).jPlayer('setMedia', {
m4a: 'http://s.cdpn.io/190177/instru.mp3'
});
},
supplied: 'm4a',
wmode: 'window',
autoBlur: false,
useStateClassSkin: true,
smoothPlayBar: true,
keyEnabled: true,
toggleDuration: true,
remainingDuration: true,
keyBindings: {
play: {
key: 32,
fn: function(f) {
if (f.status.paused) {
return f.play();
} else {
return f.pause();
}
}
},
muted: {
key: 0,
fn: function(f) {
return f._muted(!f.options.muted);
}
},
volumeUp: {
key: 0,
fn: function(f) {
return f.volume(f.options.volume + 0.1);
}
},
volumeDown: {
key: 0,
fn: function(f) {
return f.volume(f.options.volume - 0.1);
}
}
}
});
});
}).call(this);
@charset "UTF-8";
/* #DaftPunKonsole
* Malik Dellidj - @Dathink
*
* There are existing apps or flash to do this, but no web version so here it is.
*
* How to play :
* You may notice that in the song all theses words are used
* but sometimes in a different layout
* e.g.
* – Work it, make it, do it, makes us
* – Harder, better, faster, stronger
* –––
* – Work it, harder, make it, better
* – Do it, faster, makes us, stronger
*
* Check the lyrics ! and the different tones to recreate over half of the song !
*
* Many thanks to my work mates who helped me when I was stuck
*
* Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free !
*/
html, body {
height: 100vh;
width: 100vw;
}
body {
font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
background: url(https://s.cdpn.io/190177/Daft_Punk_bg.svg) no-repeat center center #101012;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
-webkit-font-smoothing: antialiased;
color: #ffffff;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
background-size: 95%;
}
a {
text-decoration: none;
color: #404048;
}
.extra {
color: #15d880;
}
.lyrics {
flex: 1;
align-items: center;
justify-content: center;
display: flex;
font-size: 3.625rem;
position: relative;
}
.lyrics span {
-webkit-animation-duration: 1s;
animation-duration: 1s;
white-space: nowrap;
font-weight: 500;
}
.Normal .lyrics span {
color: #15d880;
text-shadow: 0 0 0.625rem rgba(21, 216, 128, 0.2);
}
.High .lyrics span {
color: #d43f57;
text-shadow: 0 0 0.625rem rgba(212, 63, 87, 0.2);
}
.Low .lyrics span {
color: #dfba69;
text-shadow: 0 0 0.625rem rgba(223, 186, 105, 0.2);
}
.wk {
display: flex;
align-items: center;
justify-content: center;
flex: 2;
}
.k {
width: 39.375rem;
padding-right: 2.5%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
.k .r {
position: relative;
display: flex;
justify-content: space-between;
margin: 0.625rem;
}
.k .r:nth-child(1) i:nth-last-child(-n+4), .k .r:nth-child(1) i:nth-child(-n+4), .k .r:nth-child(2) i:nth-last-child(-n+4), .k .r:nth-child(2) i:nth-child(-n+4) {
color: #b3b3bb;
}
.k .r:nth-child(1) i:nth-last-child(-n+4):hover, .k .r:nth-child(1) i:nth-child(-n+4):hover, .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .k .r:nth-child(2) i:nth-child(-n+4):hover {
color: #15d880;
border-color: #15d880;
}
.k .r:nth-child(1) i:nth-last-child(-n+4):active, .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .k .r:nth-child(1) i:nth-child(-n+4):active, .k .r:nth-child(1) i:nth-child(-n+4).is-active, .k .r:nth-child(2) i:nth-last-child(-n+4):active, .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .k .r:nth-child(2) i:nth-child(-n+4):active, .k .r:nth-child(2) i:nth-child(-n+4).is-active {
color: #15d880;
border-color: #15d880;
box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4), .Normal .k .r:nth-child(1) i:nth-child(-n+4), .Normal .k .r:nth-child(2) i:nth-last-child(-n+4), .Normal .k .r:nth-child(2) i:nth-child(-n+4) {
color: #b3b3bb;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(1) i:nth-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-child(-n+4):hover {
color: #15d880;
border-color: #15d880;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(1) i:nth-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-child(-n+4).is-active {
color: #15d880;
border-color: #15d880;
box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4), .High .k .r:nth-child(1) i:nth-child(-n+4), .High .k .r:nth-child(2) i:nth-last-child(-n+4), .High .k .r:nth-child(2) i:nth-child(-n+4) {
color: #b3b3bb;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(1) i:nth-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-child(-n+4):hover {
color: #d43f57;
border-color: #d43f57;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4):active, .High .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(1) i:nth-child(-n+4):active, .High .k .r:nth-child(1) i:nth-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-last-child(-n+4):active, .High .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-child(-n+4):active, .High .k .r:nth-child(2) i:nth-child(-n+4).is-active {
color: #d43f57;
border-color: #d43f57;
box-shadow: 0 0 0.75rem -0.125rem #d43f57;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4), .Low .k .r:nth-child(2) i:nth-child(-n+4) {
color: #404048;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-child(-n+4):hover {
color: #70707e;
border-color: #70707e;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-child(-n+4).is-active {
color: #70707e;
border-color: #70707e;
box-shadow: 0 0 0.75rem -0.125rem #70707e;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4), .Low .k .r:nth-child(2) i:nth-last-child(-n+4) {
color: #b3b3bb;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):hover {
color: #dfba69;
border-color: #dfba69;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4).is-active {
color: #dfba69;
border-color: #dfba69;
box-shadow: 0 0 0.75rem -0.125rem #dfba69;
}
.k .r:nth-child(2) {
-webkit-transform: translateX(2.5%);
transform: translateX(2.5%);
}
.k .r:nth-child(3) {
margin-left: 8.5%;
margin-right: 14%;
}
.Normal .k .r:nth-child(3) i:nth-child(1) {
color: #15d880;
border-color: #15d880;
box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.Normal .k .r:nth-child(3) i:nth-child(1) b {
background: #15d880;
}
.High .k .r:nth-child(3) i:nth-child(2) {
color: #d43f57;
border-color: #d43f57;
box-shadow: 0 0 0.75rem -0.125rem #d43f57;
}
.High .k .r:nth-child(3) i:nth-child(2) b {
background: #d43f57;
}
.Low .k .r:nth-child(3) i:nth-last-child(3) {
color: #dfba69;
border-color: #dfba69;
box-shadow: 0 0 0.75rem -0.125rem #dfba69;
}
.Low .k .r:nth-child(3) i:nth-last-child(3) b {
background: #dfba69;
}
.k .r:nth-child(3) i {
flex-direction: column-reverse;
}
.k .r:nth-child(3) i b {
background: #404048;
color: #101012;
border-radius: 0.5rem;
padding: 0 0.3125rem;
line-height: 0;
margin-top: 0.3125rem;
}
.k i, .k .space {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #404048;
border-radius: 0.375rem;
height: 3.0625rem;
font-size: 1rem;
line-height: 0;
border: 0.125rem solid #404048;
position: relative;
transition: all 0.08s ease-in-out;
}
.k i:hover, .k .space:hover {
border-color: #70707e;
color: #70707e;
}
.k i:active, .k i.is-active, .k .space:active, .k .space.is-active {
border-color: #70707e;
color: #70707e;
box-shadow: 0 0 0.5625rem -0.125rem #70707e;
-webkit-transform: translateY(0.0625rem);
transform: translateY(0.0625rem);
}
.k i {
font-style: normal;
width: 3.0625rem;
}
.k i span, .k i b {
flex: 2;
display: flex;
align-items: center;
}
.k i span {
text-transform: uppercase;
font-family: "Varela Round";
}
.k i b {
font-size: 0.5625rem;
flex: 1;
}
.k .space {
flex: 1;
max-width: 48.5%;
margin-left: 27.5%;
align-items: stretch;
justify-content: center;
position: static;
}
.credits {
font-size: 0.8125rem;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
}
.credits p {
text-align: center;
}
.credits .links {
margin: 0.3125rem 0;
}
.credits .links li {
display: inline-block;
padding: 0 0.625rem;
border-right: 0.0625rem solid rgba(64, 64, 72, 0.35);
}
.credits .links li:last-child {
border: 0;
}
.fa {
color: #15d880;
}
.fa + a {
color: #15d880;
}
.fa + a:hover {
color: #15d880;
}
.fa-heart {
color: #d43f57;
}
.jp-audio {
color: #ffffff;
}
.modal {
display: flex;
background: rgba(16, 16, 18, 0.8);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
flex-direction: column;
}
.modal .daft-punk-logo {
margin: 1.25rem 0 1.875rem;
}
.modal .btn {
color: #0c7b49;
border: 0.125rem solid #0c7b49;
padding: 0.625rem 1.25rem;
border-radius: 3.125rem;
transition: margin 0.3s ease;
}
.modal .btn:hover {
color: #0c7b49;
border-color: #0c7b49;
box-shadow: 0 0 0.75rem -0.125rem #0c7b49;
text-shadow: 0 0 0.25rem rgba(12, 123, 73, 0.8);
}
.modal h1 {
font-size: 2.5rem;
font-weight: 100;
margin: 0 0 1.875rem 0;
}
.modal h2 {
font-size: 1.25rem;
font-weight: 200;
margin: 0 0 1.875rem 0;
}
.modal h2 a {
color: #15d880;
}
.modal h2 a:hover {
text-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8);
}
.modal ul {
display: flex;
}
.modal ul li {
margin: 1.25rem;
}
.modal .fa {
color: #15d880;
}
.modal .fa + a {
color: #ffffff;
}
.modal .fa + a:hover {
color: #15d880;
}
.modal .credit {
margin: 1.25rem 0 0 0;
}
.jp-audio {
position: relative;
}
.jp-audio .jp-controls {
position: absolute;
}
.jp-audio .jp-controls button {
background: transparent;
border: 0;
color: #70707e;
text-transform: capitalize;
font-size: 0.5625rem;
}
.jp-audio .jp-controls .jp-play:before {
content: "";
height: 0.3125rem;
width: 0.3125rem;
border-radius: 3.125rem;
background: #70707e;
display: inline-block;
margin: 0.0625rem 0.1875rem;
}
.jp-audio.jp-state-playing .jp-controls .jp-play {
color: #15d880;
text-shadow: 0 0 0.125rem rgba(21, 216, 128, 0.8);
}
.jp-audio.jp-state-playing .jp-controls .jp-play:before {
background: #15d880;
box-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8);
}
.High .jp-audio.jp-state-playing .jp-controls .jp-play {
color: #d43f57;
text-shadow: 0 0 0.125rem rgba(212, 63, 87, 0.8);
}
.High .jp-audio.jp-state-playing .jp-controls .jp-play:before {
background: #d43f57;
box-shadow: 0 0 0.1875rem rgba(212, 63, 87, 0.8);
}
.Low .jp-audio.jp-state-playing .jp-controls .jp-play {
color: #dfba69;
text-shadow: 0 0 0.125rem rgba(223, 186, 105, 0.8);
}
.Low .jp-audio.jp-state-playing .jp-controls .jp-play:before {
background: #dfba69;
box-shadow: 0 0 0.1875rem rgba(223, 186, 105, 0.8);
}
.jp-audio .jp-progress {
height: 3.0625rem;
}
.jp-audio .jp-progress .jp-seek-bar {
width: 100%;
height: 100%;
}
.jp-audio .jp-progress .jp-seek-bar .jp-play-bar {
background: rgba(64, 64, 72, 0.2);
height: 100%;
}
.msg {
background: #DF2828;
color: white;
padding: 0.625rem 0.9375rem;
border-radius: 0.25rem;
margin-bottom: 1.25rem;
}
del {
text-decoration: line-through;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment