diff --git a/pages/soundtracks/soundtracks.scarlet b/pages/soundtracks/soundtracks.scarlet index 95d1692e..cce7f849 100644 --- a/pages/soundtracks/soundtracks.scarlet +++ b/pages/soundtracks/soundtracks.scarlet @@ -10,6 +10,12 @@ const soundtrack-margin = 1rem flex-basis 500px margin soundtrack-margin 0 + // If text-shadow is enabled, the whole container will repaint. + // We need to disable text-shadow to reduce re-painting. + a + :hover + text-shadow none + > 500px .soundtrack margin soundtrack-margin diff --git a/styles/grid.scarlet b/styles/grid.scarlet index 4146c74f..3c18c8e3 100644 --- a/styles/grid.scarlet +++ b/styles/grid.scarlet @@ -9,15 +9,15 @@ mixin grid-cell height anime-image-medium-height max-width anime-image-medium-width max-height anime-image-medium-height - // min-width 90px - // min-height 127px border-radius ui-element-border-radius - - // background-size cover - // background-position 50% 50% - margin 0.5rem + // If text-shadow is enabled, the whole container will repaint. + // We need to disable text-shadow to reduce re-painting. + a + :hover + text-shadow none + mixin grid-text vertical width 100% diff --git a/styles/image-title.scarlet b/styles/image-title.scarlet index ea0f6b49..aa1e0114 100644 --- a/styles/image-title.scarlet +++ b/styles/image-title.scarlet @@ -14,6 +14,6 @@ .image-title-text text-align center color white - text-shadow 0 0 3px black + text-shadow 0 0 3px black !important font-size 80% line-height 1.8em \ No newline at end of file diff --git a/styles/mixins/anime-grid.scarlet b/styles/mixins/anime-grid.scarlet index 28f7cfa3..89931aa7 100644 --- a/styles/mixins/anime-grid.scarlet +++ b/styles/mixins/anime-grid.scarlet @@ -2,19 +2,23 @@ mixin anime-mini-item margin 0.25rem flex-basis anime-image-small-width + :hover + text-shadow none + mixin anime-generic-item-image object-fit cover border-radius 2px filter none + will-change filter transition filter transition-speed ease, opacity transition-speed ease :hover filter saturate(1.3) mixin anime-mini-item-image + anime-generic-item-image width anime-image-small-width !important height anime-image-small-height !important - anime-generic-item-image // Make it easier for the browser to layout by specifying max size as well max-width anime-image-small-width diff --git a/styles/tip.scarlet b/styles/tip.scarlet index 981b785f..3e791337 100644 --- a/styles/tip.scarlet +++ b/styles/tip.scarlet @@ -10,6 +10,7 @@ mixin tip-before z-index 100000 pointer-events none opacity 0 + will-change opacity transform tip-transform-hidden font-size 0.92rem color text-color @@ -30,6 +31,7 @@ mixin tip-after z-index 100001 pointer-events none opacity 0 + will-change opacity width 0 height 0 border-style solid