adjust sizes and paddings

- icons in sidebar / content listing
- copy buttons
- nav spacing
- headings
- code blocks

src/components/MD_Title.tsx

@@ -21,7 +21,7 @@ const MD_Title: ParentComponent<{ titleVar: number }> = props => {
       <span class="heading-hashtag">
         <Hashtag />
       </span>
-      {props.children}
+      <span class="heading-text">{props.children}</span>
       <hr />
     </div>
   );

src/components/icons.tsx

@@ -173,7 +173,6 @@ export const Hashtag: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
-      <title>Copy link</title>
       <path
         fill="currentColor"
         d="M224 90h-51l8.89-48.93a6 6 0 1 0-11.8-2.14L160.81 90H109l8.89-48.93a6 6 0 0 0-11.8-2.14L96.81 90H48a6 6 0 0 0 0 12h46.63l-9.46 52H32a6 6 0 0 0 0 12h51l-8.9 48.93a6 6 0 0 0 4.83 7A5.6 5.6 0 0 0 80 222a6 6 0 0 0 5.89-4.93l9.3-51.07H147l-8.89 48.93a6 6 0 0 0 4.83 7a5.6 5.6 0 0 0 1.08.1a6 6 0 0 0 5.89-4.93l9.28-51.1H208a6 6 0 0 0 0-12h-46.63l9.46-52H224a6 6 0 0 0 0-12m-74.83 64h-51.8l9.46-52h51.8Z"

src/pages/docs/configuration/intro.mdx

@@ -115,7 +115,7 @@ To start with lets make a clock. To get the time we'll use the `date` command.
 We can use a [Process](/docs/types/quickshell.io/process) object to run commands
 and return their results.
 
-We'll listen to the @@Quickshell.Io.DataStreamParser.read(s) emitted by
+We'll listen to the @@Quickshell.Io.DataStreamParser.read(s) signal emitted by
 @@Quickshell.Io.SplitParser using a
 [signal handler](/docs/configuration/qml-overview/#signal-handlers)
 to update the text on the clock.

src/styles/css-config/code.css

@@ -7,7 +7,6 @@
 
 pre {
   padding: 1rem;
-  margin: 0.618rem;
   border-radius: 0.618rem;
   overflow: auto;
   text-wrap: wrap;
@@ -22,7 +21,7 @@ pre {
     font-size: 1.618rem;
     font-weight: 500;
     border-radius: 0.272rem;
-    padding: 0.418rem;
+    padding: 0.10rem;
     display: flex;
     align-items: center;
     justify-content: center;

src/styles/docs/docs-types.css

@@ -99,7 +99,7 @@
   & .typedata-root {
     margin-bottom: 0.618rem;
     border-radius: 12px;
-    padding: 1.272rem;
+    padding: 0.8rem;
     transition: border 0.3s;
 
     & > .typedata-name {
@@ -107,18 +107,17 @@
       align-items: center;
       font-size: 1.272rem;
       margin: 0;
-      margin-top: 0.272rem;
 
       & svg {
-        width: 27px;
-        height: 27px;
-        margin-right: 3px;
+        width: 1.2em;
+        height: 1.2em;
+        margin-right: 0.3em;
       }
     }
   }
 
   & .typedata-details {
-    margin-top: 1.618rem;
+    margin: 0;
   }
 
   & .typedata-params {
@@ -142,6 +141,10 @@
       margin-top: 0.618rem;
     }
 
+    & > p:last-child {
+      margin-bottom: 0;
+    }
+
     & .typeprop-link {
       color: hsl(var(--prop-link-color));
 

src/styles/docs/docs.css

@@ -21,10 +21,8 @@
 
 .docs-content {
   flex-grow: 1;
-  margin-bottom: 2.3rem;
 
   & section {
-    max-width: 100svw;
     margin-block: 1.618rem;
   }
 
@@ -51,9 +49,12 @@
   }
 
   & .heading-hashtag {
+    display: inline-block;
+    margin-right: 0.1rem;
+
     & svg {
-      width: 24px;
-      height: 24px;
+      width: 1.2em;
+      height: 1.2em;
       opacity: 0.5;
       transition: opacity 0.5s;
 
@@ -63,6 +64,11 @@
       }
     }
   }
+
+  & .heading-text {
+    display: inline-block;
+    vertical-align: top;
+  }
 }
 
 hr {
@@ -91,10 +97,6 @@ ul {
   .docs-content {
     margin-inline: 1.272rem;
 
-    & section {
-      margin-block: 1.884rem;
-    }
-
     & p {
       margin-block: 1.217rem;
     }

src/styles/docs/nav/nav.css

@@ -85,7 +85,7 @@
         & [data-part="item-content"] > div {
           min-height: 3em;
 
-          & > p {
+          & > a {
             margin: auto 0;
           }
         }

src/styles/docs/toc/types-toc.css

@@ -57,8 +57,8 @@
 
     & svg {
       opacity: 0.6;
-      width: 24px;
-      height: 24px;
+      width: 1.2em;
+      height: 1.2em;
       transition: opacity 0.5s;
     }