mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +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

4
client/Explore.tsx
View File

@@ -23,7 +23,7 @@ const Home = () => {
textDecoration: 'none',
}}
>
CSS Layout
.home
</Link>
</div>
<div
@@ -59,7 +59,7 @@ const Home = () => {
fontWeight: 300,
lineHeight: 1.5,
margin: 0,
padding: '32px 0 0 0',
padding: '32px 0',
textAlign: 'center',
}}
>

2
client/components/CoverCard.tsx
View File

@@ -26,11 +26,11 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
<CoverLoader pattern={pattern} />
<h4
style={{
color: 'rgba(0, 0, 0, 0.3)',
fontSize: '16px',
fontWeight: 500,
margin: 0,
paddingTop: '12px',
textAlign: 'center',
}}
>
{pattern}

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>