From 7f88f436e0b5398ad79b4c130834d95d622d62be Mon Sep 17 00:00:00 2001 From: Tim Keller Date: Fri, 13 Jun 2025 20:36:38 -0500 Subject: optimize more --- src/style.css | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 39e320b..5363742 100644 --- a/src/style.css +++ b/src/style.css @@ -42,10 +42,7 @@ main, #slideshow { #slideshow-bottom-controls { - display: grid; - grid-template-columns: repeat(3, 1fr); margin: 48px auto; - max-width: 768px; button { width: 48px; height: 48px; @@ -71,34 +68,24 @@ main, #slideshow { &:focus { outline: 2px solid rgb(55, 65, 81) } } #albums-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(768px, 1fr)); - width: max-content; - margin: auto; - padding: 2rem; + grid-template-columns: repeat(auto-fill, minmax(var(--breakpoint-md), 1fr)); + @apply grid w-max m-auto p-8; } #albums-container .album { border: 1px solid transparent; border-bottom: 1px solid var(--selected-border); border-top: 1px solid var(--selected-border); - @apply flex relative h-40 gap-6 p-4 cursor-pointer + @apply flex relative h-40 gap-6 p-3 cursor-pointer data-selected:bg-slate-950 data-selected:hover:bg-slate-900 hover:bg-gray-900 ; } -@media (max-width: 512px) { - #albums-container { - grid-template-columns: 1fr 1fr; - gap: 1.5rem; - width: 100%; - } -} - #menu a { - @apply flex items-center justify-center no-underline w-full gap-4 + @apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full hover:text-blue-300 hover:fill-blue-300 data-selected:text-blue-300 data-selected:fill-blue-300 + data-selected:bg-gray-900 ; } -- cgit v1.2.3