diff options
| author | Tulir Asokan <tulir@maunium.net> | 2020-09-05 14:34:43 +0300 |
|---|---|---|
| committer | Tulir Asokan <tulir@maunium.net> | 2020-09-05 14:34:43 +0300 |
| commit | d698f058b51597a419910cb70b72495f8328c817 (patch) | |
| tree | f52835e77410599fbfa36a50473341563fa1a6a5 /web/index.sass | |
| parent | 9a06d63ee9459402ec8a19bd9c22f81d692cf2e5 (diff) | |
Make scrolling less hacky
Diffstat (limited to 'web/index.sass')
| -rw-r--r-- | web/index.sass | 67 |
1 files changed, 40 insertions, 27 deletions
diff --git a/web/index.sass b/web/index.sass index fe73eb8..300c0c0 100644 --- a/web/index.sass +++ b/web/index.sass @@ -7,67 +7,80 @@ * font-family: sans-serif -html - scrollbar-width: none - - &::-webkit-scrollbar - display: none - body margin: 0 h1 font-size: 1rem +$sticker-size: 25vw +$nav-sticker-size: 12vw +$nav-bottom-highlight: 2px +$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight}) +$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight}) + main - &.spinner, &.error, &.empty + &.spinner + margin-top: 5rem + + &.error, &.empty margin: 2rem &.empty text-align: center + &.has-content + position: fixed + top: 0 + left: 0 + right: 0 + bottom: 0 + + display: grid + grid-template-rows: $nav-height auto + nav display: flex overflow-x: auto + + height: $nav-height + + background-color: white + + > a + border-bottom: $nav-bottom-highlight solid transparent + &.visible + border-bottom-color: green + > div.sticker + width: $nav-sticker-size + height: $nav-sticker-size + +div.pack-list, nav scrollbar-width: none &::-webkit-scrollbar display: none - position: fixed - top: 0 - left: 0 - right: 0 - height: 12vw - - background-color: white - z-index: 10 - - div.sticker - width: 12vw - height: 12vw +div.pack-list + overflow-y: auto section.stickerpack - // This is a slightly hacky hack so that we can simultaneously have: - // * Anchor URLs scroll so the header is visible - // * The scroll area is the whole document - padding-top: 12vw - margin-top: -12vw + margin-top: .75rem > div.sticker-list display: flex flex-wrap: wrap > h1 - margin: .75rem + margin: 0 0 0 .75rem div.sticker display: flex padding: 4px cursor: pointer position: relative - width: 25vw - height: 25vw + width: $sticker-size + height: $sticker-size box-sizing: border-box &:hover |