blue/switching
2
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

a lil bit of tweaks for addaptive, some unification

Browse Source
This commit is contained in:
Blue 2019-07-30 19:56:50 +03:00
parent 2d8640ab34
commit 40be83613e
7 changed files with 86 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
im.html
View File

@ -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>

6
index.html
View File

@ -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>

8
info.html
View File

@ -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>

9
mail.html
View File

@ -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>

10
search.html
View File

@ -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>

18
social.html
View File

@ -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>

86
style/main.css
View File

@ -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;
}
@media only screen and (max-width : 640px) {
nav {
display: block;
overflow: hidden;
background-color: #93ff83;
.floatLeft {
float: left;
}
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;
.floatRight {
float: right;
}
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;
}
}