Replace min-width media rule with inline-size

Using inline-size will work for vertical writing modes while the media rule will not.

diff --git a/style.css b/style.css
index 3dd64d7a7d16c84bbb8a8df8e5eb2753463bc4dd..8951c1e024017805571f88f435f8242d8eac344c 100644 (file)
--- a/style.css
+++ b/style.css
@@ -47,17 +47,11 @@ kbd {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
   grid-gap: 1rem;
-  margin-inline: 1rem;
+  inline-size: min(100% - 2rem, 1440px);
+  margin-inline: auto;
   margin-block-end: 1rem;
 }
 
-@media (min-width: 1440px) {
-  .card-container {
-    margin-inline: auto;
-    max-width: 1440px;
-  }
-}
-
 .skeleton-line {
   block-size: 1rem;
   margin-block: 1rem;
@@ -94,12 +88,6 @@ kbd {
 }
 
 .post {
-  margin-inline: 1rem;
-}
-
-@media (min-width: 1440px) {
-  .post {
-    margin-inline: auto;
-    max-width: 1440px;
-  }
+  inline-size: min(100% - 2rem, 1440px);
+  margin-inline: auto;
 }