Skip to content

Commit

Permalink
make header more responsive #1
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfenner
mfenner committed Nov 23, 2021
1 parent 88218bb commit f55791d
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 27 deletions.
2 changes: 1 addition & 1 deletion components/Authors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
export default function Authors({ authors, pagination }) {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-8">
<div className="max-w-7xl mx-auto py-2 md:py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-8">
<div className="space-y-8 sm:space-y-12">
<div className="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
Expand Down
90 changes: 65 additions & 25 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,14 @@ export default function Navbar({ tags, tag }) {
</div>
</div> */}
<nav
className="py-6 space-x-6 font-semibold lg:block"
className="py-6 pl-14 lg:pl-0 space-x-2 lg:space-x-6 font-semibold lg:block"
aria-label="Global"
>
<Link href="/pages/about" passHref>
<a
key="About"
href="dummy"
className="text-force-blue border-b-0"
className="text-force-blue border-b-0 invisible md:visible"
>
About
</a>
Expand All @@ -76,7 +76,7 @@ export default function Navbar({ tags, tag }) {
<a
key="Authors"
href="dummy"
className="text-force-blue border-b-0"
className="text-force-blue border-b-0 invisible md:visible"
>
Authors
</a>
Expand All @@ -85,7 +85,7 @@ export default function Navbar({ tags, tag }) {
<a
key="Author Guidelines"
href="dummy"
className="text-force-blue border-b-0"
className="text-force-blue border-b-0 invisible md:visible"
>
Author Guidelines
</a>
Expand All @@ -94,7 +94,7 @@ export default function Navbar({ tags, tag }) {
<a
key="Upstream Community"
href="dummy"
className="text-force-blue border-b-0"
className="text-force-blue border-b-0 invisible lg:visible"
>
Upstream Community
</a>
Expand All @@ -103,7 +103,7 @@ export default function Navbar({ tags, tag }) {
<a
key="Code of Conduct"
href="dummy"
className="text-force-blue border-b-0"
className="text-force-blue border-b-0 invisible lg:visible"
>
Code of Conduct
</a>
Expand All @@ -123,25 +123,65 @@ export default function Navbar({ tags, tag }) {
</div>
</div>
<Disclosure.Panel as="nav" className="lg:hidden" aria-label="Global">
{tags && (
<div className="pt-2 pb-3 px-2 space-y-1">
{tags.map((item) => (
<a
key={item.name}
href={"/categories/" + item.slug}
className={classNames(
item.slug == tag.slug
? "text-gray-600 font-semibold"
: "text-blue-400 hover:text-green-500",
"block py-2 px-3 text-base font-medium border-b-0"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</a>
))}
</div>
)}
<div className="pt-2 pb-3 px-6 space-y-1">
<ul className="mt-1 list-none">
<li>
<Link href="/pages/about" passHref>
<a
key="About"
href="dummy"
className="text-force-blue border-b-0 md:hidden"
>
About
</a>
</Link>
</li>
<li>
<Link href="/authors" passHref>
<a
key="Authors"
href="dummy"
className="text-force-blue border-b-0 md:hidden"
>
Authors
</a>
</Link>
</li>
<li>
<Link href="/pages/author-guidelines" passHref>
<a
key="Author Guidelines"
href="dummy"
className="text-force-blue border-b-0 md:hidden"
>
Author Guidelines
</a>
</Link>
</li>
<li>
<Link href="/pages/upstream-community" passHref>
<a
key="Upstream Community"
href="dummy"
className="text-force-blue border-b-0 lg:hidden"
>
Upstream Community
</a>
</Link>
</li>
<li>
<Link href="/pages/code-of-conduct" passHref>
<a
key="Code of Conduct"
href="dummy"
className="text-force-blue border-b-0 lg:hidden"
>
Code of Conduct
</a>
</Link>
</li>
</ul>
</div>
</Disclosure.Panel>
</>
)}
Expand Down
2 changes: 1 addition & 1 deletion components/Team.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const people = [
export default function Team() {
return (
<div className="bg-white">
<div className="container flex mx-auto py-12 px-16 max-w-7xl sm:px-6 lg:px-16">
<div className="container flex mx-auto py-2 md:py-12 px-8 md:px-16 max-w-7xl sm:px-6 lg:px-16">
<div className="space-y-12 lg:grid lg:gap-8 lg:space-y-0">
<div className="space-y-5 sm:space-y-4">
<h2 className="text-3xl font-extrabold text-force-blue">
Expand Down

1 comment on commit f55791d

@vercel
Copy link

@vercel vercel bot commented on f55791d Nov 23, 2021

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

Please sign in to comment.