Focus ring
This commit is contained in:
parent
616228c997
commit
ec37a08214
GPG Key ID:
6D69CEEE4ABBCD82
|
|
@ -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
40
fresh.gen.ts
|
|
@ -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,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" />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue