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

Tweak breadcrumb

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-26 21:14:00 +07:00
parent 337ac44f9e
commit f6c37a24d0
3 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
client/layouts/DetailsLayout.tsx
View File

@@ -13,12 +13,64 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
return (
<Layout>
<div className="mv4">
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
<div
style={{
alignItems: 'center',
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
display: 'inline-flex',
margin: '32px 0',
}}
>
<Link
to="/"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.home
</Link>
<div>~</div>
<Link
to="/explore"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.explore
</Link>
</div>
<div className="bt br bl b--black-20 relative br4 br--top">
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
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>
{children}
</div>
</Layout>