Skip to content

Commit 9828254

Browse files
DarthSimDarthSim
committed
New design; Add light theme
1 parent 7cf4a6f commit 9828254

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+754
-301
lines changed

‎docs/intro.mdx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,18 @@ description: imgproxy is a fast and secure standalone server for resizing and co
55
displayed_sidebar: tutorialSidebar
66
---
77

8-
# ![imgproxy Logo](/img/logo-full.svg)
8+
<h1>
9+
<img
10+
alt="imgproxy logo"
11+
src="/img/logo-light.svg"
12+
class="intro__logo intro__logo-light"
13+
/>
14+
<img
15+
alt="imgproxy logo"
16+
src="/img/logo-dark.svg"
17+
class="intro__logo intro__logo-dark"
18+
/>
19+
</h1>
920

1021
[imgproxy](https://imgproxy.net) is a fast and secure standalone server for resizing, processing, and converting images. The guiding principles behind imgproxy are security, speed, and simplicity.
1122

‎docusaurus.config.ts‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
import badgeRemarkPlugin from "./src/remark/badge";
88
import codeAnchorRemarkPlugin from "./src/remark/code-anchor";
99

10-
import prismTheme from "./src/prism/theme";
10+
import prismThemes from "./src/prism/themes";
1111

1212
const defaultUrl = "https://docs.imgproxy.net";
1313

@@ -21,7 +21,6 @@ const getSiteUrl = (): string => {
2121
const config: Config = {
2222
title: "imgproxy documentation",
2323
tagline: "Optimize images for web on the fly",
24-
favicon: "/img/favicon.ico",
2524

2625
// Set the production url of your site here
2726
url: getSiteUrl(),
@@ -66,7 +65,30 @@ const config: Config = {
6665
tagName: "link",
6766
attributes: {
6867
rel: "stylesheet",
69-
href: "https://fonts.googleapis.com/css2?family=Martian+Mono:[email protected]&display=swap",
68+
href: "https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,[email protected],100..800&display=swap",
69+
},
70+
},
71+
{
72+
tagName: "link",
73+
attributes: {
74+
rel: "icon",
75+
href: "/img/favicon.ico",
76+
sizes: "32x32",
77+
},
78+
},
79+
{
80+
tagName: "link",
81+
attributes: {
82+
rel: "icon",
83+
href: "/img/icon.svg",
84+
type: "image/svg+xml",
85+
},
86+
},
87+
{
88+
tagName: "link",
89+
attributes: {
90+
rel: "apple-touch-icon",
91+
href: "/img/apple-touch-icon.png",
7092
},
7193
},
7294
],
@@ -103,12 +125,12 @@ const config: Config = {
103125
theme: {
104126
customCss: [
105127
require.resolve("./src/css/general.css"),
128+
require.resolve("./src/css/intro.css"),
106129
require.resolve("./src/css/navbar.css"),
107130
require.resolve("./src/css/docsearch.css"),
108131
require.resolve("./src/css/menu.css"),
109132
require.resolve("./src/css/badge.css"),
110133
require.resolve("./src/css/code-anchor.css"),
111-
require.resolve("./src/css/heading-pattern.css"),
112134
require.resolve("./src/css/iubenda.css"),
113135
],
114136
},
@@ -123,17 +145,17 @@ const config: Config = {
123145
themeConfig: {
124146
colorMode: {
125147
defaultMode: "dark",
126-
disableSwitch: true,
127-
respectPrefersColorScheme: false,
148+
disableSwitch: false,
149+
respectPrefersColorScheme: true,
128150
},
129151

130-
image: "img/social-card.jpg",
152+
image: "img/social-card.png",
131153

132154
navbar: {
133-
title: "imgproxy",
134155
logo: {
135156
alt: "imgproxy Logo",
136-
src: "img/logo.svg",
157+
src: "img/logo-light.svg",
158+
srcDark: "img/logo-dark.svg",
137159
},
138160
items: [
139161
{
@@ -164,7 +186,7 @@ const config: Config = {
164186
{
165187
href: "https://x.com/imgproxy_net",
166188
position: "right",
167-
className: "navbar__link--icon navbar__link--twitter",
189+
className: "navbar__link--icon navbar__link--x",
168190
title: "X (Twitter)",
169191
},
170192
{
@@ -183,9 +205,9 @@ const config: Config = {
183205
},
184206

185207
footer: {
186-
style: "dark",
187208
logo: {
188-
src: "/img/logo-full.svg",
209+
src: "/img/logo-light.svg",
210+
srcDark: "/img/logo-dark.svg",
189211
href: "https://imgproxy.net",
190212
target: "_blank",
191213
},
@@ -267,8 +289,8 @@ const config: Config = {
267289

268290
prism: {
269291
additionalLanguages: ["bash", "json"],
270-
theme: prismTheme,
271-
darkTheme: prismTheme,
292+
theme: prismThemes.catppuccinLatte,
293+
darkTheme: prismThemes.catppuccinMocha,
272294
},
273295

274296
algolia: {

‎src/css/badge.css‎

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,41 @@
22
.menu__list-item--badge a::after {
33
--ifm-badge-background-color: transparent;
44
--ifm-badge-border-width: 1px;
5+
--ifm-badge-border-radius: 0.4em;
56
--ifm-badge-padding-vertical: 0.4em;
67
--ifm-badge-padding-horizontal: 0.7em;
7-
--ifm-badge-border-radius: 1em;
88

99
background-color: var(--ifm-badge-background-color);
1010
border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
1111
border-radius: var(--ifm-badge-border-radius);
1212
color: var(--ifm-badge-border-color);
13-
display: inline-block;
14-
font-style: var(--ifm-font-weight-bold);
15-
font-weight: var(--ifm-font-weight-bold);
16-
font-variation-settings: 'wght' var(--ifm-font-weight-bold);
13+
font-family: var(--ifm-font-family-monospace);
14+
font-variation-settings: 'wght' var(--ifm-font-weight-bold), 'wdth' 112.5;
15+
font-style: normal;
1716
font-size: 0.6em;
18-
font-stretch: normal;
1917
line-height: 1;
20-
text-transform: uppercase;
18+
text-transform: capitalize;
2119
padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
2220

23-
position: relative;
24-
top: -0.2em;
25-
}
26-
27-
a.badge:hover {
28-
filter: brightness(1.2);
29-
text-decoration: none;
21+
transform: translateY(-0.1em);
3022
}
3123

3224
h1 .badge,
3325
h2 .badge,
3426
h3 .badge {
3527
font-size: 0.5em;
36-
top: -0.3em;
28+
transform: translateY(-0.3em);
3729
}
3830

3931
.badge--primary {
40-
--ifm-badge-background-color: transparent;
41-
--ifm-badge-border-color: var(--ifm-color-primary);
32+
--ifm-badge-background-color: var(--neon-a-fg);
33+
--ifm-badge-border-color: var(--neon-a-fg);
34+
color: var(--ifm-background-color);
4235
}
4336

4437
.badge--secondary {
4538
--ifm-badge-background-color: transparent;
46-
--ifm-badge-border-color: var(--ifm-color-secondary);
39+
--ifm-badge-border-color: var(--text-secondary);
4740
color: var(--ifm-badge-border-color);
4841
}
4942

@@ -71,17 +64,16 @@ h3 .badge {
7164
--ifm-badge-border-color: var(--ifm-color-primary);
7265
}
7366

67+
a.badge--pro:hover {
68+
--ifm-badge-background-color: var(--neon-a-bg-hover);
69+
text-decoration: none;
70+
}
71+
7472
.menu__list-item--badge a::after {
7573
top: 0;
7674
margin-left: auto;
7775
}
7876

79-
@media (max-width: 996px) {
80-
.menu__list-item--badge a::after {
81-
margin-left: 0.6em;
82-
}
83-
}
84-
8577
.menu__list-item.badge--pro a::after {
8678
content: "pro";
8779
}

‎src/css/code-anchor.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
}
44

55
.code-anchor code {
6-
color: #ffcb6b;
6+
color: oklch(0.55 0.1269 87.53);
7+
font-variation-settings: 'wght' 500, 'wdth' 100;
8+
9+
[data-theme='dark'] & {
10+
color: oklch(0.87 0.1745 87.53);
11+
}
712
}
813

914
.code-anchor a::after {

‎src/css/docsearch.css‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,46 @@
1-
[data-theme='dark'] .DocSearch {
2-
--docsearch-text-color: var(--ifm-font-color-base);
3-
--docsearch-muted-color: var(--ifm-color-secondary-darkest);
4-
--docsearch-container-background: hsla(225, 24%, 78%, 0.2);
1+
.DocSearch {
2+
--docsearch-text-color: var(--text-primary);
3+
--docsearch-muted-color: var(--text-tertiary);
4+
--docsearch-container-background: var(--surface-1);
55
/* Modal */
66
--docsearch-modal-background: var(--ifm-background-color);
77
/* Search box */
8-
--docsearch-searchbox-background: rgba(255, 255, 255, 0.2);
9-
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.1);
8+
--docsearch-searchbox-background: var(--gray-universal-36);
9+
--docsearch-searchbox-focus-background: var(--neon-a-bg-hover);
10+
/* Highlight */
11+
--docsearch-highlight-color: var(--ifm-color-primary-dark);
1012
/* Hit */
11-
--docsearch-hit-color: var(--ifm-font-color-base);
12-
--docsearch-hit-active-color: var(--ifm-color-white);
13-
--docsearch-hit-background: var(--ifm-color-emphasis-100);
13+
--docsearch-hit-color: var(--text-primary);
14+
--docsearch-hit-active-color: var(--ifm-background-color);
15+
--docsearch-hit-background: var(--neon-a-bg-surface);
1416
/* Footer */
15-
--docsearch-footer-background: var(--ifm-background-surface-color);
17+
--docsearch-footer-background: var(--surface-1);
1618
}
1719

20+
[data-theme='dark'] .DocSearch {
21+
/* Highlight */
22+
--docsearch-highlight-color: var(--ifm-color-primary-light);
23+
}
24+
25+
1826
.DocSearch-Button {
1927
min-width: 25vw;
2028
}
2129

2230
@media (max-width: 996px) {
2331
.DocSearch-Button {
24-
min-width: 0;
32+
min-width: unset;
2533
}
2634
}
2735

36+
[data-theme='light'] .DocSearch-Button-Key,
37+
[data-theme='light'] .DocSearch-Commands-Key,
2838
[data-theme='dark'] .DocSearch-Button-Key,
2939
[data-theme='dark'] .DocSearch-Commands-Key {
40+
color: var(--text-secondary);
3041
background: transparent;
3142
box-shadow: none;
32-
border: 1px solid var(--docsearch-muted-color);
43+
border: 1px solid var(--text-secondary);
3344
top: 0;
3445
padding: 0;
3546
}

0 commit comments

Comments
 (0)