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

style refinements

Browse Source
This commit is contained in:
cade
2025-02-04 14:31:58 -08:00
parent 89f7435f8c
commit f224ae47be
1 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -13
View File
@@ -26,9 +26,6 @@
--color-text: #ccc; --color-text: #ccc;
--font-family: SpaceGrotesk, -apple-system, Helvetica, sans-serif; --font-family: SpaceGrotesk, -apple-system, Helvetica, sans-serif;
--font-size: clamp(16px, 1.3vw, 18px); --font-size: clamp(16px, 1.3vw, 18px);
--font-weight-bold: bold;
--font-weight-normal: normal;
--space: 1rem;
--transition-speed: 200ms; --transition-speed: 200ms;
} }
@@ -86,7 +83,7 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
padding: calc(var(--space) * 4) 0; padding: 4rem 0;
width: 100%; width: 100%;
} }
@@ -94,7 +91,7 @@
align-items: center; align-items: center;
color: var(--color-text); color: var(--color-text);
display: flex; display: flex;
height: 3em; height: 4em;
justify-content: center; justify-content: center;
outline: 0; outline: 0;
position: relative; position: relative;
@@ -106,20 +103,19 @@
.key { .key {
color: var(--color-text-subtle); color: var(--color-text-subtle);
position: absolute; position: absolute;
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;
pointer-events: none; pointer-events: none;
transform: translateY(2em); transform: translateY(1.5em) scale(0.9);
} }
.name { .name {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transform: translateY(-2em); transform: translateY(-1.5em) scale(0.9);
transition: all var(--transition-speed); transition: all var(--transition-speed);
} }
@@ -214,7 +210,7 @@
.input { .input {
color: var(--color-text); color: var(--color-text);
font-size: 2rem; font-size: 2rem;
font-weight: var(--font-weight-bold); font-weight: bold;
padding: 0; padding: 0;
text-align: center; text-align: center;
width: 100%; width: 100%;
@@ -227,7 +223,7 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
list-style: none; list-style: none;
margin: var(--space) 0 0; margin: 1rem 0 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
} }
@@ -236,7 +232,7 @@
color: var(--color-text); color: var(--color-text);
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
padding: var(--space); padding: 1rem;
position: relative; position: relative;
transition: color var(--transition-speed); transition: color var(--transition-speed);
white-space: nowrap; white-space: nowrap;
@@ -249,11 +245,12 @@
.suggestion::before { .suggestion::before {
background-color: var(--color-text); background-color: var(--color-text);
border-radius: 0.1em;
content: ' '; content: ' ';
inset: calc(var(--space) / 1.1) calc(var(--space) / 2); inset: 0.9em 0.5em;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
transform: translateY(0.5em); transform: translateY(0.3em) scale(0.9);
transition: all var(--transition-speed); transition: all var(--transition-speed);
z-index: -1; z-index: -1;
} }