mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-09 07:36:30 +02:00
phuoc-ng
GitHub
15
README.md
15
README.md
@@ -23,6 +23,19 @@ They are powered by modern CSS features such as flexbox and grid.
|
||||
They are great starting points and could be picked and customized easily for each specific need.
|
||||
By composing them, you can have any possible layout that exists in the real life.
|
||||
|
||||
The entire website is powered by
|
||||
|
||||
~~~ javascript
|
||||
this
|
||||
.madeWith([react,typescript])
|
||||
.then(r => lazyLoad(@loadable/component))
|
||||
.then(r => optimizeAndBundle(webpack))
|
||||
.then(r => exportHtml(react-snap))
|
||||
.then(r => deploy(Netlify))
|
||||
.assert([scalableCode, superFastWebsite, seoFriendly])
|
||||
.done(/* Give me 1 star */) 🎉
|
||||
~~~
|
||||
|
||||
## Running it on local
|
||||
|
||||
- Clone the project:
|
||||
@@ -44,7 +57,7 @@ $ npm install
|
||||
$ npm run dev-server
|
||||
~~~
|
||||
|
||||
Visit http://localhost:8080 to see it in action.
|
||||
Visit http://localhost:1234 to see it in action.
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@@ -12,18 +12,64 @@ const Home = () => {
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="mv4">
|
||||
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
|
||||
<div style={{ margin: '32px 0' }}>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
padding: '8px 16px',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
.home
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bt br bl b--black-20 relative br4 br--top">
|
||||
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>Explore</h1>
|
||||
<div
|
||||
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',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
Here is the collection of patterns
|
||||
</h2>
|
||||
|
||||
<section>
|
||||
<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.Sidebar} />
|
||||
<CoverCard pattern={Pattern.SplitScreen} />
|
||||
@@ -35,7 +81,7 @@ const Home = () => {
|
||||
<section>
|
||||
<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.Breadcrumb} />
|
||||
<CoverCard pattern={Pattern.ButtonWithIcon} />
|
||||
|
||||
125
client/Home.tsx
125
client/Home.tsx
@@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import './home.css';
|
||||
|
||||
import CoverCard from './components/CoverCard';
|
||||
import Pattern from './constants/Pattern';
|
||||
import useDocumentTitle from './hooks/useDocumentTitle';
|
||||
@@ -11,11 +13,31 @@ const Home = () => {
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="mt5 bl br bt b--black-20 br4 br--top">
|
||||
<div className="relative">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderBottomColor: 'transparent',
|
||||
borderTopLeftRadius: '16px',
|
||||
borderTopRightRadius: '16px',
|
||||
marginTop: '64px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<h1
|
||||
className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue"
|
||||
style={{ left: '50%', transform: 'translate(-50%, -50%)' }}
|
||||
style={{
|
||||
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
|
||||
</h1>
|
||||
@@ -33,37 +55,75 @@ const Home = () => {
|
||||
a collection of popular layouts and patterns made with CSS
|
||||
</h2>
|
||||
|
||||
<div className="w-30 center mb4">
|
||||
<ul className="ma0 pa0 list f4 lh-copy">
|
||||
<li className="flex items-center justify-between">
|
||||
<div>Zero dependencies</div>
|
||||
<div>🎉</div>
|
||||
<div
|
||||
className="hljs"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
fontFamily: '\'Source Code Pro\'',
|
||||
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 className="flex items-center justify-between">
|
||||
<div>No frameworks</div>
|
||||
<div>🎉</div>
|
||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div className="hljs-attribute">no-frameworks:</div>
|
||||
<div>🎉;</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between">
|
||||
<div>No CSS hacks</div>
|
||||
<div>🎉</div>
|
||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div className="hljs-attribute">no-css-hacks:</div>
|
||||
<div>🎉;</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between">
|
||||
<div>Real use cases</div>
|
||||
<div>🎉</div>
|
||||
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div className="hljs-attribute">real-use-cases:</div>
|
||||
<div>🎉;</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between">
|
||||
<div>Good practices</div>
|
||||
<div className="br-pill ph2 white bg-dark-blue f6">soon</div>
|
||||
<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 className="flex items-center justify-between">
|
||||
<div>Accessibility</div>
|
||||
<div className="br-pill ph2 white bg-dark-blue f6">soon</div>
|
||||
<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>
|
||||
|
||||
<section style={{ position: 'relative' }}>
|
||||
<section style={{ height: '900px', overflow: 'hidden', paddingBottom: '32px', position: 'relative' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -102,6 +162,7 @@ const Home = () => {
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className="home-cards"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
@@ -134,6 +195,20 @@ const Home = () => {
|
||||
<CoverCard pattern={Pattern.PropertyList} />
|
||||
<CoverCard pattern={Pattern.ProgressBar} />
|
||||
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
|
||||
<CoverCard pattern={Pattern.RadioSwitch} />
|
||||
<CoverCard pattern={Pattern.Rating} />
|
||||
<CoverCard pattern={Pattern.SameHeightColumns} />
|
||||
<CoverCard pattern={Pattern.SearchBox} />
|
||||
<CoverCard pattern={Pattern.Separator} />
|
||||
<CoverCard pattern={Pattern.SimpleGrid} />
|
||||
<CoverCard pattern={Pattern.Slider} />
|
||||
<CoverCard pattern={Pattern.SpinButton} />
|
||||
<CoverCard pattern={Pattern.SplitNavigation} />
|
||||
<CoverCard pattern={Pattern.StepperInput} />
|
||||
<CoverCard pattern={Pattern.Switch} />
|
||||
<CoverCard pattern={Pattern.Tab} />
|
||||
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
|
||||
<CoverCard pattern={Pattern.Wizard} />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -14,10 +14,27 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
<div className="pa1 w-20">
|
||||
<Link
|
||||
to={`/${slug(pattern)}`}
|
||||
className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<CoverLoader pattern={pattern} />
|
||||
<h4 className="f5 mv0 pt3 fw6">{pattern}</h4>
|
||||
<h4
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
margin: 0,
|
||||
paddingTop: '12px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{pattern}
|
||||
</h4>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,8 +6,24 @@ interface HeadingProps {
|
||||
|
||||
const Heading: React.FC<HeadingProps> = ({ title }) => {
|
||||
return (
|
||||
<div className="bt b--black-20 relative">
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>
|
||||
<div style={{ borderTop: '1px solid rgba(0, 0, 0, .2)', position: 'relative' }}>
|
||||
<h3
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
left: '32px',
|
||||
lineHeight: 1.5,
|
||||
margin: 0,
|
||||
padding: '0 8px',
|
||||
position: 'absolute',
|
||||
textTransform: 'uppercase',
|
||||
top: 0,
|
||||
transform: 'translate(0, -50%)',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
12
client/home.css
Normal file
12
client/home.css
Normal file
@@ -0,0 +1,12 @@
|
||||
.home-cards {
|
||||
animation: slide 60s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes slide{
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -600px, 0);
|
||||
}
|
||||
}
|
||||
@@ -13,12 +13,64 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="mv4">
|
||||
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'inline-flex',
|
||||
margin: '32px 0',
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
color: '#FFF',
|
||||
padding: '8px 16px',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
.home
|
||||
</Link>
|
||||
<div>~</div>
|
||||
<Link
|
||||
to="/explore"
|
||||
style={{
|
||||
color: '#FFF',
|
||||
padding: '8px 16px',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
.explore
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bt br bl b--black-20 relative br4 br--top">
|
||||
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
|
||||
|
||||
<div
|
||||
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%)',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
{children}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -4,106 +4,154 @@ import Heading from '../components/Heading';
|
||||
|
||||
const Footer: React.FC<{}> = () => {
|
||||
return (
|
||||
<div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
|
||||
<div className="br b--black-20" style={{ flex: 1 }}>
|
||||
<Heading title="Products" />
|
||||
|
||||
<ul className="list ma0 pa0 lh-copy fw5 pa4">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderBottomLeftRadius: '16px',
|
||||
borderBottomRightRadius: '16px',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
fontSize: '16px',
|
||||
lineHeight: 1.5,
|
||||
padding: '32px',
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.5,
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<h3
|
||||
className="hljs-selector-class"
|
||||
style={{
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
margin: 0,
|
||||
padding: '0 8px 0 0',
|
||||
}}
|
||||
>
|
||||
.my-products
|
||||
</h3>
|
||||
{
|
||||
</li>
|
||||
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
|
||||
<li>
|
||||
<a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
|
||||
FormValidation
|
||||
<a
|
||||
href="https://formvalidation.io"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="FormValidation ~ best validation library for JavaScript"
|
||||
>
|
||||
form-validation,
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
|
||||
BlurPage
|
||||
<a
|
||||
href="https://blur.page"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="BlurPage ~ a browser extension to hide sensitive element on page"
|
||||
>
|
||||
blur-page,
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank">
|
||||
React PDF Viewer
|
||||
<a
|
||||
href="https://react-pdf-viewer.dev"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="React PDF Viewer ~ a PDF viewer made for React"
|
||||
>
|
||||
react-pdf-viewer,
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<Heading title="About" />
|
||||
|
||||
<div className="pa4">
|
||||
<div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
|
||||
<ul className="list ma0 pa0 lh-copy fw5">
|
||||
<li className="mb1">
|
||||
<a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
|
||||
<span
|
||||
className="bg-black-40 br-pill flex items-center justify-center mr2"
|
||||
style={{ height: '24px', width: '24px' }}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
<div
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
fontSize: '16px',
|
||||
lineHeight: 1.5,
|
||||
padding: '32px',
|
||||
}}
|
||||
>
|
||||
<path d={`M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z`} />
|
||||
</svg>
|
||||
</span>
|
||||
<ul
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.5,
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<li style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<h3
|
||||
className="hljs-selector-class"
|
||||
style={{
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
margin: 0,
|
||||
padding: '0 8px 0 0',
|
||||
}}
|
||||
>
|
||||
.about
|
||||
</h3>
|
||||
{
|
||||
</li>
|
||||
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
|
||||
<li style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div>twitter:</div>
|
||||
<a
|
||||
href="https://twitter.com/nghuuphuoc"
|
||||
style={{ marginLeft: 'auto', textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
>
|
||||
@nghuuphuoc
|
||||
</a>
|
||||
<div>;</div>
|
||||
</li>
|
||||
<li className="mb1">
|
||||
<a href="mailto: me@phuoc.ng" className="link flex items-center">
|
||||
<span
|
||||
className="bg-black-40 br-pill flex items-center justify-center mr2"
|
||||
style={{ height: '24px', width: '24px' }}
|
||||
<li style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div>email:</div>
|
||||
<a
|
||||
href="mailto: me@phuoc.ng"
|
||||
style={{ marginLeft: 'auto', textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
}}
|
||||
>
|
||||
<path d={`M2.5,3.954h19c1.105,0,2,0.895,2,2v12c0,1.105-0.895,2-2,2h-19c-1.105,0-2-0.895-2-2v-12 C0.5,4.849,1.395,3.954,2.5,3.954z M22.911,4.536L12,13.454L1.089,4.536`} />
|
||||
</svg>
|
||||
</span>
|
||||
me@phuoc.ng
|
||||
</a>
|
||||
<div>;</div>
|
||||
</li>
|
||||
<li className="mb1">
|
||||
<a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center">
|
||||
<span
|
||||
className="bg-black-40 br-pill flex items-center justify-center mr2"
|
||||
style={{ height: '24px', width: '24px' }}
|
||||
<li style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div>github:</div>
|
||||
<a
|
||||
href="https://github.com/phuoc-ng/csslayout"
|
||||
style={{ marginLeft: 'auto', textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
}}
|
||||
>
|
||||
<path d={`M12,0.5C5.649,0.494,0.495,5.638,0.489,11.989c-0.005,4.959,3.17,9.362,7.876,10.925 c0.574,0.1,0.756-0.237,0.756-0.541c0-0.275,0.006-1.037,0-2c-3.2,0.694-3.861-1.515-3.861-1.515 c-0.211-0.695-0.664-1.292-1.276-1.682c-1.044-0.714,0.078-0.7,0.078-0.7c0.739,0.101,1.389,0.538,1.762,1.184 c0.65,1.185,2.139,1.619,3.324,0.968c0.007-0.004,0.015-0.008,0.022-0.012c0.053-0.581,0.312-1.125,0.73-1.532 c-2.553-0.292-5.238-1.278-5.238-5.686C4.646,10.255,5.07,9.15,5.847,8.312C5.495,7.32,5.535,6.232,5.959,5.269 c0,0,0.967-0.309,3.162,1.18c1.885-0.517,3.875-0.517,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18c0.424,0.963,0.465,2.051,0.114,3.043 c0.777,0.839,1.201,1.945,1.183,3.088c0,4.42-2.689,5.391-5.251,5.674c0.557,0.559,0.844,1.333,0.787,2.12v3.184 c0,0.307,0.186,0.647,0.77,0.536c6.028-2.002,9.291-8.51,7.29-14.538C21.369,3.667,16.962,0.492,12,0.5z`} />
|
||||
</svg>
|
||||
</span>
|
||||
github.com/phuoc-ng/csslayout
|
||||
</a>
|
||||
<div>;</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<li>}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,55 @@ const Layout: React.FC<{}> = ({ children }) => {
|
||||
<div className="mw8 mb5 center">
|
||||
{children}
|
||||
<Footer />
|
||||
<ul
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: 1.5,
|
||||
listStyleType: 'none',
|
||||
margin: '16px 0',
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li>this</li>
|
||||
<li style={{ marginLeft: '16px' }}>
|
||||
.madeWith([
|
||||
<a href="https://reactjs.org" style={{ textDecoration: 'none' }}>react</a>,
|
||||
<a href="https://www.typescriptlang.org" style={{ textDecoration: 'none' }}>typescript</a>
|
||||
])
|
||||
</li>
|
||||
<li style={{ marginLeft: '16px' }}>
|
||||
.then(r => lazyLoad(
|
||||
<a href="https://github.com/smooth-code/loadable-components" style={{ textDecoration: 'none' }}>
|
||||
@loadable/component
|
||||
</a>
|
||||
))
|
||||
</li>
|
||||
<li style={{ marginLeft: '16px' }}>
|
||||
.then(r => optimizeAndBundle(
|
||||
<a href="https://webpack.js.org" style={{ textDecoration: 'none' }}>webpack</a>
|
||||
))
|
||||
</li>
|
||||
<li style={{ marginLeft: '16px' }}>
|
||||
.then(r => exportHtml(
|
||||
<a href="https://github.com/stereobooster/react-snap" style={{ textDecoration: 'none' }}>
|
||||
react-snap
|
||||
</a>
|
||||
))
|
||||
</li>
|
||||
<li style={{ marginLeft: '16px' }}>
|
||||
.then(r => deploy(
|
||||
<a href="https://www.netlify.com" style={{ textDecoration: 'none' }}>Netlify</a>
|
||||
))
|
||||
</li>
|
||||
<li style={{ marginLeft: '16px' }}>.assert([scalableCode, superFastWebsite, seoFriendly])</li>
|
||||
<li style={{ marginLeft: '16px' }}>
|
||||
.done(
|
||||
<a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}>
|
||||
/* Give me 1 star */
|
||||
</a>
|
||||
) 🎉
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 870 KiB After Width: | Height: | Size: 354 KiB |
@@ -71,6 +71,7 @@ module.exports = {
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, 'dist'),
|
||||
historyApiFallback: true,
|
||||
port: 1234,
|
||||
},
|
||||
plugins,
|
||||
// See https://webpack.js.org/guides/caching/
|
||||
|
||||
Reference in New Issue
Block a user