a lil bit of tweaks for addaptive, some unification

im.html

@@ -23,7 +23,7 @@
         <h1>Сервисы мгновенных сообщений</h1>
         <h2>Альтернативы WhatsApp, Viber, Skype</h2>
         <h3 id="xmpp">XMPP (он же Jabber)</h3>
-        <img src="images/conversations.jpg" class="margin" style="float: right;" width="520">
+        <img src="images/conversations.jpg" class="margin floatRight" width="520">
         <p>
             Широко используемый свободный и открытый стандарт интернет-сообщений.
             Весьма прост в использовании — регистрируем аккаунт, устанавливаем приложение.
@@ -42,7 +42,7 @@
             <li><a href="https://404.city">404.city</a></li>
             <li><a href="https://jabber.ru">jabber.ru</a></li>
         </ul>
-        <img src="images/kaidan.png" class="margin" style="float: right;" width="520">
+        <img src="images/kaidan.png" class="margin floatRight" width="520">
         <h4>Приложения</h4>
         <ul>
             <li>
@@ -79,7 +79,7 @@
             </li>
             <li>
 
-                <img src="images/movim.png" class="margin" style="float: right;" width="520">
+                <img src="images/movim.png" class="margin floatRight" width="520">
                 <h5>Mac</h5>
                 <ul>
                     <li><a href="https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494">BeagleIM</a></li>
@@ -97,7 +97,7 @@
         <hr style="clear: right">
 
         <h3 id="quicksy">Quicksy</h3>
-        <img src="images/quicksy.png" class="margin" style="float: right;">
+        <img src="images/quicksy.png" class="margin floatRight">
         <p>
             Очень простой в использовании чатик. Регистрация по номеру телефона.
         </p>
@@ -115,7 +115,7 @@
         </ul>
         <hr style="clear: right">
 
-        <img src="images/signal.jpg" class="margin" style="float: right;" width="520">
+        <img src="images/signal.jpg" class="margin floatRight" width="520">
         <h3 id="signal">Signal</h3>
         <p>
             Популярное приложение для обмена сообщениями, голосовых- и видеозвонков, для регистрации нужен номер телефона.
@@ -210,7 +210,11 @@
         </ul>
     </div>
 </div>
- <footer class="footer"> <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a> Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста <a href="https://switching.social">Switching.Social</a></footer>
+<footer class="footer">
+    <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
+    Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
+    <a href="https://switching.social">Switching.Social</a>
+</footer>
 
 </body>
 </html>

index.html

@@ -43,7 +43,11 @@
 	</p>
     </div>
 </div>
- <footer class="footer"> <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a> Толстоевский, Попугай и компания</footer>
 
+<footer class="footer">
+	<a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
+	Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
+	<a href="https://switching.social">Switching.Social</a>
+</footer>
 </body>
 </html>

info.html

@@ -22,7 +22,7 @@
     <div class="content">
         <h1>Fediverse или как стать Неуловимым Джо</h1>
         <h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3>
-        <img src="images/koshka.jpg" style="float: left; width: 500px; margin: 15px 15px 15px 0"/>
+        <img src="images/koshka.jpg" class="margin floatLeft" width="520"/>
         <p>
             Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
             слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
@@ -112,9 +112,13 @@
             Вливайтесь!
         </p>
     </div>
- <footer class="footer"> <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a> Толстоевский, Попугай и компания</footer>
 
 </div>
+<footer class="footer">
+    <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
+    Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
+    <a href="https://switching.social">Switching.Social</a>
+</footer>
 
 </body>
 </html>

mail.html

@@ -41,7 +41,7 @@
         </p>
 
         <h3 id="tutanota">Tutanota</h3>
-	<img src="images/tutanota.png" class="margin" style="float: right;" width="240">
+	<img src="images/tutanota.png" class="margin floatRight" width="240">
 	<p>
             Сервис, расположенный в Германии, без рекламы и с фокусом на приватность.
             Базовая учётная запись бесплатна, за деньги можно получить больше места и возможностей.
@@ -203,7 +203,10 @@
         </ul>
     </div>
 </div>
- <footer class="footer"> <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a> Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста <a href="https://switching.social">Switching.Social</a></footer>
+<footer class="footer">
-
+    <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
+    Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
+    <a href="https://switching.social">Switching.Social</a>
+</footer>
 </body>
 </html>

search.html

@@ -22,7 +22,7 @@
     <div class="content">
         <h1>Поисковые сервисы</h1>
         <h3 id="duckduckgo">DuckDuckGo</h3>
-	<img src="images/ddg.png" class="margin" style="float: right;" width="520">
+	<img src="images/ddg.png" class="margin floatRight" width="520">
         <p>
             Самая популярная и простая в использовании поисковая система,
             заботящаяся о конфиденциальности. DuckDuckGo финансируется за счет рекламы,
@@ -57,7 +57,7 @@
         <hr style="clear: right">
 
         <h3 id="searx">Searx</h3>
-	<img src="images/searx.png" class="margin" style="float: right;" width="520">
+	<img src="images/searx.png" class="margin floatRight" width="520">
         <p>
             Searx — это метапоисковой движок с открытым исходным кодом,
             который ищет с помощью других поисковых систем, не сообщая им о вас ничего.
@@ -226,7 +226,11 @@
         </ul>
     </div>
 </div>
- <footer class="footer"> <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a> Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста <a href="https://switching.social">Switching.Social</a></footer>
 
+<footer class="footer">
+    <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
+    Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
+    <a href="https://switching.social">Switching.Social</a>
+</footer>
 </body>
 </html>

social.html

@@ -22,7 +22,7 @@
         <h1>Социальные сети</h1>
         <h2>Альтернативы Вконтакте/Facebook и Twitter</h2>
         <h3 id="mastodon">Mastodon</h3>
-        <iframe class="margin" style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://open.tube/videos/embed/d7fabc85-f110-4699-beb0-7edf6d4082ba" frameborder="0" allowfullscreen></iframe>
+        <iframe class="margin floatRight" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://open.tube/videos/embed/d7fabc85-f110-4699-beb0-7edf6d4082ba" frameborder="0" allowfullscreen></iframe>
 	<p>
             На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
             Справа приведено официальное англоязычное видео, объясняющее, как работает эта сеть.
@@ -74,7 +74,7 @@
             "гуманитарию" локальная лента может показаться скучноватой.
         </p>
         <h4>Приложения</h4>
-        <img src="images/mastodon.png" class="margin" style="float: right;" width="520">
+        <img src="images/mastodon.png" class="margin floatRight" width="520">
         <ul>
             <li>
                 <h5>Android</h5>
@@ -110,7 +110,7 @@
             связанных воедино посредством федерации. Мелкие сайты, составляющие
             Френдику, называются "нодами".
         </p>
-        <img src="images/frendica.png" class="margin" style="float: right;" width="520">
+        <img src="images/frendica.png" class="margin floatRight" width="520">
         <p>
             Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
             всеми остальными альтернативными соцсетями, так что завести друзей
@@ -140,7 +140,7 @@
         <hr style="clear: right">
 
         <h3>Diaspora</h3>
-        <img src="images/diaspora.png" class="margin" style="float: right;" width="520">
+        <img src="images/diaspora.png" class="margin floatRight" width="520">
         <p>
             Одна из старейших альтернатив ВК и Facebook.
             Диаспора также состоит из множества мелких сайтов,
@@ -169,7 +169,7 @@
             Пример аккаунта — <a href="https://pixelfed.social/earth">https://pixelfed.social/earth</a> ,
             пример поста — <a href="https://pixelfed.social/p/earth/22346">https://pixelfed.social/p/earth/22346</a>
         </p>
-        <img src="images/pixelfed.png" class="margin" style="float: right;" width="520">
+        <img src="images/pixelfed.png" class="margin floatRight" width="520">
         <p>
             Сеть состоит из мелких независимых сайтов, способных общаться между собой,
             так что вы можете свободно фолловить людей с других сайтов PixelFed,
@@ -198,7 +198,7 @@
 
         <h2>Альтернатива YouTube</h2>
         <h3 id="peertube">PeerTube</h3>
-        <iframe class="margin" style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.video/videos/embed/217eefeb-883d-45be-b7fc-a788ad8507d3" frameborder="0" allowfullscreen=""></iframe>
+        <iframe class="margin floatRight" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.video/videos/embed/217eefeb-883d-45be-b7fc-a788ad8507d3" frameborder="0" allowfullscreen=""></iframe>
         <p>
             PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
             Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.
@@ -237,7 +237,11 @@
         </ul>
     </div>
 </div>
- <footer class="footer"> <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a> Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста <a href="https://switching.social">Switching.Social</a></footer>
 
+<footer class="footer">
+    <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
+    Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
+    <a href="https://switching.social">Switching.Social</a>
+</footer>
 </body>
 </html>

style/main.css

@@ -23,10 +23,6 @@ html, body {
     transition: background-color 0.2s ease;
 }
 
-
-
-
-
 nav {
     display: flex;
     overflow: hidden;
@@ -72,53 +68,14 @@ nav > a > div {
     overflow: hidden;
 }
 
-
+.floatLeft {
-@media only screen and (max-width : 640px) {
+    float: left;
-	nav {
-	    display: block;
-	    overflow: hidden;
-	    background-color: #93ff83;
 }
 
-	nav > a {
+.floatRight {
-	    padding: 20px;
+    float: right;
-	    flex: auto;
-	    display: block;
-	    box-sizing: content-box;
-	    text-decoration: none;
-	    font-weight: bold;
-	    color: inherit;
-	    text-align: center;
-	    background-color: transparent;
-	    font-size: 18px;
-
-	    transition: background-color 0.2s ease;
 }
 
-	nav > a.current {
-	    background-color: #5db9ef;
-	}
-
-	nav > a:hover,
-	.button:hover {
-	    background-color: rgba(0, 0, 0, 0.2);
-	}
-
-	nav > a.current:hover {
-	    background-color: #5397ca;
-	}
-
-	nav > a:visited {
-	    color: inherit;
-	}
-
-	nav > a > div {
-	    position: relative;
-	    top: 50%;
-	    transform: translateY(-50%);
-	    overflow: hidden;
-	}
-}
 
 .mainContainer {
     font-size: 14px;
@@ -158,7 +115,6 @@ nav > a > div {
 
 .mainContainer p {
     margin: 5px 5px 0 10px;
-
 }
 
 .mainContainer strong {
@@ -181,6 +137,11 @@ nav > a > div {
     margin: 15px 0 15px 15px;
 }
 
+.mainContainer img.floatLeft,
+.mainContainer iframe.floatLeft {
+    margin: 15px 15px 15px 0;
+}
+
 .c1 {
     color: aliceblue;
     background-color: darkred;
@@ -235,4 +196,33 @@ nav > a > div {
   	box-sizing: border-box;
 }
 
+img, iframe {
+    max-width: 100%;
+}
 
+@media only screen and (max-width : 640px) {
+    nav {
+        display: block;
+        overflow: hidden;
+        background-color: #93ff83;
+    }
+
+    .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;
+    }
+}