chore: improve details spacing

openscript · openscript · commit 3afa3da12de6 · 2025-07-06T19:45:20.000Z
diff --git a/.changeset/true-trams-jump.md b/.changeset/true-trams-jump.md
@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Improve details spacing
diff --git a/src/components/Details.astro b/src/components/Details.astro
@@ -10,11 +10,7 @@ const { defaultOpen = false, title } = Astro.props;
 ---
 
 <details data-default-open={defaultOpen}>
-  <summary>
-    <slot name="title">
-      {title}
-    </slot>
-  </summary>
+  <summary><slot name="title">{title}</slot></summary>
   <div class="content">
     <slot />
   </div>
@@ -52,7 +48,7 @@ const { defaultOpen = false, title } = Astro.props;
   }
 
   .content {
-    padding: 0 1ch;
+    padding: 0 2ch;
   }
 </style>
 
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
@@ -20,7 +20,6 @@ const t = useTranslations(locale);
 
   ul {
     padding: 0;
-    margin-left: calc(-1rem * (var(--from-depth) - 1));
     margin-bottom: 0;
   }
 
@@ -41,23 +40,23 @@ const t = useTranslations(locale);
   }
 
   .depth-2 {
-    margin-left: 1rem;
+    margin-left: 1ch;
   }
 
   .depth-3 {
-    margin-left: 2rem;
+    margin-left: 3ch;
   }
 
   .depth-4 {
-    margin-left: 3rem;
+    margin-left: 5ch;
   }
 
   .depth-5 {
-    margin-left: 4rem;
+    margin-left: 7ch;
   }
 
   .depth-6 {
-    margin-left: 5rem;
+    margin-left: 9ch;
   }
 </style>
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"r.obin.ch": patch
 +---
++
 +Improve details spacing
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,6 @@ const t = useTranslations(locale);`
`20`	`20`
`21`	`21`	`ul {`
`22`	`22`	`padding: 0;`
`23`		`- margin-left: calc(-1rem * (var(--from-depth) - 1));`
`24`	`23`	`margin-bottom: 0;`
`25`	`24`	`}`
`26`	`25`
`@@ -41,23 +40,23 @@ const t = useTranslations(locale);`
`41`	`40`	`}`
`42`	`41`
`43`	`42`	`.depth-2 {`
`44`		`- margin-left: 1rem;`
	`43`	`+ margin-left: 1ch;`
`45`	`44`	`}`
`46`	`45`
`47`	`46`	`.depth-3 {`
`48`		`- margin-left: 2rem;`
	`47`	`+ margin-left: 3ch;`
`49`	`48`	`}`
`50`	`49`
`51`	`50`	`.depth-4 {`
`52`		`- margin-left: 3rem;`
	`51`	`+ margin-left: 5ch;`
`53`	`52`	`}`
`54`	`53`
`55`	`54`	`.depth-5 {`
`56`		`- margin-left: 4rem;`
	`55`	`+ margin-left: 7ch;`
`57`	`56`	`}`
`58`	`57`
`59`	`58`	`.depth-6 {`
`60`		`- margin-left: 5rem;`
	`59`	`+ margin-left: 9ch;`
`61`	`60`	`}`
`62`	`61`	`</style>`
`63`	`62`