Adaptive V3
This commit is contained in:
@@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user