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
Show stats 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'
}`}
>

3
jsconfig.json
View file

@ -6,7 +6,8 @@
"@/data/*": ["data/*"],
"@/layouts/*": ["layouts/*"],
"@/lib/*": ["lib/*"],
"@/css/*": ["css/*"]
"@/css/*": ["css/*"],
"@/static/*": ["public/static/*"]
}
}
}

2
pages/404.tsx
View file

@ -14,7 +14,7 @@ export default function FourZeroFour() {
</p>
<p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
<Link href="/">
<button className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500">
<button className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-primary-600 px-4 py-2 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">
Back to homepage
</button>
</Link>

4
tailwind.config.js
View file

@ -32,10 +32,10 @@ module.exports = {
sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
},
colors: {
primary: colors.blueGray,
primary: colors.blue,
//@ts-ignore
gray: colors.neutral, // TODO: Remove ts-ignore after tw types gets updated to v3
blueGray: {
blue: {
DEFAULT: '#7AB5C4',
50: '#F9FCFC',
100: '#EBF4F6',

3
tsconfig.json
View file

@ -20,7 +20,8 @@
"@/data/*": ["data/*"],
"@/layouts/*": ["layouts/*"],
"@/lib/*": ["lib/*"],
"@/css/*": ["css/*"]
"@/css/*": ["css/*"],
"@/static/*": ["public/static/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],