responsiveness for desktop and mobile
This commit is contained in:
@@ -23,85 +23,68 @@
|
||||
<div id="background_wrap"></div>
|
||||
|
||||
<div id="wrapper">
|
||||
<!-- No aside element - flat structure -->
|
||||
<header id="greeting" class="sidebaritem headlineshadow">
|
||||
<div id="icosahedron-container"></div>
|
||||
<span class="line1">hello!</span>
|
||||
<span class="line2">my name is</span>
|
||||
<span class="line3">alina marquardt</span>
|
||||
</header>
|
||||
|
||||
<div class="column column-sidebar headlineshadow">
|
||||
<section id="iam" class="sidebaritem headlineshadow">
|
||||
<span class="line1">i am a senior</span>
|
||||
<span class="line2 bigline"><em>UX/UI designer</em></span>
|
||||
<span class="line3">& electronic musician</span>
|
||||
<span class="line4">based in germany</span>
|
||||
</section>
|
||||
|
||||
<header>
|
||||
<div id="greeting">
|
||||
<div id="icosahedron-container"></div>
|
||||
<span class="line1">hello!</span>
|
||||
<span class="line2">my name is</span>
|
||||
<span class="line3">alina marquardt</span>
|
||||
</div>
|
||||
<section id="findme" class="sidebaritem headlineshadow">
|
||||
<span class="line1">please also see</span>
|
||||
<ul>
|
||||
<li class="line2 bigline"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
|
||||
<li class="line3 bigline"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="contentitem box maincontent" id="music">
|
||||
<header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1>
|
||||
</header>
|
||||
|
||||
<aside>
|
||||
<section id="iam">
|
||||
<span class="line1">i am a senior</span>
|
||||
<span class="line2 bigline"><em>UX/UI designer</em></span>
|
||||
<span class="line3">& electronic musician</span>
|
||||
<span class="line4">based in germany</span>
|
||||
</section>
|
||||
</aside>
|
||||
<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>
|
||||
|
||||
<aside>
|
||||
<section id="findme">
|
||||
<span class="line1">please also see</span>
|
||||
<ul>
|
||||
<li class="line2 bigline"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
|
||||
<li class="line3 bigline"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
<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>
|
||||
|
||||
<div class="column column-content">
|
||||
|
||||
<section class="box maincontent" id="music">
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user