mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 06:07:33 +02:00
Support smaller screens in home page
This commit is contained in:
Phuoc Nguyen
@@ -18,6 +18,7 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
return (
|
||||
<Link
|
||||
to={`/patterns/${slug(pattern)}`}
|
||||
className='w-1/2 md:w-1/5 lg:w-1/6'
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
@@ -25,7 +26,6 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
justifyContent: 'flex-start',
|
||||
padding: '16px',
|
||||
textDecoration: 'none',
|
||||
width: '16.666666666666668%',
|
||||
}}
|
||||
>
|
||||
<CoverLoader pattern={pattern} />
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<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>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
@@ -11,9 +11,8 @@ const Footer: React.FC<{}> = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className='xl:border-l xl:border-r xl:border-gray-400'
|
||||
style={{
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
padding: '32px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
@@ -24,14 +23,11 @@ const Footer: React.FC<{}> = () => {
|
||||
<SubscribeForm />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
}}
|
||||
className='md:flex xl:border-l xl:border-r xl:border-b xl:border-gray-400 xl:mb-16'
|
||||
>
|
||||
<div
|
||||
className='border-t border-gray-400 md:border-r'
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
fontSize: '16px',
|
||||
@@ -58,61 +54,61 @@ const Footer: React.FC<{}> = () => {
|
||||
padding: '0 8px 0 0',
|
||||
}}
|
||||
>
|
||||
.my-products
|
||||
.products
|
||||
</h3>
|
||||
{
|
||||
</li>
|
||||
<ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
|
||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div>css-layout,</div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
|
||||
/* You are here */
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<li>
|
||||
<a
|
||||
href="https://formvalidation.io"
|
||||
href="https://csslayout.io"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
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,
|
||||
</a>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
|
||||
/* A JS validation library */
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<li>
|
||||
<a
|
||||
href="https://blur.page"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
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,
|
||||
</a>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
|
||||
/* Chrome and Firefox extensions */
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<li>
|
||||
<a
|
||||
href="https://react-pdf-viewer.dev"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
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,
|
||||
</a>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
|
||||
/* A React component */
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<li>}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className='border-t border-gray-400'
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: '16px',
|
||||
@@ -148,6 +144,7 @@ const Footer: React.FC<{}> = () => {
|
||||
<div>twitter:</div>
|
||||
<a
|
||||
href="https://twitter.com/nghuuphuoc"
|
||||
rel="noopener noreferrer"
|
||||
style={{ marginLeft: 'auto', textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
>
|
||||
@@ -159,6 +156,7 @@ const Footer: React.FC<{}> = () => {
|
||||
<div>dev.to:</div>
|
||||
<a
|
||||
href="https://dev.to/phuocng"
|
||||
rel="noopener noreferrer"
|
||||
style={{ marginLeft: 'auto', textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
>
|
||||
@@ -170,6 +168,7 @@ const Footer: React.FC<{}> = () => {
|
||||
<div>email:</div>
|
||||
<a
|
||||
href="mailto: me@phuoc.ng"
|
||||
rel="noopener noreferrer"
|
||||
style={{ marginLeft: 'auto', textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
>
|
||||
@@ -181,6 +180,7 @@ const Footer: React.FC<{}> = () => {
|
||||
<div>github:</div>
|
||||
<a
|
||||
href="https://github.com/phuoc-ng/csslayout"
|
||||
rel="noopener noreferrer"
|
||||
style={{ marginLeft: 'auto', textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
@@ -16,7 +16,7 @@ const Layout: React.FC<{}> = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<Github />
|
||||
<div style={{ margin: '0 auto 64px auto', maxWidth: '1024px', position: 'relative' }}>
|
||||
<div style={{ margin: '0 auto', position: 'relative' }}>
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@@ -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" />
|
||||
</Helmet>
|
||||
<div
|
||||
className='xl:border-t xl:border-l xl:border-r xl:border-gray-400'
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderBottom: 'none',
|
||||
marginTop: '64px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<h1
|
||||
className='text-3xl md:text-4xl lg:text-5xl'
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '4px',
|
||||
color: '#FFF',
|
||||
fontSize: '36px',
|
||||
fontWeight: 600,
|
||||
left: '50%',
|
||||
lineHeight: 1.5,
|
||||
margin: 0,
|
||||
@@ -66,21 +64,21 @@ const HomePage = () => {
|
||||
a collection of popular layouts and patterns made with CSS
|
||||
</h2>
|
||||
|
||||
<div style={{ display: 'flex', lineHeight: 1.5 }}>
|
||||
<div style={{ flex: 1, padding: '24px'}} className="drop-cap">
|
||||
<div className='md:flex' style={{ lineHeight: 1.5 }}>
|
||||
<div style={{ flex: 1 }} className="drop-cap p-5">
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
Components, patterns and layouts are things you have to deal with everyday.
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '24px'}} className="drop-cap">
|
||||
<div style={{ flex: 1 }} className="drop-cap p-5">
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
So that I collect most popular layouts and patterns that can be built with pure CSS.
|
||||
</div>
|
||||
<div>They are powered by modern CSS features such as flexbox and CSS grid.</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '24px'}} className="drop-cap">
|
||||
<div style={{ flex: 1 }} className="drop-cap p-5">
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
Starting with the most basic part, you can customize easily for each specific need.
|
||||
</div>
|
||||
@@ -88,7 +86,7 @@ const HomePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ margin: '24px 0', textAlign: 'center' }}>
|
||||
<div className='flex justify-center' style={{ margin: '24px 0' }}>
|
||||
<ProductHuntBadge />
|
||||
</div>
|
||||
|
||||
@@ -175,8 +173,8 @@ const HomePage = () => {
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='text-5xl lg:text-6xl'
|
||||
style={{
|
||||
fontSize: '64px',
|
||||
fontWeight: 600,
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
@@ -185,11 +183,11 @@ const HomePage = () => {
|
||||
</div>
|
||||
<Link
|
||||
to="/patterns"
|
||||
className='text-2xl'
|
||||
style={{
|
||||
backgroundColor: '#00449e',
|
||||
borderRadius: '4px',
|
||||
color: '#FFF',
|
||||
fontSize: '24px',
|
||||
padding: '12px 16px',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
|
||||
@@ -16,9 +16,9 @@ const MadeOf: React.FC<{}> = () => {
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='text-2xl lg:text-4xl'
|
||||
style={{
|
||||
color: '#FFF',
|
||||
fontSize: '48px',
|
||||
fontWeight: 600,
|
||||
textAlign: 'center',
|
||||
textTransform: 'lowercase',
|
||||
@@ -42,30 +42,11 @@ this
|
||||
expect(r).is(superFastWebsite);
|
||||
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>
|
||||
{
|
||||
<span className="hljs-comment">
|
||||
<a
|
||||
href="https://github.com/phuoc-ng/csslayout"
|
||||
style={{ color: 'currentColor', textDecoration: 'none' }}
|
||||
>
|
||||
/* Give me 1 Github star here */
|
||||
</a>
|
||||
</span>
|
||||
}) 🎉
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user