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="560">
+        <img src="images/conversations.jpg" class="margin" style="float: right;" 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="560">
+        <img src="images/kaidan.png" class="margin" style="float: right;" width="520">
         <h4>Приложения</h4>
         <ul>
             <li>
@@ -79,7 +79,7 @@
             </li>
             <li>
 
-                <img src="images/movim.png" class="margin" style="float: right;" width="560">
+                <img src="images/movim.png" class="margin" style="float: right;" width="520">
                 <h5>Mac</h5>
                 <ul>
                     <li><a href="https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494">BeagleIM</a></li>
@@ -115,7 +115,7 @@
         </ul>
         <hr style="clear: right">
 
-        <img src="images/signal.jpg" class="margin" style="float: right;" width="560">
+        <img src="images/signal.jpg" class="margin" style="float: right;" width="520">
         <h3 id="signal">Signal</h3>
         <p>
             Популярное приложение для обмена сообщениями, голосовых- и видеозвонков, для регистрации нужен номер телефона.

index.html

@@ -37,7 +37,7 @@
 	<nav id="masto">
 		<a href="https://mastodonsocial.ru"><div>MastodonSocial</div></a>
 		<a href="https://phreedom.tk"><div>Svoboda</div></a>
-		<a href="https://soc.ialis.me"><div>Socialisme</div></a>
+		<a href="https://aspirant.de"><div>Aspirant</div></a>
 		<a href="https://lor.sh"><div>LinuxOrgRu</div></a>
 	</nav>
 	</p>

mail.html

@@ -68,6 +68,18 @@
         </ul>
         <hr style="clear: right">
 
+	<h3 id="cock.li">Cock.li</h3>
+        <p>
+            Сервис, поддерживающий множество доменов. Существует на добровольные пожертвования пользователей, которые
+            принимаются в том числе и криптовалютами. Быстр, бесплатен и надёжен. Как и в случае с Posteo,
+            отдельных приложений не требуется - POP3, IMAP, SMTP поддерживаются.
+        </p>
+        <h4>Где зарегистрироваться?</h4>
+        <ul>
+            <li><a href="https://cock.li/register">https://cock.li/register</a></p></li>
+        </ul>
+        <hr style="clear: right">
+
         <h3 id="proton">ProtonMail</h3>
         <p>
             Расположенный в Швейцарии сервис без рекламы, с заявленой максимально возможной приватностью для
@@ -112,18 +124,6 @@
         </ul>
         <hr style="clear: right">
 
-        <h3 id="cock.li">Cock.li</h3>
-        <p>
-            Сервис, поддерживающий множество доменов. Существует на добровольные пожертвования пользователей, которые
-            принимаются в том числе и криптовалютами. Быстр, бесплатен и надёжен. Как и в случае с Posteo,
-            отдельных приложений не требуется - POP3, IMAP, SMTP поддерживаются.
-        </p>
-        <h4>Где зарегистрироваться?</h4>
-        <ul>
-            <li><a href="https://cock.li/register">https://cock.li/register</a></p></li>
-        </ul>
-        <hr style="clear: right">
-
         <h3 id="fastmail">FastMail</h3>
         <p>
             Австралийская компания, содержащаяся исключительно на деньги пользователей, без рекламы и отслеживания.

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="560">
+	<img src="images/ddg.png" class="margin" style="float: right;" 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="560">
+	<img src="images/searx.png" class="margin" style="float: right;" width="520">
         <p>
             Searx - это метапоисковой движок с открытым исходным кодом,
             который ищет с помощью других поисковых систем, не сообщая им о вас ничего.

social.html

@@ -74,7 +74,7 @@
             гуманитарию локальная лента может показаться скучноватой.
         </p>
         <h4>Приложения</h4>
-        <img src="images/mastodon.png" class="margin" style="float: right;" width="560">
+        <img src="images/mastodon.png" class="margin" style="float: right;" width="520">
         <ul>
             <li>
                 <h5>Android</h5>
@@ -110,7 +110,7 @@
             связанных воедино посредством федерации. Мелкие сайты, составляющие
             Френдику, называются "нодами".
         </p>
-        <img src="images/frendica.png" class="margin" style="float: right;" width="560">
+        <img src="images/frendica.png" class="margin" style="float: right;" 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="560">
+        <img src="images/diaspora.png" class="margin" style="float: right;" 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="560">
+        <img src="images/pixelfed.png" class="margin" style="float: right;" width="520">
         <p>
             Сеть состоит из мелких независимых сайтов, способных общаться между собой,
             так что вы можете свободно фолловить людей с других сайтов PixelFed,

style/main.css

@@ -3,18 +3,17 @@ html, body {
 }
 
 .mainContainer {
-    width: 1024px;
+    width: 85%;
     margin: auto;
     min-height: 100%;
 }
 
 .button {
-    width: 180px;
     border-radius: 5px;
     display: block;
     padding: 20px;
     background-color:  #cde6ea;
-    box-sizing: border-box;
+    box-sizing: content-box;
     text-decoration: none;
     font-weight: bold;
     color: inherit;
@@ -24,6 +23,10 @@ html, body {
     transition: background-color 0.2s ease;
 }
 
+
+
+
+
 nav {
     display: flex;
     overflow: hidden;
@@ -31,10 +34,10 @@ nav {
 }
 
 nav > a {
+    padding: 20px;
     flex: auto;
     display: block;
-    padding: 20px;
+    box-sizing: content-box;
-    box-sizing: border-box;
     text-decoration: none;
     font-weight: bold;
     color: inherit;
@@ -69,6 +72,54 @@ nav > a > div {
     overflow: hidden;
 }
 
+
+@media only screen and (max-width : 640px) {
+	nav {
+	    display: block;
+	    overflow: hidden;
+	    background-color: #93ff83;
+	}
+
+	nav > a {
+	    padding: 20px;
+	    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;
     color: #333;