From a5f09507422dba720608f0b884d893467b9d6143 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Tue, 10 Dec 2024 16:54:48 -0600
Subject: [PATCH] Visual updates

- Add more easily visible focus indication to toggle switches
- Stylize contributions section
- Touch up switch transitions and remove unneeded prefixes
---
 examples/_pages/LandingPage.tsx | 207 +++++++++++++++++---------------
 styles.css                      |  15 ++-
 2 files changed, 114 insertions(+), 108 deletions(-)

diff --git a/examples/_pages/LandingPage.tsx b/examples/_pages/LandingPage.tsx
index 357cba95..5d4eeca3 100644
--- a/examples/_pages/LandingPage.tsx
+++ b/examples/_pages/LandingPage.tsx
@@ -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(
@@ -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>
+    </>
   );
 }
diff --git a/styles.css b/styles.css
index 0173f93b..f62d9c18 100644
--- a/styles.css
+++ b/styles.css
@@ -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;
@@ -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;
 }
 
@@ -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%;
 }
 
@@ -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));
 }