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

Responsive improvements

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-04-01 12:12:00 +07:00
parent 31d93cd69d
commit b1ef248d31
5 changed files with 29 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/components/coverCard.css
View File

@@ -11,7 +11,7 @@
justify-content: flex-start; justify-content: flex-start;
padding: 1rem; padding: 1rem;
text-decoration: none; text-decoration: none;
width: 50%; width: 7rem;
} }
.cover__name { .cover__name {
font-weight: normal; font-weight: normal;
@@ -20,18 +20,8 @@
text-align: center; text-align: center;
} }
@media (min-width: 640px) {
.cover {
width: 25%;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.cover { .cover {
width: 20%; width: 8rem;
}
}
@media (min-width: 1024px) {
.cover {
width: 16.666666666666668%;
} }
} }

17
client/index.css
View File

@@ -5,7 +5,7 @@
:root { :root {
--background-color: #e7d900; --background-color: #e7d900;
--text-color: #1e1d6e; --text-color: #111827;
} }
body { body {
font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -22,6 +22,7 @@ a {
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 64rem; max-width: 64rem;
padding: 0 1rem;
} }
.content { .content {
display: flex; display: flex;
@@ -46,28 +47,28 @@ a {
background: var(--background-color); background: var(--background-color);
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-bottom: 2rem; padding-bottom: 1rem;
} }
.hero__logo { .hero__logo {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.hero__logo img { .hero__logo img {
height: 16rem; height: 12rem;
object-fit: cover; object-fit: cover;
width: 24rem; width: 20rem;
} }
.hero__heading { .hero__heading {
color: var(--text-color); color: var(--text-color);
font-size: 3rem; font-size: 2rem;
margin: 2rem 0; line-height: 1.5;
text-align: center; text-align: center;
text-transform: capitalize; text-transform: capitalize;
} }
.hero__subheading { .hero__subheading {
color: var(--text-color); color: var(--text-color);
font-size: 2rem; font-size: 1.5rem;
margin: 2rem 0; line-height: 1.5;
text-align: center; text-align: center;
} }

8
client/layouts/footer.css
View File

@@ -1,5 +1,5 @@
.footer { .footer {
padding: 2rem 0 4rem 0; padding: 2rem 0;
} }
.footer__about { .footer__about {
border-bottom: 1px solid var(--text-color); border-bottom: 1px solid var(--text-color);
@@ -15,7 +15,6 @@
color: var(--text-color); color: var(--text-color);
} }
.footer__grid { .footer__grid {
display: flex;
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
} }
@@ -35,3 +34,8 @@
.footer__product a { .footer__product a {
color: var(--text-color); color: var(--text-color);
} }
@media (min-width: 640px) {
.footer__grid {
display: flex;
}
}

6
client/pages/HomePage.tsx
View File

@@ -51,12 +51,6 @@ const HomePage = () => {
<div className="home__feature"> <div className="home__feature">
<div className="home__title">Real Use Cases</div> <div className="home__title">Real Use Cases</div>
</div> </div>
<div className="home__feature">
<div className="home__title">Good Practices</div>
</div>
<div className="home__feature">
<div className="home__title">Accessibility</div>
</div>
</div> </div>
<section className="home__patterns"> <section className="home__patterns">

22
client/pages/homePage.css
View File

@@ -10,18 +10,18 @@
max-width: 48rem; max-width: 48rem;
} }
.home__feature { .home__feature {
padding: 2rem; padding: 0.5rem;
text-align: center; text-align: center;
width: 33.333%; width: 50%;
} }
.home__feature:not(:nth-child(3n)) { .home__feature:not(:nth-child(2n)) {
border-right: 1px solid var(--text-color); border-right: 1px solid var(--text-color);
} }
.home__feature:nth-child(-n+3) { .home__feature:nth-child(-n+2) {
border-bottom: 1px solid var(--text-color); border-bottom: 1px solid var(--text-color);
} }
.home__title { .home__title {
font-size: 2rem; font-size: 1.5rem;
font-weight: 500; font-weight: 500;
} }
@@ -52,16 +52,18 @@
background-color: var(--background-color); background-color: var(--background-color);
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--text-color); color: var(--text-color);
font-size: 2rem; font-size: 1.5rem;
font-weight: 600;
padding: 1rem 2rem; padding: 1rem 2rem;
} }
.home__sliders { .home__sliders {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 180rem;
opacity: 0.4; opacity: 0.4;
width: 192rem;
} }
.home__slide { .home__slide {
animation: slide 20s linear infinite; animation: slide 20s linear infinite;
@@ -69,15 +71,15 @@
flex-wrap: wrap; flex-wrap: wrap;
height: 60rem; height: 60rem;
justify-content: center; justify-content: center;
width: 64rem; width: 60rem;
will-change: transform; will-change: transform;
} }
@keyframes slide { @keyframes slide {
from { from {
transform: translateX(0); transform: translateY(0);
} }
to { to {
transform: translateX(-100%); transform: translateY(-100%);
} }
} }