diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 98d3fda..607e6ec 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,9 @@ +:root { + --immich-dark-primary: rgb(172 203 250); +} + +.font-bold { font-weight: 700 } + body { background: black; color: white; @@ -21,6 +27,7 @@ svg { height: 100%; } +/* slideshow */ #slideshow-carousel { height: 100% } @@ -77,6 +84,44 @@ svg { } } +/* albums */ +#albums { + width: 100%; + height: 100%; + overflow: scroll; +} +#albums-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 2.5rem; + margin: auto; + padding: 2rem; + + .album-thumb { + width: 100%; + aspect-ratio: 1/1; + object-fit: cover; + border-radius: 1rem; + margin-bottom: 1rem; + } + +} + +@media (max-width: 512px) { + #albums-container { + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + .album-info { font-size-adjust: .4; } + } +} + +@media (max-width: 768px) { + .carousel-cell { + width: 70vw; + margin: 12px; + } +} + footer { width: 100%; } @@ -95,6 +140,13 @@ footer { text-decoration: none; width: 100%; gap: 1rem; + + &:hover { + color: var(--immich-dark-primary); + + svg{ fill: var(--immich-dark-primary) } + } + svg { height: 24px; width: 24px } span { font-size: .875rem; |