This is an automated email from the ASF dual-hosted git repository.
bzp2010 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new af300b8100c fix: improve visibility of Blog page in dark mode (#1359)
af300b8100c is described below
commit af300b8100ce808817cd85515a7cf5110939e7e9
Author: Mo <[email protected]>
AuthorDate: Tue Oct 18 18:08:55 2022 +0800
fix: improve visibility of Blog page in dark mode (#1359)
---
blog/en/docusaurus.config.js | 2 +-
blog/src/css/customTheme.scss | 5 +++--
blog/src/theme/BlogLayout/style.module.scss | 18 ++++++++++++++--
blog/src/theme/BlogPosts/style.module.scss | 20 +++++++++++-------
.../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 14 +++++++++++--
.../LocaleDropdownNavbarItem/styles.module.css | 4 ++++
blog/zh/docusaurus.config.js | 2 +-
.../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 24 ++++++++++++++++++++--
.../LocaleDropdownNavbarItem/styles.module.css | 4 ++++
.../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 24 ++++++++++++++++++++--
.../LocaleDropdownNavbarItem/styles.module.css | 4 ++++
11 files changed, 102 insertions(+), 19 deletions(-)
diff --git a/blog/en/docusaurus.config.js b/blog/en/docusaurus.config.js
index 35b30f9cb6b..83a61e7d07c 100644
--- a/blog/en/docusaurus.config.js
+++ b/blog/en/docusaurus.config.js
@@ -96,7 +96,7 @@ module.exports = {
},
colorMode: {
defaultMode: 'light',
- disableSwitch: true,
+ disableSwitch: false,
respectPrefersColorScheme: false,
},
image: 'https://static.apiseven.com/202202/apache-apisix.png',
diff --git a/blog/src/css/customTheme.scss b/blog/src/css/customTheme.scss
index 674a521410e..ab925baa009 100644
--- a/blog/src/css/customTheme.scss
+++ b/blog/src/css/customTheme.scss
@@ -35,6 +35,7 @@
}
html[data-theme="dark"] {
+ --ifm-color-primary: #db433e;
--color-secondary-bg: #121212;
--ifm-color-dark: #b0b0b0;
--color-title: #f0f0f0;
@@ -141,7 +142,7 @@ div.inner {
}
header h2 {
- color: var(--color-primary);
+ color: var(--color-title);
}
@media only screen and (max-width: 414px) {
@@ -233,7 +234,7 @@ a {
}
a:hover {
- color: var(--color-primary);
+ color: var(--ifm-color-dark);
text-decoration: none;
}
diff --git a/blog/src/theme/BlogLayout/style.module.scss
b/blog/src/theme/BlogLayout/style.module.scss
index 2ecfc56436e..4b84281471a 100644
--- a/blog/src/theme/BlogLayout/style.module.scss
+++ b/blog/src/theme/BlogLayout/style.module.scss
@@ -27,9 +27,13 @@
width: 100%;
flex-wrap: wrap;
padding: 0.25rem 1rem;
- transition: all 0.3s ease-in-out;
- border-bottom: 1px solid #e8e8ed;
+ transition: color 0.3s ease-in-out;
font-family: apple-system, system-ui, sans-serif;
+ border-bottom: 1px solid #e8e8ed;
+
+ html[data-theme="dark"] & {
+ border-bottom: 1px solid #252525;
+ }
&::before {
content: "";
@@ -38,6 +42,7 @@
z-index: -1;
position: absolute;
top: 0;
+ left: 0;
backdrop-filter: blur(12px);
}
@@ -47,10 +52,15 @@
font-weight: 400;
font-size: 14px;
transition: inherit;
+ color: var(--color-title);
&:default {
color: #1d1d1f;
}
+
+ &:hover {
+ color: var(--ifm-color-primary);
+ }
}
&.expand {
@@ -59,6 +69,10 @@
&::before {
background-color: hsl(100deg 100% 100% / 85%);
+
+ html[data-theme="dark"] & {
+ background-color: hsl(0deg 0% 0% / 85%);
+ }
}
> a {
diff --git a/blog/src/theme/BlogPosts/style.module.scss
b/blog/src/theme/BlogPosts/style.module.scss
index 913110b4ad7..bebaaabadbe 100644
--- a/blog/src/theme/BlogPosts/style.module.scss
+++ b/blog/src/theme/BlogPosts/style.module.scss
@@ -96,6 +96,10 @@
width: $width !important;
transform-origin: center center;
transition: all 0.3s ease-in-out !important;
+
+ html[data-theme="dark"] & {
+ filter: brightness(0.85);
+ }
}
}
@@ -125,18 +129,12 @@
h2 {
font-size: 1.375rem;
line-height: 1.2em;
- color: #222;
margin-top: 0.8rem;
margin-bottom: 0.5em;
transition: all 0.3s ease-in-out;
-
- &:hover {
- opacity: 0.6;
- }
}
p {
- color: #1d1d1f;
max-height: #{1.7 * 3}em;
overflow-y: hidden;
text-overflow: ellipsis;
@@ -148,11 +146,19 @@
& .footer {
display: flex;
align-items: center;
+
+ & > time {
+ opacity: 0.9;
+ }
}
& .authors {
display: flex;
+ html[data-theme="dark"] & img {
+ filter: brightness(0.85);
+ }
+
& .author {
width: 32px;
height: 32px;
@@ -197,7 +203,7 @@
}
h2 {
- opacity: 0.6;
+ opacity: 0.8;
}
& .tags:hover + a > h2 {
diff --git a/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
b/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index c3504478332..a640244c236 100644
--- a/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -37,7 +37,12 @@ const LocaleDropdownNavbarItem:
FC<LocaleDropdownNavbarItemProps> = (props) => {
if (windowType !== 'mobile') {
if (pathname.startsWith('/zh/blog')) {
return (
- <Link autoAddBaseUrl={false} to="pathname:///blog" target="_parent">
+ <Link
+ className={styles.localizedBlogLink}
+ autoAddBaseUrl={false}
+ to="pathname:///blog"
+ target="_parent"
+ >
English Blog
</Link>
);
@@ -45,7 +50,12 @@ const LocaleDropdownNavbarItem:
FC<LocaleDropdownNavbarItemProps> = (props) => {
if (pathname.startsWith('/blog')) {
return (
- <Link autoAddBaseUrl={false} to="pathname:///zh/blog" target="_parent">
+ <Link
+ className={styles.localizedBlogLink}
+ autoAddBaseUrl={false}
+ to="pathname:///zh/blog"
+ target="_parent"
+ >
中文博客
</Link>
);
diff --git
a/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
b/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
index ef086390beb..d2b28f4b5da 100644
--- a/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
+++ b/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
@@ -9,3 +9,7 @@
vertical-align: text-bottom;
margin-right: 5px;
}
+
+.localizedBlogLink {
+ padding: 4px 12px;
+}
diff --git a/blog/zh/docusaurus.config.js b/blog/zh/docusaurus.config.js
index aea74e05c84..54a298d18da 100644
--- a/blog/zh/docusaurus.config.js
+++ b/blog/zh/docusaurus.config.js
@@ -98,7 +98,7 @@ module.exports = {
},
colorMode: {
defaultMode: 'light',
- disableSwitch: true,
+ disableSwitch: false,
respectPrefersColorScheme: false,
},
image: 'https://static.apiseven.com/202202/apache-apisix.png',
diff --git a/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
b/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index 7fc1f041028..65d9d716ac4 100644
--- a/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -36,11 +36,31 @@ const LocaleDropdownNavbarItem:
FC<LocaleDropdownNavbarItemProps> = (props) => {
const { pathname } = useLocation();
if (pathname.startsWith('/zh/blog')) {
- return <Link isNavLink autoAddBaseUrl={false} to="pathname:///blog"
target="_self">English Blog</Link>;
+ return (
+ <Link
+ className={styles.localizedBlogLink}
+ isNavLink
+ autoAddBaseUrl={false}
+ to="pathname:///blog"
+ target="_self"
+ >
+ English Blog
+ </Link>
+ );
}
if (pathname.startsWith('/blog')) {
- return <Link isNavLink autoAddBaseUrl={false} to="pathname:///zh/blog"
target="_self">中文博客</Link>;
+ return (
+ <Link
+ className={styles.localizedBlogLink}
+ isNavLink
+ autoAddBaseUrl={false}
+ to="pathname:///zh/blog"
+ target="_self"
+ >
+ 中文博客
+ </Link>
+ );
}
function getLocaleLabel(locale) {
diff --git
a/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
b/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
index ef086390beb..d2b28f4b5da 100644
--- a/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
+++ b/doc/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
@@ -9,3 +9,7 @@
vertical-align: text-bottom;
margin-right: 5px;
}
+
+.localizedBlogLink {
+ padding: 4px 12px;
+}
diff --git a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index 7fc1f041028..65d9d716ac4 100644
--- a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -36,11 +36,31 @@ const LocaleDropdownNavbarItem:
FC<LocaleDropdownNavbarItemProps> = (props) => {
const { pathname } = useLocation();
if (pathname.startsWith('/zh/blog')) {
- return <Link isNavLink autoAddBaseUrl={false} to="pathname:///blog"
target="_self">English Blog</Link>;
+ return (
+ <Link
+ className={styles.localizedBlogLink}
+ isNavLink
+ autoAddBaseUrl={false}
+ to="pathname:///blog"
+ target="_self"
+ >
+ English Blog
+ </Link>
+ );
}
if (pathname.startsWith('/blog')) {
- return <Link isNavLink autoAddBaseUrl={false} to="pathname:///zh/blog"
target="_self">中文博客</Link>;
+ return (
+ <Link
+ className={styles.localizedBlogLink}
+ isNavLink
+ autoAddBaseUrl={false}
+ to="pathname:///zh/blog"
+ target="_self"
+ >
+ 中文博客
+ </Link>
+ );
}
function getLocaleLabel(locale) {
diff --git
a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
index ef086390beb..d2b28f4b5da 100644
--- a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
+++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
@@ -9,3 +9,7 @@
vertical-align: text-bottom;
margin-right: 5px;
}
+
+.localizedBlogLink {
+ padding: 4px 12px;
+}
