Improve CSS for carousels

yiays · Feb 7, 2024 · be661eb · be661eb
1 parent c2cf14d
commit be661eb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/includes/header.php b/includes/header.php
@@ -28,7 +28,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,400;1,700&display=swap" rel="preload" as="style">
 
 		<link rel="stylesheet" href="/normalize.css">
-		<link rel="stylesheet" href="/style.css?v=0.4.17">
+		<link rel="stylesheet" href="/style.css?v=0.4.19">
   </head>
   <body>
     <div class="main">

diff --git a/style.css b/style.css
@@ -318,15 +318,17 @@ article, section, aside {
 .carousel > div, .carousel > a {
   position: relative;
   display: block;
-  width: 20vw;
-  min-width: 12em;
-  max-width: 18em;
   height: 20vh;
   min-height: 9em;
   max-height: 18em;
+  aspect-ratio: 1;
   background-size: cover;
   background-position: center;
   border-radius: 1em;
+  transition: aspect-ratio 500ms;
+}
+.carousel > a:hover {
+  aspect-ratio: 8/5;
 }
 .carousel > *:not(:last-child) {
   margin-right: 1em;