mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-12 00:54:45 +02:00
Code Issues Releases Wiki Activity

The details page supports smaller screens

Browse Source
This commit is contained in:
Phuoc Nguyen
2020-02-04 11:55:49 +07:00
parent 6505d1e478
commit 8af4debb53
96 changed files with 107 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/layouts/DetailsLayout.tsx
View File

@@ -19,64 +19,31 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
return (
<Layout>
<div style={{ position: 'absolute', right: 0, top: '24px' }}>
<ProductHuntBadge />
</div>
<div
style={{
alignItems: 'center',
backgroundColor: '#00449E',
borderRadius: '4px',
color: '#FFF',
display: 'inline-flex',
margin: '32px 0',
}}
>
<div className='flex sm:text-2xl p-4 xl:pl-0'>
<Link
to="/"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.home
Home
</Link>
<div>~</div>
<span className='mx-2'>/</span>
<Link
to="/patterns"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.explore
Explore
</Link>
<span className='mx-2'>/</span>
<h1>{title}</h1>
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
position: 'relative',
}}
>
<h1
style={{
backgroundColor: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
>
{title}
</h1>
<div className='flex justify-center pb-5'>
<ProductHuntBadge />
</div>
<div className='xl:border-l xl:border-t xl:border-r xl:border-gray-400'>
{children}
</div>
</Layout>