mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-08 07:07:15 +02:00
Tweak cover card
This commit is contained in:
Phuoc Nguyen
@@ -3,12 +3,13 @@
|
|||||||
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import * as React from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import Pattern from '../constants/Pattern';
|
import Pattern from '../constants/Pattern';
|
||||||
import slug from '../helpers/slug';
|
import slug from '../helpers/slug';
|
||||||
import CoverLoader from '../loaders/CoverLoader';
|
import CoverLoader from '../loaders/CoverLoader';
|
||||||
|
import './coverCard.css';
|
||||||
|
|
||||||
interface CoverCardProps {
|
interface CoverCardProps {
|
||||||
pattern: Pattern;
|
pattern: Pattern;
|
||||||
@@ -18,25 +19,10 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
|||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
to={`/patterns/${slug(pattern)}`}
|
to={`/patterns/${slug(pattern)}`}
|
||||||
className='w-1/2 sm:w-1/4 md:w-1/5 lg:w-1/6'
|
className="cover"
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'flex-start',
|
|
||||||
padding: '16px',
|
|
||||||
textDecoration: 'none',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<CoverLoader pattern={pattern} />
|
<CoverLoader pattern={pattern} />
|
||||||
<h4
|
<h4 className="cover__name">
|
||||||
className='font-normal'
|
|
||||||
style={{
|
|
||||||
margin: 0,
|
|
||||||
paddingTop: '12px',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{pattern}
|
{pattern}
|
||||||
</h4>
|
</h4>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
37
client/components/coverCard.css
Normal file
37
client/components/coverCard.css
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||||
|
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||||
|
*/
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
align-items: center;
|
||||||
|
color: var(--text-color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.cover__name {
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.cover {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.cover {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.cover {
|
||||||
|
width: 16.666666666666668%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -32,152 +32,34 @@ const HomePage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className="container">
|
||||||
className='xl:border-t xl:border-l xl:border-r xl:border-gray-400'
|
<div className="home__features">
|
||||||
style={{
|
<div className="home__features-feature">
|
||||||
marginTop: '64px',
|
<div className="home__features-title">Zero Dependencies</div>
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<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 }} 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 }} className="drop-cap p-5">
|
|
||||||
<div style={{ marginBottom: '16px' }}>
|
|
||||||
Starting with the most basic part, you can customize easily for each specific need.
|
|
||||||
</div>
|
|
||||||
<div>By composing them, you can have any possible layout that exists in the real life.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="home__features-feature">
|
||||||
<Ad />
|
<div className="home__features-title">No Frameworks</div>
|
||||||
|
</div>
|
||||||
<div
|
<div className="home__features-feature">
|
||||||
className="hljs"
|
<div className="home__features-title">No CSS Hacks</div>
|
||||||
style={{
|
</div>
|
||||||
alignItems: 'center',
|
<div className="home__features-feature">
|
||||||
display: 'flex',
|
<div className="home__features-title">Real Use Cases</div>
|
||||||
fontSize: '16px',
|
</div>
|
||||||
justifyContent: 'center',
|
<div className="home__features-feature">
|
||||||
lineHeight: 1.5,
|
<div className="home__features-title">Good Practices</div>
|
||||||
}}
|
</div>
|
||||||
>
|
<div className="home__features-feature">
|
||||||
<ul style={{ listStyleType: 'none', margin: 0, padding: 0, width: '300px' }}>
|
<div className="home__features-title">Accessibility</div>
|
||||||
<li><span className="hljs-selector-class">.awesome</span> {</li>
|
|
||||||
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
|
|
||||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<div className="hljs-attribute">zero-dependencies:</div>
|
|
||||||
<div>🎉;</div>
|
|
||||||
</li>
|
|
||||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<div className="hljs-attribute">no-frameworks:</div>
|
|
||||||
<div>🎉;</div>
|
|
||||||
</li>
|
|
||||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<div className="hljs-attribute">no-css-hacks:</div>
|
|
||||||
<div>🎉;</div>
|
|
||||||
</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' }}>
|
|
||||||
<div className="hljs-attribute">good-practices:</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#00449E',
|
|
||||||
borderRadius: '9999px',
|
|
||||||
color: '#FFF',
|
|
||||||
fontSize: '14px',
|
|
||||||
marginLeft: 'auto',
|
|
||||||
padding: '0 8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
soon
|
|
||||||
</div>
|
|
||||||
;
|
|
||||||
</li>
|
|
||||||
<li style={{ alignItems: 'center', display: 'flex' }}>
|
|
||||||
<div className="hljs-attribute">accessibility:</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#00449E',
|
|
||||||
borderRadius: '9999px',
|
|
||||||
color: '#FFF',
|
|
||||||
fontSize: '14px',
|
|
||||||
marginLeft: 'auto',
|
|
||||||
padding: '0 8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
soon
|
|
||||||
</div>
|
|
||||||
;
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<li>}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section style={{ height: '1000px', overflow: 'hidden', position: 'relative' }}>
|
<section className="home__patterns">
|
||||||
<div
|
<div className="home__patterns-overlay">
|
||||||
style={{
|
<div className="home__patterns-heading">{numPatterns} patterns</div>
|
||||||
alignItems: 'center',
|
<Link to="/patterns" className="home__patterns-explore">Explore the collection</Link>
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
width: '100%',
|
|
||||||
zIndex: 9999,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className='text-5xl lg:text-6xl'
|
|
||||||
style={{
|
|
||||||
fontWeight: 600,
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{numPatterns} patterns
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
to="/patterns"
|
|
||||||
className='text-2xl'
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#00449e',
|
|
||||||
borderRadius: '4px',
|
|
||||||
color: '#FFF',
|
|
||||||
padding: '12px 16px',
|
|
||||||
textDecoration: 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Explore the collection
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className="home__patterns-content">
|
||||||
className="home-cards"
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
justifyContent: 'center',
|
|
||||||
opacity: '0.4',
|
|
||||||
padding: '32px 16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CoverCard pattern={Pattern.HolyGrail} />
|
<CoverCard pattern={Pattern.HolyGrail} />
|
||||||
<CoverCard pattern={Pattern.Sidebar} />
|
<CoverCard pattern={Pattern.Sidebar} />
|
||||||
<CoverCard pattern={Pattern.SplitScreen} />
|
<CoverCard pattern={Pattern.SplitScreen} />
|
||||||
|
|||||||
@@ -25,15 +25,75 @@
|
|||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-cards {
|
.home__features {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 2.5rem auto;
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
.home__features-feature {
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
width: 33.333%;
|
||||||
|
}
|
||||||
|
.home__features-feature:not(:nth-child(3n)) {
|
||||||
|
border-right: 1px solid var(--text-color);
|
||||||
|
}
|
||||||
|
.home__features-feature:nth-child(-n+3) {
|
||||||
|
border-bottom: 1px solid var(--text-color);
|
||||||
|
}
|
||||||
|
.home__features-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__patterns {
|
||||||
|
height: 80rem;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.home__patterns-overlay {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.home__patterns-heading {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.home__patterns-explore {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 2rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__patterns-content {
|
||||||
animation: slide 40s linear infinite;
|
animation: slide 40s linear infinite;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0.4;
|
||||||
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide{
|
@keyframes slide{
|
||||||
0% {
|
0% {
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-40rem);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translate3d(0, -500px, 0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user