Skip to content

Commit

Permalink
Typographic and layout fixes (#722)
Browse files Browse the repository at this point in the history
  • Loading branch information
@josh-collinsworth
josh-collinsworth authored Aug 20, 2024
1 parent 23dd886 commit 8a04c5b
Show file tree
Hide file tree
Showing 7 changed files with 93 additions and 112 deletions.
15 changes: 0 additions & 15 deletions _components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,21 +122,6 @@ export default function Footer() {
href={item.to ?? item.href}
>
{item.label}
{item.href && (
<svg
width="13.5"
height="13.5"
aria-hidden="true"
viewBox="0 0 24 24"
class="inline ml-2"
>
<path
fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
>
</path>
</svg>
)}
</a>
</li>
))}
Expand Down
23 changes: 16 additions & 7 deletions _components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Sidebar(
) {
return (
<nav
class="pt-2 pb-8 p-2 pr-0 overflow-y-auto h-[calc(100%-2rem)]"
class="p-2 pr-0 overflow-y-auto"
style={{ scrollbarGutter: "stable", scrollbarWidth: "thin" }}
>
<ul>
Expand All @@ -31,15 +31,24 @@ export default function Sidebar(
function SidebarSection(
props: { section: SidebarSection_; search: Searcher; url: string },
) {
const sluggify = (str: string) =>
str.replaceAll(/[\s_]/g, "-")
.replaceAll(/[^a-zA-Z0-9-]/g, "")
.toLowerCase();
const slug = sluggify(props.section.title ?? "");
const categoryTitle = `sidebar-category-${slug}`;
return (
<li class="mb-4">
{props.section.title &&
(
<h3 class="border-b border-gray-200 uppercase pt-2 pb-0.5 mx-3 mt-4 mb-3 text-xs font-semibold text-gray-3">
<h2
id={categoryTitle}
class="border-b border-gray-200 pt-2 pb-0.5 mx-3 mt-4 mb-3 text-sm font-semibold text-gray-3"
>
{props.section.title}
</h3>
</h2>
)}
<ul>
<ul aria-labelledby={categoryTitle}>
{props.section.items.map((item) => (
<li class="mx-2 mt-1">
{typeof item === "object" && "items" in item
Expand Down Expand Up @@ -115,8 +124,8 @@ function SidebarCategory(props: {

return (
<>
<div
class={LINK_CLASS + " flex justify-between items-center" +
<button
class={LINK_CLASS + " flex justify-between items-center w-full" +
(containsCurrent ? " !text-blue-500" : "")}
data-accordion-trigger
>
Expand All @@ -135,7 +144,7 @@ function SidebarCategory(props: {
>
</path>
</svg>
</div>
</button>
<ul
class={`ml-2 ${containsCurrent ? "" : "hidden"}`}
data-accordion-content
Expand Down
15 changes: 10 additions & 5 deletions _includes/doc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,21 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
return (
<>
<aside
class="lg:block absolute top-0 lg:top-16 bottom-0 -left-74 lg:left-0 sidebar-open:left-0 w-74 border-r border-gray-200 bg-white z-50 lg:z-0 transition-all"
class="flex flex-col absolute top-0 lg:top-16 bottom-0 -left-74 lg:left-0 sidebar-open:left-0 w-74 border-r border-gray-200 bg-white z-50 lg:z-0 transition-all"
id="sidebar"
data-open="false"
>
<div class="lg:hidden p-4 shadow-sm flex justify-between h-16">
<a class="flex items-center gap-3 mr-6" href="/">
<div class="block size-6">
<img src="/img/logo.svg" alt="Deno Docs" />
</div>
<b class="text-xl">Docs</b>
<img
class="block size-6"
src="/img/logo.svg"
alt=""
aria-hidden="true"
/>
<b class="text-xl">
<span class="sr-only">Deno</span> Docs
</b>
</a>
<button
type="button"
Expand Down
2 changes: 1 addition & 1 deletion _includes/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export default function Layout(props: Lume.Data) {
type="font/woff2"
crossOrigin="true"
/>
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/gfm.css" />
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/overrides.css" />
<script src="/orama-searchbox-1.0.0-rc47.js" defer></script>
<script type="module" src="/sidebar.client.js"></script>
Expand Down
13 changes: 9 additions & 4 deletions _includes/raw.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,15 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
>
<div class="p-4 shadow-sm flex justify-between h-16">
<a class="flex items-center gap-3 mr-6" href="/">
<div class="block size-6">
<img src="/img/logo.svg" alt="Deno Docs" />
</div>
<b class="text-xl">Docs</b>
<img
src="/img/logo.svg"
class="block size-6"
alt=""
aria-hidden="true"
/>
<b class="text-xl">
<span class="sr-only">Deno</span> Docs
</b>
</a>
<button
type="button"
Expand Down
35 changes: 0 additions & 35 deletions static/fonts/inter.css
View file

This file was deleted.

102 changes: 57 additions & 45 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,60 @@
@tailwind components;
@tailwind utilities;

@layer base {
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/inter/Inter-Italic.woff2") format("woff2");
}

@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2");
}
}

[id] {
scroll-margin-top: 4rem;
}

h1 {
letter-spacing: -0.025em;
}

:where(h2, h3) {
letter-spacing: -0.0125em;
}

.markdown-body {
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;

:where(h1, h2, h3) {
letter-spacing: -0.0125em;
}

:where(h2, h3, h4, h5, h6) {
.anchor-end {
opacity: 0;
transition: opacity 0.2s;
Expand All @@ -25,28 +69,28 @@
}
}

details {
& details {
@apply rounded border border-gray-1 py-4 px-4;

&[open] summary {
@apply pb-4 mb-4 border-b border-gray-00;
}

summary::marker {
& summary::marker {
@apply text-gray-2;
}
}
}

body:not(:has(.ddoc)) {
pre:has(code.highlight),
pre.highlight:has(code) {
& pre:has(code.highlight),
& pre.highlight:has(code) {
@apply p-8 max-sm:-mx-4;
@apply max-sm:rounded-none !important;
}

pre:has(code.highlight):hover + .copyButton,
pre.highlight:has(code):hover + .copyButton {
& pre:has(code.highlight):hover + .copyButton,
& pre.highlight:has(code):hover + .copyButton {
@apply block;
}

Expand All @@ -72,38 +116,6 @@ body:not(:has(.ddoc)) {
opacity: 1;
}

@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/inter/Inter-Italic.woff2") format("woff2");
}

@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2");
}

:root {
font-feature-settings: "cv05" on, "cv08" on, "cv09" on, "ss01" on, "ss08" on;
}
Expand Down Expand Up @@ -269,7 +281,7 @@ body:not(:has(.ddoc)) {
@apply border-r border-gray-000;
@apply pt-4 !important;

li:hover {
& li:hover {
@apply bg-blue-50 rounded-md !important;
> a {
@apply no-underline !important;
Expand Down Expand Up @@ -305,7 +317,7 @@ body:not(:has(.ddoc)) {
}

.markdown {
pre {
& pre {
@apply border-gray-000 !important;
}

Expand Down

0 comments on commit 8a04c5b

Please sign in to comment.