Improve responsive spacing

Author: willburden

src/components/Aside.astro

@@ -8,8 +8,8 @@
     @use "../styles/tokens" as *;
 
     aside {
-        @media (min-width: calc(2 * $aside-width)) {
-            float: right;
+        @media (min-width: $single-width) {
+            float: inline-end;
         }
 
         @media (min-width: $full-width) {
@@ -21,7 +21,7 @@
         @media (min-width: $full-width) {
             position: absolute;
             width: $aside-width;
-            right: calc(-1 * $space-md - $aside-width);
+            right: calc(-1 * $space-lg - $aside-width);
         }
     }
 </style>

src/components/Bandcamp.astro

@@ -20,15 +20,16 @@ const { album, tracks = 5 } = Astro.props;
     $height-per-track: 32px;
 
     iframe {
-        width: $aside-width;
+        width: 100%;
+        max-width: 50vh;
         height: auto;
         aspect-ratio: 1;
         border: 0;
 
         display: block;
         margin-block-start: $space-xs;
 
-        @media (min-width: calc(2 * $aside-width)) {
+        @media (min-width: $single-width) {
             margin-block-start: 0;
         }
 

src/layouts/BaseLayout.astro

@@ -52,6 +52,10 @@ import '../styles/global.scss';
 			width: 100%;
 
 			padding-inline: $space-md;
+
+			@media (min-width: $full-width) {
+				padding-inline-end: $space-lg;
+			}
 		}
 
 		.aside {

src/styles/_tokens.scss

@@ -19,6 +19,8 @@ $space-lg: 2rem;
 
 $content-width: 650px;
 $aside-width: 300px;
+
+$single-width: calc(2 * ($aside-width + $space-md));
 $full-width: calc($content-width + $aside-width + 3 * $space-md);
 
 // Typography