north-star / commit

styling

5b506672e568872d7e3db61345a6b73e8db01422 · Pavel Safronov · 2026-03-14 13:46:37 -0700 · parents e2d68fe2d072

styling

 src/index.html |  3 ---
 src/style.css  | 82 ++++++++++++++++++++++++++++++++++------------------------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/index.html b/src/index.html
index 8b8a0bf..de8afb0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,11 +20,8 @@
         <a id="create-room-link" href="https://pavelsafronov.gitlab.io/north-star/">Create New Room</a>
     </p>
     <form id="name-form" class="name-form" autocomplete="off">
-        <label for="self-name-input">You</label>
         <input id="self-name-input" name="selfName" type="text" maxlength="32" enterkeyhint="done" />
-        <label for="self-color-input">Color</label>
         <input id="self-color-input" name="selfColor" type="color" />
-        <button type="submit">Save</button>
     </form>
     <div id="default-arrow" style="display: none;" class="arrow">⇡</div>
     <div id="content">
diff --git a/src/style.css b/src/style.css
index 6af8c78..93183b3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,16 +1,27 @@
 html,
 body {
-    height: 100%;
+    min-height: 100%;
     margin: 0;
 }
 
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 body {
-    display: grid;
-    place-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100dvh;
+    box-sizing: border-box;
+    gap: 8px;
+    padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
     background: #a2b8ed;
     color: #f8fafc;
     font-family: system-ui, sans-serif;
-    overflow: hidden;
+    overflow-x: hidden;
 }
 
 a {
@@ -19,16 +30,13 @@ a {
 }
 
 .app-title {
-    position: fixed;
-    top: max(10px, env(safe-area-inset-top));
-    left: 50%;
-    transform: translateX(-50%);
     margin: 0;
-    z-index: 11;
     font-size: clamp(28px, 5.2vmin, 56px);
     font-weight: 800;
     line-height: 1;
     letter-spacing: 0.02em;
+    position: relative;
+    z-index: 2;
 }
 
 .app-title a {
@@ -36,30 +44,28 @@ a {
 }
 
 .room-current {
-    position: fixed;
-    top: max(50px, calc(env(safe-area-inset-top) + 50px));
-    left: 50%;
-    transform: translateX(-50%);
     margin: 0;
-    z-index: 11;
     font-size: clamp(12px, 1.8vmin, 16px);
     font-weight: 600;
     color: #f8fafc;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+    position: relative;
+    z-index: 2;
+    text-align: center;
 }
 
 .room-links {
-    position: fixed;
-    top: max(74px, calc(env(safe-area-inset-top) + 74px));
-    left: 50%;
-    transform: translateX(-50%);
     margin: 0;
-    z-index: 11;
     display: flex;
     align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
     gap: 10px;
     font-size: clamp(13px, 2vmin, 18px);
     font-weight: 600;
+    position: relative;
+    z-index: 2;
+    text-align: center;
 }
 
 .room-links a {
@@ -83,18 +89,20 @@ a {
 }
 
 .name-form {
-    position: fixed;
-    left: 50%;
-    bottom: max(56px, calc(env(safe-area-inset-bottom) + 56px));
-    transform: translateX(-50%);
     display: flex;
     align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
     gap: 8px;
     padding: 10px;
+    margin-top: 4px;
+    width: min(100%, 520px);
+    box-sizing: border-box;
     border-radius: 12px;
     background: rgba(15, 23, 42, 0.68);
     backdrop-filter: blur(8px);
-    z-index: 10;
+    position: relative;
+    z-index: 2;
 }
 
 .name-form label {
@@ -104,8 +112,9 @@ a {
 }
 
 .name-form input {
-    width: min(54vw, 240px);
-    min-width: 130px;
+    width: 100%;
+    min-width: 0;
+    max-width: 220px;
     padding: 10px 12px;
     border: 1px solid #64748b;
     border-radius: 10px;
@@ -139,9 +148,14 @@ a {
 }
 
 #content {
-    position: fixed;
-    inset: 0;
+    position: relative;
+    width: 100%;
+    flex: 1 1 auto;
+    min-height: 220px;
+    display: block;
+    overflow: hidden;
     pointer-events: none;
+    z-index: 1;
 }
 
 .arrow {
@@ -149,7 +163,7 @@ a {
     top: 50%;
     left: 50%;
     translate: -50% -50%;
-    font-size: 70vmin;
+    font-size: min(62vmin, 70dvh);
     line-height: 1;
     transform: rotate(0deg);
     transition: transform 160ms ease;
@@ -176,17 +190,17 @@ a {
 }
 
 #debug {
-    position: fixed;
-    left: 50%;
-    bottom: max(8px, env(safe-area-inset-bottom));
-    transform: translateX(-50%);
+    position: relative;
     margin: 0;
+    width: min(100%, 720px);
     padding: 6px 10px;
     border-radius: 10px;
     background: rgba(0, 0, 0, 0.45);
     color: #f8fafc;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
-    z-index: 9;
+    z-index: 2;
+    text-align: center;
+    font-size: clamp(12px, 1.8vmin, 14px);
 }
 
 .hint {