Adaptive V3

This commit is contained in:
Петухова Ростислава
2023-10-31 22:11:17 +03:00
parent 35c5c703e3
commit 0e7c5f5c6e
2 changed files with 39 additions and 25 deletions

View File

@@ -13,6 +13,8 @@
border-radius: 2vw; border-radius: 2vw;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 1em rgba(0,0,0,0.7);
} }
body{ body{
@@ -30,8 +32,10 @@
text-align: center; text-align: center;
background-color: var(--vologdaBoxColor); background-color: var(--vologdaBoxColor);
border-radius: 1vw; border-radius: 2em;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 1em rgba(0,0,0,0.7);
} }
.vologdaPlace{ .vologdaPlace{
@@ -45,8 +49,10 @@
text-align: center; text-align: center;
background-color: var(--vologdaBoxColor); background-color: var(--vologdaBoxColor);
border-radius: 1vw; border-radius: 2em;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 1em rgba(0,0,0,0.7);
} }
.vologdaMap{ .vologdaMap{
@@ -55,17 +61,19 @@
margin-top: var(--vologdaBoxMargin); margin-top: var(--vologdaBoxMargin);
width: var(--defaultBoxWhight); width: var(--defaultBoxWhight);
height: 30vw; height: 600px;
text-align: center; text-align: center;
background-color: var(--vologdaBoxColor); background-color: var(--vologdaBoxColor);
overflow: hidden; overflow: hidden;
-moz-border-radius: 1vw 1vw 1vw 1vw; /* Firefox */ -moz-border-radius: 2em 2em 2em 2em; /* Firefox */
-webkit-border-radius: 1vw 1vw 1vw 1vw; /* Safari, Chrome */ -webkit-border-radius: 2em 2em 2em 2em; /* Safari, Chrome */
-khtml-border-radius: 1vw 1vw 1vw 1vw; /* KHTML */ -khtml-border-radius: 2em 2em 2em 2em; /* KHTML */
border-radius: 1vw 1vw 1vw 1vw; /* CSS3 */ border-radius: 2em 2em 2em 2em; /* CSS3 */
box-shadow: 0 0 1em rgba(0,0,0,0.7);
} }
footer{ footer{
@@ -76,22 +84,19 @@
width: var(--headFootBoxWhight); width: var(--headFootBoxWhight);
background-color: var(--headerBoxColor); background-color: var(--headerBoxColor);
border-radius: 1vw; border-radius: 2em;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 1em rgba(0,0,0,0.7);
} }
:root { :root {
/* --headerBoxColor:rgb(177, 250, 250);
--postHeaderBoxColor:rgb(175, 238, 238);
--bodyBoxColor:rgb(255, 255, 255); */
--vologdaBoxMargin: 6vw; --vologdaBoxMargin: 6vw;
--boxHeight: 3.1vw; --boxHeight: 3.1vw;
--defaultBoxWhight: 600px; --defaultBoxWhight: 750px;
--headFootBoxWhight: 900px; --headFootBoxWhight: 900px;
--vologdaBoxColor: rgb(177, 250, 250); --vologdaBoxColor: rgb(177, 250, 250);
@@ -119,14 +124,7 @@
@media (max-width: 1100px) { @media (max-width: 1100px) {
:root { :root {
--defaultBoxWhight: 80%; --defaultBoxWhight: 90%;
--headFootBoxWhight: 90%;
}
}
@media (max-width: 920px) {
:root {
--defaultBoxWhight: 85%;
--headFootBoxWhight: 95%; --headFootBoxWhight: 95%;
} }
} }

View File

@@ -34,18 +34,34 @@
} }
:root { :root {
--sizeButton: 1; --sizeButton: 1.5;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
:root { :root {
--sizeButton: 2; --sizeButton: 4;
}
.button-grid {
display: grid;
display: grid;
grid-template-columns: 4fr 4fr;
grid-template-rows: 4fr 4fr;
grid-gap: 4fr;
} }
} }
@media screen and (max-width: 920px) { @media screen and (max-width: 920px) {
:root { :root {
--sizeButton: 2.5; --sizeButton: 4;
}
.button-grid {
display: grid;
display: grid;
grid-template-columns: 4fr 4fr;
grid-template-rows: 4fr 4fr;
grid-gap: 4fr;
} }
} }