diff options
| -rw-r--r-- | public/index.html | 6 | ||||
| -rw-r--r-- | src/style.css | 23 |
2 files changed, 8 insertions, 21 deletions
diff --git a/public/index.html b/public/index.html index a1781a8..1af1745 100644 --- a/public/index.html +++ b/public/index.html @@ -20,14 +20,14 @@ <template id="carousel-cell-template"> <div class="carousel-cell"><img src="" /></div> </template> - <div id="slideshow-bottom-controls"> + <div id="slideshow-bottom-controls" class="grid grid-cols-3 max-w-3xl"> <button id="prevSlide" class="svgbtn"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button> <button id="playPause" class="svgbtn"><svg alt="Pause" class="size-full"><use href="#sprite-pause"></use></svg></button> <button id="nextSlide" class="svgbtn"><svg alt="Next Slide" class="size-full"><use href="#sprite-skip_next"></use></svg></button> </div> </div> <div id="albums" class="hidden!"> - <input class="rounded-2xl" id="album-search" placeholder="Search your albums" /> + <input class="rounded-2xl max-w-3xl" id="album-search" placeholder="Search your albums" /> <div id="albums-container"></div> <template id="album-template"> <div class="album group"> @@ -56,7 +56,7 @@ </main> <footer class="w-full"> <div class="max-w-5xl m-auto"> - <div id="menu" class="flex w-full p-4 gap-4 box-border border-t border-gray-500"> + <div id="menu" class="flex w-full p-2 gap-4 box-border border-t border-gray-500"> <a href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow" ></use></svg><span>Slideshow</span></a> <a href="/albums" ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span>Albums</span></a> <a href="/settings" ><svg class="size-6"><use href="#sprite-settings" ></use></svg><span>Settings</span></a> 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 ; } |