refactor(calc-01): simplify keyboard layout and consts label

samples/calc-01/index.css

@@ -56,25 +56,6 @@ body {
     inset 0 -2px 0 rgba(0, 0, 0, 0.28);
 }
 
-.brand {
-  color: #f7f8fc;
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 14px;
-  gap: 12px;
-}
-
-.brand h1 {
-  margin: 0;
-  font-size: 20px;
-  letter-spacing: 0.08em;
-}
-
-.brand small {
-  color: #cfd6e2;
-}
-
 .screen {
   background: linear-gradient(180deg, var(--screen-top), var(--screen));
   color: var(--screen-text);
@@ -266,6 +247,7 @@ select {
   margin-top: 18px;
   display: grid;
   grid-template-columns: 4fr 3fr 2fr;
+  grid-template-areas: "functions numbers operators";
   gap: 12px;
 }
 
@@ -277,6 +259,18 @@ select {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
+.key-group-functions {
+  grid-area: functions;
+}
+
+.key-group-numbers {
+  grid-area: numbers;
+}
+
+.key-group-operators {
+  grid-area: operators;
+}
+
 .key-grid {
   display: grid;
   gap: 10px;
@@ -374,7 +368,10 @@ button:active {
 
 @media (max-width: 860px) {
   .keyboard-layout {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-areas:
+      "numbers operators"
+      "functions functions";
   }
 }
 
@@ -388,11 +385,6 @@ button:active {
     border-radius: 22px;
   }
 
-  .brand {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
   .topbar-group {
     grid-template-columns: 1fr;
   }

samples/calc-01/index.html

@@ -33,7 +33,7 @@
           </div>
 
           <div class="menu-cell" id="constsMenuWrap">
-            <button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">π/e</button>
+            <button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">consts</button>
             <div class="popup-menu popup-menu-compact" id="constsMenu" hidden></div>
           </div>