From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 10 Jan 2023 03:54:11 +0000 (-0800)
Subject: Add margin for devices with small vertical size
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=76ef4addcbd8b409b02cbf8edf64e473802daa52;p=sleepy-operators

Add margin for devices with small vertical size
---

diff --git a/index.html b/index.html
index a8ba10e..fdcc68d 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 </head>
 
 <body>
-  <div>
+  <div class="wrapper">
     <header>
       <h1>sleepy-operators</h1>
 
diff --git a/style.css b/style.css
index a6ecc32..901acc9 100644
--- a/style.css
+++ b/style.css
@@ -2,7 +2,7 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   background: radial-gradient(circle at min(300px, 50% - 8px) 50%, hsl(222deg 50% 20%) 300px, hsl(240deg 50% 5%));
   color: hsl(222deg 50% 80%);
-  block-size: 100dvh;
+  min-block-size: 100dvh;
   inline-size: min(720px, 100% - 16px);
   margin-block: 0;
   margin-inline: 8px auto;
@@ -10,6 +10,10 @@ body {
   place-items: center;
 }
 
+.wrapper {
+  margin-block: 8px;
+}
+
 header {
   display: flex;
   align-items: center;