refactor: branding, responsiveness, icon.

Author: knightedcodemonkey

src/index.html

@@ -26,7 +26,7 @@ <h1>
             /><span class="brand-text">@knighted/develop</span></a
           >
         </h1>
-        <p>Compiler-as-a-Service (at the edge of your browser).</p>
+        <p>Browser IDE with compiler-as-a-service.</p>
       </div>
       <div class="status" id="status">Idle</div>
     </header>
@@ -276,7 +276,7 @@ <h2>Component</h2>
                 aria-label="Collapse component panel"
                 title="Collapse component panel"
               >
-                <svg viewBox="0 0 24 24" aria-hidden="true">
+                <svg class="editor-tools-gear" viewBox="0 0 24 24" aria-hidden="true">
                   <path d="m6 9 6 6 6-6"></path>
                 </svg>
                 <span class="panel-collapse-toggle__label">Collapse</span>
@@ -292,8 +292,14 @@ <h2>Component</h2>
               >
                 <svg viewBox="0 0 24 24" aria-hidden="true">
                   <path
-                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2zm0 8.6a3.8 3.8 0 1 1 3.8-3.8 3.804 3.804 0 0 1-3.8 3.8z"
+                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
                   ></path>
+                  <circle
+                    class="editor-tools-toggle__inner-ring"
+                    cx="12"
+                    cy="12"
+                    r="3.8"
+                  ></circle>
                 </svg>
               </button>
               <button
@@ -303,7 +309,7 @@ <h2>Component</h2>
                 title="Copy component source"
                 aria-label="Copy component source"
               >
-                <svg viewBox="0 0 24 24" aria-hidden="true">
+                <svg class="editor-tools-gear" viewBox="0 0 24 24" aria-hidden="true">
                   <rect x="9" y="9" width="10" height="10" rx="2"></rect>
                   <path
                     d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
@@ -388,8 +394,14 @@ <h2>Styles</h2>
               >
                 <svg viewBox="0 0 24 24" aria-hidden="true">
                   <path
-                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2zm0 8.6a3.8 3.8 0 1 1 3.8-3.8 3.804 3.804 0 0 1-3.8 3.8z"
+                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
                   ></path>
+                  <circle
+                    class="editor-tools-toggle__inner-ring"
+                    cx="12"
+                    cy="12"
+                    r="3.8"
+                  ></circle>
                 </svg>
               </button>
               <button
@@ -450,7 +462,7 @@ <h2>Styles</h2>
           <h2>Preview</h2>
           <div class="controls">
             <label class="color-control" for="preview-bg-color">
-              Background
+              <span class="preview-bg-label">Background</span>
               <input id="preview-bg-color" type="color" value="#12141c" />
             </label>
             <label class="toggle">

src/styles/layout-shell.css

@@ -45,26 +45,48 @@
 }
 
 .status {
+  --status-accent: var(--text-subtle);
+  --status-bg: var(--surface-chip);
+  --status-fg: var(--text-subtle);
   font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.2;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 8px 12px;
-  border-radius: 999px;
-  background: var(--surface-chip);
-  color: var(--text-subtle);
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--status-accent) 40%, var(--border-subtle));
+  background: var(--status-bg);
+  color: var(--status-fg);
+}
+
+.status::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--status-accent);
+  flex: none;
 }
 
 .status--neutral {
-  background: var(--surface-chip);
-  color: var(--text-subtle);
+  --status-accent: var(--text-subtle);
+  --status-bg: var(--surface-chip);
+  --status-fg: var(--text-subtle);
+  border-color: color-mix(in srgb, var(--border-subtle) 72%, transparent);
 }
 
 .status--pending {
-  background: color-mix(in srgb, var(--accent) 18%, transparent);
-  color: color-mix(in srgb, var(--panel-text) 72%, var(--accent));
+  --status-accent: color-mix(in srgb, var(--accent) 88%, var(--panel-text));
+  --status-bg: color-mix(in srgb, var(--accent) 18%, transparent);
+  --status-fg: color-mix(in srgb, var(--panel-text) 72%, var(--accent));
 }
 
 .status--error {
-  background: color-mix(in srgb, rgb(var(--danger-rgb)) 20%, transparent);
-  color: color-mix(in srgb, rgb(var(--danger-rgb)) 85%, var(--panel-text));
+  --status-accent: color-mix(in srgb, rgb(var(--danger-rgb)) 88%, var(--panel-text));
+  --status-bg: color-mix(in srgb, rgb(var(--danger-rgb)) 20%, transparent);
+  --status-fg: color-mix(in srgb, rgb(var(--danger-rgb)) 85%, var(--panel-text));
 }
 
 .app-grid {
@@ -333,6 +355,23 @@
   }
 }
 
+@media (max-width: 640px) {
+  .app-header {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 10px;
+  }
+
+  .app-header p {
+    max-width: 32ch;
+  }
+
+  .app-header .status {
+    align-self: flex-start;
+  }
+}
+
 .layout-toggle {
   display: inline-grid;
   place-content: center;

src/styles/panels-editor.css

@@ -83,14 +83,7 @@
 }
 
 .editor-tools-toggle {
-  opacity: 0.72;
-}
-
-.editor-tools-toggle svg {
-  width: 15px;
-  height: 15px;
-  fill: currentColor;
-  stroke: none;
+  opacity: 0.74;
 }
 
 .editor-tools-toggle[aria-pressed='true'] {
@@ -100,6 +93,10 @@
   color: var(--select-text);
 }
 
+.editor-tools-toggle .editor-tools-toggle__inner-ring {
+  stroke-width: 0.75;
+}
+
 .panel-collapse-toggle {
   display: inline-flex;
   align-items: center;

src/styles/preview-controls.css

@@ -216,7 +216,21 @@
   height: 16px;
   stroke: currentColor;
   fill: none;
-  stroke-width: 1.8;
+  stroke-width: 1;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
+
+@media (max-width: 480px) {
+  .preview-bg-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}