From 6580259a26af4bdc74e4b01452b6a03dc86148d1 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 25 Nov 2021 21:34:01 -0800
Subject: [PATCH] Replace min-width media rule with inline-size

Using inline-size will work for vertical writing modes while the media rule will not.
---
 style.css | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/style.css b/style.css
index 3dd64d7..8951c1e 100644
--- 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;
 }
-- 
2.47.3