update command layout and various styles

index.html

@@ -128,6 +128,10 @@
       suggestions: ['y/feed/trending'],
       url: 'https://youtube.com/feed/subscriptions',
     },
+    'First time here?': {
+      name: 'README.md',
+      url: 'https://read.xvvvyz.xyz/xvvvyz/tilde/main/README.md',
+    },
   };
 </script>
 
@@ -140,7 +144,7 @@
       Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
     --font-size-1: 1rem;
     --font-size-2: 3rem;
-    --font-size-base: 105%;
+    --font-size-base: 100%;
     --font-weight-bold: 700;
     --font-weight-normal: 400;
     --line-height-base: 1.4;
@@ -174,9 +178,13 @@
 <template id="commands-template">
   <style>
     .commands {
-      display: grid;
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
       list-style: none;
-      margin: 0;
+      margin: 0 auto;
+      max-width: 55rem;
       padding: 0;
     }
 
@@ -188,77 +196,28 @@
       color: inherit;
       display: flex;
       outline: 0;
-      padding: var(--space-1) var(--space-2);
+      padding: var(--space-1);
       text-decoration: none;
+      transition: color var(--transition-speed);
     }
 
     .key {
       color: var(--color-text-subtle);
-      width: 1ch;
+      transition: inherit;
     }
 
     .name {
-      margin-left: var(--space-2);
+      margin-left: var(--space-1);
-      transition: color var(--transition-speed);
+      transition: inherit;
     }
 
     .command:hover .key,
     .command:hover .name {
       color: var(--color-text);
     }
-
-    .help {
-      bottom: 0;
-      color: var(--color-text-subtle);
-      display: none;
-      padding: var(--space-1) var(--space-2);
-      position: fixed;
-      right: 0;
-    }
-
-    .readme {
-      color: var(--color-text);
-    }
-
-    @media (min-width: 500px) {
-      .commands {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-
-    @media (min-width: 700px) {
-      .commands {
-        grid-template-columns: repeat(3, 1fr);
-      }
-
-      .help {
-        display: block;
-      }
-    }
-
-    @media (min-width: 900px) {
-      .commands {
-        grid-template-columns: repeat(4, 1fr);
-      }
-    }
-
-    @media (min-width: 1100px) {
-      .commands {
-        grid-template-columns: repeat(5, 1fr);
-      }
-    }
   </style>
   <nav>
     <menu class="commands"></menu>
-    <p class="help">
-      First time here?
-      <a
-        class="readme"
-        href="https://read.xvvvyz.xyz/xvvvyz/tilde/main/README.md"
-      >
-        README.md
-      </a>
-    </p>
   </nav>
 </template>
 
@@ -355,7 +314,7 @@
       flex-wrap: wrap;
       justify-content: center;
       list-style: none;
-      margin: var(--space-2) 0 0;
+      margin: var(--space-1) 0 0;
       overflow: hidden;
       padding: 0;
     }