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

Some layout tweaks

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-29 10:10:38 +07:00
parent 4e80dfdf79
commit 86eb00f7da
13 changed files with 40 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/layouts/DetailsLayout.tsx
View File

@@ -49,9 +49,6 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
position: 'relative',
}}
>

6
client/layouts/Footer.tsx
View File

@@ -5,8 +5,8 @@ const Footer: React.FC<{}> = () => {
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '8px',
// borderBottomLeftRadius: '8px',
// borderBottomRightRadius: '8px',
display: 'flex',
}}
>
@@ -32,7 +32,6 @@ const Footer: React.FC<{}> = () => {
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,
@@ -107,7 +106,6 @@ const Footer: React.FC<{}> = () => {
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,

81
client/layouts/Layout.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import SampleCode from '../components/SampleCode';
import Footer from './Footer';
const Layout: React.FC<{}> = ({ children }) => {
@@ -11,66 +12,26 @@ const Layout: React.FC<{}> = ({ children }) => {
<div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
{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 => lint(
<a href="https://github.com/palantir/tslint" style={{ textDecoration: 'none' }}>
tslint
</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' }}>.then(r => &#123;</li>
<li style={{ marginLeft: '32px' }}>expect(r).is(scalableCode);</li>
<li style={{ marginLeft: '32px' }}>expect(r).is(superFastWebsite);</li>
<li style={{ marginLeft: '32px' }}>expect(r).is(seoFriendly);</li>
<li style={{ marginLeft: '16px' }}>&#125;)</li>
<li style={{ marginLeft: '16px' }}>
.finally(() => &#123;
<a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}>
/&#42; Give me 1 star &#42;/
</a>
&#125;) 🎉
</li>
</ul>
<div>
<SampleCode
lang='javascript'
code={`
this
.madeWith([react,typescript])
.then((r) => lint(r)) /* tslint */
.then((r) => lazyLoad(r)) /* @loadable/component */
.then((r) => optimizeAndBundle(r)) /* webpack */
.then((r) => exportHtml(r)) /* react-snap */
.then((r) => deploy(r)) /* Netlify */
.then((r) => {
expect(r).is(scalableCode);
expect(r).is(superFastWebsite);
expect(r).is(seoFriendly);
})
.finally(() => {/* Give me 1 star */}) 🎉 /* https://github.com/phuoc-ng/csslayout */
`}
/>
</div>
</div>
);
};