Somewhat get a max-width container working

This commit is contained in:
Matthew Penner 2020-08-22 16:49:18 -06:00
parent 19176fb1b6
commit 1f850fac61
2 changed files with 24 additions and 7 deletions

View File

@ -10,14 +10,14 @@ import styled from 'styled-components/macro';
const Navigation = styled.div`
${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
& > div {
${tw`mx-auto w-full flex items-center`};
}
& #logo {
${tw`flex-1`};
& > a {
${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`};
}
@ -26,14 +26,14 @@ const Navigation = styled.div`
const RightNavigation = styled.div`
${tw`flex h-full items-center justify-center`};
& > a, & > .navigation-link {
${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
&:active, &:hover {
${tw`text-neutral-100 bg-black`};
}
&:active, &:hover, &.active {
box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
}
@ -52,6 +52,7 @@ export default () => {
{name}
</Link>
</div>
<RightNavigation>
<SearchContainer/>
<NavLink to={'/'} exact>
@ -60,11 +61,13 @@ export default () => {
<NavLink to={'/account'}>
<FontAwesomeIcon icon={faUserCircle}/>
</NavLink>
{rootAdmin &&
<a href={'/admin'} rel={'noreferrer'}>
<a href={'/admin'}>
<FontAwesomeIcon icon={faCogs}/>
</a>
}
<a href={'/auth/logout'}>
<FontAwesomeIcon icon={faSignOutAlt}/>
</a>

View File

@ -0,0 +1,14 @@
import React from 'react';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => {
return (
<AdminContentBlock>
<div>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Packs</h2>
<p css={tw`text-base text-neutral-400`}>All service packs available on the system.</p>
</div>
</AdminContentBlock>
);
};