foo/tilde
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign commands

Browse Source
This commit is contained in:
cade
2025-02-04 10:42:08 -08:00
parent 9d49fb8653
commit 89afa31b7b
1 changed files with 19 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+19 -42
View File
@@ -21,7 +21,6 @@
} }
:root { :root {
--border-radius: 0.5rem;
--color-background: #111; --color-background: #111;
--color-text-subtle: #888; --color-text-subtle: #888;
--color-text: #ccc; --color-text: #ccc;
@@ -79,58 +78,48 @@
<template id="commands-template"> <template id="commands-template">
<style> <style>
.commands { .commands {
align-items: center;
box-sizing: border-box; box-sizing: border-box;
display: grid; display: flex;
grid-template-columns: repeat(2, 1fr); flex-direction: column;
height: 100vh; justify-content: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: calc(var(--space) * 2); min-height: 100vh;
width: 100vw; padding: calc(var(--space) * 4) 0;
width: 100%;
} }
.command { .command {
align-items: center; align-items: center;
color: var(--color-text); color: var(--color-text);
display: flex; display: flex;
height: 100%; height: 3em;
justify-content: center; justify-content: center;
outline: 0; outline: 0;
position: relative; position: relative;
text-align: center;
text-decoration: none; text-decoration: none;
} width: 4em;
.command::after {
background: var(--color-text-subtle);
border-radius: var(--border-radius);
content: ' ';
inset: calc(var(--space) / 6);
opacity: 0.05;
position: absolute;
transition: opacity var(--transition-speed);
}
.command:where(:focus, :hover)::after {
opacity: 0.1;
} }
.key { .key {
left: 50%;
position: absolute;
color: var(--color-text-subtle); color: var(--color-text-subtle);
top: 50%; position: absolute;
transform: translate(-50%, -50%); transform: translateY(0);
transition: all var(--transition-speed); transition: all var(--transition-speed);
} }
.command:where(:focus, :hover) .key { .command:where(:focus, :hover) .key {
opacity: 0; opacity: 0;
transform: translate(-50%, calc(-50% - 2em)); pointer-events: none;
transform: translateY(2em);
} }
.name { .name {
opacity: 0; opacity: 0;
transform: translateY(2em); pointer-events: none;
transform: translateY(-2em);
transition: all var(--transition-speed); transition: all var(--transition-speed);
} }
@@ -139,21 +128,9 @@
transform: translateY(0); transform: translateY(0);
} }
@media (min-width: 40rem) {
.commands {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 55rem) {
.commands {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 70rem) { @media (min-width: 70rem) {
.commands { .commands {
grid-template-columns: repeat(5, 1fr); flex-direction: row;
} }
} }
</style> </style>
@@ -272,9 +249,8 @@
.suggestion::before { .suggestion::before {
background-color: var(--color-text); background-color: var(--color-text);
border-radius: var(--border-radius);
content: ' '; content: ' ';
inset: calc(var(--space) / 1.5) calc(var(--space) / 3); inset: calc(var(--space) / 1.1) calc(var(--space) / 2);
opacity: 0; opacity: 0;
position: absolute; position: absolute;
transform: translateY(0.5em); transform: translateY(0.5em);
@@ -558,6 +534,7 @@
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size); font-size: var(--font-size);
line-height: 1.4; line-height: 1.4;
user-select: none;
} }
body { body {