* fix: Firefox fallback breaks right-edge fade in related content (#133X)
Firefox does not support scroll-driven animations by default, causing
the animation to fall back to a 0s time-based animation that jumps to
the last keyframe — flipping the fade from right to left.
Wrap animation properties in @supports (animation-timeline: scroll())
so Firefox degrades gracefully to a static right-edge fade.
* chore: fix identation
* fix: add back wrongly deleted props
* fix: resolve related content card overflow and page horizontal scroll
* fix: prevent related content overflow on mobile while preserving shadow space
* fix: align related content cards and prevent shadow clipping
Expands the left margin of the related content carousel to match the main article, preserving the full card shadow. Adds a visual mask gradient to gracefully fade out the right edge.
* feat: add mask image also to left side of subsection list, which is activated when scrolling
* feat: fade out right mask image near the end of horizontal scroll
---------
Co-authored-by: Jimmy Cai <jimmy@cai.im>
* refactor: add standardized spacing variables and more style cleanup
* refactor: rename `spacing-xxl` to `spacing-2xl` and introduce `spacing-3xl` for consistent spacing variables.
* refactor: Migrate related content styling to use the `subsection-list` component with updated layout adjustments.
* style: adjust padding values for article list tiles.
* refactor: Introduce shadow variables and dynamic spacing to prevent shadow cutoff in list layouts.
* refactor: relocate dark scheme Mermaid variables within the root scope.
* fix: take out [data-scheme="dark"] from :root
Taking out the [data-scheme="dark"] from :root allows us to fix the
precedence of CSS when the [data-scheme="dark"] is placed in the <html>
tag. This is needed in order to make the dark styles accesible from the
<html> elment, this will allow us to change the vertical scrollbar
styles following the dark and light schemes.
* change document.body.dataset.scheme to document.documentElement.dataset.scheme
When the dark mode is on or when the light mode is on, the
[data-scheme="light"] or [data-scheme="dark"], respectively, will be
placed in the <html> tag. Allowing us to access the dark and light color
schemes from the <html> to change the vertical scrollbar styles
according to the current color scheme.
* feat: change the page vertical scrollbar styles
This change will make the vertical scrollbar styles to follow the dark
and light color scheme modes. Also, this change will make the vertical
scrollbar to look consistent in both, Chromium and Firefox.
* make the scrollbar-track background-color transparent
The body has this transition: 'transition: background-color 0.3s ease
0s'. Making the scrollbar-track background-color transparent allow us to
appreciate that transition in the scrollbar-track when switching the
background-color.
* Move [data-scheme=dark] back to :root block
* fix(comment/waline): detect dark mode from html tag
* feat: apply custom scrollbar style to all elements
Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>
The body has this transition: 'transition: background-color 0.3s ease
0s'. Setting the scrollbar-track's background-color of the horizontal
scrollbar of the Archives page to transparent will make us to appreciate
that transition when switching the background-color.
* feat: change horizontal scrollbar styles
Change the horizontal scrollbar styles in Archives page following the
dark and light themes styles. This horizontal scrollbar is at the top
of the Archives page. When I visit this page, the scrollbar stole my
attention. Unfortunately, it's the client (our browser) who decides its
styles; this change is introduced to avoid that situation.
Co-authored-by: Miguel Angel <man98@me.com>
* remove scrollbar height and border-radius
In order to match the theme presentation
(https://i.imgur.com/cCiHOGS.jpg), the previous defined `height: 7px` and
`border-radius: 10px` for the scrollbar have been deleted.
* fix: set the horizontal scrollbar's height and width to `auto`
In Firefox the horizontal scrollbar looks very small. With a width set
to `auto`, it looks bigger and better. In Chromium, without an automatic
height, the new color changes do not appear.
Now the horizontal scrollbar looks consistent in both chromium and firefox.
* style: format list.scss
Co-authored-by: Miguel Angel <man98@me.com>
Co-authored-by: Jimmy Cai <github@jimmycai.com>
Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>
