Fix cover aspect ratios

sawyerh · Sep 29, 2024 · b5c3064 · b5c3064
1 parent bed42d9
commit b5c3064
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/web/src/components/Cover.tsx b/web/src/components/Cover.tsx
@@ -14,6 +14,7 @@ const Cover = (props: {
 			priority={props.priority}
 			sizes="(min-width: 600px) 200px, 150px"
 			src={props.image}
+			style={{ objectPosition: "center bottom", objectFit: "contain" }}
 		/>
 	) : (
 		<figcaption className="aspect-cover block bg-stone-800 p-4 text-white">

diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
@@ -27,7 +27,7 @@ h3 {
 }
 
 .cover-link:is(:hover, :focus) .cover-link__cover {
-	@apply -translate-y-4 rotate-2 scale-105 shadow-xl shadow-black/20;
+	@apply -translate-y-4 rotate-2 scale-105;
 }
 
 /*

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -12,10 +12,10 @@ module.exports = {
 				serif: ["var(--font-noto-serif)", "serif"],
 			},
 			gridTemplateColumns: {
-				volumes: "repeat(auto-fill, minmax(150px, 1fr))",
+				volumes: "repeat(auto-fill, minmax(170px, 1fr))",
 			},
 			maxWidth: {
-				"cover-sm": "150px",
+				"cover-sm": "170px",
 				cover: "200px",
 			},
 		},
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ h3 { @@
     }
     .cover-link:is(:hover, :focus) .cover-link__cover {
-    	@apply -translate-y-4 rotate-2 scale-105 shadow-xl shadow-black/20;
+    	@apply -translate-y-4 rotate-2 scale-105;
     }
     /*
@@ Expand Down @@