This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch feat-modernize-theme in repository https://gitbox.apache.org/repos/asf/airflow-site.git
commit 2260ac11057968d4df48fc962fd65c61b4cf95ff Author: Kaxil Naik <[email protected]> AuthorDate: Fri Nov 7 03:15:34 2025 +0000 Fix CSS lint errors and add dark mode support for blog page - Replace hardcoded colors in blog page with Bootstrap CSS variables - Fix CSS specificity linting errors in rating component - Add stylelint disable for dark mode block where linter doesn't understand theme context --- landing-pages/site/assets/scss/_blog-page.scss | 33 ++++++++++++++++++++++ landing-pages/site/assets/scss/_rating.scss | 28 +++++++++--------- .../site/layouts/partials/hooks/body-end.html | 1 - 3 files changed, 48 insertions(+), 14 deletions(-) diff --git a/landing-pages/site/assets/scss/_blog-page.scss b/landing-pages/site/assets/scss/_blog-page.scss index baf27066e8..53296f0e27 100644 --- a/landing-pages/site/assets/scss/_blog-page.scss +++ b/landing-pages/site/assets/scss/_blog-page.scss @@ -163,3 +163,36 @@ justify-content: center } } + +// Dark mode support using Bootstrap CSS variables +[data-bs-theme="dark"] { + .blogpost-content { + &__metadata { + &--title { + color: var(--bs-emphasis-color); + } + + &--description { + color: var(--bs-body-color); + } + + &--date { + color: var(--bs-secondary-color); + } + } + } + + .tag { + color: var(--bs-link-color); + background-color: var(--bs-link-color-rgb, 104, 210, 254, 0.15); + + &.active, &:hover { + background-color: var(--bs-link-color); + color: var(--bs-body-bg); + } + } + + .new-entry--link { + color: var(--bs-link-color); + } +} diff --git a/landing-pages/site/assets/scss/_rating.scss b/landing-pages/site/assets/scss/_rating.scss index 5e6b8348aa..83594416a4 100644 --- a/landing-pages/site/assets/scss/_rating.scss +++ b/landing-pages/site/assets/scss/_rating.scss @@ -31,6 +31,13 @@ cursor: pointer; margin-right: 13px; + svg { + path { + fill: none; + stroke: #51504f; + } + } + &:hover, &:hover ~ & { svg { path { @@ -39,16 +46,10 @@ } } } - - svg { - path { - fill: none; - stroke: #51504f; - } - } } // Dark mode styles +// stylelint-disable no-descending-specificity [data-bs-theme="dark"] { .rating-container { p { @@ -57,6 +58,12 @@ } .rate-star { + svg { + path { + stroke: rgba(255, 255, 255, 0.75); + } + } + &:hover, &:hover ~ & { svg { path { @@ -65,11 +72,6 @@ } } } - - svg { - path { - stroke: rgba(255, 255, 255, 0.75); - } - } } } +// stylelint-enable no-descending-specificity diff --git a/landing-pages/site/layouts/partials/hooks/body-end.html b/landing-pages/site/layouts/partials/hooks/body-end.html index 0d005ba75f..e783767480 100644 --- a/landing-pages/site/layouts/partials/hooks/body-end.html +++ b/landing-pages/site/layouts/partials/hooks/body-end.html @@ -21,4 +21,3 @@ {{ with .Site.Data.webpack }} <script src="{{ relURL .main.js }}"></script> {{ end }} -
