Skip to content

Commit a75fc83

Browse files
ForteScarletForteScarlet
committed
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)