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

Tweak home page

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-26 14:46:26 +07:00
parent b3634e12a5
commit e8fcd8ffed
2 changed files with 137 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/Explore.tsx
View File

@@ -12,18 +12,64 @@ const Home = () => {
return ( return (
<Layout> <Layout>
<div className="mv4"> <div style={{ margin: '32px 0' }}>
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link> <Link
to="/"
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
CSS Layout
</Link>
</div> </div>
<div className="bt br bl b--black-20 relative br4 br--top"> <div
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>Explore</h1> 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%)',
}}
>
Explore
</h1>
<h2 className="fw3 f3 tc lh-copy ma0 pa4">Here is the collection of patterns</h2> <h2
style={{
fontSize: '24px',
fontWeight: 300,
lineHeight: 1.5,
margin: 0,
padding: '32px 0 0 0',
textAlign: 'center',
}}
>
Here is the collection of patterns
</h2>
<section> <section>
<Heading title="Layouts" /> <Heading title="Layouts" />
<div className="flex flex-wrap items-start pa4"> <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
<CoverCard pattern={Pattern.HolyGrail} /> <CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} /> <CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SplitScreen} /> <CoverCard pattern={Pattern.SplitScreen} />
@@ -35,7 +81,7 @@ const Home = () => {
<section> <section>
<Heading title="Patterns" /> <Heading title="Patterns" />
<div className="flex flex-wrap items-start pa4"> <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
<CoverCard pattern={Pattern.Badge} /> <CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} /> <CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} /> <CoverCard pattern={Pattern.ButtonWithIcon} />

114
client/Home.tsx
View File

@@ -11,11 +11,31 @@ const Home = () => {
return ( return (
<Layout> <Layout>
<div className="mt5 bl br bt b--black-20 br4 br--top"> <div
<div className="relative"> style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '64px',
}}
>
<div style={{ position: 'relative' }}>
<h1 <h1
className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue" style={{
style={{ left: '50%', transform: 'translate(-50%, -50%)' }} backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
> >
CSS Layout CSS Layout
</h1> </h1>
@@ -33,32 +53,66 @@ const Home = () => {
a collection of popular layouts and patterns made with CSS a collection of popular layouts and patterns made with CSS
</h2> </h2>
<div className="w-30 center mb4"> <div
<ul className="ma0 pa0 list f4 lh-copy"> className="hljs"
<li className="flex items-center justify-between"> style={{
<div>Zero dependencies</div> alignItems: 'center',
<div>🎉</div> display: 'flex',
</li> fontFamily: '\'Source Code Pro\'',
<li className="flex items-center justify-between"> fontSize: '16px',
<div>No frameworks</div> justifyContent: 'center',
<div>🎉</div> lineHeight: 1.5,
</li> }}
<li className="flex items-center justify-between"> >
<div>No CSS hacks</div> <ul style={{ listStyleType: 'none', margin: 0, padding: 0, width: '300px' }}>
<div>🎉</div> <li><span className="hljs-selector-class">.awesome</span> &#123;</li>
</li> <ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<li className="flex items-center justify-between"> <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div>Real use cases</div> <div className="hljs-attribute">zero-dependencies:</div>
<div>🎉</div> <div>🎉</div>
</li> </li>
<li className="flex items-center justify-between"> <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div>Good practices</div> <div className="hljs-attribute">no-frameworks:</div>
<div className="br-pill ph2 white bg-dark-blue f6">soon</div> <div>🎉</div>
</li> </li>
<li className="flex items-center justify-between"> <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div>Accessibility</div> <div className="hljs-attribute">no-css-hacks:</div>
<div className="br-pill ph2 white bg-dark-blue f6">soon</div> <div>🎉</div>
</li> </li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">real-use-cases:</div>
<div>🎉</div>
</li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">good-practices:</div>
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '14px',
padding: '0 8px',
}}
>
soon
</div>
</li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">accessibility:</div>
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '14px',
padding: '0 8px',
}}
>
soon
</div>
</li>
</ul>
<li>&#125;</li>
</ul> </ul>
</div> </div>
</div> </div>