Skip to content
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

Gently tweak new layout #105

Merged
merged 2 commits into from
May 30, 2024
Merged

Gently tweak new layout #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2df867
fix: give top nav links a bit more hit area and breathing room
akx May 30, 2024
c89b1b6
fix: disable inadvertent selection on COC checkbox
akx May 30, 2024
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
2 changes: 1 addition & 1 deletion components/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function Form() {
</button>
</div>

<label className="flex flex-wrap items-center justify-center gap-2 font-mono text-xxs sm:text-xs">
<label className="flex select-none flex-wrap items-center justify-center gap-2 font-mono text-xxs sm:text-xs">
<div className="relative h-5 w-5">
<input
type="checkbox"
Expand Down
35 changes: 10 additions & 25 deletions components/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import Image from 'next/image';
import Link from 'next/link';
import Link, { LinkProps } from 'next/link';
import Wrapper from './Wrapper';
import { useEffect, useRef, useState } from 'react';

Expand Down Expand Up @@ -47,30 +47,13 @@ export default function Nav() {
</svg>
</button>
<div
className={`${navOpen ? 'flex' : 'hidden'} text-shadow absolute right-6 top-16 flex-col gap-5 rounded-lg bg-black/80 p-5 text-xs uppercase tracking-widest text-pink-100 backdrop-blur-md lg:static lg:flex lg:flex-row lg:bg-transparent lg:backdrop-blur-none`}
className={`${navOpen ? 'flex' : 'hidden'} text-shadow absolute right-10 top-16 flex-col divide-white/20 rounded-lg bg-black/80 p-5 text-xs uppercase tracking-widest text-pink-100 backdrop-blur-md lg:static lg:flex lg:flex-row lg:divide-x lg:bg-transparent lg:backdrop-blur-none`}
Copy link
Contributor

Choose a reason for hiding this comment

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

:til: divide

Copy link
Member Author

Choose a reason for hiding this comment

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

... and conquer!

Yeah, I just spotted it pretty randomly in the TW docs, but it's been very useful.

>
<Link className="underline-offset-4 hover:underline" href="https://github.com/koodiklinikka">
GitHub
</Link>
<NavSeparator />
<Link className="underline-offset-4 hover:underline" href="https://koodiklinikka.slack.com">
Slack
</Link>
<NavSeparator />
<Link className="underline-offset-4 hover:underline" href="https://resources.koodiklinikka.fi">
Resources
</Link>
<NavSeparator />
<Link className="underline-offset-4 hover:underline" href="https://koodiklinikka.myspreadshop.fi/">
Shop
</Link>
<NavSeparator />
<Link
className="underline-offset-4 hover:underline"
href="https://github.com/koodiklinikka/code-of-conduct"
>
Code of Conduct
</Link>
<NavLink href="https://github.com/koodiklinikka">GitHub</NavLink>
<NavLink href="https://koodiklinikka.slack.com">Slack</NavLink>
<NavLink href="https://resources.koodiklinikka.fi">Resources</NavLink>
<NavLink href="https://koodiklinikka.myspreadshop.fi/">Shop</NavLink>
<NavLink href="https://github.com/koodiklinikka/code-of-conduct">Code of Conduct</NavLink>
</div>
</div>
</div>
Expand All @@ -79,4 +62,6 @@ export default function Nav() {
);
}

const NavSeparator = () => <div className="hidden opacity-20 lg:block">|</div>;
const NavLink = (props: React.PropsWithChildren<LinkProps>) => (
<Link className="py-1 underline-offset-4 hover:underline lg:px-6" {...props} />
);
Loading