mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 14:16:50 +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>
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Pattern from '../constants/Pattern';
|
||||
import slug from '../helpers/slug';
|
||||
import CoverLoader from '../loaders/CoverLoader';
|
||||
import './coverCard.css';
|
||||
|
||||
interface CoverCardProps {
|
||||
pattern: Pattern;
|
||||
@@ -18,25 +19,10 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
return (
|
||||
<Link
|
||||
to={`/patterns/${slug(pattern)}`}
|
||||
className='w-1/2 sm:w-1/4 md:w-1/5 lg:w-1/6'
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
padding: '16px',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
className="cover"
|
||||
>
|
||||
<CoverLoader pattern={pattern} />
|
||||
<h4
|
||||
className='font-normal'
|
||||
style={{
|
||||
margin: 0,
|
||||
paddingTop: '12px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<h4 className="cover__name">
|
||||
{pattern}
|
||||
</h4>
|
||||
</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
|
||||
className='xl:border-t xl:border-l xl:border-r xl:border-gray-400'
|
||||
style={{
|
||||
marginTop: '64px',
|
||||
}}
|
||||
>
|
||||
<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 className="container">
|
||||
<div className="home__features">
|
||||
<div className="home__features-feature">
|
||||
<div className="home__features-title">Zero Dependencies</div>
|
||||
</div>
|
||||
|
||||
<Ad />
|
||||
|
||||
<div
|
||||
className="hljs"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
fontSize: '16px',
|
||||
justifyContent: 'center',
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
<ul style={{ listStyleType: 'none', margin: 0, padding: 0, width: '300px' }}>
|
||||
<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 className="home__features-feature">
|
||||
<div className="home__features-title">No Frameworks</div>
|
||||
</div>
|
||||
<div className="home__features-feature">
|
||||
<div className="home__features-title">No CSS Hacks</div>
|
||||
</div>
|
||||
<div className="home__features-feature">
|
||||
<div className="home__features-title">Real Use Cases</div>
|
||||
</div>
|
||||
<div className="home__features-feature">
|
||||
<div className="home__features-title">Good Practices</div>
|
||||
</div>
|
||||
<div className="home__features-feature">
|
||||
<div className="home__features-title">Accessibility</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section style={{ height: '1000px', overflow: 'hidden', position: 'relative' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
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>
|
||||
<section className="home__patterns">
|
||||
<div className="home__patterns-overlay">
|
||||
<div className="home__patterns-heading">{numPatterns} patterns</div>
|
||||
<Link to="/patterns" className="home__patterns-explore">Explore the collection</Link>
|
||||
</div>
|
||||
<div
|
||||
className="home-cards"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
opacity: '0.4',
|
||||
padding: '32px 16px',
|
||||
}}
|
||||
>
|
||||
<div className="home__patterns-content">
|
||||
<CoverCard pattern={Pattern.HolyGrail} />
|
||||
<CoverCard pattern={Pattern.Sidebar} />
|
||||
<CoverCard pattern={Pattern.SplitScreen} />
|
||||
|
||||
@@ -25,15 +25,75 @@
|
||||
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;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
opacity: 0.4;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
@keyframes slide{
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-40rem);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -500px, 0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user