added and styled albums section
parent
c1f6f029f6
commit
9b0daf8711
|
|
@ -48,10 +48,10 @@
|
|||
-->
|
||||
<aside>
|
||||
<section class="findme">
|
||||
<span class="line1">find me</span>
|
||||
<span class="line1">please also see</span>
|
||||
<ul>
|
||||
<li class="line2"><a href="">on <em>bandcamp</em></a></li>
|
||||
<li class="line3"><a href="">on <em>lorem ipsum</em></a></li>
|
||||
<li class="line2"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
|
||||
<li class="line3"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
|
||||
</ul>
|
||||
<span class="line4"><a href="">more places »</a></span>
|
||||
</section>
|
||||
|
|
@ -63,22 +63,38 @@
|
|||
<div class="column">
|
||||
|
||||
<section class="box" id="music">
|
||||
<header class="blurgreen headlineshadow"><h1>electronic <em>music</em><img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
|
||||
<div class="opaque whitebg">
|
||||
<h2><span class="halfbubble blurgreen"></span>albums</h2>
|
||||
<!--<article>
|
||||
<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - dreamshifter" /></a>
|
||||
lastfuture –
|
||||
<h1>dreamshifter</h1>
|
||||
</article>
|
||||
<article>
|
||||
<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - reverse kill" /></a>
|
||||
lastfuture –
|
||||
<h1>reverse kill</h1>
|
||||
</article>
|
||||
-->
|
||||
<div style="height: 200px;"></div>
|
||||
</div>
|
||||
<header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
|
||||
<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" />
|
||||
<h2>lastfuture <em>misinterpreter</em></h2>
|
||||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
<div class="clearfix"></div>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
|
||||
<img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.jpg" />
|
||||
<h2>lastfuture <em>signal to noise</em></h2>
|
||||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
<div class="clearfix"></div>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
|
||||
<img class="albumcover" src="img/album/lastfuture_-_dreamshifter.jpg" />
|
||||
<h2>lastfuture <em>dreamshifter</em></h2>
|
||||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
<div class="clearfix"></div>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
|
||||
<img class="albumcover" src="img/album/lastfuture_-_reverse_kill.jpg" />
|
||||
<h2>lastfuture <em>reverse kill</em></h2>
|
||||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="box" id="experiment">
|
||||
|
|
@ -94,7 +110,7 @@
|
|||
<div class="column">
|
||||
|
||||
<section class="box invertedbox" id="recent">
|
||||
<header class="headlineshadow whitebg"><h1>most recent <em>albums</em></h1></header>
|
||||
<header class="headlineshadow whitebg"><h1><em>highlighted</em> tracks</h1></header>
|
||||
<div class="opaque blurgreen">
|
||||
<h2 class="headlineshadow"><em>track</em></h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -150,6 +150,8 @@ p {text-wrap: pretty;}
|
|||
--text-color: #333;
|
||||
--link-color: #03f;
|
||||
--link-color-hover: #69f;
|
||||
--button-color: #fcd700;
|
||||
--button-color-hover: #000000;
|
||||
--highlight-color: #fcd700;
|
||||
--placeholder-color: #a9a9a9;
|
||||
}
|
||||
|
|
@ -185,7 +187,6 @@ body {
|
|||
background-repeat: no-repeat;
|
||||
background-position: top left;
|
||||
background-attachment: fixed;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -269,6 +270,57 @@ section.box#experiment header .icon {
|
|||
margin-top: -2.5rem;
|
||||
}
|
||||
|
||||
/* music */
|
||||
|
||||
article.album {
|
||||
height: auto;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
article.album a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
article.album h2 {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
article.album h2 em {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
article.album .listenbuy {
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
display: inline-block;
|
||||
margin-top: 0.75em;
|
||||
margin-left: -0.25em;
|
||||
padding: 0.25em 1em;
|
||||
background-color: transparent;
|
||||
border-radius: 2em;
|
||||
transition: background-color 0.25s, margin 0.25s;
|
||||
}
|
||||
article.album a:hover .listenbuy {
|
||||
margin-top: 1em;
|
||||
background-color: var(--button-color);
|
||||
}
|
||||
article.album a .listenbuy:hover {
|
||||
background-color: var(--button-color-hover);
|
||||
}
|
||||
img.albumcover {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
article.album a:hover {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
/* icosahedron */
|
||||
|
||||
#icosahedron-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue