use data attrs for some styles, redo color select section

web/index.html

@@ -20,7 +20,8 @@
       <form
         action="javascript:void(0)"
         autocomplete="off"
-        class="metric-fields | flex center-items smaller-gap"
+        class="metric-fields | flex center-items"
+        data-flexGap="smaller"
       >
         <output hidden name="metric"></output>
         <div class="metric-kind-toggle | flex col center-content">
@@ -97,7 +98,7 @@
           <div class="pkmn-info-detail | math-font grid" bind-to="cls2Data"></div>
           <div class="pkmn-info-detail | math-font grid" bind-to="cls3Data"></div>
           <div class="pkmn-info-detail | math-font grid" bind-to="cls4Data"></div>
-          <div class="pkmn-info-main | flex col smaller-gap">
+          <div class="pkmn-info-main | flex col" data-flexGap="smaller">
             <a
               bind-to="link"
               class="iflex center-content center-items"
@@ -119,7 +120,10 @@
               <span class="pkmn-info-icon | smaller" bind-to="infoHover">ⓘ</span>
             </div>
           </div>
-          <div class="cluster-buttons | math-font flex center-content col smaller-gap">
+          <div
+            class="cluster-buttons | math-font flex center-content col"
+            data-flexGap="smaller"
+          >
             <div class="flex">
               <button bind-to="cls1Btn" class="color-select" hidden></button>
               <span class="pkmn-info-icon | smaller" bind-to="infoHover1">ⓘ</span>
@@ -175,34 +179,41 @@
     ></form>
 
     <main class="section flow">
-      <div class="flex wrap small-gap">
+      <div class="flex wrap" data-flexGap="small">
         <!-- Color Select -->
-        <div id="sort-inputs" class="control-block | flex col smaller-gap center-items">
-          <div class="flex center-content center-items small-gap wrap">
-            <input
-              form="targetColorForm"
-              class="pill-shape highlight-border"
-              name="colorText"
-              type="text"
-              pattern="#?[0-9a-fA-F]{0,6}"
-              maxlength="7"
-              placeholder="#000000"
-            />
-            <input form="targetColorForm" name="colorPicker" type="color" />
-            <button
-              title="Randomize Color"
-              class="icon-button | material-symbols-outlined"
-              type="button"
-              form="targetColorForm"
-              name="randomColor"
-            >
-              shuffle
-            </button>
+        <div id="color-inputs" class="control-group | flex center-items">
+          <button
+            title="Randomize Color"
+            class="aspect-even | material-symbols-outlined"
+            type="button"
+            form="targetColorForm"
+            name="randomColor"
+          >
+            shuffle
+          </button>
+          <div class="flex col" data-flexGap="small">
+            <div class="flex center-items">
+              <input
+                form="targetColorForm"
+                class="aspect-wide pill-shape highlight-border"
+                name="colorText"
+                type="text"
+                pattern="#?[0-9a-fA-F]{0,6}"
+                maxlength="7"
+                placeholder="#000000"
+              />
+              <input
+                class="aspect-even"
+                form="targetColorForm"
+                name="colorPicker"
+                type="color"
+              />
+            </div>
+            <output class="smaller" form="targetColorForm" name="info"></output>
           </div>
-          <output class="smaller" form="targetColorForm" name="info"></output>
         </div>
         <!-- Filter/Limit -->
-        <div class="control-block | flex center-items">
+        <div class="control-group | flex center-items">
           <label>
             <div class="center emphasis">
               Results:&nbsp;<output form="colorDisplayForm" name="output">10</output>
@@ -256,10 +267,11 @@
         </div>
         <!-- Sort Function -->
         <div
-          class="fn-control | control-block | flex center-items center-content small-gap"
+          class="fn-control | control-group | flex center-items center-content"
+          data-flexGap="small"
         >
           <div id="sort-metric-mount"></div>
-          <div class="fn-minmax | flex col center-items small-gap">
+          <div class="fn-minmax | flex col center-items" data-flexGap="small">
             <label>
               <input
                 form="colorSortForm"
@@ -324,10 +336,11 @@
         <!-- Cluster Function -->
         <div
           id="cls-fn"
-          class="fn-control | control-block | flex center-items center-content small-gap"
+          class="fn-control | control-group | flex center-items center-content"
+          data-flexGap="small"
         >
           <div id="cls-metric-mount"></div>
-          <div class="fn-minmax | flex col center-items small-gap">
+          <div class="fn-minmax | flex col center-items" data-flexGap="small">
             <label>
               <input
                 form="colorCalculateForm"
@@ -377,7 +390,7 @@
       </div>
       <div id="color-results" class="flex wrap"></div>
       <hr />
-      <div id="name-search-controls" class="flex wrap center-items small-gap">
+      <div id="name-search-controls" class="flex wrap center-items" data-flexGap="small">
         <input
           id="nameSearchInput"
           form="nameSearchForm"
@@ -390,7 +403,7 @@
         />
         <button
           title="Randomize"
-          class="icon-button | material-symbols-outlined"
+          class="aspect-even | material-symbols-outlined"
           form="nameSearchForm"
           type="button"
           name="random"
@@ -399,7 +412,7 @@
         </button>
         <button
           title="Clear"
-          class="icon-button | material-symbols-outlined"
+          class="aspect-even | material-symbols-outlined"
           form="nameSearchForm"
           type="button"
           name="clear"

web/styles.css

@@ -106,23 +106,27 @@ body {
   margin-block-start: var(--flow-space, 1rem);
 }
 
-.no-gap {
+[data-flexGap="none"] {
   --gap: 0px;
 }
 
-.smaller-gap {
+[data-flexGap="normal"] {
+  --gap: 1rem;
+}
+
+[data-flexGap="smaller"] {
   --gap: 0.125rem;
 }
 
-.small-gap {
+[data-flexGap="small"] {
   --gap: 0.5rem;
 }
 
-.big-gap {
+[data-flexGap="big"] {
   --gap: 1.5rem;
 }
 
-.small-flow-space {
+[data-flowSpace="small"] {
   --flow-space: 0.5rem;
 }
 
@@ -182,6 +186,24 @@ input.pill-shape {
   border: 1px solid var(--highlight);
 }
 
+.aspect-even {
+  height: auto;
+  width: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.aspect-tall {
+  height: auto;
+  width: auto;
+  aspect-ratio: 1 / 3;
+}
+
+.aspect-wide {
+  height: auto;
+  width: auto;
+  aspect-ratio: 3 / 1;
+}
+
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap");
 .math-font {
   font-family: "Noto Sans Math", sans-serif;
@@ -416,28 +438,34 @@ button.color-select:hover {
 
 /* Sort Controls */
 
-.icon-button {
+button[name="random"],
+button[name="clear"] {
   width: 2rem;
-  height: 2rem;
 }
 
-.control-block {
-  max-width: fit-content;
-  padding-block: 0.25rem;
+.control-group {
+  padding: 0.25rem 1ch;
   background-color: var(--shadow);
   border-radius: 8px;
 }
 
-#sort-inputs input[type="text"] {
-  min-width: 0px;
-  max-width: 12ch;
-  padding-block: 0.625rem;
+#color-inputs > button + div > :first-child {
+  justify-content: flex-end;
 }
 
-#sort-inputs input[type="color"] {
-  flex: 0 0 2rem;
+#color-inputs button[name="randomColor"] {
+  width: 4rem;
+  font-size: 2.5rem;
+  border: none;
+}
+
+#color-inputs input {
   height: 2rem;
-  align-self: center;
+  border: none;
+}
+
+#color-inputs output {
+  text-align: right;
 }
 
 #name-search-controls {
@@ -450,10 +478,6 @@ button.color-select:hover {
 
 /* Sort Function Controls */
 
-.fn-control.control-block {
-  padding-inline: 1ch;
-}
-
 .fn-control .fn-minmax label span {
   padding: 0.125rem 0.75ch;
 }
@@ -502,11 +526,8 @@ button.color-select:hover {
 
 input[name="resultsToDisplay"] {
   max-width: 16ch;
-  margin-inline: 1ch;
 }
 
 #filter-toggles {
-  align-items: stretch;
   --gap: 0.25rem;
-  padding-inline-end: 1ch;
 }