cdransf/augurymetal.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design refinements

Browse source
This commit is contained in:
Cory Dransfeldt 2022-06-06 10:58:13 -07:00
parent 5780d0a31b
commit ca85e2923e
6 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/LayoutWrapper.tsx
View file

@ -1,3 +1,4 @@
import Image from '@/components/Image'
import headerNavLinks from '@/data/headerNavLinks'
import Link from './Link'
import SectionContainer from './SectionContainer'
@ -12,15 +13,23 @@ interface Props {
const LayoutWrapper = ({ children }: Props) => {
return (
<SectionContainer>
<Link href="/">
<Image
src="/static/images/header-banner.jpg"
alt="header banner"
width="1500px"
height="600px"
/>
</Link>
<div className="flex h-screen flex-col justify-between">
<header className="flex items-center justify-between py-6">
<header className="flex items-center justify-between">
<div className="flex items-center text-base sm:w-full">
<div className="hidden sm:flex sm:w-full sm:justify-around">
<div className="sm:border-y-1 sm:border-l-1 hidden border sm:flex sm:w-full sm:justify-between sm:border-r-0 sm:border-primary-900 sm:text-center">
{headerNavLinks.map((link) => (
<Link
key={link.title}
href={link.href}
className="p-1 font-bold text-gray-900 hover:text-primary-400 dark:text-gray-100 dark:hover:text-primary-500 sm:p-4"
className="focus:shadow-outline-blue sm:border-r-1 inline border border-transparent bg-primary-600 px-4 py-3 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-primary-700 focus:outline-none dark:hover:bg-primary-500 sm:grow sm:border-y-0 sm:border-l-0 sm:border-primary-900 sm:text-center"
>
{link.title}
</Link>

4
components/MobileNav.tsx
View file

@ -21,7 +21,7 @@ const MobileNav = () => {
<div className="sm:hidden">
<button
type="button"
className="ml-1 mr-1 h-8 w-8 rounded py-1"
className="mt-2 ml-1 mr-1 h-8 w-8 rounded py-1"
aria-label="Toggle Menu"
onClick={onToggleNav}
>
@ -47,7 +47,7 @@ const MobileNav = () => {
</svg>
</button>
<div
className={`fixed top-24 right-0 z-10 h-full w-full transform bg-gray-200 opacity-95 duration-300 ease-in-out dark:bg-gray-800 ${
className={`fixed right-0 z-10 h-full w-full transform bg-gray-200 opacity-95 duration-300 ease-in-out dark:bg-gray-800 ${
navShow ? 'translate-x-0' : 'translate-x-full'
}`}
>