alina
/
alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added and styled albums section

main
Alina Marquardt 2025-05-12 21:23:54 +02:00
parent c1f6f029f6
commit 9b0daf8711
2 changed files with 89 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
public_html/index.html
View File

@ -48,10 +48,10 @@
--> -->
<aside> <aside>
<section class="findme"> <section class="findme">
<span class="line1">find me</span> <span class="line1">please also see</span>
<ul> <ul>
<li class="line2"><a href="">on <em>bandcamp</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="">on <em>lorem ipsum</em></a></li> <li class="line3"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
</ul> </ul>
<span class="line4"><a href="">more places »</a></span> <span class="line4"><a href="">more places »</a></span>
</section> </section>
@ -63,22 +63,38 @@
<div class="column"> <div class="column">
<section class="box" id="music"> <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> <header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
<div class="opaque whitebg"> <article class="opaque whitebg album">
<h2><span class="halfbubble blurgreen"></span>albums</h2> <a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
<!--<article> <img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" />
<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - dreamshifter" /></a> <h2>lastfuture <em>misinterpreter</em></h2>
lastfuture – <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
<h1>dreamshifter</h1> </a>
</article> </article>
<article> <div class="clearfix"></div>
<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - reverse kill" /></a> <article class="opaque whitebg album">
lastfuture – <a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
<h1>reverse kill</h1> <img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.jpg" />
</article> <h2>lastfuture <em>signal to noise</em></h2>
--> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
<div style="height: 200px;"></div> </a>
</div> </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>
<section class="box" id="experiment"> <section class="box" id="experiment">
@ -94,7 +110,7 @@
<div class="column"> <div class="column">
<section class="box invertedbox" id="recent"> <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"> <div class="opaque blurgreen">
<h2 class="headlineshadow"><em>track</em></h2> <h2 class="headlineshadow"><em>track</em></h2>

54
public_html/style.css
View File

@ -150,6 +150,8 @@ p {text-wrap: pretty;}
--text-color: #333; --text-color: #333;
--link-color: #03f; --link-color: #03f;
--link-color-hover: #69f; --link-color-hover: #69f;
--button-color: #fcd700;
--button-color-hover: #000000;
--highlight-color: #fcd700; --highlight-color: #fcd700;
--placeholder-color: #a9a9a9; --placeholder-color: #a9a9a9;
} }
@ -185,7 +187,6 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top left; background-position: top left;
background-attachment: fixed; background-attachment: fixed;
color: black;
} }
a { a {
@ -269,6 +270,57 @@ section.box#experiment header .icon {
margin-top: -2.5rem; 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 */
#icosahedron-container { #icosahedron-container {