Skip to content

Commit 8b6c514

Browse files
zonayedpcazonayedpca
committed
homepage responsiveness done
1 parent 85fd853 commit 8b6c514

8 files changed

Lines changed: 62 additions & 82 deletions

File tree

‎src/components/allitems.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,19 @@ const ContentContainer = styled.div`
1717
> * {
1818
width: calc(100% / 3 - 10px);
1919
margin-right: 15px;
20-
:nth-child(3n + 3) {
20+
@media (min-width: 769px) {
21+
:nth-child(3n + 3) {
22+
margin-right: 0;
23+
}
24+
}
25+
@media (max-width: 768px) {
26+
width: calc(100% / 2 - 10px);
27+
:nth-child(2n + 2) {
28+
margin-right: 0;
29+
}
30+
}
31+
@media (max-width: 480px) {
32+
width: calc(100%);
2133
margin-right: 0;
2234
}
2335
}

‎src/components/common/container.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const ContainerContainer = styled.div`
55
margin: 0 auto;
66
padding: 0 25px;
77
max-width: 1260px;
8+
@media (min-width: 480px) {
9+
padding: 0 25px;
10+
}
811
`
912

1013
const Container = ({ children }) => {

‎src/components/common/thincontainer.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ import styled from "@emotion/styled"
33

44
const ThinContainerContainer = styled.div`
55
padding: 0 100px;
6+
@media (max-width: 768px) {
7+
padding: 0 25px;
8+
}
9+
@media (max-width: 480px) {
10+
padding: 0 0;
11+
}
612
`
713

814
const ThinContainer = ({ children }) => {

‎src/components/content.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -96,20 +96,18 @@ const ContentContainer = styled.div`
9696
const Content = ({ data, colorPref }) => (
9797
<ContentContainer colorPref={colorPref}>
9898
<Curve color="var(--accentlight)">
99-
<Container>
100-
<Section>
101-
<ThinContainer>
102-
{!data ? (
103-
<>
104-
<PopularItems />
105-
<AllItems />
106-
</>
107-
) : (
108-
<Item data={data} />
109-
)}
110-
</ThinContainer>
111-
</Section>
112-
</Container>
99+
<Section>
100+
<ThinContainer>
101+
{!data ? (
102+
<>
103+
<PopularItems />
104+
<AllItems />
105+
</>
106+
) : (
107+
<Item data={data} />
108+
)}
109+
</ThinContainer>
110+
</Section>
113111
</Curve>
114112
</ContentContainer>
115113
)

‎src/components/header.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ const MenuList = styled.ul`
2222
svg {
2323
margin-right: 5px;
2424
}
25+
@media (max-width: 480px) {
26+
span {
27+
display: none;
28+
}
29+
}
2530
}
2631
}
2732
`
@@ -46,15 +51,15 @@ const Header = ({ children, colorpref, filename, islightcolor }) => (
4651
rel="noopener noreferrer"
4752
href={`https://github.com/devsonket/devsonket.github.io/blob/develop/data/${filename}.json`}
4853
>
49-
<FiEdit /> এডিট করুন
54+
<FiEdit /> <span>এডিট করুন</span>
5055
</a>
5156
) : (
5257
<a
5358
target="__blank"
5459
rel="noopener noreferrer"
5560
href="https://github.com/devsonket/devsonket.github.io#%E0%A6%95%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-%E0%A6%95%E0%A6%A8%E0%A7%8D%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%BF%E0%A6%89%E0%A6%9F-%E0%A6%95%E0%A6%B0%E0%A6%AC%E0%A7%87%E0%A6%A8"
5661
>
57-
<FiPlus /> কন্ট্রিবিউট করুন
62+
<FiPlus /> <span>কন্ট্রিবিউট করুন</span>
5863
</a>
5964
)}
6065
</li>
@@ -64,7 +69,7 @@ const Header = ({ children, colorpref, filename, islightcolor }) => (
6469
rel="noopener noreferrer"
6570
href="https://github.com/devsonket/devsonket.github.io"
6671
>
67-
<FiStar /> স্টার দিন
72+
<FiStar /> <span>স্টার দিন</span>
6873
</a>
6974
</li>
7075
</MenuList>

‎src/components/intro.js‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,3 @@
1-
// import React from "react"
2-
// import styled from "@emotion/styled"
3-
4-
// import Header from "./header"
5-
// import TextCloud from "./TextCloud"
6-
7-
// const HeaderIntro = styled.div`
8-
// padding: 0 50px;
9-
// text-align: center;
10-
// padding-bottom: 100px;
11-
// h1 {
12-
// color: var(--headline);
13-
// }
14-
// p {
15-
// color: var(--paragraph);
16-
// }
17-
// @media only screen and (max-width: 460px) {
18-
// padding: 0 15px;
19-
// padding-bottom: 15px;
20-
// }
21-
// @media print {
22-
// padding-bottom: 0px;
23-
// }
24-
// input {
25-
// width: 100%;
26-
// border: none;
27-
// background-color: #fff;
28-
// border: none;
29-
// color: #272343;
30-
// padding: 15px;
31-
// border-radius: 8px;
32-
// box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
33-
// transition: 0.2s all ease;
34-
// }
35-
// input:focus {
36-
// outline: none;
37-
// }
38-
// p {
39-
// margin-top: 0px;
40-
// color: #485663;
41-
// font-size: 15px;
42-
// }
43-
// `
44-
45-
// const Intro = ({ input, handleInputChange }) => (
46-
// <Header>
47-
// <HeaderIntro>
48-
// <h1>ডেভেলপার চিটশিট</h1>
49-
// <p>
50-
// বাংলা চিটশিটের ভান্ডার। নিজের মাতৃভাষায় চিটশিটের ভান্ডার সমৃদ্ধ করতে
51-
// আপনিও যোগ দিন
52-
// </p>
53-
// <input
54-
// placeholder="কিসের উপর চিটশিট চাচ্ছেন?"
55-
// value={input}
56-
// onChange={handleInputChange}
57-
// />
58-
// </HeaderIntro>
59-
// </Header>
60-
// )
61-
62-
// export default Intro
63-
641
import React from "react"
652
import styled from "@emotion/styled"
663

@@ -69,7 +6,6 @@ import IntroHome from "./introhome"
696
import IntroItem from "./introitem"
707

718
import { Container, Logo, ThinContainer } from "./common"
72-
import { isItDark } from "../utils"
739

7410
const IntroContainer = styled.div`
7511
background: ${props => props.colorpref};

‎src/components/popularitems.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ const Content = styled.div`
1414
justify-content: space-between;
1515
> * {
1616
width: calc(100% / 3 - 10px);
17+
@media (max-width: 768px) {
18+
width: calc(100% / 2 - 10px);
19+
}
20+
@media (max-width: 480px) {
21+
width: calc(100%);
22+
}
1723
}
1824
}
1925
`

‎src/components/searchresult.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,28 @@ const NotFoundColumn = styled.div`
7474
justify-content: space-between;
7575
padding: 15px 25px;
7676
cursor: default;
77+
@media (max-width: 480px) {
78+
flex-wrap: wrap;
79+
> * {
80+
width: 100%;
81+
}
82+
}
7783
.action {
7884
display: flex;
7985
align-items: center;
86+
@media (max-width: 480px) {
87+
margin-top: 5px;
88+
}
8089
a {
8190
display: flex;
8291
align-items: center;
8392
padding: 0;
8493
margin-left: 15px;
94+
@media (max-width: 480px) {
95+
margin-left: 0px;
96+
margin-right: 15px;
97+
width: auto;
98+
}
8599
svg {
86100
margin-right: 5px;
87101
}

0 commit comments

Comments
 (0)