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

Tweak sidebar

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-04-19 21:59:10 +07:00
parent 899656809b
commit 692e3a2adb
5 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/components/Product.tsx
View File

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

14
client/components/product.css
View File

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

7
client/index.css
View File

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

3
client/pages/HomePage.tsx
View File

@@ -43,7 +43,8 @@ const HomePage = () => {
<div className="hero"> <div className="hero">
<div className="container"> <div className="container">
<div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div> <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>
</div> </div>

5
client/pages/homePage.css
View File

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