Skip to content

Switch hover back to default; minor styles adjustment #2431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
josh-collinsworth merged 6 commits into from
Aug 8, 2025
Merged

Switch hover back to default; minor styles adjustment #2431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c52ade7
Switch hover back to default; minor styles adjustment
josh-collinsworth Aug 7, 2025
425f62f
Fix services page link color contrast
josh-collinsworth Aug 7, 2025
87ac90e
Fix items from docs meeting
josh-collinsworth Aug 7, 2025
ff7dacc
Fix missing alt attributes
josh-collinsworth Aug 7, 2025
0f46839
Fix missing meta description
josh-collinsworth Aug 7, 2025
ff3a2ba
Merge branch 'main' into joco/hover_fix
thisisjofrank Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions _components/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,15 +111,15 @@ export default function LandingPage() {
own? Check out our{" "}
<a
href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
class="text-primary hover:underline focus:underline"
class="text-primary underline"
>
GitHub repository
</a>.
</p>
<p>
<a
href="/runtime/contributing/examples/"
class="text-primary hover:underline focus:underline text-center mt-4 font-bold"
class="text-primary underline mt-4 font-bold"
>
Commit an example and we'll send you stickers!
</a>
Expand Down
2 changes: 1 addition & 1 deletion _components/SidebarNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ function SidebarCategoryHeading(props: {
isActive?: boolean;
}) {
return (
<h2 class="block uppercase py-2 pr-4 mt-4 text-foreground-secondary font-bold leading-none tracking-wide !border-0">
<h2 class="block uppercase py-2 pr-4 mt-4 text-foreground-secondary font-bold leading-[1.2] text-balance tracking-wide !border-0">
{props.title}
</h2>
);
Expand Down
2 changes: 2 additions & 0 deletions _components/ThemeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ export default function () {
<img
src="/img/light.svg"
class="w-full block -translate-y-full dark:translate-y-0 transition-transform duration-200 easing-[0.86,0,0.07,1]"
alt=""
Copy link
Collaborator

@thisisjofrank thisisjofrank Aug 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should there be some text in the alts? Does it matter?

Copy link
Contributor Author

@josh-collinsworth josh-collinsworth Aug 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's accessible text inside the button to describe its function already, so I don't think adding image descriptions here is probably beneficial. The empty alt just lets the images be ignored.

/>
<img
src="/img/dark.svg"
class="w-full block -translate-y-full dark:translate-y-0 transition-transform duration-200 easing-[0.86,0,0.07,1]"
alt=""
/>
<span class="sr-only">Toggle Theme</span>
</button>
Expand Down
2 changes: 2 additions & 0 deletions _includes/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export default function Layout(data: Lume.Data) {
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{deleteBackticks(data.title)}</title>
{data?.description &&
<meta name="description" content={data.description} />}
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<script>
Expand Down
16 changes: 7 additions & 9 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import "tailwindcss";

@theme {
@theme static {
Copy link
Contributor Author

@josh-collinsworth josh-collinsworth Aug 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ensures our default theme color variables are not tree-shaken. Adds a tiny bit of extra CSS to the final output, but lets you play with all the variables in the browser as needed.

image

--color-gray-50: #f5f5f5;
--color-gray-100: #e5eaea;
--color-gray-200: #d4d6d8;
Expand Down Expand Up @@ -40,7 +40,9 @@
--color-deploy-800: #002633;
--color-deploy-900: #001319;
--color-deploy-950: #000a0d;
}

@theme {
--color-code-1: #01c2ff;
--color-code-2: #00a341;
--color-code-3: #ae01ff;
Expand Down Expand Up @@ -80,6 +82,7 @@
}

@variant dark (&:where(.dark, .dark *));
@custom-variant hover (&:hover);
@custom-variant current (&:where([aria-current]));
@custom-variant sidebar-open (&:where([data-open=true]));

Expand Down Expand Up @@ -920,7 +923,7 @@
}

[data-services-page="true"] {
--color-primary: var(--color-deploy-300);
--color-primary: var(--color-deploy-500);
--color-header-highlight: var(--color-deploy-200);
}

Expand Down Expand Up @@ -1017,11 +1020,6 @@
@apply text-deploy-500 decoration-deploy-500/20 hover:decoration-deploy-500;
}

.learn-link {
Copy link
Contributor Author

@josh-collinsworth josh-collinsworth Aug 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are actually changes that got missed from a separate PR but that have no visible effect.

We don't need the !s anymore now that we've got layers, and the .learn-link class isn't in the markup anymore (since it's only rendered in one place, so it made more sense to just move the classes there instead of having a separate @apply block).

@apply flex dark:text-foreground-primary gap-3 items-center font-normal
underline underline-offset-4;
}

.help-link {
@apply text-purple-600 dark:text-purple-300 decoration-purple-600/20
dark:decoration-purple-300/20 dark:hover:decoration-purple-300
Expand Down Expand Up @@ -1650,12 +1648,12 @@
}

.runtime-cta {
@apply no-underline text-gray-900! bg-runtime-300 border-0
@apply no-underline! text-gray-900! bg-runtime-300 border-0
hover:bg-runtime-200;
}

.deploy-cta {
@apply no-underline text-gray-900!;
@apply no-underline! text-gray-900!;
@apply bg-deploy-300 rounded-full border-0 hover:bg-deploy-200;
}

Expand Down