diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 0711eca..ece21e9 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -4,7 +4,7 @@ --text-color: #dbdbdb; --pad-datasets: 1rem; --pad-main: 2rem; - --min-card-size: 60ch; + --min-card-size: min(60ch, 33vw); --corner-radius: 1rem; font-size: 12pt; font-family: sans-serif; @@ -49,6 +49,9 @@ header { gap: .5rem; background-color: var(--fg-color, darkgrey); padding: .5rem 1rem; + margin-bottom: var(--pad-datasets); + margin-left: var(--pad-datasets); + margin-right: var(--pad-datasets); border-radius: 1.5rem; } @@ -69,14 +72,14 @@ header { gap: 1rem; } -@container (width < 80ch) { +@container (width < 60ch) { .datasets { grid-template-columns: 1fr; } } .dataset { - padding: 1rem 2rem; + padding: var(--pad-datasets) 2rem; background-color: var(--fg-color, darkgrey); border-radius: var(--corner-radius); list-style: none; @@ -136,10 +139,18 @@ header { background-color: var(--bg-color); } -:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) { +#add-btn:is(:hover, :focus-visible) { + filter: brightness(1.2); +} + +#add-btn:active { + filter: brightness(1.3); +} + +.btn:is(:hover, :focus-visible) { filter: brightness(1.5); } -:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active { +.btn:active { filter: brightness(1.75); } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 172c714..2ac398e 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -7,7 +7,7 @@
- +