mobile styling improvements

public_html/index.html

@@ -10,13 +10,13 @@
 	<meta name="author" content="alina marquardt" />
 	<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-It.woff"         fetchpriority="high" />
+	<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-Regular.woff"                         />
 	<link rel="preload" as="font"  type="font/woff"  href="fonts/SourceSansPro-Semibold.woff"                        />
 	<link rel="preload" as="font"  type="font/woff"  href="fonts/SourceSansPro-LightIt.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-SemiboldIt.woff" fetchpriority="high" />
 
 	<link rel="stylesheet" href="style.css" />
 
@@ -30,7 +30,6 @@
 	<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>
@@ -67,20 +66,6 @@
 				</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.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>
 			<article class="opaque whitebg album">
 				<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"
 						alt="album cover for the lastfuture album dreamshifter"
 						width="120" height="120"
+						loading="lazy"
 					/>
 					<h2>lastfuture <em>dreamshifter</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
 			</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>
 			<article class="opaque whitebg album">
 				<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"
 						alt="album cover for the lastfuture album reverse kill"
 						width="120" height="120"
+						loading="lazy"
 					/>
 					<h2>lastfuture <em>reverse kill</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>

public_html/style.css

@@ -518,6 +518,7 @@ a {
 	font-size: 1.125rem;
 	font-style: italic;
 	font-weight: 300;
+	transition: margin 0.25s, padding 0,25s;
 }
 
 .sidebaritem a {
@@ -871,9 +872,38 @@ article.album a:hover {
 		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 {
 		margin-top: 0rem;
-		margin-bottom: 1rem;
+		margin-bottom: 2rem;
+	}
+	
+	.sidebaritem#findme .line2, .sidebaritem#findme .line3 {
+		margin-top: 0.2em;
 	}
 }