From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 4 Dec 2021 07:59:05 +0000 (-0800)
Subject: Use logical properties instead of physical
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=fbe086af72c4f5ebcc4cb5b1af5a202ad1783e3e;p=css-loaders

Use logical properties instead of physical
---

diff --git a/index.html b/index.html
index 6198439..48d8bc7 100644
--- a/index.html
+++ b/index.html
@@ -18,12 +18,12 @@
     }
 
     main {
-      max-width: 720px;
-      margin: 0 auto;
+      inline-size: min(100% - 2rem, 720px);
+      margin-inline: auto;
     }
 
     .skeleton-line {
-      height: 1rem;
+      block-size: 1rem;
       background: linear-gradient(90deg, black, white, black);
       background-size: 200%;
       animation: 1s linear infinite alternate shimmer;
@@ -42,10 +42,10 @@
     .inline-spinner {
       display: inline-block;
       box-sizing: border-box;
-      height: 1em;
-      width: 1em;
+      block-size: 1em;
+      inline-size: 1em;
       border: 0.25em solid transparent;
-      border-top: 0.25em solid black;
+      border-block-start: 0.25em solid black;
       border-radius: 50%;
       animation: 1s infinite spin;
     }