mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-09 23:57:08 +02:00
Code Issues Releases Wiki Activity

Add holy grail cover

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-16 23:36:22 +07:00
parent d1926c8c65
commit 2f1fe67f2a
2 changed files with 55 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/Home.jsx
View File

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import BadgeCover from './covers/BadgeCover'; import BadgeCover from './covers/BadgeCover';
import CenterCover from './covers/CenterCover'; import CenterCover from './covers/CenterCover';
import HolyGrailCover from './covers/HolyGrailCover';
import InputAddonCover from './covers/InputAddonCover'; import InputAddonCover from './covers/InputAddonCover';
import MediaObjectCover from './covers/MediaObjectCover'; import MediaObjectCover from './covers/MediaObjectCover';
import SidebarCover from './covers/SidebarCover'; import SidebarCover from './covers/SidebarCover';
@@ -35,6 +36,12 @@ const Home = () => {
<h2 className="f2 lh-copy">Layouts</h2> <h2 className="f2 lh-copy">Layouts</h2>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="pa2 w-20">
<Link to="/holy-grail" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
<HolyGrailCover />
<h4 className="f4 mv0 pt3">Holy grail</h4>
</Link>
</div>
<div className="pa2 w-20"> <div className="pa2 w-20">
<Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
<SidebarCover /> <SidebarCover />

48
client/covers/HolyGrailCover.jsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import Frame from '../placeholders/Frame';
import Line from '../placeholders/Line';
const HolyGrailCover = () => {
return (
<Frame>
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30">
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml-auto"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
</div>
<div className="flex-grow-1 flex flex-row">
<div className="b--black-30 br pa2 w-30">
<div className="mb1"><Line /></div>
<div className="w-80"><Line /></div>
</div>
<div className="pa2 flex-auto">
<div className="mb1"><Line /></div>
<div className="mb1 w-60"><Line /></div>
<div className="mb2 w-80"><Line /></div>
<div className="mb1"><Line /></div>
<div className="mb1 w-60"><Line /></div>
<div className="mb1 w-80"><Line /></div>
</div>
<div className="b--black-30 bl pa2 w-30">
<div className="mb1"><Line /></div>
<div className="w-80"><Line /></div>
</div>
</div>
<div className="flex-shrink-0 bt b--black-30">
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml1"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
</div>
</div>
</Frame>
);
};
export default HolyGrailCover;