chore: improve fidget display

Author: openscript

.changeset/slow-readers-join.md

@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Improve fidget display

src/components/Brand.astro

@@ -9,6 +9,7 @@
     box-sizing: content-box;
     white-space: nowrap;
     line-height: 1.2;
+    user-select: none;;
   }
 
   span:last-of-type {

src/components/Details.astro

@@ -49,6 +49,11 @@ const { defaultOpen = false, title } = Astro.props;
 
   .content {
     padding: 0 2ch;
+    line-height: normal;
+
+    *:last-child {
+      margin-bottom: 0;
+    }
   }
 </style>
 

src/components/fidget/FidgetCheckboxes.astro

@@ -1,5 +1,5 @@
 ---
-const AMOUNT = 252;
+const AMOUNT = 260;
 const SUPABASE_URL = "https://fulwzvmwtfuykfwqesni.supabase.co";
 const SUPABASE_KEY =
   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZ1bHd6dm13dGZ1eWtmd3Flc25pIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjU3MjU3NTgsImV4cCI6MjA0MTMwMTc1OH0.QiG12IlH8YmTEeI0BKQ-p87-S8JaXt2oyeLlXxBloyI";
@@ -83,8 +83,18 @@ const SUPABASE_KEY =
 
   .wrapper {
     display: grid;
-    width: 36rem;
-    grid-template-columns: repeat(auto-fill, 2rem);
+    width: 30rem;
+    grid-template-columns: repeat(auto-fill, 1.5rem);
+
+    border: 1px solid var(--color-primary-240);
+    background-color: var(--color-white-95);
+    border-radius: var(--border-radius);
+    padding: 0.8rem;
+  }
+
+  input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
   }
 </style>
 

src/layouts/DefaultLayout.css

@@ -202,6 +202,10 @@ body > header {
   display: none;
 }
 
+nav {
+  user-select: none;
+}
+
 main {
   flex-grow: 1;
   padding-top: 2rem;
@@ -335,6 +339,25 @@ kbd:hover {
   top: 1px;
 }
 
+dt {
+  font-style: italic;
+}
+
+dd {
+  margin-left: 1ch;
+  margin-bottom: 1rem;
+  padding-left: 1ch;
+  border-left: 1px solid var(--color-primary-240);
+
+  & > * {
+    margin-bottom: var(--gap-tiny);
+  }
+}
+
+dd:last-child {
+  margin-bottom: 0;
+}
+
 main li {
   list-style: ">";
   padding-inline-start: 1ch;