diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/style.css | 23 |
1 files changed, 5 insertions, 18 deletions
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 ; } |