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

Merge pull request #184 from phuoc-ng/tweak-sidebar

Browse Source 
Tweak sidebar
This commit is contained in:
phuoc-ng
2021-04-19 22:01:44 +07:00
committed by GitHub
parent 8a65fc4882 0bcac36df7
commit be9664a915
20 changed files with 133 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -73,7 +73,7 @@ You might be interested in my products:
_Products_
* [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page)
* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support")
* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support)
* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
* [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)

3
client/components/Product.tsx
View File

@@ -15,9 +15,10 @@ interface ProductProps {
const Product: React.FC<ProductProps> = ({ product }) => {
return (
<div className="product">
<div className="product" style={{ backgroundColor: product.themeColor }}>
<a href={product.url}>
<img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
<h3 className="product__name">{product.name}</h3>
<div className="product__desc">{product.description}</div>
</a>
</div>

14
client/components/product.css
View File

@@ -4,19 +4,27 @@
*/
.product {
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 0.5rem;
color: #FFF;
margin: 1rem 0;
overflow: hidden;
padding: 1rem;
}
.product a {
color: #FFF;
text-align: center;
text-decoration: none;
}
.product__logo {
display: flex;
height: auto;
width: 100%;
margin: 0 auto;
width: 6rem;
}
.product__name {
font-size: 1.5rem;
margin: 1rem;
}
.product__desc {
padding: 0.5rem;
text-align: center;
}

6
client/constants/ProductList.ts
View File

@@ -12,6 +12,12 @@ const ProductList: ProductModel[] = [
description: 'A browser extension to hide sensitive information on a web page',
themeColor: '#4e7fb8',
},
{
name: 'Check Browsers Support',
url: 'https://checkbrowsers.support',
description: 'A browser extension to check browser compatibility without leaving your tab',
themeColor: '#f33446',
},
{
name: 'Form Validation',
url: 'https://formvalidation.io',

7
client/index.css
View File

@@ -59,9 +59,8 @@ a {
justify-content: center;
}
.hero__logo img {
height: 12rem;
object-fit: cover;
width: 20rem;
width: 16rem;
}
.hero__heading {
color: var(--color-gray-9);
@@ -154,13 +153,13 @@ pre {
}
@media (min-width: 768px) {
.sidebar {
flex-basis: 10rem;
flex-basis: 12rem;
margin-left: 1rem;
}
}
@media (min-width: 1024px) {
.sidebar {
flex-basis: 12rem;
flex-basis: 16rem;
margin-left: 2rem;
}
}

3
client/pages/HomePage.tsx
View File

@@ -43,7 +43,8 @@ const HomePage = () => {
<div className="hero">
<div className="container">
<div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
<h1 className="hero__heading">Popular Layouts & patterns made with CSS</h1>
<h1 className="home__heading">CSS Layout</h1>
<h2 className="hero__subheading">Popular Layouts & patterns made with CSS</h2>
</div>
</div>

5
client/pages/homePage.css
View File

@@ -44,9 +44,10 @@
}
.home__heading {
color: var(--color-gray-9);
font-size: 4rem;
font-size: 3rem;
font-weight: 600;
margin-bottom: 1rem;
margin: 1rem;
text-align: center;
}
.home__explore {
background-color: var(--background-color);

121
client/patterns/timeline/Details.tsx
View File

@@ -7,6 +7,7 @@ import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -22,8 +23,7 @@ const Details: React.FC<{}> = () => {
<meta name="twitter:description" content="Create a timeline with CSS flexbox" />
<meta name="keywords" content="css flexbox, css timeline" />
</Helmet>
<div className='p-8 pb-20'>
<BrowserFrame
<BrowserFrame
html={`
<div class="container">
<!-- Left vertical line -->
@@ -111,77 +111,78 @@ css={`
margin-left: 48px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
position: 'relative',
width: '60%',
}}
>
<div
style={{
position: 'relative',
width: '60%',
borderRight: '2px solid #aaa',
height: '100%',
left: '16px',
position: 'absolute',
top: 0,
}}
/>
<ul
style={{
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<div
style={{
borderRight: '2px solid #aaa',
height: '100%',
left: '16px',
position: 'absolute',
top: 0,
}}
/>
<ul
style={{
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '80%' }}><Rectangle /></div>
</div>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '80%' }}><Rectangle /></div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={10} blockHeight={2} />
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={10} blockHeight={2} />
</div>
</li>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '60%' }}><Rectangle /></div>
</div>
</li>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '60%' }}><Rectangle /></div>
</div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={15} blockHeight={2} />
</div>
</li>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '60%' }}><Rectangle /></div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={15} blockHeight={2} />
</div>
</li>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '60%' }}><Rectangle /></div>
</div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={10} blockHeight={2} />
</div>
</li>
</ul>
</div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={10} blockHeight={2} />
</div>
</li>
</ul>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<RelatedPatterns patterns={[Pattern.ZigzagTimeline]} />
</DetailsLayout>
);
};

87
client/patterns/zigzag-timeline/Details.tsx
View File

@@ -7,6 +7,7 @@ import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -23,8 +24,7 @@ const Details: React.FC<{}> = () => {
<meta name="twitter:description" content="Create a zigzag timeline" />
<meta name="keywords" content="css timeline, css zigzag timeline" />
</Helmet>
<div className='p-8 pb-20'>
<BrowserFrame
<BrowserFrame
html={`
<div class="zigzag-timeline__item">
<!-- Milestone -->
@@ -82,52 +82,53 @@ css={`
transform: translate(50%, -50%);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
margin: '0 auto',
padding: '0.5rem',
width: '60%',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
margin: '0 auto',
padding: '0.5rem',
width: '60%',
className='zigzag-timeline__item'
style={{
padding: '1rem 1.5rem',
}}
>
<div
className='zigzag-timeline__item'
style={{
padding: '1rem 1.5rem',
}}
>
<div className='zigzag-timeline__milestone'/>
<div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
<Block numberOfBlocks={10} />
</div>
<div
className='zigzag-timeline__item'
style={{
padding: '1rem 1.5rem',
}}
>
<div className='zigzag-timeline__milestone' />
<div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
<Block numberOfBlocks={20} />
</div>
<div
className='zigzag-timeline__item'
style={{
padding: '1rem 1.5rem',
}}
>
<div className='zigzag-timeline__milestone' />
<div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
<Block numberOfBlocks={15} />
</div>
<div className='zigzag-timeline__milestone'/>
<div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
<Block numberOfBlocks={10} />
</div>
</BrowserFrame>
</div>
<div
className='zigzag-timeline__item'
style={{
padding: '1rem 1.5rem',
}}
>
<div className='zigzag-timeline__milestone' />
<div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
<Block numberOfBlocks={20} />
</div>
<div
className='zigzag-timeline__item'
style={{
padding: '1rem 1.5rem',
}}
>
<div className='zigzag-timeline__milestone' />
<div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
<Block numberOfBlocks={15} />
</div>
</div>
</BrowserFrame>
<RelatedPatterns patterns={[Pattern.Timeline]} />
</DetailsLayout>
);
};

BIN
public/assets/1-loc.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public/assets/blur-page.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
public/assets/check-browsers-support.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/assets/css-layout.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/assets/form-validation.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/assets/front-end-tips.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/assets/html-dom.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/assets/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/assets/react-pdf-viewer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/assets/responsive-design-patterns.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/assets/this-vs-that.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 40 KiB