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

merge

Browse Source
This commit is contained in:
Blue 2019-07-28 13:46:34 +03:00
parent 1ad1cfe592
commit ccc5852629
9 changed files with 263 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
im.html
View File

@ -4,10 +4,11 @@
<meta charset="UTF-8">
<title>Сервисы мгновенных сообщений</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style/grey.css">
</head>
<body>
<div class="mainContainer">
<div class="wrap">
<div class="mainContainer clearflix" >
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
@ -16,7 +17,6 @@
<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>
@ -205,6 +205,7 @@
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Альтернативы</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="mainContainer">

19
info.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Альтернативы</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style/grey.css">
</head>
<body>
<div class="mainContainer">
@ -92,7 +92,22 @@
И, наконец, YouTube заменяется <a href="social.html#peertube">PeerTube</a> — видео здесь,
как и сообщения перечисленных выше сетей, расходятся по всему Федивёрсу и доступны (при желании автора) всем.
</li>
</ul>
</ul>
<p>
Ну и коль скоро мы затронули тему мессенджеров, стоит кратко упомянуть достойные альтернативы перечисленным в
начале статьи корпоративным следилкам, радосто сотрудничающим со спецслужбами (или кто-то до сих пор верит, что
коммерческая контора Telegram LLC будет тратить кучу ресурсов на защиту Васи от товарища майора?). Мессенджеры
непосредственно в Fediverse не входят, но в большинстве своём (речь, опять же идёт о рекомендованых) основаны на
принципах федерации либо на peer-to-peer. <a href="im.html">вот здесь</a> вы можете подобрать себе подходящую
альтернативу.
</p>
<p>
Смело проходите по ссылкам выше, мы ждём вас в Fediverse. Новичкам тут всегда помогут, а несогласных не забанят.
Вливайтесь!
</p>
</div>
</body>
</html>

18
mail.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Почтовые сервисы</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style/grey.css">
</head>
<body>
<div class="mainContainer">
@ -17,6 +17,8 @@
<a href="info.html"><div>Зачем?</div></a>
</nav>
<div class="wrap">
<div class="mainContainer">
<h1>Почтовые сервисы</h1>
<h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2>
@ -105,6 +107,19 @@
<li><a href="https://posteo.de/en">posteo.de</a></li>
</ul>
<h3 id="cock.li">Cock.li</h3>
<p>
Сервис, поддерживающий множество доменов на выбор, включая такие замечательные, как cocaine.ninja,
rape.lol, cock.li и море других. Существует на добровольные пожертвования пользователей, которые
принимаются в том числе и криптовалютами. Быстр, бесплатен и надёжен. Как и в случае с 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>
Австралийская компания, содержащаяся исключительно на деньги пользователей, без рекламы и отслеживания.
@ -182,6 +197,7 @@
<ul>
<li><a href="https://mailbox.org/">mailbox.org</a></li>
</ul>
</div>
</div>
</body>
</html>

22
search.html
View File

@ -4,18 +4,19 @@
<meta charset="UTF-8">
<title>Поисковые сервисы</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style/grey.css">
</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>
<div class="wrap">
<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>
@ -217,6 +218,7 @@
<a href="https://anonymousengine.com/">anonymousengine.com</a>
</li>
</ul>
</div>
</div>
</body>
</html>

12
social.html
View File

@ -4,10 +4,12 @@
<meta charset="UTF-8">
<title>Социальные сети</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style/grey.css">
</head>
<body>
<div class="mainContainer">
<div class="wrap">
<div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a class="current" href="social.html"><div>Социальные сети</div></a>
@ -16,7 +18,6 @@
<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>
@ -61,10 +62,10 @@
себе инстанцию под ваши предпочтения!
</p>
<p>Основные отличия между разными инстанциями, на которые стоит обратить внимание:</p>
<nl>
<ul>
<li>Максимальное количество символов, которые инстанция позволяет включать в один пост;</li>
<li>Для какого круга людей создана инстанция - от этого зависит, насколько вам будет интересна локальная лента.</li>
</nl>
</ul>
<p>
Например, qoto.org - инстанция Мастодон, которая позволяет своим пользователям публиковать посты
до 65,535 знаков (обычно в других инстанциях лимит 500 знаков). Вместе с тем, эта инстанция
@ -233,6 +234,7 @@
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

131
style/grey.css Normal file
View File

@ -0,0 +1,131 @@
.header {
width: 100%;
min-height: 50px;
padding: 5px 20px;
background-color: rgba(10, 10, 10, .2);
line-height: 40px;
font-size: 28px;
font-weight: 800;
color: #fff;
}
.footer {
width: 100%;
min-height: 30px;
padding: 10px 20px;
background-color: rgba(10, 10, 10, .1);
font-size: 14px;
color: #777;
text-align: left;
}
.wrap {
width: 1024px;
min-height: 100vh;
margin: 0 auto;
background-color: rgba(200,200,200,.2);
}
nav {
background-color: rgba(200,200,200,.2);
}
.top-nav__item {
display: block;
float: left;
padding: 10px 15px 12px;
border-radius: 2px;
transition: .2s ease;
color: #333;
}
.top-nav__item:hover {
background-color: #3ce;
color: #fff;
}
.mainContainer {
padding: 20px;
font-size: 14px;
color: #333;
text-align: left;
}
.mainContainer h1 {
margin: 10px 0 5px 0;
font-size: 24px;
font-weight: 600;
color: #000;
}
.mainContainer h2 {
margin: 10px 0 5px 0;
font-size: 22px;
font-weight: 600;
color: #000;
}
.mainContainer h3 {
margin: 10px 0 5px 0;
font-size: 18px;
font-weight: 600;
color: #000;
}
.mainContainer h4 {
margin: 10px 0 5px 0;
font-size: 14px;
font-weight: 600;
color: #000;
}
.mainContainer p {
margin: 5px 5px 0 10px;
}
.mainContainer strong {
font-weight: 600;
}
.mainContainer ul,
.mainContainer ol {
margin: 5px 5px 10px 10px;
list-style-position: outside;
}
.mainContainer ul li {
margin: 5px 5px 0 15px;
}
.mainContainer img {
margin: 10px;
}
/*!** end-reset ***/

18
main.css → style/main.css
View File

@ -29,8 +29,9 @@ nav > a {
color: inherit;
text-align: center;
background-color: transparent;
font-size: 18px;
transition: background-color 0.2s;
transition: background-color 0.2s ease;
}
nav > a.current {
@ -101,3 +102,18 @@ nav > a > div {
color: aliceblue;
background-color: seagreen;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}

53
style/reset.css Normal file
View File

@ -0,0 +1,53 @@
* {
padding: 0;
margin: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
position: relative;
}
*:before,
*:after {
box-sizing: inherit;
}
*:focus {
outline: none;
}
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
html {
box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: none;
}
b,
strong {
font-weight: bold;
}
img {
border: 0;
}