Commit v2

site/pages/Музей-заповедник.html

@@ -31,10 +31,7 @@
 
         <!--FOOTER-->
         <footer>
-            <div class="prevFooter"></div>
-            <div class = "postFooter"> 
-                <p class="miniText"> ©Defectum studio</p> 
-            </div>
+            <p class="miniText"> ©Defectum studio</p> 
         </footer>
         <!-- load all included html pages -->
         <script>includeHTML();</script>

site/style/background.css

@@ -8,8 +8,8 @@
         top: 10%;
  
         z-index: 2;
-        width: 70%;
-        background-color:  var(--headerBoxColor);
+        width: var(--headFootBoxWhight);
+        background-color: var(--headerBoxColor);
 
         border-radius: 2vw;
         overflow: hidden;
@@ -17,15 +17,14 @@
     
     body{
         background-color: var(--bodyBoxColor);
-        background-image: url('/style/background.png');
     }
 
     .vologdaDescription{
         position:relative;
         margin: auto;
-        margin-top: 6vw;
+        margin-top: 3vw;
 
-        width: var(--blockSize);
+        width: var(--defaultBoxWhight);
 
         text-align: center;
 
@@ -38,7 +37,7 @@
         position:relative;
         margin: auto;
 
-        width: var(--blockSize);
+        width: var(--defaultBoxWhight);
         margin-top: 6vw;
         height: 25%;
 
@@ -54,7 +53,7 @@
         margin: auto;
         margin-top: var(--vologdaBoxMargin);
 
-        width: var(--blockSize);
+        width: var(--defaultBoxWhight);
         height: 30vw;
 
         text-align: center;
@@ -73,52 +72,42 @@
 		margin: auto;
 
         margin-top: calc(var(--boxHeight) * 1.5);
-        width: 70%;
-    }
+        width: var(--headFootBoxWhight);
 
+        background-color: var(--headerBoxColor);
+        border-radius: 1vw;
 
-    .prevFooter{
-        height: calc(var(--boxHeight) * 0.4);
-
-        border-top-right-radius: 1vw;
-        border-top-left-radius: 1vw;
-        background-color:  var(--postHeaderBoxColor);
-    }
-
-    .postFooter{
-		border-bottom-right-radius: 1vw;
-        border-bottom-left-radius: 1vw;
-        background-color:  var(--headerBoxColor);
-     
         text-align: center;
         overflow: hidden;
     }
  
     :root {
-        /* --headerBoxColor:rgb(177, 250, 250); */
-        --headerBoxColor:rgb(227, 38, 54);
+        --headerBoxColor:rgb(177, 250, 250);
+        --postHeaderBoxColor:rgb(175, 238, 238);
 
-        /* --postHeaderBoxColor:rgb(175, 238, 238); */
-        --postHeaderBoxColor:rgb(173, 32, 43);
-
-        /* 89, 152, 197 */
-        /* --bodyBoxColor:rgb(255, 255, 255); */
-        /* --bodyBoxColor:rgb(39, 38, 53); */
-        /* --bodyBoxColor:rgb(78, 89, 140); */
-        /* --bodyBoxColor:rgb(10, 9, 3); */
-        --bodyBoxColor:rgb(89, 152, 197);
-
-
-
-
-        
+        --bodyBoxColor:rgb(255, 255, 255);
 
         --vologdaBoxMargin: 6vw;
-        --blockSize: 50vw;
-        
-        /* --vologdaBoxColor: rgb(177, 250, 250); */
-        --vologdaBoxColor: rgb(227, 38, 54);
-        
+        --vologdaBoxColor: rgb(177, 250, 250);
 
         --boxHeight: 3.1vw;
-    }
+
+        --defaultBoxWhight: 600px;
+        --headFootBoxWhight: 900px;
+    }
+
+    @media (max-width: 1100px) {
+        :root {
+            --defaultBoxWhight: 60%;
+            --headFootBoxWhight: 90%;
+        }
+    }
+
+    @media (max-width: 920px) {
+        :root {
+            --defaultBoxWhight: 75%;
+            --headFootBoxWhight: 90%;
+        }
+    }
+
+      

site/style/buttonStyle.css

@@ -35,4 +35,17 @@
 
     :root {
         --sizeButton: 1;
+    }
+
+    @media screen and (max-width: 1100px) {
+        :root {
+            --sizeButton: 1.3;
+        }
+    }
+
+
+    @media screen and (max-width: 920px) {
+        :root {
+            --sizeButton: 1.6;
+        }
     }