style: enhance LiveDemo component with improved layout and styling

Author: peterbenoit

docs/src/components/LiveDemo.astro

@@ -146,26 +146,36 @@
   .demo-controls {
     background: var(--sl-color-bg-sidebar);
     border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.5rem;
-    padding: 1.5rem;
+    border-radius: 0.75rem;
+    padding: 2rem;
     margin-bottom: 1.5rem;
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 768px) {
+    .demo-controls {
+      padding: 1.25rem;
+    }
   }
 
   .control-row {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
   }
 
   .control-item {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    flex: 1;
-    min-width: 140px;
+  }
+
+  @media (max-width: 768px) {
+    .control-row {
+      grid-template-columns: 1fr;
+    }
   }
 
   .control-item label {
@@ -176,46 +186,68 @@
 
   .control-item input,
   .control-item select {
-    padding: 0.4rem 0.6rem;
+    padding: 0.5rem 0.75rem;
     border: 1px solid var(--sl-color-gray-4);
-    border-radius: 0.25rem;
+    border-radius: 0.375rem;
     background: var(--sl-color-bg);
     color: var(--sl-color-text);
-    font-size: 0.9rem;
+    font-size: 0.95rem;
+    transition: border-color 0.2s ease;
+  }
+
+  .control-item input:focus,
+  .control-item select:focus {
+    outline: none;
+    border-color: var(--sl-color-text-accent);
   }
 
   .control-item input[type="color"] {
-    padding: 0.2rem;
-    height: 2rem;
+    padding: 0.25rem;
+    height: 2.5rem;
     cursor: pointer;
   }
 
   .control-group {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.75rem;
+    padding: 1rem;
+    background: var(--sl-color-bg);
+    border-radius: 0.375rem;
+    border: 1px solid var(--sl-color-gray-5);
+  }
+
+  .control-group .control-row {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   }
 
   .control-group-label {
-    font-size: 0.85rem;
-    font-weight: 600;
+    font-size: 0.9rem;
+    font-weight: 700;
     color: var(--sl-color-text);
+    margin-bottom: 0.25rem;
   }
 
   .demo-btn {
     align-self: flex-start;
-    padding: 0.5rem 1.25rem;
+    padding: 0.65rem 1.5rem;
     background: var(--sl-color-text-accent);
     color: var(--sl-color-bg);
     border: none;
-    border-radius: 0.25rem;
-    font-size: 0.9rem;
+    border-radius: 0.375rem;
+    font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
+    transition: all 0.2s ease;
   }
 
   .demo-btn:hover {
-    opacity: 0.85;
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+
+  .demo-btn:active {
+    transform: translateY(0);
   }
 
   .demo-btn--outline {
@@ -225,22 +257,34 @@
     margin-top: 0.75rem;
   }
 
+  #demo-container {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: var(--sl-color-bg);
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    min-height: 200px;
+  }
+
   .demo-output {
-    margin-top: 1.5rem;
+    margin-top: 2rem;
   }
 
   .demo-output-label {
-    font-size: 0.9rem;
+    font-size: 1rem;
+    font-weight: 600;
     color: var(--sl-color-text);
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
   }
 
   #demo-code {
     background: var(--sl-color-bg-sidebar);
     border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.25rem;
-    padding: 1rem;
+    border-radius: 0.5rem;
+    padding: 1.25rem;
     overflow-x: auto;
-    font-size: 0.85rem;
+    font-size: 0.9rem;
+    font-family: var(--__sl-font-mono);
+    line-height: 1.6;
   }
 </style>