Skip to content

Commit

Permalink
fix: adaptive styles header
Browse files Browse the repository at this point in the history
  • Loading branch information
@MIU-cz
MIU-cz committed Jun 30, 2024
1 parent e3db193 commit 5bf6eb3
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 12 deletions.
Binary file added Yandex/docs/Screenshot 2024-06-30 162206.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Yandex/docs/Screenshot 2024-06-30 162233.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Yandex/docs/Screenshot 2024-06-30 162312.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Yandex/docs/Screenshot 2024-06-30 162333.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
124 changes: 120 additions & 4 deletions Yandex/src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,7 @@
@media (min-width: 1366px) {
.content {
width: 1222px;
grid-template-rows: 1fr;
grid-template-columns: repeat(2, 1fr);
}
}
Expand All @@ -357,7 +358,6 @@
}
.content_header_item:first-child {
padding-top: 18px;
position: relative;
z-index: 1;
}
@media (min-width: 1366px) {
Expand Down Expand Up @@ -510,7 +510,37 @@
left: 50px;
transform: rotate(-6deg);
}
@media (min-width: 576px) {
.chess_behind img:first-child {
top: 35vw;
left: 0vw;
}
}
@media (min-width: 768px) {
.chess_behind img:first-child {
top: 31vw;
left: 10vw;
}
}
@media (min-width: 992px) {
.chess_behind img:first-child {
top: 26.5vw;
left: 20vw;
}
}
@media (min-width: 1024px) {
.chess_behind img:first-child {
top: 24vw;
left: 10vw;
}
}
@media (min-width: 1200px) {
.chess_behind img:first-child {
top: 20.5vw;
left: 10vw;
}
}
@media (min-width: 1366px) {
.chess_behind img:first-child {
width: 105px;
top: 280px;
Expand All @@ -523,7 +553,37 @@
left: 155px;
transform: rotate(8deg);
}
@media (min-width: 576px) {
.chess_behind img:last-child {
top: 35vw;
left: 0vw;
}
}
@media (min-width: 768px) {
.chess_behind img:last-child {
top: 31vw;
left: 10vw;
}
}
@media (min-width: 992px) {
.chess_behind img:last-child {
top: 26.5vw;
left: 20vw;
}
}
@media (min-width: 1024px) {
.chess_behind img:last-child {
top: 24vw;
left: 10vw;
}
}
@media (min-width: 1200px) {
.chess_behind img:last-child {
top: 20.5vw;
left: 10vw;
}
}
@media (min-width: 1366px) {
.chess_behind img:last-child {
width: 115px;
top: 165px;
Expand All @@ -541,7 +601,37 @@
left: 120px;
transform: rotate(-10.5deg);
}
@media (min-width: 576px) {
.chess_front img:first-child {
top: 42vw;
left: 40vw;
}
}
@media (min-width: 768px) {
.chess_front img:first-child {
top: 37vw;
left: 40vw;
}
}
@media (min-width: 992px) {
.chess_front img:first-child {
top: 31vw;
left: 40vw;
}
}
@media (min-width: 1024px) {
.chess_front img:first-child {
top: 30vw;
left: 40vw;
}
}
@media (min-width: 1200px) {
.chess_front img:first-child {
top: 26vw;
left: 40vw;
}
}
@media (min-width: 1366px) {
.chess_front img:first-child {
width: 156px;
top: 495px;
Expand All @@ -551,9 +641,35 @@
.chess_front img:last-child {
display: none;
}
@media (min-width: 768px) {
@media (min-width: 576px) {
.chess_front img:last-child {
display: inherit;
top: 42vw;
right: 0;
}
}
@media (min-width: 768px) {
.chess_front img:last-child {
top: 36vw;
}
}
@media (min-width: 992px) {
.chess_front img:last-child {
top: 30vw;
}
}
@media (min-width: 1024px) {
.chess_front img:last-child {
top: 30vw;
}
}
@media (min-width: 1200px) {
.chess_front img:last-child {
top: 25vw;
}
}
@media (min-width: 1366px) {
.chess_front img:last-child {
top: 560px;
right: -25px;
}
Expand All @@ -567,10 +683,10 @@
left: 0;
background: url(../img/header/bg-img-city.png) bottom no-repeat;
background-position-x: 80%;
background-size: 230%;
background-size: 110vh;
pointer-events: none;
}
@media (min-width: 1024px) {
@media (min-width: 1366px) {
.header_wraper {
background-position-x: center;
background-size: inherit;
Expand Down
2 changes: 1 addition & 1 deletion Yandex/src/css/main.css.map
View file

Large diffs are not rendered by default.

96 changes: 89 additions & 7 deletions Yandex/src/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@

@media (min-width: 1366px) {
width: 1222px;
grid-template-rows: 1fr;
grid-template-columns: repeat(2, 1fr);
}

Expand All @@ -46,8 +47,9 @@

&:first-child {
padding-top: 18px;
position: relative;
// position: relative;
z-index: 1;


@media (min-width: 1366px) {
padding-top: 26px;
Expand All @@ -56,6 +58,7 @@

&:last-child {
position: relative;
// overflow: hidden;
// z-index: 0;
}
}
Expand Down Expand Up @@ -174,6 +177,7 @@
.fig_eclipse {
display: flex;
width: 100%;
// height: 100%;
position: relative;
aspect-ratio: 1;
top: -75px;
Expand Down Expand Up @@ -218,7 +222,27 @@
left: 50px;
transform: rotate(-6deg);

@media (min-width: 768px) {
@media (min-width:576px) {
top: 35vw;
left: 0vw;
}
@media (min-width:768px) {
top: 31vw;
left: 10vw;
}
@media (min-width:992px) {
top: 26.5vw;
left: 20vw;
}
@media (min-width:1024px) {
top: 24vw;
left: 10vw;
}
@media (min-width:1200px) {
top: 20.5vw;
left: 10vw;
}
@media (min-width: 1366px) {
width: 105px;
top: 280px;
left: 105px;
Expand All @@ -231,7 +255,27 @@
left: 155px;
transform: rotate(8deg);

@media (min-width: 768px) {
@media (min-width:576px) {
top: 35vw;
left: 0vw;
}
@media (min-width:768px) {
top: 31vw;
left: 10vw;
}
@media (min-width:992px) {
top: 26.5vw;
left: 20vw;
}
@media (min-width:1024px) {
top: 24vw;
left: 10vw;
}
@media (min-width:1200px) {
top: 20.5vw;
left: 10vw;
}
@media (min-width: 1366px) {
width: 115px;
top: 165px;
left: 325px;
Expand All @@ -254,7 +298,28 @@
left: 120px;
transform: rotate(-10.5deg);

@media (min-width: 768px) {
@media (min-width:576px) {
top: 42vw;
left: 40vw;
}
@media (min-width:768px) {
top: 37vw;
left: 40vw;
}
@media (min-width:992px) {
top: 31vw;
left: 40vw;
}
@media (min-width:1024px) {
top: 30vw;
left: 40vw;
}
@media (min-width:1200px) {
top: 26vw;
left: 40vw;
}

@media (min-width: 1366px) {
width: 156px;
top: 495px;
left: 220px;
Expand All @@ -264,8 +329,25 @@
&:last-child {
display: none;

@media (min-width: 768px) {
@media (min-width:576px) {
display: inherit;
top: 42vw;
right: 0;
}
@media (min-width:768px) {
top: 36vw;
}
@media (min-width:992px) {
top: 30vw;
}
@media (min-width:1024px) {
top: 30vw;
}
@media (min-width:1200px) {
top: 25vw;
}

@media (min-width: 1366px) {
top: 560px;
right: -25px;
}
Expand All @@ -283,10 +365,10 @@
// background: url(../img/header/bg-img-city.png) center bottom no-repeat;
background: url(../img/header/bg-img-city.png) bottom no-repeat;
background-position-x: 80%;
background-size: 230%;
background-size: 110vh;
pointer-events: none;

@media (min-width: 1024px) {
@media (min-width: 1366px) {
background-position-x: center;
background-size: inherit;
}
Expand Down

0 comments on commit 5bf6eb3

Please sign in to comment.