Merge branch 'master' of Tolstoevsky/switching into master

index.html

@@ -21,8 +21,9 @@
     </nav>
     <div class="content">
         <h1>У вас всегда есть выбор.</h1>
-	<p> Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? <a class="button" href="info.html">Узнать подробности</a>
- Почему они никогда не станут лучше? И - главное - что со всем этим делать? Чтоб выйти из-под крыла государственной цензуры и ока Большого Брата корпораций, необязательно быть хакером, для этого не нужны особые знания. Мы расскажем, как.
+	<p><a class="button" href="info.html">Узнать подробности</a>
+	Чем плохи привычные централизованные соцсети и сервисы?
+	Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать? Чтоб выйти из-под крыла государственной цензуры и ока Большого Брата корпораций, необязательно быть хакером, для этого не нужны особые знания. Мы расскажем, как. 
 	</p>
 	<br>
 	<hr style="clear: right">

style/main.css

@@ -11,7 +11,7 @@ html, body {
 .button {
     border-radius: 5px;
     display: block;
-    padding: 20px;
+    padding: 15px;
     background-color:  #cde6ea;
     box-sizing: content-box;
     text-decoration: none;
@@ -308,7 +308,7 @@ img, iframe {
     }
 
     .mainContainer {
-   	 width: 600px;
+   	 width: 520px;
     }    
     .mainContainer > nav > a {
         margin: 10px;
@@ -329,3 +329,67 @@ img, iframe {
         margin: 15px 0;
     }
 }
+
+
+@media only screen and (max-width : 520px) {
+    nav {
+        display: block;
+        overflow: hidden;
+        background-color: #93ff83;
+    }
+
+    .mainContainer {
+   	 width: 480px;
+    }    
+    .mainContainer > nav > a {
+        margin: 10px;
+    }
+
+    .mainContainer > nav > a > div {
+        transform: initial;
+        top: 0;
+        position: static;
+    }
+
+    .floatRight {
+        float: none;
+    }
+
+    .mainContainer img,
+    .mainContainer iframe {
+        margin: 15px 0;
+    }
+}
+
+@media only screen and (max-width : 480px) {
+    nav {
+        display: block;
+        overflow: hidden;
+        background-color: #93ff83;
+    }
+
+    .mainContainer {
+   	 width: 375px;
+    }    
+    .mainContainer > nav > a {
+        margin: 10px;
+    }
+
+    .mainContainer > nav > a > div {
+        transform: initial;
+        top: 0;
+        position: static;
+    }
+
+    .floatRight {
+        float: none;
+    }
+
+    .mainContainer img,
+    .mainContainer iframe {
+        margin: 15px 0;
+    }
+}
+
+
+