flex column commands on mobile

This commit is contained in:
Cade Scroggins
2023-01-17 12:48:59 -08:00
parent 8bb8137dfd
commit 418da9b24d
+11 -4
View File
@@ -151,7 +151,7 @@
url: 'https://youtube.com/feed/subscriptions', url: 'https://youtube.com/feed/subscriptions',
}, },
'?': { '?': {
name: 'README.md', name: 'README',
url: 'https://read.xvvvyz.xyz/xvvvyz/tilde/main/README.md', url: 'https://read.xvvvyz.xyz/xvvvyz/tilde/main/README.md',
}, },
}; };
@@ -199,14 +199,13 @@
<template id="commands-template"> <template id="commands-template">
<style> <style>
.commands { .commands {
align-items: center;
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
justify-content: center;
list-style: none; list-style: none;
margin: 0 auto; margin: 0 auto;
max-width: 54rem; max-width: 54rem;
padding: 0; padding: 0;
width: 100vw;
} }
.command { .command {
@@ -229,6 +228,14 @@
.name { .name {
color: var(--color-text); color: var(--color-text);
} }
@media (min-width: 54rem) {
.commands {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
</style> </style>
<nav> <nav>
<menu class="commands"></menu> <menu class="commands"></menu>