prehistoric-systems/tilde
1
0
Fork 0
mirror of https://github.com/xvvvyz/tilde.git synced 2026-03-11 14:44:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

flex -> grid

Browse source
This commit is contained in:
cade 2025-02-05 10:04:23 -08:00
parent 773e80991b
commit 46044094dc
No known key found for this signature in database
GPG key ID: 6AC5A902158265D0
1 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
index.html
View file

@ -25,7 +25,7 @@
--color-text-subtle: #888; --color-text-subtle: #888;
--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.5vw, 18px);
--transition-speed: 200ms; --transition-speed: 200ms;
} }
@ -80,19 +80,24 @@
<template id="commands-template"> <template id="commands-template">
<style> <style>
.commands { nav {
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
list-style: none; min-height: 100dvh;
margin: 0;
min-height: 100vh;
padding: 4rem 0; padding: 4rem 0;
width: 100%; width: 100%;
} }
.commands {
display: inline-grid;
grid-template-columns: 1fr 1fr;
list-style: none;
margin: 0;
padding: 0;
}
.command { .command {
align-items: center; align-items: center;
color: var(--color-text); color: var(--color-text);
@ -130,9 +135,9 @@
transform: translateY(0); transform: translateY(0);
} }
@media (min-width: 65rem) { @media (min-width: 35rem) {
.commands { .commands {
flex-direction: row; grid-template-columns: repeat(7, 1fr);
} }
} }
</style> </style>