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

zoom

Browse Source
This commit is contained in:
tolstoevsky 2020-03-11 13:39:42 +03:00
parent f7d2e1a460
commit f67caa0721
No known key found for this signature in database
GPG Key ID: EDD59F3A654C596C
7 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/base.css
View File

@ -72,6 +72,18 @@ h1, h2, h3 {
font-family: "exo2"; font-family: "exo2";
} }
.zoom {
transition: transform .2s;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
body { body {
max-width: 90%; max-width: 90%;

6
extra.html
View File

@ -95,11 +95,11 @@
<div class="imgblock"> <div class="imgblock">
<a href="images/thumb1.png" > <a href="images/thumb1.png" >
<img src="images/thumb1.png" width=15% max-width=100% style="float:left;"></a> <img src="images/thumb1.png" width=15% max-width=100% style="float:left;" class="zoom"></a>
<a href="images/thumb2.png" > <a href="images/thumb2.png" >
<img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;"></a> <img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;" class="zoom"></a>
<a href="images/transport.png" > <a href="images/transport.png" >
<img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;" ></a> <img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;" class="zoom" ></a>
Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам, Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам,
дав ссылку на этот сайт, либо распечатав и распространив листовки дав ссылку на этот сайт, либо распечатав и распространив листовки
(не исключаем, что одна из них и привела вас сюда). Вливайтесь в ряды просветителей, (не исключаем, что одна из них и привела вас сюда). Вливайтесь в ряды просветителей,

4
im.html
View File

@ -35,7 +35,7 @@
<picture> <picture>
<source srcset="images/conversations.png" media="(max-width: 700px)"> <source srcset="images/conversations.png" media="(max-width: 700px)">
<source srcset="images/movim.png"> <source srcset="images/movim.png">
<img src="images/movim.png" width=45% max-width=100% alt="Jabber"> <img src="images/movim.png" width=45% max-width=100% alt="Jabber" class="zoom" >
</picture></a> </picture></a>
<p> <p>
@ -92,7 +92,7 @@
<picture> <picture>
<source srcset="images/jitsi2.png" media="(max-width: 700px)"> <source srcset="images/jitsi2.png" media="(max-width: 700px)">
<source srcset="images/jitsi.png"> <source srcset="images/jitsi.png">
<img src="images/jitsi.png" width=45% max-width=100% alt="Jitsi"></a> <img src="images/jitsi.png" width=45% max-width=100% alt="Jitsi" class="zoom"></a>
</picture> </picture>
<h3>Jitsi Meet и Jami - на замену Skype</h3> <h3>Jitsi Meet и Jami - на замену Skype</h3>
<span> <span>

6
index.html
View File

@ -72,7 +72,7 @@
<div class="imgblock"> <div class="imgblock">
<a href="images/mastodon2.png" > <a href="images/mastodon2.png" >
<img src="images/mastodon2.png" width=45% style="float:left; margin:1%;"></a> <img src="images/mastodon2.png" width=45% style="float:left; margin:1%;" class="zoom"></a>
Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент
— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, — самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер,
только с большим лимитом символов и более гибким интерфейсом). только с большим лимитом символов и более гибким интерфейсом).
@ -80,14 +80,14 @@
<div class="imgblock"> <div class="imgblock">
<a href="images/friendica.png" > <a href="images/friendica.png" >
<img src="images/friendica.png" width=45% style= "float:left; margin:1%;"></a> <img src="images/friendica.png" width=45% style= "float:left; margin:1%;" class="zoom"></a>
Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон, Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон,
Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами". Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда. Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда.
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/pixelfed.png" > <a href="images/pixelfed.png" >
<img src="images/pixelfed.png" width=45% style="float:left; margin:1%;"></a> <img src="images/pixelfed.png" width=45% style="float:left; margin:1%;" class="zoom"></a>
А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим. А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
</div> </div>
<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены. <p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.

10
mail.html
View File

@ -34,7 +34,7 @@
<p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. </p> <p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. </p>
<div class="imgblock"> <div class="imgblock">
<a href="images/mailfence.png" > <a href="images/mailfence.png" >
<img src="images/mailfence.png" width=43% max-width=100% style="float:left; margin:1%" alt="MailFence"></a> <img src="images/mailfence.png" width=43% max-width=100% style="float:left; margin:1%" alt="MailFence" class="zoom"></a>
<h3>MailFence</h3> <h3>MailFence</h3>
<span> <span>
Бельгийский сервис электронной почты без рекламы и отслеживания. Поддерживает GPG-шифрование, не выдаёт данные пользователей Бельгийский сервис электронной почты без рекламы и отслеживания. Поддерживает GPG-шифрование, не выдаёт данные пользователей
@ -56,7 +56,7 @@
<picture> <picture>
<source srcset="images/tutanota.png" media="(max-width: 600px)"> <source srcset="images/tutanota.png" media="(max-width: 600px)">
<source srcset="images/tutanota_w.png"> <source srcset="images/tutanota_w.png">
<img src="images/tutanota_w.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="Tutanota"> <img src="images/tutanota_w.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="Tutanota" class="zoom">
</picture></a> </picture></a>
<h3>Tutanota</h3> <h3>Tutanota</h3>
<span> <span>
@ -77,7 +77,7 @@
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/posteo.jpg" > <a href="images/posteo.jpg" >
<img src="images/posteo.jpg" width=45% max-width="100%" style="float:left; margin:1%;" alt="Posteo"></a> <img src="images/posteo.jpg" width=45% max-width="100%" style="float:left; margin:1%;" alt="Posteo" class="zoom"></a>
<h3>Posteo</h3> <h3>Posteo</h3>
<span> <span>
Почтовый сервис без рекламы, максимально приватный и использующий исключительно "зелёное" электричество. Почтовый сервис без рекламы, максимально приватный и использующий исключительно "зелёное" электричество.
@ -94,7 +94,7 @@
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/cockmail.png" > <a href="images/cockmail.png" >
<img src="images/cockmail.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="CockMail"></a> <img src="images/cockmail.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="CockMail" class="zoom"></a>
<h3>Cockmail</h3> <h3>Cockmail</h3>
<span> <span>
@ -114,7 +114,7 @@
<picture> <picture>
<source srcset="images/thexyz_m.png" media="(max-width: 600px)"> <source srcset="images/thexyz_m.png" media="(max-width: 600px)">
<source srcset="images/thexyz.png"> <source srcset="images/thexyz.png">
<img src="images/thexyz.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="TheXYZ"></a> <img src="images/thexyz.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="TheXYZ" class="zoom"></a>
</picture> </picture>
<h3>TheXYZ</h3> <h3>TheXYZ</h3>
<span> <span>

6
search.html
View File

@ -65,7 +65,7 @@
</p> </p>
<div class="imgblock"> <div class="imgblock">
<a href="images/searx.png" > <a href="images/searx.png" >
<img src="images/searx.png" width=50% max-width=100% style="float:left; margin:1%;" alt="SearX"></a> <img src="images/searx.png" width=50% max-width=100% style="float:left; margin:1%;" alt="SearX" class="zoom"></a>
<h4>Searx</h4> <h4>Searx</h4>
<p> <p>
Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому
@ -90,7 +90,7 @@
</p> </p>
<div class="imgblock"> <div class="imgblock">
<a href="images/ecosia.png" > <a href="images/ecosia.png" >
<img src="images/ecosia.png" width=50% max-width=100% style="float:left; margin:1%;" alt="Ecosia"></a> <img src="images/ecosia.png" width=50% max-width=100% style="float:left; margin:1%;" alt="Ecosia" class="zoom"></a>
<h4>Яркий пример — Ecosia</h4> <h4>Яркий пример — Ecosia</h4>
<p> <p>
Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста: Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста:
@ -107,7 +107,7 @@
с остальными. И это действительно работает! с остальными. И это действительно работает!
<div class="imgblock"> <div class="imgblock">
<a href="images/yacy.png" > <a href="images/yacy.png" >
<img src="images/yacy.png" width=50% max-width=100% style="float:left; margin:1%;" alt="YaCy"></a> <img src="images/yacy.png" width=50% max-width=100% style="float:left; margin:1%;" alt="YaCy" class="zoom"></a>
<h4>YaCy</h4> <h4>YaCy</h4>
Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован
в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение, в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение,

6
social.html
View File

@ -33,7 +33,7 @@
<p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p> <p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p>
<div class="imgblock"> <div class="imgblock">
<a href="images/mastodon2.png" > <a href="images/mastodon2.png" >
<img src="images/mastodon2.png" width="45%" max-width="100%" style="float:left; margin:1%;"></a> <img src="images/mastodon2.png" width="45%" max-width="100%" style="float:left; margin:1%;" class="zoom"></a>
<h3 id="mastodon" >#вместотвиттера Mastodon</h3> <h3 id="mastodon" >#вместотвиттера Mastodon</h3>
<span> <span>
<span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей. <span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
@ -78,7 +78,7 @@
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/friendica.png" > <a href="images/friendica.png" >
<img src="images/friendica.png" width=45% max-width="100%" style="float:left; margin:1%;"></a> <img src="images/friendica.png" width=45% max-width="100%" style="float:left; margin:1%;" class="zoom"></a>
<h3 id="friendica">#вместоВК Friendica</h3> <h3 id="friendica">#вместоВК Friendica</h3>
<span> <span>
@ -152,7 +152,7 @@
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/peertube.png" > <a href="images/peertube.png" >
<img src="images/peertube.png" width=45% max-width=100% style="float:left; margin:1%;"></a> <img src="images/peertube.png" width=45% max-width=100% style="float:left; margin:1%;" class="zoom"></a>
<h3 id="peertube">#вместоyoutube PeerTube</h3> <h3 id="peertube">#вместоyoutube PeerTube</h3>
<span> <span>