Skip to content

Commit 1701e16

Browse files
Docs color space separation (#1857)
1 parent 426f148 commit 1701e16

21 files changed

+736
-125
lines changed

_components/CTA.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
}
1111

1212
.runtime-cta {
13-
@apply bg-runtime-400 border-runtime-400 hover:bg-runtime-300;
13+
@apply bg-runtime-400 border-0 hover:bg-runtime-300;
1414
}
1515

1616
.deploy-cta {
17-
@apply bg-deploy-500 border-deploy-500 hover:bg-deploy-400;
17+
@apply bg-deploy-300 rounded-full border-0 hover:bg-deploy-400;
1818
}
1919

2020
.jsr-cta {
@@ -26,6 +26,6 @@
2626
padding-left: 3rem;
2727
background-image: url("../deno-deploy.svg");
2828
background-repeat: no-repeat;
29-
background-position: 1rem center;
30-
background-size: 2rem;
29+
background-position: 1.25rem center;
30+
background-size: 1.25rem;
3131
}

_components/DeployLogo.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
export default function Logo() {
2+
return (
3+
<svg
4+
width="100%"
5+
height="100%"
6+
viewBox="0 0 713 248"
7+
version="1.1"
8+
xmlns="http://www.w3.org/2000/svg"
9+
xmlns:xlink="http://www.w3.org/1999/xlink"
10+
xml:space="preserve"
11+
xmlns:serif="http://www.serif.com/"
12+
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
13+
>
14+
<path
15+
d="M438.948,181.807c-35.156,-0 -58.744,-24.042 -58.744,-57.156c0,-33.114 23.588,-57.156 58.744,-57.156c34.475,0 58.97,23.135 58.97,57.156c-0,34.021 -24.495,57.156 -58.97,57.156Zm-0,-26.537c16.103,0 28.804,-12.701 28.804,-30.619c0,-18.145 -12.247,-30.619 -28.804,-30.619c-17.238,-0 -28.805,13.155 -28.805,30.619c-0,17.238 12.021,30.619 28.805,30.619Zm126.899,26.537c-32.887,-0 -56.929,-23.135 -56.929,-57.156c0,-34.021 24.042,-57.156 58.29,-57.156c17.691,0 35.836,7.031 46.95,21.093l-19.96,17.238c-5.897,-6.804 -14.515,-11.794 -25.856,-11.794c-17.691,-0 -29.485,12.474 -29.485,30.392c-0,18.145 12.248,30.846 29.712,30.846c11.794,0 20.64,-5.443 25.856,-11.34l20.186,17.918c-9.526,11.113 -26.537,19.959 -48.764,19.959Zm103.51,-0c-17.691,-0 -32.66,-5.67 -44.908,-16.104l14.516,-20.639c9.072,8.619 18.598,12.928 30.619,12.928c8.619,-0 13.609,-3.629 13.609,-9.072c-0,-5.217 -5.671,-7.712 -20.186,-12.248c-18.145,-6.124 -34.022,-14.743 -34.022,-36.063c0,-19.959 17.238,-33.114 39.919,-33.114c15.423,0 27.897,4.083 40.372,13.836l-14.289,21.773c-8.619,-8.165 -18.372,-11.794 -26.537,-11.794c-4.763,0 -10.887,2.495 -10.887,8.392c0,4.536 5.897,7.712 16.784,11.794c24.042,8.846 38.104,14.062 38.104,35.836c-0,19.732 -14.062,34.475 -43.094,34.475Zm-398.125,-1.815l-0,-112.497l40.674,0c35.581,0 58.46,23.135 58.46,56.4c0,33.124 -21.443,56.097 -57.987,56.097l-41.147,0Zm29.23,-26.782l9.857,0c17.152,0 28.436,-13.145 28.436,-29.315c-0,-16.793 -11.445,-29.627 -26.216,-29.627l-12.077,0l-0,58.942Z"
16+
class="fill-[#002633] dark:fill-white"
17+
/>
18+
<clipPath id="_clip1">
19+
<rect x="0" y="0" width="214.503" height="247.503" />
20+
</clipPath>
21+
<g clip-path="url(#_clip1)">
22+
<g id="mark">
23+
<g>
24+
<path
25+
d="M17.522,87.556c9.379,-41.421 34.99,-70.904 64.577,-82.113c42.759,-16.153 81.084,5.645 87.537,38.177c15.896,14.559 33.709,37.922 39.726,71.014c5.538,30.419 1.641,65.962 -19.268,92.884c6.254,1.274 11.277,2.83 14.47,4.654c1.386,0.788 2.541,1.631 3.477,2.485l2.13,2.503l1.373,2.81l0.579,3.342l-0.18,2.21l-0.586,2.094l-1.944,3.373c-1.502,1.869 -3.977,3.784 -7.49,5.435c-14.581,6.762 -54.385,10.688 -85.482,10.648c-7.554,0.002 -14.258,-0.441 -20.058,-1.286l-0.052,0.002c-43.668,-5.548 -77.789,-40.036 -88.307,-67.522c-12.674,-33.132 -7.781,-71.643 -2.746,-84.688l0.156,-0.412c3.428,-12.294 6.595,-10.109 12.088,-5.61Z"
26+
class="fill-[#f8f9fc]"
27+
/>
28+
</g>
29+
<g>
30+
<path
31+
d="M97.421,237.604c-40.364,-5.077 -71.976,-36.899 -81.694,-62.312c-11.786,-30.794 -7.436,-66.628 -2.756,-78.713c0.291,-0.597 0.83,-0.983 1.457,-1.103c0.628,-0.119 1.271,0.074 1.749,0.501c2.176,1.783 4.667,3.371 7.301,4.772c6.303,-44.284 31.512,-76.219 61.534,-87.584c38.291,-14.456 73.015,4.953 76.967,34.685c15.36,13.417 33.372,35.871 39.265,68.25c5.94,32.647 0.523,71.767 -27.866,97.34c17.285,1.689 30.38,4.881 30.493,10.042c0.219,10.053 -50.166,15.338 -87.428,15.369c-7.169,-0.017 -13.531,-0.476 -19.022,-1.247Z"
32+
style="fill:#002633;"
33+
/>
34+
</g>
35+
<g>
36+
<path
37+
d="M81.589,80.343c-0.154,-0.003 -0.299,0.045 -0.428,0.115c-12.53,7.72 -16.169,40.036 -16.383,52.873c0.001,0.455 -0.181,0.891 -0.506,1.214c-0.331,0.297 -0.77,0.469 -1.227,0.433c-11.191,-0.904 -31.195,-7.28 -37.87,-12.845c-0.191,-0.205 -0.459,-0.251 -0.707,-0.168c-0.247,0.081 -0.421,0.3 -0.44,0.575c-1.066,11.939 0.427,33.596 9.611,49.701c9.543,16.737 40.051,47.309 88.435,39.023c48.386,-8.288 64.759,-52.361 63.108,-81.502c-1.587,-27.956 -13.028,-47.979 -22.925,-57.92c-0.238,-0.216 -0.597,-0.312 -0.908,-0.182c-0.319,0.106 -0.543,0.394 -0.582,0.729c-2.169,12.412 -15.742,35.953 -25.275,39.112c-0.649,0.135 -1.318,-0.126 -1.695,-0.672c-9.113,-12.775 -33.42,-31.35 -52.208,-30.486Z"
38+
style="fill:#fefdf0;"
39+
/>
40+
</g>
41+
<g>
42+
<ellipse
43+
cx="99.565"
44+
cy="44.087"
45+
rx="7.621"
46+
ry="9.543"
47+
style="fill:#fff;"
48+
/>
49+
</g>
50+
<g>
51+
<ellipse
52+
cx="134.716"
53+
cy="44.087"
54+
rx="7.621"
55+
ry="9.543"
56+
style="fill:#fff;"
57+
/>
58+
</g>
59+
</g>
60+
</g>
61+
</svg>
62+
);
63+
}

_components/Feedback.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ export default function Feedback({ file }: { file: string | undefined }) {
66
return (
77
<section
88
id="feedback-section"
9-
class="flex flex-col mt-12 gap-2 p-4 border border-blue-100
10-
dark:border-background-tertiary bg-blue-50 dark:bg-background-secondary
9+
class="flex flex-col mt-12 gap-2 p-4 border border-foreground-tertiary
10+
bg-background-primary
1111
rounded mx-auto"
1212
>
13-
<h2 class="text-xl border-b border-blue-100 dark:border-background-tertiary
13+
<h2 class="text-xl border-b border-foreground-tertiary dark:border-background-tertiary
1414
mb-2 pb-2 font-normal">
1515
Did you find what you needed?
1616
</h2>

_components/Hamburger.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default function () {
55
<span className="hamburger-bar hamburger-bar--top"></span>
66
<span className="hamburger-bar hamburger-bar--middle"></span>
77
<span className="hamburger-bar hamburger-bar--bottom"></span>
8+
<span class="sr-only">Toggle navigation menu</span>
89
</label>
910
<input type="checkbox" id="hamburger" className="hamburger-checkbox" />
1011
</>

_components/Header.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,23 @@ header {
1818
.header-nav-link {
1919
font-size: clamp(0.8rem, 1.5vw, 1rem);
2020
white-space: nowrap;
21+
22+
&[aria-current] {
23+
position: relative;
24+
25+
&::after {
26+
content: "";
27+
width: 100%;
28+
height: calc(100% + 2rem);
29+
position: absolute;
30+
top: -1rem;
31+
left: 0;
32+
background-color: hsl(var(--background-secondary));
33+
border: 1px solid hsl(var(--foreground-tertiary));
34+
border-block: 0;
35+
z-index: -1;
36+
}
37+
}
2138
}
2239

2340
.external {

_components/Header.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,23 @@ export default function (data: Lume.Data) {
44
return (
55
<header>
66
<a href="/" title="Deno docs home" className="logo-link">
7-
<data.comp.Logo />
7+
{["services", "deploy", "subhosting"].includes(data.currentSection)
8+
? <data.comp.DeployLogo />
9+
: <data.comp.Logo />}
810
</a>
911
<nav>
1012
{data.navigation.map((nav: NavData) => (
1113
<a
1214
href={nav.href}
13-
className={`header-nav-link blocklink ${nav.style}`}
15+
className={`header-nav-link blocklink ${nav.style ?? ""}`}
1416
{...(nav.href.includes(data.currentSection)
15-
? { "data-active": true }
17+
? { "data-active": true, "aria-current": "location" }
18+
: {})}
19+
{...(nav.href === "/services/" &&
20+
["deploy", "subhosting", "services"].includes(
21+
data.currentSection,
22+
)
23+
? { "data-active": true, "aria-current": "location" }
1624
: {})}
1725
>
1826
{nav.name}

_components/Hero.css

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
.hero {
22
background-size: 0;
33
width: 100%;
4+
display: grid;
5+
grid-template-columns: minmax(0, 1fr);
6+
flex-wrap: wrap;
7+
gap: 1rem;
8+
align-items: center;
49
}
510

6-
@media (min-width: 768px) {
11+
@media (min-width: 48rem) {
712
.hero {
8-
padding-right: 400px;
9-
background-size: 360px;
10-
background-repeat: no-repeat;
11-
background-position: right;
13+
grid-template-columns: minmax(0, 1fr) 16rem;
14+
}
15+
16+
.hero img {
17+
order: 2;
18+
}
19+
}
20+
21+
@media (min-width: 60rem) {
22+
.hero {
23+
grid-template-columns: minmax(0, 1fr) 24rem;
1224
}
1325
}
1426

@@ -23,3 +35,8 @@
2335
text-wrap: balance;
2436
max-width: 600px;
2537
}
38+
39+
.hero img {
40+
width: 100%;
41+
margin: auto;
42+
}

_components/Hero.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
export default function (props: { children: any; bgImage: string }) {
1+
import { ComponentChildren } from "npm:preact";
2+
3+
export default function (props: { children: ComponentChildren }) {
24
return (
3-
<div className="hero" style={{ backgroundImage: `url(${props.bgImage})` }}>
5+
<div className="hero">
46
{props.children}
57
</div>
68
);

_components/Navigation.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
height: 100%;
33
border-right: 1px solid hsl(var(--foreground-tertiary));
44
font-size: 0.8rem;
5-
background-color: hsl(var(--background-primary));
5+
/* background-color: hsl(var(--background-primary)); */
66
overflow-y: auto;
77
scrollbar-width: thin;
88
z-index: 3;
9+
background-color: hsl(var(--background-primary));
910
}
1011

1112
@media (max-width: 1023px) {
@@ -16,7 +17,6 @@
1617
max-width: 650px;
1718
transition: transform 200ms ease-in-out;
1819
transform: translateX(-100%);
19-
background-color: hsl(var(--background-primary));
2020
z-index: 11;
2121
height: calc(100vh - 4rem);
2222
}
@@ -33,22 +33,22 @@
3333
}
3434

3535
body:has(.refheader) .nav {
36-
top: 7rem;
37-
height: calc(100vh - 7rem);
36+
top: 6.5rem;
37+
height: calc(100vh - 6.5rem);
3838
}
3939
}
4040

4141
@media (min-width: 1024px) {
4242
.nav {
4343
position: sticky;
44-
top: 4rem;
44+
top: calc(4rem - 1px);
4545
height: calc(100vh - 4rem);
4646
overflow-y: auto;
4747
min-width: 330px;
4848
}
4949

5050
body:has(.refheader) .nav {
51-
top: 7rem;
52-
height: calc(100vh - 7rem);
51+
top: calc(6.5rem - 1px);
52+
height: calc(100vh - 6.5rem);
5353
}
5454
}

_components/RefHeader.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
background-color: hsl(var(--background-secondary));
88
border-bottom: 1px solid hsl(var(--foreground-tertiary));
99
z-index: 5;
10-
height: 3rem;
10+
height: 2.5rem;
1111
}
1212

1313
.refheader-link {
1414
white-space: nowrap;
15-
font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
15+
font-size: clamp(0.875rem, 1vw + 0.5rem, 0.75rem);
1616
}
1717

1818
.refheader-link[data-active="true"] {
@@ -29,7 +29,7 @@
2929

3030
.refcrumbs {
3131
position: sticky;
32-
top: 6.5rem;
32+
top: calc(6.5rem - 1px);
3333
width: 100%;
3434
padding: 1rem;
3535
padding-left: 0 !important;

0 commit comments

Comments
 (0)