some styling, some screenshots

2019-07-28 01:08:55 +03:00 · 2019-07-28 01:08:55 +03:00 · 1ad1cfe592
parent 1261bc0f2d
commit 1ad1cfe592
18 changed files with 111 additions and 14 deletions
--- a/im.html
+++ b/im.html
@ -8,9 +8,19 @@
 </head>
 <body>
 <div class="mainContainer">
+    <nav id="header">
+        <a href="index.html"><div>Главная</div></a>
+        <a href="social.html"><div>Социальные сети</div></a>
+        <a class="current" href="im.html"><div>Сервисы мгновенных сообщений</div></a>
+        <a href="mail.html"><div>Почтовые сервисы</div></a>
+        <a href="search.html"><div>Поисковые сервисы</div></a>
+        <a href="info.html"><div>Зачем?</div></a>
+    </nav>
+
    <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">
    <p>
        Широко используемый свободный и открытый стандарт интернет-сообщений.
        Весьма прост в использовании — регистрируем аккаунт, устанавливаем приложение.
@ -29,6 +39,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">
    <h4>Приложения</h4>
    <ul>
        <li>
@ -64,6 +75,8 @@
            </ul>
        </li>
        <li>
+
+            <img src="images/movim.png" class="margin" style="float: right;" width="560">
            <h5>Mac</h5>
            <ul>
                <li><a href="https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494">BeagleIM</a></li>
@ -78,8 +91,10 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="quicksy">Quicksy</h3>
+    <img src="images/quicksy.png" class="margin" style="float: right;">
    <p>
        Очень простой в использовании чатик. Регистрация по номеру телефона.
    </p>
@ -95,7 +110,9 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

+    <img src="images/signal.jpg" class="margin" style="float: right;" width="560">
    <h3 id="signal">Signal</h3>
    <p>
        Популярное приложение для обмена сообщениями, голосовых- и видеозвонков, для регистрации нужен номер телефона.
@ -125,6 +142,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="jami">Jami (ранее Ring)</h3>
    <p>
@ -158,6 +176,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="jitsi">Jitsi Meet</h3>
    <p>
--- a/images/conversations.jpg
+++ b/images/conversations.jpg
--- a/images/diaspora.png
+++ b/images/diaspora.png
--- a/images/dino.png
+++ b/images/dino.png
--- a/images/frendica.png
+++ b/images/frendica.png
--- a/images/kaidan.png
+++ b/images/kaidan.png
--- a/images/koshka.jpg
+++ b/images/koshka.jpg
--- a/images/mastodon.png
+++ b/images/mastodon.png
--- a/images/movim.png
+++ b/images/movim.png
--- a/images/pixelfed.png
+++ b/images/pixelfed.png
--- a/images/quicksy.png
+++ b/images/quicksy.png
--- a/images/signal.jpg
+++ b/images/signal.jpg
--- a/index.html
+++ b/index.html
@ -9,18 +9,18 @@
 <body>
 <div class="mainContainer">
    <nav id="header">
-        <a href="index.html">Главная</a>
-        <a href="social.html">Социальные сети</a>
-        <a href="im.html">Сервисы мгновенных сообщений</a>
-        <a href="mail.html">Почтовые сервисы</a>
-        <a href="search.html">Поисковые сервисы</a>
-        <a href="info.html">Зачем?</a>
+        <a class="current" href="index.html"><div>Главная</div></a>
+        <a href="social.html"><div>Социальные сети</div></a>
+        <a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
+        <a href="mail.html"><div>Почтовые сервисы</div></a>
+        <a href="search.html"><div>Поисковые сервисы</div></a>
+        <a href="info.html"><div>Зачем?</div></a>
    </nav>
    <h1>
-        Альтернативы есть.
-        Выбор есть.
-        Ваш выбор важен.
-        Вы важны
+        Альтернативы - есть.<br>
+        Выбор - есть.<br>
+        Ваш выбор - важен.<br>
+        Вы - важны!<br>
    </h1>
 </div>
 </body>
--- a/info.html
+++ b/info.html
@ -8,9 +8,17 @@
 </head>
 <body>
 <div class="mainContainer">
+    <nav id="header">
+        <a href="index.html"><div>Главная</div></a>
+        <a href="social.html"><div>Социальные сети</div></a>
+        <a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
+        <a href="mail.html"><div>Почтовые сервисы</div></a>
+        <a href="search.html"><div>Поисковые сервисы</div></a>
+        <a class="current" href="info.html"><div>Зачем?</div></a>
+    </nav>
    <h1>Fediverse или как стать Неуловимым Джо</h1>
    <h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3>
-    <img src="koshka.jpg" style="float: left; width: 500px; margin: 20px"/>
+    <img src="images/koshka.jpg" class="margin" style="float: left; width: 500px"/>
    <p>
        Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
        слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
--- a/mail.html
+++ b/mail.html
@ -8,6 +8,15 @@
 </head>
 <body>
 <div class="mainContainer">
+    <nav id="header">
+        <a href="index.html"><div>Главная</div></a>
+        <a href="social.html"><div>Социальные сети</div></a>
+        <a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
+        <a class="current" href="mail.html"><div>Почтовые сервисы</div></a>
+        <a href="search.html"><div>Поисковые сервисы</div></a>
+        <a href="info.html"><div>Зачем?</div></a>
+    </nav>
+
    <h1>Почтовые сервисы</h1>
    <h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2>

@ -51,6 +60,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="proton">ProtonMail</h3>
    <p>
@ -82,6 +92,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="posteo">Posteo</h3>
    <p>
@ -120,6 +131,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="thexyz">Thexyz</h3>
    <p>
@ -148,6 +160,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="kolab">Kolab now</h3>
    <p>
@ -158,6 +171,7 @@
    <ul>
        <li><a href="https://kolabnow.com/">kolabnow.com</a></li>
    </ul>
+    <hr style="clear: right">

    <h3 id="mailbox">Mailbox.org</h3>
    <p>
--- a/main.css
+++ b/main.css
@ -28,12 +28,38 @@ nav > a {
    font-weight: bold;
    color: inherit;
    text-align: center;
+    background-color: transparent;
+
+    transition: background-color 0.2s;
+}
+
+nav > a.current {
+    background-color: #5db9ef;
+}
+
+nav > a:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+nav > a.current:hover {
+    background-color: #5397ca;
 }

 nav > a:visited {
    color: inherit;
 }

+.margin {
+    margin: 15px;
+}
+
+nav > a > div {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    overflow: hidden;
+}
+
 .thumbnails {
    text-align: center;
    overflow: hidden;
--- a/search.html
+++ b/search.html
@ -8,6 +8,14 @@
 </head>
 <body>
 <div class="mainContainer">
+    <nav id="header">
+        <a href="index.html"><div>Главная</div></a>
+        <a href="social.html"><div>Социальные сети</div></a>
+        <a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
+        <a href="mail.html"><div>Почтовые сервисы</div></a>
+        <a class="current" href="search.html"><div>Поисковые сервисы</div></a>
+        <a href="info.html"><div>Зачем?</div></a>
+    </nav>
    <h1>Поисковые сервисы</h1>
    <h3 id="duckduckgo">DuckDuckGo</h3>
    <p>
@ -41,6 +49,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="qwant">Qwant</h3>
    <p>
@ -71,6 +80,7 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="searx">Searx</h3>
    <p>
@ -103,6 +113,7 @@
            <a href="https://github.com/asciimoo/searx/wiki/Searx-instances">Полный список</a>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="startpage">StartPage</h3>
    <p>
@ -129,6 +140,7 @@
            <a href="https://www.startpage.com/">www.ptartpage.com</a>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3 id="yacy">Анонимная поисковая система Yacy</h3>
    <p>
@ -155,8 +167,9 @@
            <a href="https://yacy.net/">yacy.net</a>
        </li>
    </ul>
+    <hr style="clear: right">

-    <h3 id="other">список других поисковиков</h3>
+    <h3 id="other">Список других поисковых систем</h3>
    <ul>
        <li>
            <a href="https://www.oscobo.com/">www.oscobo.com</a>
--- a/social.html
+++ b/social.html
@ -8,10 +8,19 @@
 </head>
 <body>
 <div class="mainContainer">
+    <nav id="header">
+        <a href="index.html"><div>Главная</div></a>
+        <a class="current" href="social.html"><div>Социальные сети</div></a>
+        <a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
+        <a href="mail.html"><div>Почтовые сервисы</div></a>
+        <a href="search.html"><div>Поисковые сервисы</div></a>
+        <a href="info.html"><div>Зачем?</div></a>
+    </nav>
+
    <h1>Социальные сети</h1>
    <h2>Альтернативы Вконтакте/Facebook и Twitter</h2>
    <h3 id="mastodon">Mastodon</h3>
-    <iframe style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://video.deadsuperhero.com/videos/embed/adffa7af-6063-4e09-8c1c-e8252167315d" frameborder="0" allowfullscreen=""></iframe>
+    <iframe class="margin" style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://video.deadsuperhero.com/videos/embed/adffa7af-6063-4e09-8c1c-e8252167315d" frameborder="0" allowfullscreen=""></iframe>
    <p>
        На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
        Выше приведено официальное англоязычное видео, объясняющее, как работает эта сеть.
@ -63,6 +72,7 @@
        гуманитарию локальная лента может показаться скучноватой.
    </p>
    <h4>Приложения</h4>
+    <img src="images/mastodon.png" class="margin" style="float: right;" width="560">
    <ul>
        <li>
            <h5>Android</h5>
@ -89,6 +99,7 @@
        P.S.: Если Мастодон заинтересовал вас настолько, что вы готовы запустить
        собственную инстанцию, став частью сети, вы можете сделать это в пару кликов на <a href="https://masto.host">masto.host</a>
    </p>
+    <hr>

    <h3 id="frendica">Friendica</h3>
    <p>Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы.</p>
@ -97,6 +108,7 @@
        связанных воедино посредством федерации. Мелкие сайты, составляющие
        Френдику, называются "нодами".
    </p>
+    <img src="images/frendica.png" class="margin" style="float: right;" width="560">
    <p>
        Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
        всеми остальными альтернативными соцсетями, так что завести друзей
@ -123,8 +135,10 @@
            </ul>
        </li>
    </ul>
+    <hr style="clear: right">

    <h3>Diaspora</h3>
+    <img src="images/diaspora.png" class="margin" style="float: right;" width="560">
    <p>
        Одна из старейших альтернатив ВК и Facebook.
        Диаспора также состоит из множества мелких сайтов,
@ -143,6 +157,7 @@
        <li><a href="https://russiandiaspora.org">russiandiaspora.org</a></li>
        <li><a href="https://pod.disroot.org">pod.disroot.org</a></li>
    </ul>
+    <hr style="clear: right">

    <h2>Альтернатива Instagram</h2>
    <h3 id="pixelfed">Pixelfed</h3>
@ -152,6 +167,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">
    <p>
        Сеть состоит из мелких независимых сайтов, способных общаться между собой,
        так что вы можете свободно фолловить людей с других сайтов PixelFed,
@ -176,10 +192,11 @@
        <li><a href="https://pix.tedomum.net">pix.tedomum.net</a></li>
        <li><a href="https://pix.diaspodon.fr">pix.diaspodon.fr</a></li>
    </ul>
+    <hr style="clear: right">

    <h2>Альтернатива YouTube</h2>
    <h3 id="peertube">PeerTube</h3>
-    <iframe 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" 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>
    <p>
        PeerTube — открытая распределённая альтернатива YouTube (принадлежащей Google).
        Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.