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

simplify css variables

Browse Source
This commit is contained in:
cade
2024-01-30 19:50:09 -08:00
parent 2f2300cad7
commit c3434e2e9e
1 changed files with 16 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+16 -23
View File
@@ -7,21 +7,15 @@
<style> <style>
:root { :root {
--border-radius-1: 0.2rem; --border-radius: 1rem;
--border-radius-2: 1rem;
--color-background: #111; --color-background: #111;
--color-text-subtle: #888; --color-text-subtle: #888;
--color-text: #eee; --color-text: #eee;
--font-family: -apple-system, Helvetica, sans-serif; --font-family: -apple-system, Helvetica, sans-serif;
--font-size-1: 1rem; --font-size: clamp(16px, 1.6vw, 18px);
--font-size-2: 3rem;
--font-size-base: clamp(16px, 1.6vw, 18px);
--font-weight-bold: 700; --font-weight-bold: 700;
--font-weight-normal: 400; --font-weight-normal: 400;
--line-height-base: 1.4; --space: 1rem;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 4rem;
--transition-speed: 200ms; --transition-speed: 200ms;
} }
@@ -53,7 +47,7 @@
['k', { name: 'Keep', url: 'https://keep.google.com' }], ['k', { name: 'Keep', url: 'https://keep.google.com' }],
['m', { name: 'Mail', url: 'https://mail.proton.me/u/0/inbox' }], ['m', { name: 'Mail', url: 'https://mail.proton.me/u/0/inbox' }],
['n', { name: 'Notion', url: 'https://www.notion.so' }], ['n', { name: 'Notion', url: 'https://www.notion.so' }],
['p', { name: 'Pomodoro', url: 'https://pomodoro.xvvvyz.xyz/' }], ['p', { name: 'Pomodoro', url: 'https://pomodoro.xvvvyz.xyz' }],
['r', { name: 'Reddit', url: 'https://reddit.com' }], ['r', { name: 'Reddit', url: 'https://reddit.com' }],
['s', { name: 'Supabase', url: 'https://supabase.com/dashboard/projects' }], ['s', { name: 'Supabase', url: 'https://supabase.com/dashboard/projects' }],
['t', { name: 'Translate', url: 'https://www.deepl.com/translator' }], ['t', { name: 'Translate', url: 'https://www.deepl.com/translator' }],
@@ -81,7 +75,7 @@
<template id="commands-template"> <template id="commands-template">
<style> <style>
.commands { .commands {
border-radius: var(--border-radius-2); border-radius: var(--border-radius);
column-gap: 0; column-gap: 0;
columns: 1; columns: 1;
list-style: none; list-style: none;
@@ -94,9 +88,9 @@
.command { .command {
display: flex; display: flex;
gap: var(--space-2); gap: var(--space);
outline: 0; outline: 0;
padding: var(--space-2); padding: var(--space);
position: relative; position: relative;
text-decoration: none; text-decoration: none;
} }
@@ -222,7 +216,7 @@
.input { .input {
color: var(--color-text); color: var(--color-text);
font-size: var(--font-size-2); font-size: 3rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
padding: 0; padding: 0;
text-align: center; text-align: center;
@@ -236,7 +230,7 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
list-style: none; list-style: none;
margin: var(--space-2) 0 0; margin: var(--space) 0 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
} }
@@ -244,8 +238,8 @@
.suggestion { .suggestion {
color: var(--color-text); color: var(--color-text);
cursor: pointer; cursor: pointer;
font-size: var(--font-size-1); font-size: 1rem;
padding: var(--space-2); padding: var(--space);
position: relative; position: relative;
transition: color var(--transition-speed); transition: color var(--transition-speed);
white-space: nowrap; white-space: nowrap;
@@ -258,10 +252,9 @@
.suggestion::before { .suggestion::before {
background-color: var(--color-text); background-color: var(--color-text);
border-radius: var(--border-radius-1); border-radius: calc(var(--border-radius) / 5);
content: ' '; content: ' ';
inset: calc(var(--space-2) - var(--space-1) / 2) inset: calc(var(--space) / 1.5) calc(var(--space) / 3);
calc(var(--space-2) - var(--space-1));
opacity: 0; opacity: 0;
position: absolute; position: absolute;
transform: translateY(0.5em); transform: translateY(0.5em);
@@ -558,8 +551,8 @@
html { html {
background-color: var(--color-background); background-color: var(--color-background);
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size-base); font-size: var(--font-size);
line-height: var(--line-height-base); line-height: 1.4;
} }
body { body {
@@ -573,7 +566,7 @@
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
padding: var(--space-3) var(--space-2); padding: calc(var(--space) * 4) var(--space);
position: relative; position: relative;
width: 100vw; width: 100vw;
} }