lytedev/ls-deno
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Focus ring

Browse source
This commit is contained in:
Daniel Flanagan 2022-10-01 14:34:07 -05:00
parent 616228c997
commit ec37a08214
Signed by untrusted user: lytedev-divvy
GPG key ID: 6D69CEEE4ABBCD82
5 changed files with 57 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/Page.tsx
View file

@ -9,12 +9,18 @@ export function Page(props: JSX.HTMLAttributes<HTMLDivElement>) {
<div class="relative min-h-screen flex flex-col">
<header class="flex justify-start items-center">
<nav class={`flex w-full drop-shadow-md ${HEADER_CLASSES}`}>
<a href="/" class={`${NAV_ITEM_CLASSES} text-black dark:text-white`}>
<a
tabIndex={10}
href="/"
class={`${NAV_ITEM_CLASSES} text-black dark:text-white`}
>
<h1 class="text-2xl">LyricScreen</h1>
</a>
<a href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
<a href="/register" class={NAV_ITEM_CLASSES}>Register</a>
<a href="/login" class={NAV_ITEM_CLASSES}>Login</a>
<a tabIndex={11} href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
<a tabIndex={12} href="/register" class={NAV_ITEM_CLASSES}>
Register
</a>
<a tabIndex={13} href="/login" class={NAV_ITEM_CLASSES}>Login</a>
</nav>
</header>
<main class="p-2">

40
fresh.gen.ts
View file

@ -2,26 +2,26 @@
// This file SHOULD be checked into source version control.
// This file is automatically updated during development when running `dev.ts`.
import config from "@/deno.json" assert { type: "json" };
import * as $0 from "@/routes/[name].tsx";
import * as $1 from "@/routes/_404.tsx";
import * as $2 from "@/routes/_500.tsx";
import * as $3 from "@/routes/_middleware.ts";
import * as $4 from "@/routes/about.tsx";
import * as $5 from "@/routes/api/joke.ts";
import * as $6 from "@/routes/api/random-uuid.ts";
import * as $7 from "@/routes/countdown.tsx";
import * as $8 from "@/routes/github/[username].tsx";
import * as $9 from "@/routes/index.tsx";
import * as $10 from "@/routes/login.tsx";
import * as $11 from "@/routes/note.tsx";
import * as $12 from "@/routes/note/[id].tsx";
import * as $13 from "@/routes/note/create.tsx";
import * as $14 from "@/routes/register.tsx";
import * as $15 from "@/routes/route-config-example.tsx";
import * as $16 from "@/routes/search.tsx";
import * as $$0 from "@/islands/Countdown.tsx";
import * as $$1 from "@/islands/Counter.tsx";
import config from "./deno.json" assert { type: "json" };
import * as $0 from "./routes/[name].tsx";
import * as $1 from "./routes/_404.tsx";
import * as $2 from "./routes/_500.tsx";
import * as $3 from "./routes/_middleware.ts";
import * as $4 from "./routes/about.tsx";
import * as $5 from "./routes/api/joke.ts";
import * as $6 from "./routes/api/random-uuid.ts";
import * as $7 from "./routes/countdown.tsx";
import * as $8 from "./routes/github/[username].tsx";
import * as $9 from "./routes/index.tsx";
import * as $10 from "./routes/login.tsx";
import * as $11 from "./routes/note.tsx";
import * as $12 from "./routes/note/[id].tsx";
import * as $13 from "./routes/note/create.tsx";
import * as $14 from "./routes/register.tsx";
import * as $15 from "./routes/route-config-example.tsx";
import * as $16 from "./routes/search.tsx";
import * as $$0 from "./islands/Countdown.tsx";
import * as $$1 from "./islands/Counter.tsx";
const manifest = {
routes: {

3
routes/login.tsx
View file

@ -3,6 +3,9 @@ import { Page } from "../components/Page.tsx";
export default function Login() {
return (
<Page>
<h1 class="text-4xl mb-4 outline-white">
Log in to your account
</h1>
<form class="flex flex-col max-w-lg" method="post">
<label for="username">Username</label>
<input type="text" name="username" />

1
routes/register.tsx
View file

@ -68,6 +68,7 @@ function RegistrationForm(props?: RegistrationError | null) {
console.log(props);
return (
<Page>
<h1 class="text-4xl mb-4">Register your account</h1>
{props != null &&
(
<p class="text-red-500">

33
twind.config.ts
View file

@ -2,23 +2,36 @@ import { Options } from "$fresh/plugins/twind.ts";
import { apply } from "twind";
import { css } from "twind/css";
const button = apply(
"bg-blue(400 500(hover:& focus:&) dark:(600 700(hover:& focus:&))) px-4 py-2 rounded cursor-pointer ring(focus:& current)",
);
const focusRing = apply`focus:outline-main`;
const input = apply(
"rounded bg-gray(200 300(hover:& focus:&) dark:(800 700(hover:& focus:&))) px-4 py-2 ring(focus:& current)",
);
const button = apply`${focusRing}
bg-blue(400 500(hover:& focus:&) dark:(600 700(hover:& focus:&))) px-4 py-2 rounded cursor-pointer
`;
const input = apply`
${focusRing} rounded bg-gray(200 300(hover:& focus:&) dark:(800 700(hover:& focus:&))) px-4 py-2`;
export default {
selfURL: import.meta.url,
theme: {
outline: {
main: ["2px solid currentColor", "1px"],
},
extend: {
spacing: {
128: "32rem",
144: "36rem",
},
},
},
preflight: (preflight) =>
css(preflight, {
body: apply("bg-white text-black dark:(bg-gray-900 text-white)"),
"body,html": apply("bg-white text-black dark:(bg-gray-900 text-white)"),
"::-moz-focus-inner": { border: 0 },
"body input, body textarea": input,
"body button, body input[type=submit]": button,
"body a": apply(
"text-blue(600 700(hover:&) dark:(400 300(hover:&))",
),
"body a":
apply`rounded ${focusRing} text-blue(600 700(hover:&) dark:(400 300(hover:&))`,
}),
} as Options;