Skip to content

Commit b0c3443

Browse files
jaimergpjaimergp
authored
Try a teal theme (#16)
* reorg variables * status colors * implement teal theme * adjust primary, dark and light for AA compliance * fix hyperlink states * fix footer link hover * prettier * fix active menu color in dark mode * fix homepage button active * pre-commit * add some docstrings * fix link colors in cards and hover animations * link contributing cards to something * pre-commit
1 parent 1517a6c commit b0c3443

File tree

10 files changed

+182
-79
lines changed

10 files changed

+182
-79
lines changed

‎src/components/About/index.jsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,18 +74,22 @@ export default function Stats() {
7474
<div className={styles.stats_container}>
7575
<div className={styles.stats1_card}>
7676
{stats1.map(({ number, content }, index) => (
77-
<div className={styles.card} key={index}>
78-
<h1 className="gradient_text">{number}</h1>
79-
<h3>{content}</h3>
80-
</div>
77+
<Link to="https://github.com/conda-forge/by-the-numbers">
78+
<div className={styles.card} key={index}>
79+
<h1 className="gradient_text">{number}</h1>
80+
<h3>{content}</h3>
81+
</div>
82+
</Link>
8183
))}
8284
</div>
8385
<div className={styles.stats2_card}>
8486
{stats2.map(({ number, content }, index) => (
85-
<div className={styles.card} key={index}>
86-
<h1 className="gradient_text">{number}</h1>
87-
<h3>{content}</h3>
88-
</div>
87+
<Link to="https://github.com/conda-forge/by-the-numbers">
88+
<div className={styles.card} key={index}>
89+
<h1 className="gradient_text">{number}</h1>
90+
<h3>{content}</h3>
91+
</div>
92+
</Link>
8993
))}
9094
</div>
9195
</div>

‎src/components/About/styles.module.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@
4949
grid-template-columns: repeat(4, auto);
5050
}
5151

52+
.stats1_card a,
53+
.stats2_card a {
54+
text-decoration: none;
55+
color: var(--ifm-font-color-base);
56+
}
57+
5258
.card {
5359
background: var(--theme-card);
5460
border-radius: 15px;

‎src/components/Contributing/index.jsx

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from "react";
22
import styles from "./styles.module.css";
3+
import Link from "@docusaurus/Link";
34

45
const contributing = [
56
{
67
Svg: require("@site/static/img/contributing/edit.svg").default,
78
alt: "GitHub edit pen tool icon",
89
title: "Update A Package",
10+
href: "/docs",
911
content:
1012
"Edit the recipe as desired. You may even consider adding yourself as a recipe maintainer.",
1113
width: 50,
@@ -14,22 +16,25 @@ const contributing = [
1416
Svg: require("@site/static/img/contributing/issue.svg").default,
1517
alt: "GitHub issue icon",
1618
title: "Report An Issue",
19+
href: "https://github.com/conda-forge/conda-forge.github.io/issues",
1720
content:
18-
"Take a look to see if the issue has already been raised on the feedstock's issue tracker.",
21+
"Take a look to see if the issue has already been raised on the issue tracker.",
1922
width: 50,
2023
},
2124
{
2225
Svg: require("@site/static/img/contributing/pr.svg").default,
2326
alt: "GitHub pull request icon",
2427
title: "Add A Recipe",
28+
href: "https://github.com/conda-forge/staged-recipes",
2529
content:
26-
'Add a new conda recipe in a new "recipes/[your-package-name]" directory.',
30+
'Contribute a new conda recipe in a "recipes/[your-package-name]" directory in staged-recipes.',
2731
width: 50,
2832
},
2933
{
3034
Svg: require("@site/static/img/contributing/help.svg").default,
3135
alt: "Question mark icon",
3236
title: "Ask For Help",
37+
href: "https://app.element.io/#/room/#conda-forge:matrix.org",
3338
content: (
3439
<>
3540
Join the{" "}
@@ -57,15 +62,17 @@ export default function Contributing() {
5762
<h1>Contributing to conda-forge</h1>
5863
<p>For a package on conda-forge, I want to ...</p>
5964
</div>
60-
{contributing.map(({ Svg, alt, title, content, width }, index) => (
61-
<div
62-
className={styles.contributing_conda_forge_card}
63-
key={index}
64-
>
65-
<Svg width={width} alt={alt} role="img" />
66-
<h3>{title}</h3>
67-
<p>{content}</p>
68-
</div>
65+
{contributing.map(({ Svg, alt, title, href, content, width }, index) => (
66+
<Link to={href} className={styles.linked_card}>
67+
<div
68+
className={styles.contributing_conda_forge_card}
69+
key={index}
70+
>
71+
<Svg width={width} alt={alt} role="img" />
72+
<h3>{title}</h3>
73+
<p>{content}</p>
74+
</div>
75+
</Link>
6976
))}
7077
</div>
7178
);

‎src/components/Contributing/styles.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,19 @@ h3 {
5353
margin-bottom: 1em;
5454
}
5555

56+
.linked_card,
57+
.linked_card:hover,
58+
.linked_card:active {
59+
text-decoration: none;
60+
color: var(--ifm-font-color-base);
61+
}
5662
.contributing_conda_forge_card p {
5763
font-size: 16px;
5864
font-weight: 500;
5965
}
66+
.contributing_conda_forge_card a {
67+
color: var(--theme-card-link-color);
68+
}
6069

6170
@media screen and (max-width: 650px) {
6271
.contributing_conda_forge {

‎src/components/Supporters/styles.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,16 @@
4646
justify-content: center;
4747
border-radius: 15px;
4848
padding: 3em 5em;
49+
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
50+
}
51+
52+
.numfocus_card:hover {
53+
transform: scale(0.9);
4954
}
5055

5156
.numfocus_card a {
5257
background: none;
58+
color: var(--theme-card-link-color);
5359
}
5460

5561
.about_numfocus {
@@ -87,6 +93,7 @@
8793

8894
.cardWrapper a {
8995
background: none;
96+
color: var(--theme-card-link-color);
9097
}
9198

9299
.cardWrapper:hover {

‎src/css/custom.css

Lines changed: 120 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,57 @@
2020
--ifm-font-heading-family: "Montserrat";
2121
--ifm-font-content-family: "Inter";
2222
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
23+
--ifm-color-primary: #008478;
24+
--ifm-color-primary-dark: #007466;
25+
--ifm-color-primary-darker: #00695c;
26+
--ifm-color-primary-darkest: #004d40;
27+
--ifm-color-primary-light: #26a69a;
28+
--ifm-color-primary-lighter: #80cbc4;
29+
--ifm-color-primary-lightest: #b2dfdb;
30+
--ifm-color-secondary: #ebedf0;
31+
--ifm-color-success: #388e3c;
32+
--ifm-color-info: #1976d2;
33+
--ifm-color-warning: #ef6c00;
34+
--ifm-color-danger: #d84315;
35+
--ifm-code-font-size: 95%;
36+
--ifm-footer-link-hover-color: #4db6ac; /* Same as dark theme primary */
37+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
38+
--gradient: linear-gradient(
39+
60deg,
40+
var(--ifm-color-primary-darker) 0%,
41+
var(--ifm-color-primary-light) 100%
42+
);
43+
--theme-card: #f6f6f6;
44+
--theme-card-link-color: var(--ifm-color-primary-dark);
45+
--dark-theme-bg-color: #1b1b1d;
46+
--light-theme-bg-color: #fff;
47+
--pydata-link-underline-thickness: max(1px, 0.0625rem);
48+
--pydata-link-underline-offset: 0.1578em;
49+
--pydata-link-hover-decoration-thickness: max(3px, 0.1875rem, 0.12em);
50+
}
51+
52+
/* For readability concerns, you should choose a lighter palette in dark mode. */
53+
[data-theme="dark"] {
54+
--ifm-color-primary: #4db6ac;
55+
--ifm-color-primary-dark: #009688;
56+
--ifm-color-primary-darker: #00897b;
57+
--ifm-color-primary-darkest: #00796b;
58+
--ifm-color-primary-light: #80cbc4;
59+
--ifm-color-primary-lighter: #b2dfdb;
60+
--ifm-color-primary-lightest: #e0f2f1;
61+
--ifm-color-secondary: #ebedf0;
62+
--ifm-color-success: #81c784;
63+
--ifm-color-info: #64b5f6;
64+
--ifm-color-warning: #ffb74d;
65+
--ifm-color-danger: #ff8a65;
66+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
67+
--gradient: linear-gradient(
68+
60deg,
69+
var(--ifm-color-primary-darker) 0%,
70+
var(--ifm-color-primary) 100%
71+
);
72+
--theme-card: #3a3a3a;
73+
--theme-card-link-color: var(--ifm-color-primary-light);
2374
}
2475

2576
h1,
@@ -35,98 +86,117 @@ p {
3586
font-family: var(--ifm-font-content-family);
3687
}
3788

89+
/*
90+
Hyperlink states are crucial for accessibility.
91+
Please double check before changing the rules below.
92+
*/
3893
a {
3994
text-decoration: underline;
95+
text-decoration-thickness: var(--pydata-link-underline-thickness);
96+
text-underline-offset: var(--pydata-link-underline-offset);
4097
}
4198

42-
a:hover {
43-
text-decoration: none;
99+
a:hover,
100+
/* We need to (re)override some of the infima rules to have proper states on
101+
navbar links, table of contents, and docs sidebar links, respectively */
102+
a.navbar__link:hover, /* Top bar navigation links */
103+
a.table-of-contents__link:hover, /*Right sidebar links (table of contents) */
104+
a[class^="sidebarItemLink"]:hover /* The docs sidebar links do not have its own class */ {
105+
text-decoration: underline;
106+
text-decoration-thickness: var(--pydata-link-hover-decoration-thickness);
107+
text-decoration-skip-ink: none;
108+
text-decoration-skip: none;
44109
}
45-
46-
a:focus {
47-
background: #ffff00;
48-
border-radius: 5px;
49-
color: #000;
110+
a:active,
111+
a.navbar__link:active,
112+
a.table-of-contents__link:active,
113+
a[class^="sidebarItemLink"]:active {
114+
text-decoration-thickness: var(--pydata-link-decoration-thickness);
50115
}
51116

117+
/* In some cases, we override the underlines because there are other elements that
118+
already report the state (e.g. borders, background colors, etc) */
119+
a[class^="sidebarItemLink"][aria-current="page"], /* No underline if this is the current page */
120+
a.navbar__link,
52121
.navbar-sidebar__item,
53-
.menu a {
122+
.menu a,
123+
.navbar__items--right a,
124+
.pagination-nav__link,
125+
a.card, /* These cards are used in index-like documentation pages */
126+
a.card:hover {
54127
text-decoration: none;
55128
}
56129

57-
.navbar__items--right a {
58-
text-decoration: none;
130+
/* On these elements, we only rely on background color changes. They are navigation items,
131+
so they are already assumed to be clickable anyway */
132+
.pagination-nav__link:active,
133+
a.card:active,
134+
a.menu__link:active {
135+
background: var(--ifm-color-primary-lightest);
136+
color: #000;
137+
}
138+
[data-theme="dark"] .pagination-nav__link:active,
139+
[data-theme="dark"] a.card:active,
140+
[data-theme="dark"] a.menu__link:active {
141+
background: var(--ifm-color-primary-darkest);
142+
color: #fff;
59143
}
60144

61-
.footer a:hover {
62-
color: var(--ifm-color-primary-lightest);
145+
/* Animate the top navbar conda-forge logo a bit */
146+
.navbar__logo img:hover {
147+
transform: scale(1.05);
148+
}
149+
.navbar__logo img:active {
150+
transform: scale(1);
63151
}
64152

153+
/* Used for accents in the frontpage */
65154
.gradient_text {
66-
background: linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%);
155+
background: var(--gradient);
67156
background-clip: text;
68157
-webkit-background-clip: text;
69158
-webkit-text-fill-color: transparent;
70159
}
71160

161+
/* The homepage button is used only under the hero text */
72162
.homepage_button {
73163
background:
74164
linear-gradient(#fff, #fff) padding-box,
75-
linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
165+
var(--gradient) border-box;
76166
border: 2px solid transparent;
77167
}
78-
79-
.homepage_button:hover {
168+
.homepage_button:hover,
169+
.homepage_button:focus,
170+
.homepage_button:focus:active {
80171
background:
81172
linear-gradient(#ebedf0, #ebedf0) padding-box,
82-
linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
173+
var(--gradient) border-box;
174+
}
175+
.homepage_button:active {
176+
transform: translateY(1px);
83177
}
84178

85-
[data-theme="dark"] .button.button--secondary {
179+
/* Use a gradient border on most buttons;
180+
see how we avoid the "Collapse sidebar" button of the docs sidebar via the aria-label;
181+
not pretty but it's the best we can do so far */
182+
[data-theme="dark"]
183+
.button.button--secondary:not([aria-label="Collapse sidebar"]) {
86184
background:
87185
linear-gradient(#3a3a3a, #3a3a3a) padding-box,
88-
linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
186+
var(--gradient) border-box;
89187
border: 2px solid transparent;
90188
color: #ffffff;
91189
}
92190

93-
[data-theme="dark"] .button.button--secondary:hover {
191+
[data-theme="dark"]
192+
.button.button--secondary:hover:not([aria-label="Collapse sidebar"]) {
94193
background:
95194
linear-gradient(#4c4c4c, #4c4c4c) padding-box,
96-
linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
195+
var(--gradient) border-box;
97196
border: 2px solid transparent;
98197
color: #ffffff;
99198
}
100199

101-
:root {
102-
--ifm-color-primary: #b34400;
103-
--ifm-color-primary-dark: #a13d00;
104-
--ifm-color-primary-darker: #983a00;
105-
--ifm-color-primary-darkest: #7d3000;
106-
--ifm-color-primary-light: #c54b00;
107-
--ifm-color-primary-lighter: #ce4e00;
108-
--ifm-color-primary-lightest: #e95800;
109-
--ifm-code-font-size: 95%;
110-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
111-
--gradient: linear-gradient(60deg, #ff3664 0%, #ff4b2b 100%);
112-
--theme-card: #f6f6f6;
113-
--dark-theme-bg-color: #1b1b1d;
114-
--light-theme-bg-color: #fff;
115-
}
116-
117-
/* For readability concerns, you should choose a lighter palette in dark mode. */
118-
[data-theme="dark"] {
119-
--ifm-color-primary: #ff5501;
120-
--ifm-color-primary-dark: #e64c00;
121-
--ifm-color-primary-darker: #da4800;
122-
--ifm-color-primary-darkest: #b33b00;
123-
--ifm-color-primary-light: #ff661b;
124-
--ifm-color-primary-lighter: #ff6f27;
125-
--ifm-color-primary-lightest: #ff884e;
126-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
127-
--theme-card: #3a3a3a;
128-
}
129-
130200
.color-container {
131201
display: inline-flex;
132202
flex-direction: column;

‎static/img/contributing/edit.svg

Lines changed: 2 additions & 2 deletions
Loading

0 commit comments

Comments
 (0)