flex -> grid

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

View file

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