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

mobile styling improvements

main
Alina Marquardt 2025-05-14 06:15:32 +02:00
parent 659cb57be3
commit 3e6ba46046
2 changed files with 55 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public_html/index.html
View File

@ -10,13 +10,13 @@
<meta name="author" content="alina marquardt" /> <meta name="author" content="alina marquardt" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preload" fetchpriority="high" as="image" type="image/webp" href="img/bg.webp" /> <link rel="preload" as="image" type="image/webp" href="img/bg.webp" fetchpriority="high" />
<link rel="preload" fetchpriority="high" as="image" type="image/webp" href="img/bg_blur.webp" /> <link rel="preload" as="image" type="image/webp" href="img/bg_blur.webp" fetchpriority="high" />
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-Regular.woff" /> <link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-It.woff" fetchpriority="high" />
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-Semibold.woff" /> <link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-SemiboldIt.woff" fetchpriority="high" />
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-LightIt.woff" /> <link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-Regular.woff" />
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-It.woff" fetchpriority="high" /> <link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-Semibold.woff" />
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-SemiboldIt.woff" fetchpriority="high" /> <link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-LightIt.woff" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
@ -30,7 +30,6 @@
<div id="background_wrap"></div> <div id="background_wrap"></div>
<div id="wrapper"> <div id="wrapper">
<!-- No aside element - flat structure -->
<header id="greeting" class="sidebaritem headlineshadow"> <header id="greeting" class="sidebaritem headlineshadow">
<div id="icosahedron-container"></div> <div id="icosahedron-container"></div>
<span class="line1">hello!</span> <span class="line1">hello!</span>
@ -67,20 +66,6 @@
</h1> </h1>
</header> </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.webp"
srcset="img/album/lastfuture_-_misinterpreter.webp 2x, img/album/lastfuture_-_misinterpreter_1x.webp 1x"
alt="album cover for the lastfuture track misinterpreter"
width="120" height="120"
/>
<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> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank"> <a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
@ -105,12 +90,28 @@
srcset="img/album/lastfuture_-_dreamshifter.webp 2x, img/album/lastfuture_-_dreamshifter_1x.webp 1x" srcset="img/album/lastfuture_-_dreamshifter.webp 2x, img/album/lastfuture_-_dreamshifter_1x.webp 1x"
alt="album cover for the lastfuture album dreamshifter" alt="album cover for the lastfuture album dreamshifter"
width="120" height="120" width="120" height="120"
loading="lazy"
/> />
<h2>lastfuture <em>dreamshifter</em></h2> <h2>lastfuture <em>dreamshifter</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
</article> </article>
<article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
<img
class="albumcover"
src="img/album/lastfuture_-_misinterpreter.webp"
srcset="img/album/lastfuture_-_misinterpreter.webp 2x, img/album/lastfuture_-_misinterpreter_1x.webp 1x"
alt="album cover for the lastfuture track misinterpreter"
width="120" height="120"
loading="lazy"
/>
<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> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank"> <a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
@ -120,6 +121,7 @@
srcset="img/album/lastfuture_-_reverse_kill.webp 2x, img/album/lastfuture_-_reverse_kill_1x.webp 1x" srcset="img/album/lastfuture_-_reverse_kill.webp 2x, img/album/lastfuture_-_reverse_kill_1x.webp 1x"
alt="album cover for the lastfuture album reverse kill" alt="album cover for the lastfuture album reverse kill"
width="120" height="120" width="120" height="120"
loading="lazy"
/> />
<h2>lastfuture <em>reverse kill</em></h2> <h2>lastfuture <em>reverse kill</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>

32
public_html/style.css
View File

@ -518,6 +518,7 @@ a {
font-size: 1.125rem; font-size: 1.125rem;
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
transition: margin 0.25s, padding 0,25s;
} }
.sidebaritem a { .sidebaritem a {
@ -871,9 +872,38 @@ article.album a:hover {
margin-top: 3rem; margin-top: 3rem;
} }
.sidebaritem {
margin-left: calc( ( 100% - 240px ) / 2 );
}
.sidebaritem#greeting #icosahedron-container {
margin-left: 3.5rem;
}
.sidebaritem#greeting .line1 {
margin-left: 4rem;
}
.sidebaritem#iam {
padding-left: 0.75rem;
margin-top: 1.75rem;
}
.sidebaritem#iam .line2 {
padding-left: 0.25rem;
}
.sidebaritem#iam .line3 {
padding-left: 0.25rem;
}
.sidebaritem#findme { .sidebaritem#findme {
margin-top: 0rem; margin-top: 0rem;
margin-bottom: 1rem; margin-bottom: 2rem;
}
.sidebaritem#findme .line2, .sidebaritem#findme .line3 {
margin-top: 0.2em;
} }
} }