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

Support smaller screens in home page

Browse Source
This commit is contained in:
Phuoc Nguyen
2020-02-03 22:36:30 +07:00
parent 83971bbe79
commit b456c81391
6 changed files with 51 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/CoverCard.tsx
View File

@@ -18,6 +18,7 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
return ( return (
<Link <Link
to={`/patterns/${slug(pattern)}`} to={`/patterns/${slug(pattern)}`}
className='w-1/2 md:w-1/5 lg:w-1/6'
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
@@ -25,7 +26,6 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
justifyContent: 'flex-start', justifyContent: 'flex-start',
padding: '16px', padding: '16px',
textDecoration: 'none', textDecoration: 'none',
width: '16.666666666666668%',
}} }}
> >
<CoverLoader pattern={pattern} /> <CoverLoader pattern={pattern} />

2
client/index.html
View File

@@ -7,7 +7,7 @@
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
</head> </head>
<body style="width: 100%;"> <body style="width: 100%;">
<div id="root"></div> <div id="root" class="m-auto max-w-6xl"></div>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];

60
client/layouts/Footer.tsx
View File

@@ -11,9 +11,8 @@ const Footer: React.FC<{}> = () => {
return ( return (
<> <>
<div <div
className='xl:border-l xl:border-r xl:border-gray-400'
style={{ style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
padding: '32px', padding: '32px',
textAlign: 'center', textAlign: 'center',
}} }}
@@ -24,14 +23,11 @@ const Footer: React.FC<{}> = () => {
<SubscribeForm /> <SubscribeForm />
</div> </div>
<div <div
style={{ className='md:flex xl:border-l xl:border-r xl:border-b xl:border-gray-400 xl:mb-16'
border: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
}}
> >
<div <div
className='border-t border-gray-400 md:border-r'
style={{ style={{
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex', display: 'flex',
flex: 1, flex: 1,
fontSize: '16px', fontSize: '16px',
@@ -58,61 +54,61 @@ const Footer: React.FC<{}> = () => {
padding: '0 8px 0 0', padding: '0 8px 0 0',
}} }}
> >
.my-products .products
</h3> </h3>
&#123; &#123;
</li> </li>
<ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}> <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}> <li>
<div>css-layout,</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; You are here &#42;/
</div>
</li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<a <a
href="https://formvalidation.io" href="https://csslayout.io"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }} style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="FormValidation ~ best validation library for JavaScript" title="CSS Layout - a collection of popular layouts and patterns made with CSS"
>
css-layout,
</a>
</li>
<li>
<a
href="https://formvalidation.io"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
target="_blank"
title="FormValidation - the best validation library for JavaScript"
> >
form-validation, form-validation,
</a> </a>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; A JS validation library &#42;/
</div>
</li> </li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}> <li>
<a <a
href="https://blur.page" href="https://blur.page"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }} style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="BlurPage ~ a browser extension to hide sensitive element on page" title="BlurPage - a browser extension to hide sensitive element on page"
> >
blur-page, blur-page,
</a> </a>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; Chrome and Firefox extensions &#42;/
</div>
</li> </li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}> <li>
<a <a
href="https://react-pdf-viewer.dev" href="https://react-pdf-viewer.dev"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }} style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="React PDF Viewer ~ a PDF viewer made for React" title="React PDF Viewer - a PDF viewer made for React"
> >
react-pdf-viewer, react-pdf-viewer,
</a> </a>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; A React component &#42;/
</div>
</li> </li>
</ul> </ul>
<li>&#125;</li> <li>&#125;</li>
</ul> </ul>
</div> </div>
<div <div
className='border-t border-gray-400'
style={{ style={{
flex: 1, flex: 1,
fontSize: '16px', fontSize: '16px',
@@ -148,6 +144,7 @@ const Footer: React.FC<{}> = () => {
<div>twitter:</div> <div>twitter:</div>
<a <a
href="https://twitter.com/nghuuphuoc" href="https://twitter.com/nghuuphuoc"
rel="noopener noreferrer"
style={{ marginLeft: 'auto', textDecoration: 'none' }} style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank" target="_blank"
> >
@@ -159,6 +156,7 @@ const Footer: React.FC<{}> = () => {
<div>dev.to:</div> <div>dev.to:</div>
<a <a
href="https://dev.to/phuocng" href="https://dev.to/phuocng"
rel="noopener noreferrer"
style={{ marginLeft: 'auto', textDecoration: 'none' }} style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank" target="_blank"
> >
@@ -170,6 +168,7 @@ const Footer: React.FC<{}> = () => {
<div>email:</div> <div>email:</div>
<a <a
href="mailto: me@phuoc.ng" href="mailto: me@phuoc.ng"
rel="noopener noreferrer"
style={{ marginLeft: 'auto', textDecoration: 'none' }} style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank" target="_blank"
> >
@@ -181,6 +180,7 @@ const Footer: React.FC<{}> = () => {
<div>github:</div> <div>github:</div>
<a <a
href="https://github.com/phuoc-ng/csslayout" href="https://github.com/phuoc-ng/csslayout"
rel="noopener noreferrer"
style={{ marginLeft: 'auto', textDecoration: 'none' }} style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank" target="_blank"
> >

2
client/layouts/Layout.tsx
View File

@@ -16,7 +16,7 @@ const Layout: React.FC<{}> = ({ children }) => {
return ( return (
<> <>
<Github /> <Github />
<div style={{ margin: '0 auto 64px auto', maxWidth: '1024px', position: 'relative' }}> <div style={{ margin: '0 auto', position: 'relative' }}>
{children} {children}
<Footer /> <Footer />
</div> </div>

20
client/pages/HomePage.tsx
View File

@@ -27,20 +27,18 @@ const HomePage = () => {
<meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" /> <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
</Helmet> </Helmet>
<div <div
className='xl:border-t xl:border-l xl:border-r xl:border-gray-400'
style={{ style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottom: 'none',
marginTop: '64px', marginTop: '64px',
}} }}
> >
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
<h1 <h1
className='text-3xl md:text-4xl lg:text-5xl'
style={{ style={{
backgroundColor: '#00449E', backgroundColor: '#00449E',
borderRadius: '4px', borderRadius: '4px',
color: '#FFF', color: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%', left: '50%',
lineHeight: 1.5, lineHeight: 1.5,
margin: 0, margin: 0,
@@ -66,21 +64,21 @@ const HomePage = () => {
a collection of popular layouts and patterns made with CSS a collection of popular layouts and patterns made with CSS
</h2> </h2>
<div style={{ display: 'flex', lineHeight: 1.5 }}> <div className='md:flex' style={{ lineHeight: 1.5 }}>
<div style={{ flex: 1, padding: '24px'}} className="drop-cap"> <div style={{ flex: 1 }} className="drop-cap p-5">
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '16px' }}>
Components, patterns and layouts are things you have to deal with everyday. Components, patterns and layouts are things you have to deal with everyday.
</div> </div>
<div>There are a lot of CSS frameworks that provide rich set of layouts and patterns, <div>There are a lot of CSS frameworks that provide rich set of layouts and patterns,
but I usually don't want to include all of them in my project.</div> but I usually don't want to include all of them in my project.</div>
</div> </div>
<div style={{ flex: 1, padding: '24px'}} className="drop-cap"> <div style={{ flex: 1 }} className="drop-cap p-5">
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '16px' }}>
So that I collect most popular layouts and patterns that can be built with pure CSS. So that I collect most popular layouts and patterns that can be built with pure CSS.
</div> </div>
<div>They are powered by modern CSS features such as flexbox and CSS grid.</div> <div>They are powered by modern CSS features such as flexbox and CSS grid.</div>
</div> </div>
<div style={{ flex: 1, padding: '24px'}} className="drop-cap"> <div style={{ flex: 1 }} className="drop-cap p-5">
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '16px' }}>
Starting with the most basic part, you can customize easily for each specific need. Starting with the most basic part, you can customize easily for each specific need.
</div> </div>
@@ -88,7 +86,7 @@ const HomePage = () => {
</div> </div>
</div> </div>
<div style={{ margin: '24px 0', textAlign: 'center' }}> <div className='flex justify-center' style={{ margin: '24px 0' }}>
<ProductHuntBadge /> <ProductHuntBadge />
</div> </div>
@@ -175,8 +173,8 @@ const HomePage = () => {
}} }}
> >
<div <div
className='text-5xl lg:text-6xl'
style={{ style={{
fontSize: '64px',
fontWeight: 600, fontWeight: 600,
marginBottom: '16px', marginBottom: '16px',
}} }}
@@ -185,11 +183,11 @@ const HomePage = () => {
</div> </div>
<Link <Link
to="/patterns" to="/patterns"
className='text-2xl'
style={{ style={{
backgroundColor: '#00449e', backgroundColor: '#00449e',
borderRadius: '4px', borderRadius: '4px',
color: '#FFF', color: '#FFF',
fontSize: '24px',
padding: '12px 16px', padding: '12px 16px',
textDecoration: 'none', textDecoration: 'none',
}} }}

37
client/pages/MadeOf.tsx
View File

@@ -16,9 +16,9 @@ const MadeOf: React.FC<{}> = () => {
}} }}
> >
<div <div
className='text-2xl lg:text-4xl'
style={{ style={{
color: '#FFF', color: '#FFF',
fontSize: '48px',
fontWeight: 600, fontWeight: 600,
textAlign: 'center', textAlign: 'center',
textTransform: 'lowercase', textTransform: 'lowercase',
@@ -32,40 +32,21 @@ const MadeOf: React.FC<{}> = () => {
code={` code={`
this this
.madeWith([react,typescript]) .madeWith([react,typescript])
.then((r) => lint(r)) /* tslint */ .then((r) => lint(r)) /* tslint */
.then((r) => lazyLoad(r)) /* @loadable/component */ .then((r) => lazyLoad(r)) /* @loadable/component */
.then((r) => optimizeAndBundle(r)) /* webpack */ .then((r) => optimizeAndBundle(r)) /* webpack */
.then((r) => exportHtml(r)) /* react-snap */ .then((r) => exportHtml(r)) /* react-snap */
.then((r) => deploy(r)) /* Netlify */ .then((r) => deploy(r)) /* Netlify */
.then((r) => { .then((r) => {
expect(r).is(scalableCode); expect(r).is(scalableCode);
expect(r).is(superFastWebsite); expect(r).is(superFastWebsite);
expect(r).is(seoFriendly); expect(r).is(seoFriendly);
}) })
.finall(() => {
/* Give me 1 Github star 🎉 */
});
`} `}
/> />
<div
className="hljs"
style={{
lineHeight: 1.5,
listStyleType: 'none',
marginTop: '-16px',
paddingLeft: '40px',
}}
>
.finally(
<span className="hljs-function"><span className="hljs-params">()</span> => </span>
&#123;
<span className="hljs-comment">
<a
href="https://github.com/phuoc-ng/csslayout"
style={{ color: 'currentColor', textDecoration: 'none' }}
>
&#47;* Give me 1 Github star here */
</a>
</span>
}) 🎉
</div>
</div> </div>
</div> </div>
); );