mirror of
https://github.com/rvtr/music.git
synced 2025-06-18 10:45:31 -04:00
Stuff
This commit is contained in:
rmc
parent
0567604f00
commit
b83c30797e
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
*MUSICDIR/
|
||||
*.DS_Store
|
||||
*._*
|
||||
@ -8,6 +8,10 @@
|
||||
|
||||
|
||||
|
||||
/** My garbage is here*/
|
||||
th {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
@ -58,7 +62,7 @@
|
||||
|
||||
--ff-inter: 'Inter', sans-serif;
|
||||
|
||||
--headline-sm: 2.4rem;
|
||||
--headline-sm: 2.0rem;
|
||||
--title-lg: 2.2rem;
|
||||
--label-lg: 1.4rem;
|
||||
--label-md: 1.2rem;
|
||||
@ -268,8 +272,12 @@ body:hover::-webkit-scrollbar-thumb { background-color: var(--surface-variant);
|
||||
.volume { display: none; }
|
||||
|
||||
.player {
|
||||
--padding: 24px;
|
||||
background-image: var(--gradient);
|
||||
--padding: 48px;
|
||||
background-image: url('../../bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
/* background-image: var(--gradient); */
|
||||
padding: var(--padding);
|
||||
padding-block-start: calc(64px + var(--padding));
|
||||
min-height: 100vh;
|
||||
@ -288,7 +296,7 @@ body:hover::-webkit-scrollbar-thumb { background-color: var(--surface-variant);
|
||||
|
||||
.music-banner {
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: var(--surface-variant);
|
||||
background-color: rgb(64, 64, 64, 0.9);
|
||||
max-width: 400px;
|
||||
margin-inline: auto;
|
||||
align-self: center;
|
||||
@ -590,14 +598,19 @@ body:hover::-webkit-scrollbar-thumb { background-color: var(--surface-variant);
|
||||
}
|
||||
|
||||
.music-content {
|
||||
background-color: rgb(64, 64, 64, 0.9);
|
||||
border-radius: var(--radius-24);
|
||||
padding-left:5%;
|
||||
padding-right:5%;
|
||||
padding-bottom:5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-block-start: 48px;
|
||||
padding-block-start: 24px;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.music-content :is(.headline-sm, .label-lg, .label-md) {
|
||||
max-width: 85%;
|
||||
/*max-width: 85%;*/
|
||||
}
|
||||
|
||||
.label-wrapper {
|
||||
|
||||
2900
assets/js/script.js
2900
assets/js/script.js
File diff suppressed because it is too large
Load Diff
56
index.html
56
index.html
@ -71,11 +71,11 @@
|
||||
- #PLAYER
|
||||
-->
|
||||
|
||||
<div class="player">
|
||||
<div class="player" style="overflow-x: hidden;">
|
||||
<div class="container">
|
||||
|
||||
<figure class="music-banner">
|
||||
<img src="https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Jamalca_(1974).jpeg" width="800" height="800" alt="Jamalca Album Poster"
|
||||
<img src="https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Jamalca_(1974).jpeg" width="100%" height="100%" alt="Jamalca Album Poster"
|
||||
class="img-cover" data-player-banner>
|
||||
</figure>
|
||||
|
||||
@ -83,19 +83,57 @@
|
||||
|
||||
<h2 class="headline-sm" data-title>Jamalca</h2>
|
||||
|
||||
<p class="label-lg label-wrapper wrapper">
|
||||
<span data-album>Jamalca</span>
|
||||
<p class="label-md artist"><span data-artist>Ahmad Jamal</span><span data-year>1974</span></p>
|
||||
<!-- It's not a certified lillian skinner edit without loads of shitty inline CSS -->
|
||||
<div style="margin: 4px, 4px;padding: 0px;width: 100%;overflow-x: auto;overflow-y: hidden;white-space: nowrap;text-align: left;">
|
||||
<table>
|
||||
<tr>
|
||||
<th data-track-1>CONTENT1</th>
|
||||
<th data-track-6>CONTENT6</th>
|
||||
<th data-track-11>CONTENT11</th>
|
||||
<th data-track-16>CONTENT16</th>
|
||||
<th data-track-21>CONTENT21</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-track-2>CONTENT2</th>
|
||||
<th data-track-7>CONTENT7</th>
|
||||
<th data-track-12>CONTENT12</th>
|
||||
<th data-track-17>CONTENT17</th>
|
||||
<th data-track-22>CONTENT22</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-track-3>CONTENT3</th>
|
||||
<th data-track-8>CONTENT8</th>
|
||||
<th data-track-13>CONTENT13</th>
|
||||
<th data-track-18>CONTENT18</th>
|
||||
<th data-track-23>CONTENT23</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-track-4>CONTENT4</th>
|
||||
<th data-track-9>CONTENT9</th>
|
||||
<th data-track-14>CONTENT14</th>
|
||||
<th data-track-19>CONTENT19</th>
|
||||
<th data-track-24>CONTENT24</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-track-5>CONTENT5</th>
|
||||
<th data-track-10>CONTENT10</th>
|
||||
<th data-track-15>CONTENT15</th>
|
||||
<th data-track-20>CONTENT20</th>
|
||||
<th data-track-25>CONTENT25</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<span data-year>1974</span>
|
||||
</p>
|
||||
|
||||
<p class="label-md artist" data-artist>Ahmad Jamal</p>
|
||||
|
||||
<div class="seek-control">
|
||||
|
||||
<div>
|
||||
<div class="range-wrapper">
|
||||
<input type="range" step="1" max="60" value="0" class="range" data-range data-seek>
|
||||
<input type="range" step="any" value="0" class="range" data-range data-seek>
|
||||
|
||||
<div class="range-fill" data-range-fill></div>
|
||||
</div>
|
||||
@ -113,7 +151,7 @@
|
||||
</button>
|
||||
|
||||
<div class="range-wrapper">
|
||||
<input type="range" step="0.05" max="1" value="1" class="range" data-range data-volume>
|
||||
<input type="range" step="any" max="1" value="1" class="range" data-range data-volume>
|
||||
|
||||
<div class="range-fill" data-range-fill></div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user