mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-09 15:46:55 +02:00
Tweak homepage
This commit is contained in:
Phuoc Nguyen
101
client/Footer.jsx
Normal file
101
client/Footer.jsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import React from 'react';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="mw8 center bl br bb b--black-20 flex justify-between">
|
||||
<div className="bt br b--black-20 relative" style={{ flex: 1 }}>
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>PRODUCTS</h3>
|
||||
|
||||
<ul className="list ma0 pa0 lh-copy fw5 pa4">
|
||||
<li>
|
||||
<a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
|
||||
FormValidation
|
||||
</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>
|
||||
</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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bt b--black-20 relative" style={{ flex: 1 }}>
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>ABOUT</h3>
|
||||
|
||||
<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"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
@nghuuphuoc
|
||||
</a>
|
||||
</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' }}>
|
||||
<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>
|
||||
</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' }}>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
314
client/Home.jsx
314
client/Home.jsx
@@ -33,172 +33,168 @@ const Home = () => {
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="b--black-30 bb pt5 pb4">
|
||||
<div className="tc flex items-center justify-center">
|
||||
{
|
||||
'CSS LAYOUT'.split('').map((c, index) => {
|
||||
return (
|
||||
c === ' '
|
||||
? <div key={index} className="mh4" />
|
||||
: <div key={index} className="flex items-center justify-center bg-blue white mh1 w3 h3 f1 fw6">{c}</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<p className="f4 tc lh-copy">a collection of popular layouts and patterns made with CSS</p>
|
||||
<div className="pt5 pb4">
|
||||
<h1 className="f1 fw6 flex items-center justify-center">
|
||||
CSS Layout
|
||||
</h1>
|
||||
<h2 className="fw1 tc lh-copy">a collection of popular layouts and patterns made with CSS</h2>
|
||||
</div>
|
||||
<div className="mw8 center pb4">
|
||||
<h2 className="f2 lh-copy">Layouts</h2>
|
||||
<div className="mw8 center bl br b--black-20">
|
||||
<div className="bt b--black-20 relative">
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
|
||||
|
||||
<div className="flex flex-wrap items-start">
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<HolyGrailCover />
|
||||
<h4 className="f5 mv0 pt3">Holy grail</h4>
|
||||
<div className="flex flex-wrap items-start pa4">
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<HolyGrailCover />
|
||||
<h4 className="f5 mv0 pt3">Holy grail</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SidebarCover />
|
||||
<h4 className="f5 mv0 pt3">Sidebar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SplitScreenCover />
|
||||
<h4 className="f5 mv0 pt3">Split screen</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyFooterCover />
|
||||
<h4 className="f5 mv0 pt3">Sticky footer</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyHeaderCover />
|
||||
<h4 className="f5 mv0 pt3">Sticky header</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SidebarCover />
|
||||
<h4 className="f5 mv0 pt3">Sidebar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SplitScreenCover />
|
||||
<h4 className="f5 mv0 pt3">Split screen</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyFooterCover />
|
||||
<h4 className="f5 mv0 pt3">Sticky footer</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyHeaderCover />
|
||||
<h4 className="f5 mv0 pt3">Sticky header</h4>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="f2 lh-copy">Patterns</h2>
|
||||
<div className="bt b--black-20 relative">
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
|
||||
|
||||
<div className="flex flex-wrap items-start">
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BadgeCover />
|
||||
<h4 className="f5 mv0 pt3">Badge</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BreadcrumbCover />
|
||||
<h4 className="f5 mv0 pt3">Breadcrumb</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ButtonWithIconCover />
|
||||
<h4 className="f5 mv0 pt3">Button with icon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<CardCover />
|
||||
<h4 className="f5 mv0 pt3">Card</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<CenterCover />
|
||||
<h4 className="f5 mv0 pt3">Centering</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<FixedAtCornerCover />
|
||||
<h4 className="f5 mv0 pt3">Fixed at corner</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<InputAddonCover />
|
||||
<h4 className="f5 mv0 pt3">Input addon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MediaObjectCover />
|
||||
<h4 className="f5 mv0 pt3">Media object</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MenuCover />
|
||||
<h4 className="f5 mv0 pt3">Menu</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ModalCover />
|
||||
<h4 className="f5 mv0 pt3">Modal</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<NotificationCover />
|
||||
<h4 className="f5 mv0 pt3">Notification</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PaginationCover />
|
||||
<h4 className="f5 mv0 pt3">Pagination</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PreviousNextButtonCover />
|
||||
<h4 className="f5 mv0 pt3">Previous next buttons</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/pricing-table" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PricingTableCover />
|
||||
<h4 className="f5 mv0 pt3">Pricing table</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ProgressBarCover />
|
||||
<h4 className="f5 mv0 pt3">Progress bar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SameHeightColumnsCover />
|
||||
<h4 className="f5 mv0 pt3">Same height columns</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/slider" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SliderCover />
|
||||
<h4 className="f5 mv0 pt3">Slider</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StepperInputCover />
|
||||
<h4 className="f5 mv0 pt3">Stepper input</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SwitchCover />
|
||||
<h4 className="f5 mv0 pt3">Switch</h4>
|
||||
</Link>
|
||||
<div className="flex flex-wrap items-start pa4">
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BadgeCover />
|
||||
<h4 className="f5 mv0 pt3">Badge</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BreadcrumbCover />
|
||||
<h4 className="f5 mv0 pt3">Breadcrumb</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ButtonWithIconCover />
|
||||
<h4 className="f5 mv0 pt3">Button with icon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<CardCover />
|
||||
<h4 className="f5 mv0 pt3">Card</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<CenterCover />
|
||||
<h4 className="f5 mv0 pt3">Centering</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<FixedAtCornerCover />
|
||||
<h4 className="f5 mv0 pt3">Fixed at corner</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<InputAddonCover />
|
||||
<h4 className="f5 mv0 pt3">Input addon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MediaObjectCover />
|
||||
<h4 className="f5 mv0 pt3">Media object</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MenuCover />
|
||||
<h4 className="f5 mv0 pt3">Menu</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ModalCover />
|
||||
<h4 className="f5 mv0 pt3">Modal</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<NotificationCover />
|
||||
<h4 className="f5 mv0 pt3">Notification</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PaginationCover />
|
||||
<h4 className="f5 mv0 pt3">Pagination</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PreviousNextButtonCover />
|
||||
<h4 className="f5 mv0 pt3">Previous next buttons</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/pricing-table" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PricingTableCover />
|
||||
<h4 className="f5 mv0 pt3">Pricing table</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ProgressBarCover />
|
||||
<h4 className="f5 mv0 pt3">Progress bar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SameHeightColumnsCover />
|
||||
<h4 className="f5 mv0 pt3">Same height columns</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/slider" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SliderCover />
|
||||
<h4 className="f5 mv0 pt3">Slider</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StepperInputCover />
|
||||
<h4 className="f5 mv0 pt3">Stepper input</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SwitchCover />
|
||||
<h4 className="f5 mv0 pt3">Switch</h4>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,90 +1,18 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
import Footer from './Footer';
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="center">
|
||||
{children}
|
||||
</div>
|
||||
<div className="w-100 bt b--black-30">
|
||||
<div className="mw8 center pv5 flex justify-between">
|
||||
<div>
|
||||
<div className="f4 fw6 mb2">Other cool things</div>
|
||||
<ul className="list ma0 pa0 lh-copy fw5">
|
||||
<li className="pr2">
|
||||
<a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
|
||||
FormValidation
|
||||
</a>
|
||||
</li>
|
||||
<li className="pr2">
|
||||
<a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
|
||||
BlurPage
|
||||
</a>
|
||||
</li>
|
||||
<li className="pr2">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-column items-end">
|
||||
<div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
|
||||
<div className="flex items-center">
|
||||
<a href="https://twitter.com/nghuuphuoc" className="dib dim link black-70 ba b-black-70 br-pill w2 h2 flex items-center justify-center mr2">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</a>
|
||||
<a href="mailto: me@phuoc.ng" className="dib dim link black-70 ba b-black-70 br-pill w2 h2 flex items-center justify-center mr2">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
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>
|
||||
</a>
|
||||
<a href="https://github.com/phuoc-ng/csslayout" className="dib dim link black-70 ba b-black-70 br-pill w2 h2 flex items-center justify-center">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="mw8 mv4 center">
|
||||
{children}
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user