Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a75fc83

Browse files
improve(doc): Improve the presentation of HomepageHeader's title and tagline
1 parent 4e3b8b4 commit a75fc83

File tree

2 files changed

+55
-33
lines changed

2 files changed

+55
-33
lines changed

‎docs/src/css/custom.css‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,55 +6,62 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #2563eb;
10-
--ifm-color-primary-dark: #1d4ed8;
11-
--ifm-color-primary-darker: #1e40af;
12-
--ifm-color-primary-darkest: #1e3a8a;
13-
--ifm-color-primary-light: #3b82f6;
14-
--ifm-color-primary-lighter: #60a5fa;
15-
--ifm-color-primary-lightest: #93c5fd;
16-
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
9+
--ifm-color-primary: #2563eb;
10+
--ifm-color-primary-dark: #1d4ed8;
11+
--ifm-color-primary-darker: #1e40af;
12+
--ifm-color-primary-darkest: #1e3a8a;
13+
--ifm-color-primary-light: #3b82f6;
14+
--ifm-color-primary-lighter: #60a5fa;
15+
--ifm-color-primary-lightest: #93c5fd;
16+
--ifm-code-font-size: 95%;
17+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
1818
}
1919

2020
/* For readability concerns, you should choose a lighter palette in dark mode. */
2121
[data-theme='dark'] {
22-
--ifm-color-primary: #60a5fa;
23-
--ifm-color-primary-dark: #3b82f6;
24-
--ifm-color-primary-darker: #2563eb;
25-
--ifm-color-primary-darkest: #1d4ed8;
26-
--ifm-color-primary-light: #93c5fd;
27-
--ifm-color-primary-lighter: #bfdbfe;
28-
--ifm-color-primary-lightest: #dbeafe;
29-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
22+
--ifm-color-primary: #60a5fa;
23+
--ifm-color-primary-dark: #3b82f6;
24+
--ifm-color-primary-darker: #2563eb;
25+
--ifm-color-primary-darkest: #1d4ed8;
26+
--ifm-color-primary-light: #93c5fd;
27+
--ifm-color-primary-lighter: #bfdbfe;
28+
--ifm-color-primary-lightest: #dbeafe;
29+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
30+
}
31+
32+
[data-theme='dark'] .header_hero_text {
33+
/*filter: grayscale(100%); !* Restrict colors to black and white *!*/
34+
/*!* Using mix-blend-mode to create automatic contrast with only black/white shades *!*/
35+
/*mix-blend-mode: difference;*/
36+
color: white; /* Base color that will be inverted by mix-blend-mode */
3037
}
3138

3239
/* GitHub icon styling */
3340
.header-github-link:hover {
34-
opacity: 0.6;
41+
opacity: 0.6;
3542
}
3643

3744
.header-github-link:before {
38-
content: '';
39-
width: 24px;
40-
height: 24px;
41-
display: flex;
42-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
45+
content: '';
46+
width: 24px;
47+
height: 24px;
48+
display: flex;
49+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
4350
}
4451

4552
[data-theme='dark'] .header-github-link:before {
46-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
53+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
4754
}
4855

4956
/* Warning badge styling */
5057
.badge--warning {
51-
--ifm-badge-background-color: #f59e0b;
52-
--ifm-badge-border-color: #f59e0b;
53-
color: white;
58+
--ifm-badge-background-color: #f59e0b;
59+
--ifm-badge-border-color: #f59e0b;
60+
color: white;
5461
}
5562

5663
[data-theme='dark'] .badge--warning {
57-
--ifm-badge-background-color: #d97706;
58-
--ifm-badge-border-color: #d97706;
59-
color: white;
64+
--ifm-badge-background-color: #d97706;
65+
--ifm-badge-border-color: #d97706;
66+
color: white;
6067
}

‎docs/src/pages/index.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,21 @@ function getDayOfYear(date?: Date): number {
2424
return dayjs(date).dayOfYear();
2525
}
2626

27+
const theDarkIsNotSatisfactory = ['gradientDark0', 'gradientDark1', 'gradientDark7', 'gradientDark6', 'gradientDark5', 'gradientDark4', 'gradientDark2'];
28+
29+
function isNotSatisfactoryDark(name: string) {
30+
for (let d of theDarkIsNotSatisfactory) {
31+
if (d === name) {
32+
return true;
33+
}
34+
}
35+
return false;
36+
}
37+
2738
// Select gradient class based on theme and day of year
2839
function selectGradientClass(isDarkTheme: boolean): string {
29-
const dayOfYear = getDayOfYear(); // Uses current date by default
40+
const currentDate = new Date();
41+
const dayOfYear = getDayOfYear(currentDate); // Uses current date by default
3042

3143
if (isDarkTheme) {
3244
const index = dayOfYear % DARK_GRADIENTS_COUNT;
@@ -37,6 +49,7 @@ function selectGradientClass(isDarkTheme: boolean): string {
3749
}
3850
}
3951

52+
4053
function HomepageHeader() {
4154
const {siteConfig} = useDocusaurusContext();
4255
const {colorMode} = useColorMode();
@@ -46,13 +59,15 @@ function HomepageHeader() {
4659
const gradientClass = selectGradientClass(isDarkTheme);
4760
const selectedGradientClass = styles[gradientClass];
4861

62+
const headerTextClass = isNotSatisfactoryDark(gradientClass) ? 'header_hero_text' : null;
63+
4964
return (
5065
<header className={clsx('hero hero--primary', styles.heroBanner, selectedGradientClass)}>
5166
<div className="container">
52-
<Heading as="h1" className="hero__title">
67+
<Heading as="h1" className={clsx('hero__title',headerTextClass)}>
5368
{siteConfig.title}
5469
</Heading>
55-
<p className="hero__subtitle">{siteConfig.tagline}</p>
70+
<p className={clsx('hero__subtitle',headerTextClass)}>{siteConfig.tagline}</p>
5671
<div className={styles.buttons}>
5772
<Link
5873
className="button button--secondary button--lg"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /