ux: tweak styles to reduce layout shifts during load

panstromek · panstromek · commit 567ebbd92508 · 2025-02-08T21:15:11.000+01:00
diff --git a/webzebra/index.html b/webzebra/index.html
@@ -19,8 +19,8 @@
     </style>
 </head>
 <body>
-<div class="m-1.5 mb-2" style="width: 70px">
-    <a href="https://github.com/panstromek/zebra-rs" class="text-gray-200 text-xs" style="display: flex; align-items: center;" target="_blank">
+<div class="gh-link">
+    <a href="https://github.com/panstromek/zebra-rs" class="text-gray-200 flex" style="align-items: center;" target="_blank">
         <img src="/GitHub-Mark-Light-32px.png" alt="Github Icon" width="16" height="16" class="mr-2">
         Source
     </a>
diff --git a/webzebra/src/critical.css b/webzebra/src/critical.css
@@ -4,3 +4,28 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#board {
+  background-color: #3a7f46;
+  border: 1vw brown solid;
+}
+
+.gh-link {
+  margin: 6px 6px 8px;
+  width: 70px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.w-full {
+  width: 100%;
+}
+.flex {
+  display: flex
+}
+.justify-center {
+  justify-content: center;
+}
+
+.max-w-sm {
+  max-width: 24rem /* 384px */;
+}
diff --git a/webzebra/src/index.css b/webzebra/src/index.css
@@ -18,11 +18,6 @@ svg text::selection {
     background: none;
 }
 
-#board {
-    background-color: #3a7f46;
-    border: 1vw brown solid;
-}
-
 .circle-black, .circle-white {
     width: 1em;
     height: 1em;
