From 5ef67fab919d62a4054f457d779f31168052fc8a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 17 Feb 2023 20:47:09 +0800
Subject: [PATCH] Variable-ise the 40em

---
 src/app.css                | 14 +++++++-------
 src/components/compose.css |  2 +-
 src/index.css              |  1 +
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index ffd83760..a9e5f0c7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -72,7 +72,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   min-height: 100vh;
   min-height: 100dvh;
   margin: auto;
-  width: 40em;
+  width: var(--main-width);
   max-width: 100%;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
@@ -686,14 +686,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   }
 }
 .deck-backdrop .deck {
-  width: 40em;
+  width: var(--main-width);
   max-width: 100vw;
   background-color: var(--bg-color);
   animation: slide-in 0.5s var(--timing-function);
   box-shadow: -1px 0 var(--bg-color);
 }
 .deck-backdrop .deck .status {
-  max-width: 40em;
+  max-width: var(--main-width);
 }
 
 .deck-close {
@@ -745,7 +745,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 /* BOX */
 
 .box {
-  width: 40em;
+  width: var(--main-width);
   max-width: 100vw;
   padding: 16px;
 }
@@ -951,7 +951,7 @@ button.carousel-dot:is(.active, [disabled].active) {
   overflow: hidden;
   background-color: var(--bg-color);
   width: 100%;
-  max-width: calc(40em - 50px - 16px);
+  max-width: calc(var(--main-width) - 50px - 16px);
   border-radius: 16px 16px 0 0;
   box-shadow: 0 -1px 32px var(--divider-color);
   animation: slide-up 0.3s var(--timing-function);
@@ -1206,7 +1206,7 @@ meter.donut:is(.danger, .explode):after {
   bottom: 16px;
   bottom: max(16px, env(safe-area-inset-bottom));
   width: calc(100% - 32px);
-  max-width: calc(40em - 32px);
+  max-width: calc(var(--main-width) - 32px);
   z-index: 100;
   display: flex;
   background-color: var(--bg-blur-color);
@@ -1370,7 +1370,7 @@ ul.link-list li a .icon {
   }
   .deck-backdrop .deck {
     width: 50%;
-    min-width: 40em;
+    min-width: var(--main-width);
     border-left: 1px solid var(--divider-color);
   }
   .timeline-deck {
diff --git a/src/components/compose.css b/src/components/compose.css
index c33e31be..433201e4 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -1,5 +1,5 @@
 #compose-container {
-  width: 40em;
+  width: var(--main-width);
   max-width: 100vw;
   align-self: stretch;
   animation: fade-in 0.2s ease-out;
diff --git a/src/index.css b/src/index.css
index cd097eb5..aae8ed13 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
 :root {
+  --main-width: 40em;
   text-size-adjust: none;
   --hairline-width: 1px;