Skip to content

Commit ffd3989

Browse files
marvinhagemeistermarvinhagemeister
committed
docs: design updates
1 parent 713c85c commit ffd3989

File tree

7 files changed

+48
-30
lines changed

7 files changed

+48
-30
lines changed

‎www/components/DocsSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function SidebarCategory(props: {
1212
<li class="my-2 block">
1313
<a
1414
href={href}
15-
class="text-foreground-secondary hover:text-gray-600 aria-[current]:text-fresh-green aria-[current]:hover:underline font-bold"
15+
class="text-foreground-secondary hover:text-gray-600 dark:hover:text-green-300 aria-[current]:text-fresh-green dark:aria-[current]:text-green-300 aria-[current]:hover:underline font-bold"
1616
>
1717
{title}
1818
</a>
@@ -36,7 +36,7 @@ export function SidebarEntry(props: {
3636
<li class="py-[1px]">
3737
<a
3838
href={href}
39-
class="aria-[current]:text-fresh-green aria-[current]:border-green-600 aria-[current]:bg-fresh-green/5 border-l-4 border-transparent px-4 py-0.5 transition-colors hover:text-fresh-green/80 font-normal block"
39+
class="aria-[current]:text-fresh-green aria-[current]:border-green-600 dark:aria-[current]:text-green-300 aria-[current]:bg-fresh-green/5 dark:hover:text-green-300 border-l-4 border-transparent px-4 py-0.5 transition-colors hover:text-fresh-green/80 font-normal block"
4040
>
4141
{title}
4242
</a>

‎www/components/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function Footer(props: JSX.HTMLAttributes<HTMLElement>) {
2020
<footer
2121
class={`border-t-2 border-foreground-secondary/20 md:h-16 flex mt-16 justify-center md:mx-16 ${props.class}`}
2222
>
23-
<div class="flex flex-col sm:flex-row gap-4 justify-between items-center max-w-screen-xl mx-auto w-full sm:px-6 md:px-8 p-4">
23+
<div class="flex flex-col sm:flex-row gap-4 justify-between items-center max-w-screen-xl mx-auto w-full sm:px-6 md:px-8 p-4 text-base">
2424
<div class="text-foreground-secondary text-center">
2525
<span>© {new Date().getFullYear()} the Fresh authors</span>
2626
</div>

‎www/islands/TableOfContents.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
118118
<use href="/icons.svg#arrow-down" />
119119
</svg>
120120
</button>
121-
{isOpen && (
121+
{isOpen.value && (
122122
<div class="mt-2 pl-4 border-l border-foreground-primary/20 text-[13px] leading-7">
123123
<nav aria-labelledby="toc-outline-btn">
124124
<ul>
@@ -127,7 +127,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
127127
<li key={heading.id}>
128128
<a
129129
href={`#${heading.id}`}
130-
class="block truncatetext-gray-600"
130+
class="block truncatetext-gray-600 dark:text-gray-400"
131131
// deno-lint-ignore react-no-danger
132132
dangerouslySetInnerHTML={{ __html: heading.html }}
133133
/>
@@ -159,7 +159,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
159159
<li key={heading.id}>
160160
<a
161161
href={`#${heading.id}`}
162-
class="block truncate transition-colors text-gray-600 [&.active]:text-green-600"
162+
class="block truncate transition-colors text-gray-600 dark:text-gray-400 [&.active]:text-green-600 dark:[&.active]:text-green-300"
163163
onClick={() => {
164164
setActiveLink(
165165
ref.current!,

‎www/routes/docs/[...slug].tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,8 @@ export default define.page<typeof handler>(function DocsPage(props) {
148148
const { page } = props.data;
149149
const { html, headings } = renderMarkdown(page.markdown);
150150

151+
const isCanary = page.href.includes("/canary");
152+
151153
return (
152154
<div class="flex flex-col min-h-screen mx-auto max-w-screen-2xl">
153155
<Header title="docs" active="/docs" />
@@ -176,7 +178,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
176178
</label>
177179
</div>
178180
<nav class="flex-shrink-0 hidden lg:block lg:px-4 bg-white">
179-
<div class="fixed top-24 w-[17rem] flex overflow-hidden">
181+
<div class="fixed top-24 w-[17rem] flex overflow-hidden text-base">
180182
<div class="flex-1 h-[calc(100vh_-_6rem)] overflow-y-auto pb-8">
181183
<SearchButton class="mr-4 sm:mr-0" />
182184
<div class="mb-4 px-1">
@@ -200,6 +202,14 @@ export default define.page<typeof handler>(function DocsPage(props) {
200202
<TableOfContents headings={headings} />
201203

202204
<div class="lg:order-1 min-w-0 max-w-3xl w-full">
205+
{isCanary
206+
? (
207+
<div class="bg-[#F0900525] p-4 rounded text-base text-yellow-700 dark:text-yellow-500 mb-8">
208+
🚧 This documentation is work in progress and for an
209+
unreleased version of Fresh.
210+
</div>
211+
)
212+
: null}
203213
<h1 class="text-4xl text-foreground-primary tracking-tight font-bold md:mt-0 px-4 md:px-0 mb-4">
204214
{page.title}
205215
</h1>
@@ -221,7 +231,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
221231
<div class="px-4 md:px-0 flex justify-between my-6">
222232
<a
223233
href={`https://github.com/denoland/fresh/edit/main/${page.file}`}
224-
class="text-gray-700 dark:text-gray-200 text-md flex items-center bg-[#ebedf0] dark:bg-[#1e1f2a] px-4 py-2 rounded hover:bg-gray-200 dark:hover:bg-[#36394c] transition-colors"
234+
class="text-gray-700 dark:text-gray-200 text-md flex items-center bg-[#ebedf0] dark:bg-[#2c2d39] px-4 py-2 rounded hover:bg-gray-200 dark:hover:bg-[#36394c] transition-colors"
225235
target="_blank"
226236
rel="noopener noreferrer"
227237
>
@@ -298,7 +308,7 @@ function ForwardBackButtons(props: {
298308
<span class="text-sm text-gray-600 dark:text-gray-500">
299309
Previous page
300310
</span>
301-
<span class="text-green-600 font-medium">
311+
<span class="text-green-600 dark:text-green-400 font-medium">
302312
{prev.title}
303313
</span>
304314
</a>
@@ -313,7 +323,7 @@ function ForwardBackButtons(props: {
313323
<span class="text-sm text-gray-600 dark:text-gray-500">
314324
Next page
315325
</span>
316-
<span class="text-green-600 font-medium">
326+
<span class="text-green-600 dark:text-green-400 font-medium">
317327
{next.title}
318328
</span>
319329
</a>

‎www/static/markdown.css‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
--color-border-default: hsla(var(--foreground-secondary), 0.3);
2424
--color-border-muted: hsla(var(--foreground-secondary), 0.1);
2525
--color-neutral-muted: rgba(175, 184, 193, 0.2);
26-
--color-accent-fg: #0969da;
26+
--color-accent-fg: #02aa6f;
2727
--color-accent-emphasis: #0969da;
2828
--color-danger-fg: #cf222e;
2929

@@ -33,12 +33,12 @@
3333
}
3434

3535
html[data-theme="dark"] {
36-
--color-accent-fg: #3d96ff;
37-
--color-prettylights-syntax-keyword: #ee5b65;
38-
--color-prettylights-syntax-entity: #b291f0;
39-
--color-prettylights-syntax-constant: #448ce5;
36+
--color-accent-fg: #75eea1;
37+
--color-prettylights-syntax-keyword: #f86d76;
38+
--color-prettylights-syntax-entity: #b392f0;
39+
--color-prettylights-syntax-constant: #8fc0fb;
4040
--color-prettylights-syntax-entity-tag: #7cb78a;
41-
--color-prettylights-syntax-variable: #d18253;
41+
--color-prettylights-syntax-variable: #f7955c;
4242
--color-prettylights-syntax-markup-deleted-text: #ffebe9;
4343
--color-prettylights-syntax-markup-deleted-bg: #82071e;
4444
--color-prettylights-syntax-markup-inserted-text: #dafbe1;
@@ -52,7 +52,7 @@ html[data-theme="dark"] {
5252
.markdown-body {
5353
word-wrap: break-word;
5454
font-family: inherit;
55-
font-size: 1.125rem;
55+
font-size: 1rem;
5656
line-height: 1.75;
5757
}
5858
.markdown-body:before {
@@ -99,6 +99,10 @@ html[data-theme="dark"] {
9999
.markdown-body details {
100100
margin-bottom: 1rem;
101101
}
102+
.markdown-body ul,
103+
.markdown-body ol {
104+
margin-top: 1rem;
105+
}
102106
.markdown-body hr {
103107
height: 0.25em;
104108
background-color: var(--color-border-default);
@@ -209,9 +213,12 @@ html[data-theme="dark"] {
209213
border-bottom: 0;
210214
padding-bottom: 0;
211215
}
216+
.markdown-body strong {
217+
font-weight: 600;
218+
}
212219
.markdown-body ul,
213220
.markdown-body ol {
214-
padding-left: 2em;
221+
padding-left: 1em;
215222
}
216223
.markdown-body ul.no-list,
217224
.markdown-body ol.no-list {
@@ -431,7 +438,7 @@ html[data-theme="dark"] {
431438
border-radius: 6px;
432439
padding: 1.25rem 1.5rem;
433440
font-size: 85%;
434-
line-height: 1.45;
441+
line-height: 1.75;
435442
overflow: auto;
436443
}
437444
.markdown-body pre code,
@@ -514,7 +521,8 @@ html[data-theme="dark"] {
514521
}
515522
.markdown-body a {
516523
color: var(--color-accent-fg);
517-
text-decoration: none;
524+
text-decoration: underline;
525+
text-underline-offset: 2px;
518526
}
519527
.markdown-body a:hover {
520528
text-decoration: underline;
@@ -633,7 +641,6 @@ html[data-theme="dark"] {
633641
display: flex;
634642
align-items: center;
635643
font-size: 1rem;
636-
padding-bottom: 0.5rem;
637644
}
638645
.markdown-body .admonition .icon {
639646
display: inline-flex;
@@ -704,6 +711,8 @@ html[data-theme="dark"] .markdown-body .admonition.info {
704711
}
705712

706713
.markdown-body .fenced-code,
714+
.markdown-body ol,
715+
.markdown-body ul,
707716
.markdown-body h1,
708717
.markdown-body h2,
709718
.markdown-body h4,
@@ -788,9 +797,8 @@ ol.nested li:before {
788797
border-top-right-radius: 0 !important;
789798
}
790799
.fenced-code-title {
791-
font-family:
792-
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
793-
"Courier New", monospace;
800+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
801+
"Liberation Mono", "Courier New", monospace;
794802
font-size: 0.8125rem;
795803
line-height: 1;
796804
}

‎www/static/styles.css‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ html[data-theme="dark"]:root {
2121
--fresh: 50deg, 100%, 56%;
2222
--fresh-green: 142deg, 71%, 29%;
2323

24-
--background-primary: 216deg, 27.8%, 7.1%;
25-
--background-secondary: 216deg, 27.7%, 12%;
24+
--background-primary: 220deg, 11%, 11%;
25+
--background-secondary: 216deg, 19%, 18%;
2626
--background-tertiary: 216deg, 27.7%, 22%;
2727
--foreground-primary: 215deg, 17%, 99%;
28-
--foreground-secondary: 215deg, 17%, 71%;
28+
--foreground-secondary: 215deg, 17%, 83%;
2929
--foreground-tertiary: 215deg, 17%, 20%;
3030
--foreground-quaternary: 215deg, 17%, 10%;
3131

@@ -57,9 +57,8 @@ html[data-theme="dark"]:root {
5757
}
5858

5959
body {
60-
font-family:
61-
Fixel, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
62-
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
60+
font-family: Fixel, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
61+
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
6362
font-weight: 450;
6463
font-size: 1.125rem;
6564
line-height: 1.5;

‎www/tailwind.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Config } from "tailwindcss";
22
import plugin from "tailwindcss/plugin.js";
33

44
export default {
5+
darkMode: ["selector", '[data-theme="dark"]'],
56
content: [
67
"{routes,islands,components}/**/*.{ts,tsx}",
78
],

0 commit comments

Comments
 (0)