Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix:Timeliine overflow #279

Merged
merged 2 commits into from
Dec 9, 2023
Merged

Fix:Timeliine overflow #279

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c33f35
fix:Laptop media queries added
Seventy7dot2 Dec 9, 2023
6bf4999
fix:Tablet media queries added
Seventy7dot2 Dec 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 133 additions & 32 deletions src/components/TimelineSection/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,28 @@ import { Body1, Heading1, Heading4 } from '../shared';
export const TimelineHead = styled(Heading1)`
font-weight: 700;
margin: 0 0 24px 0;
@media (max-width: 1300px) {
@media (max-width: 640px) {
font-size: 32px;
line-height: 96px;
margin: 32px 0px;
}
`;
export const TimelineWrapper = styled.div`
margin: 4% auto -6% auto;
width: 1280px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 15px;
@media (max-width: 1300px) {
@media (max-width: 1280px) {
width: 768px;
padding: 0 9px;
}
@media (max-width: 832px) {
width: 600px;
padding: 0;
}
@media (max-width: 640px) {
width: 390px;
padding: 0 8px;
}
Expand All @@ -31,6 +40,14 @@ export const Container = styled.div`
grid-template-rows: 248px 135px;
margin: auto;
color: #fff;
@media (max-width: 1280px) {
grid-template-columns: 213px 121px 80px 146px 190px;
grid-template-rows: 142px 55px;
}
@media (max-width: 832px) {
grid-template-columns: 170px 97px 64px 117px 152px;
grid-template-rows: 129px 55px;
}
`;
export const MobileContainer = styled.div`
display: grid;
Expand Down Expand Up @@ -60,7 +77,33 @@ export const BoxWrapper = styled.div`
color: var(--neutral-5, #a1a1a1);
margin: 8px 0 0 0;
}
@media (max-width: 1300px) {
@media (max-width: 1280px) {
padding: 20px 18px;
border-radius: 17px;
h3 {
font-size: 17px;
line-height: 22px;
}
p {
margin: 0;
font-size: 11px;
line-height: 15px;
}
}
@media (max-width: 832px) {
padding: 18px 14px;
border-radius: 17px;
h3 {
font-size: 14px;
line-height: 22px;
}
p {
margin: 0;
font-size: 9px;
line-height: 15px;
}
}
@media (max-width: 640px) {
padding: 13px 18px;
gap: 8px;
h3 {
Expand All @@ -69,24 +112,19 @@ export const BoxWrapper = styled.div`
line-height: 20px;
}
p {
margin: 0;
font-size: 10px;
font-weight: 300;
line-height: 18px;
}
}
@media (max-width: 390px) {
padding: 10px 14px;
gap: 8px;
h3 {
font-size: 10px;
font-weight: 500;
line-height: 16px;
}
p {
margin: 0;
font-size: 7px;
font-weight: 300;
line-height: 14px;
}
}
Expand All @@ -95,7 +133,12 @@ export const LineWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
@media (max-width: 1300px) {
@media (max-width: 1280px) {
svg {
width: 121px;
}
}
@media (max-width: 640px) {
svg {
width: 86px;
height: 1px;
Expand All @@ -110,7 +153,7 @@ export const LineWrapper = styled.div`
}
`;
export const RightLineWrapper = styled(LineWrapper)`
@media (max-width: 1300px) {
@media (max-width: 640px) {
svg {
transform: rotate(44deg) translate(11px, 39px);
}
Expand All @@ -125,13 +168,27 @@ export const VerticalBox = styled.div`
background: #fed954;
transform: translateY(-58px);
}
@media (max-width: 1280px) {
div {
transform: translateY(-32px);
height: 119px;
}
}
`;
export const Date = styled(Heading4)`
font-size: 36px;
font-weight: 600;
line-height: 42px;
margin: 0;
@media (max-width: 1300px) {
@media (max-width: 1280px) {
font-size: 20px;
line-height: 23px;
}
@media (max-width: 832px) {
font-size: 17px;
line-height: 18px;
}
@media (max-width: 640px) {
font-size: 18px;
line-height: 22px;
}
Expand All @@ -141,7 +198,15 @@ export const Date = styled(Heading4)`
}
`;
export const Month = styled(Body1)`
@media (max-width: 1300px) {
@media (max-width: 1280px) {
font-size: 10px;
line-height: 10px;
}
@media (max-width: 832px) {
font-size: 8px;
line-height: 8px;
}
@media (max-width: 640px) {
font-size: 12px;
line-height: 18px;
}
Expand All @@ -163,7 +228,23 @@ export const WheelWrapper = styled.div`
flex-direction: column;
align-items: center;
}
@media (max-width: 1300px) {
@media (max-width: 1280px) {
width: 80px;
height: 80px;
svg {
width: 80px;
height: 80px;
}
}
@media (max-width: 832px) {
width: 64px;
height: 64px;
svg {
width: 64px;
height: 64px;
}
}
@media (max-width: 640px) {
width: 91px;
height: 91px;
svg {
Expand All @@ -174,8 +255,6 @@ export const WheelWrapper = styled.div`
display: flex;
width: 43px;
height: 40px;
flex-direction: column;
align-items: center;
}
}
@media (max-width: 390px) {
Expand All @@ -186,22 +265,18 @@ export const WheelWrapper = styled.div`
height: 70px;
}
div {
display: flex;
width: 35px;
height: 33px;
flex-direction: column;
align-items: center;
}
}
`;

export const ArrowWrapper = styled.div`
position: relative;
place-self: center;
#mobile {
display: none;
}
@media (max-width: 1300px) {
@media (max-width: 640px) {
#desktop {
display: none;
}
Expand All @@ -226,14 +301,19 @@ export const EllipseContent = styled(Heading4)`
display: inline-flex;
flex-direction: column;
align-items: center;
@media (max-width: 1300px) {
font-size: 14px;
font-weight: 300;
@media (max-width: 1280px) {
font-size: 16px;
font-weight: 500;
line-height: 20px;
width: 113px;
width: 130px;
height: 56px;
margin: 0 0 0 11px;
}
@media (max-width: 640px) {
font-size: 14px;
font-weight: 300;
width: 113px;
}
@media (max-width: 390px) {
width: 87px;
font-size: 10px;
Expand All @@ -242,7 +322,19 @@ export const EllipseContent = styled(Heading4)`
export const EllipseWrapper = styled.div`
place-self: center;
position: relative;
@media (max-width: 1300px) {
@media (max-width: 1280px) {
svg {
width: 190px;
height: 170px;
}
}
@media (max-width: 832px) {
svg {
width: 150px;
height: 134px;
}
}
@media (max-width: 640px) {
svg {
width: 138px;
height: 123px;
Expand Down Expand Up @@ -274,17 +366,17 @@ export const CircledLineWrapper = styled.div`
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 1300px) {
@media (min-width: 640px) {
display: none;
}
`;
export const DesktopView = styled.div`
@media (max-width: 1300px) {
@media (max-width: 640px) {
display: none;
}
`;
export const MobileView = styled.div`
@media (min-width: 1300px) {
@media (min-width: 640px) {
display: none;
}
`;
Expand All @@ -294,8 +386,12 @@ export const RightContainer = styled.div`
grid-template-rows: 141px 103px;
margin: auto;
color: #fff;
@media (max-width: 768px) {
grid-template-columns: 313px 236px 134px 201px 352px;
@media (max-width: 1280px) {
grid-template-columns: 98px 236px 80px 121px 213px;
}
@media (max-width: 832px) {
grid-template-columns: 98px 168px 64px 97px 170px;
grid-template-rows: 128px 103px;
}
`;
export const VerticalWrapper = styled.div`
Expand All @@ -308,7 +404,12 @@ export const VerticalWrapper = styled.div`
background: #fed954;
transform: translateY(27px);
}
@media (max-width: 1300px) {
@media (max-width: 1280px) {
div {
transform: translateY(0px);
}
}
@media (max-width: 640px) {
div {
height: 114px;
transform: translateY(0px);
Expand Down
Loading