Skip to content

Commit

Permalink
Visual updates
Browse files Browse the repository at this point in the history 
- Add more easily visible focus indication to toggle switches
- Stylize contributions section
- Touch up switch transitions and remove unneeded prefixes
  • Loading branch information
@josh-collinsworth
josh-collinsworth committed Dec 10, 2024
1 parent d1f7f4d commit a5f0950
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 108 deletions.
207 changes: 107 additions & 100 deletions examples/_pages/LandingPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ExampleIcon } from "../_components/ExampleIcon.tsx";
import { LearningList } from "../_components/LearningList.tsx";
import { sidebar } from "../_data.ts";
import { TutorialIcon } from "../_components/TutorialIcon.tsx";
import { ExampleIcon } from "../_components/ExampleIcon.tsx";
import { VideoIcon } from "../_components/VideoIcon.tsx";
import { sidebar } from "../_data.ts";

export default function LandingPage() {
const componentsPerSidebarItem = sidebar.map(
Expand All @@ -17,108 +17,115 @@ export default function LandingPage() {
);

return (
<main
id="content"
className="flex flex-col px-8 pt-6 md:pt-12 mt-4 md:items-center md:justify-center max-w-[1200px] mx-auto mb-48"
>
<div className="flex flex-col md:flex-row w-full mb-8 max-w-screen-xl justify-between hub-header">
<div className="max-w-prose mb-8">
<h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
Examples
</h1>
<p>
A collection of walkthrough tutorials, examples, videos and guides
to teach you about the Deno runtime and how to use it with your
favorite tools.
</p>
</div>
<div className="flex flex-col gap-1 md:ml-4">
<h2 className="text-xs font-semibold mb-1">
Filter by type
</h2>
<label for="example" className="flex gap-2 items-center">
<span className="switch">
<input
type="checkbox"
id="example"
value="Examples"
className="filter mr-2"
checked
/>
<span className="slider"></span>
</span>
<ExampleIcon />
<span>Examples</span>
</label>
<>
<main
id="content"
className="flex flex-col px-8 xl:px-0 pt-6 md:pt-12 mt-4 md:items-center md:justify-center max-w-[1200px] mx-auto mb-12"
>
<div className="flex flex-col md:flex-row w-full mb-8 max-w-screen-xl justify-between hub-header">
<div className="max-w-prose mb-8">
<h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
Examples
</h1>
<p>
A collection of walkthrough tutorials, examples, videos and guides
to teach you about the Deno runtime and how to use it with your
favorite tools.
</p>
</div>
<div className="flex flex-col gap-1 md:ml-4 mb-8">
<h2 className="text-xs font-semibold mb-1">
Filter by type
</h2>
<label for="example" className="flex gap-2 items-center">
<span className="switch">
<input
type="checkbox"
id="example"
value="Examples"
className="filter mr-2"
checked
/>
<span className="slider"></span>
</span>
<ExampleIcon />
<span>Examples</span>
</label>

<label for="tutorial" className="flex gap-2 items-center">
<span className="switch">
<input
type="checkbox"
id="tutorial"
value="Tutorials"
className="filter mr-2"
checked
/>
<span className="slider"></span>
</span>
<TutorialIcon />
<span>
Tutorials
</span>
</label>
<label for="tutorial" className="flex gap-2 items-center">
<span className="switch">
<input
type="checkbox"
id="tutorial"
value="Tutorials"
className="filter mr-2"
checked
/>
<span className="slider"></span>
</span>
<TutorialIcon />
<span>
Tutorials
</span>
</label>

<label for="video" className="flex gap-2 items-center">
<span className="switch">
<input
type="checkbox"
id="video"
value="Videos"
className="filter mr-2"
checked
/>
<span className="slider"></span>
</span>
<VideoIcon />
<span>
Videos
</span>
</label>
<label for="video" className="flex gap-2 items-center">
<span className="switch">
<input
type="checkbox"
id="video"
value="Videos"
className="filter mr-2"
checked
/>
<span className="slider"></span>
</span>
<VideoIcon />
<span>
Videos
</span>
</label>
</div>
</div>
</div>
<div className="unfiltered columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8">
{componentsPerSidebarItem}
</div>
<div className="fully-filtered">
<h2 class="text-2xl font-semibold sm:text-3xl md:text-4xl">
Oops! You've filtered everything
<div className="unfiltered columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8">
{componentsPerSidebarItem}
</div>
<div className="fully-filtered">
<h2 class="text-2xl font-semibold sm:text-3xl md:text-4xl">
Oops! You've filtered everything
</h2>
<p class="md:text-lg mt-4">
Maybe remove a filter to see some examples?
</p>
<img
src="/examples/tutorials/images/deno-educator.png"
alt="sad Deno with a grad cap"
/>
</div>
</main>
<aside class="px-8 xl:px-0 max-w-[1200px] mx-auto mb-24 space-y-4 border-t pt-8">
<h2 class="text-2xl md:text-3xl font-bold">
We welcome contributions!
</h2>
<p class="md:text-lg mt-4">
Maybe remove a filter to see some examples?
<p class="text-balance pt-4 mt-3">
Looking for an example that isn't here? Or want to add one of your
own? Check out our{" "}
<a
href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
class="text-primary hover:underline focus:underline"
>
GitHub repository
</a>.
</p>
<img
src="/examples/tutorials/images/deno-educator.png"
alt="sad Deno with a grad cap"
/>
</div>
<p class="max-w-prose mx-auto text-center pt-4 mt-3">
Need an example that isn't here? Or want to add one of your own?<br />
{" "}
We welcome contributions!{" "}
<br />You can request more examples, or add your own at our{" "}
<a
href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
class="text-primary hover:underline focus:underline"
>
GitHub repository
</a>
</p>
<a
href="/runtime/contributing/examples/"
class="text-primary hover:underline focus:underline text-center mt-4"
>
Commit an example and we'll send you some stickers!
</a>
</main>
<p>
<a
href="/runtime/contributing/examples/"
class="text-primary hover:underline focus:underline text-center mt-4 font-bold"
>
Commit an example and we'll send you stickers!
</a>
</p>
</aside>
</>
);
}
15 changes: 7 additions & 8 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,6 +658,11 @@ input[type="search"] {
padding-bottom: 0.3em;
}

label:has(.switch input:focus-visible) .slider {
outline: 2px solid var(--color-accent-fg);
outline-offset: 2px;
}

.switch {
position: relative;
width: 1.8rem;
Expand All @@ -679,8 +684,7 @@ input[type="search"] {
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
transition: background-color 0.2s;
border-radius: 1rem;
}

Expand All @@ -692,8 +696,7 @@ input[type="search"] {
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
transition: transform 0.2s cubic-bezier(0.86, 0, 0.07, 1);
border-radius: 50%;
}

Expand All @@ -705,10 +708,6 @@ input[type="search"] {
background-color: #2196f3;
}

.filter:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}

.filter:checked + .slider:before {
transform: translateX(calc(0.8rem));
}
Expand Down

0 comments on commit a5f0950

Please sign in to comment.