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

Битый сертификат у видео про Mastodon. Переключил на open.tube #2

Manually merged
blue merged 1 commits from :master into master 2019-07-29 07:30:44 +00:00
Conversation 0 Commits 1 Files Changed 12 +1031 -1224
12 changed files with 1031 additions and 1224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
grey.css
View File

@ -1,206 +0,0 @@
/*!** reset ***/
* {
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;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
.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);
}
.top-nav {
width: 100%;
padding: 10px 5px;
background-color: rgba(200,200,200,.2);
}
.top-nav__item {
display: block;
float: left;
padding: 10px 15px 12px;
border-radius: 2px;
transition: .2s ease;
font-size: 18px;
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 ***/

8
im.html
View File

@ -4,11 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Сервисы мгновенных сообщений</title> <title>Сервисы мгновенных сообщений</title>
<link rel="stylesheet" href="style/grey.css"> <link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="grey.css"> <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blue.css">
</head> </head>
<body> <body>
<div class="wrap">
<div class="mainContainer clearflix" > <div class="mainContainer clearflix" >
<nav id="header"> <nav id="header">
<a href="index.html"><div>Главная</div></a> <a href="index.html"><div>Главная</div></a>
@ -18,6 +19,7 @@
<a href="search.html"><div>Поисковые сервисы</div></a> <a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a> <a href="info.html"><div>Зачем?</div></a>
</nav> </nav>
<div class="content">
<h1>Сервисы мгновенных сообщений</h1> <h1>Сервисы мгновенных сообщений</h1>
<h2>Альтернативы WhatsApp, Viber, Skype</h2> <h2>Альтернативы WhatsApp, Viber, Skype</h2>
<h3 id="xmpp">XMPP (он же Jabber)</h3> <h3 id="xmpp">XMPP (он же Jabber)</h3>

BIN
images/signal.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 51 KiB

5
index.html
View File

@ -4,7 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Альтернативы</title> <title>Альтернативы</title>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blue.css">
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
@ -16,6 +19,7 @@
<a href="search.html"><div>Поисковые сервисы</div></a> <a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a> <a href="info.html"><div>Зачем?</div></a>
</nav> </nav>
<div class="content">
<h1> <h1>
Альтернативы - есть.<br> Альтернативы - есть.<br>
Выбор - есть.<br> Выбор - есть.<br>
@ -23,5 +27,6 @@
Вы - важны!<br> Вы - важны!<br>
</h1> </h1>
</div> </div>
</div>
</body> </body>
</html> </html>

10
info.html
View File

@ -4,7 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Альтернативы</title> <title>Альтернативы</title>
<link rel="stylesheet" href="style/grey.css"> <link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blue.css">
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
@ -16,9 +19,10 @@
<a href="search.html"><div>Поисковые сервисы</div></a> <a href="search.html"><div>Поисковые сервисы</div></a>
<a class="current" href="info.html"><div>Зачем?</div></a> <a class="current" href="info.html"><div>Зачем?</div></a>
</nav> </nav>
<div class="content">
<h1>Fediverse или как стать Неуловимым Джо</h1> <h1>Fediverse или как стать Неуловимым Джо</h1>
<h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3> <h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3>
<img src="images/koshka.jpg" class="margin" style="float: left; width: 500px"/> <img src="images/koshka.jpg" style="float: left; width: 500px; margin: 15px 15px 15px 0"/>
<p> <p>
Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
@ -107,7 +111,7 @@
Смело проходите по ссылкам выше, мы ждём вас в Fediverse. Новичкам тут всегда помогут, а несогласных не забанят. Смело проходите по ссылкам выше, мы ждём вас в Fediverse. Новичкам тут всегда помогут, а несогласных не забанят.
Вливайтесь! Вливайтесь!
</p> </p>
</div>
</div> </div>
</body> </body>
</html> </html>

12
mail.html
View File

@ -4,11 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Почтовые сервисы</title> <title>Почтовые сервисы</title>
<link rel="stylesheet" href="style/grey.css"> <link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blue.css">
</head> </head>
<body> <body>
<div class="wrap">
<div class="mainContainer"> <div class="mainContainer">
<nav id="header"> <nav id="header">
<a href="index.html"><div>Главная</div></a> <a href="index.html"><div>Главная</div></a>
@ -19,8 +20,7 @@
<a href="info.html"><div>Зачем?</div></a> <a href="info.html"><div>Зачем?</div></a>
</nav> </nav>
<div class="wrap"> <div class="content">
<div class="mainContainer">
<h1>Почтовые сервисы</h1> <h1>Почтовые сервисы</h1>
<h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2> <h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2>
@ -213,7 +213,5 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</div>
</body> </body>
</html> </html>

7
search.html
View File

@ -4,10 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Поисковые сервисы</title> <title>Поисковые сервисы</title>
<link rel="stylesheet" href="style/grey.css"> <link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blue.css">
</head> </head>
<body> <body>
<div class="wrap">
<div class="mainContainer"> <div class="mainContainer">
<nav id="header"> <nav id="header">
<a href="index.html"><div>Главная</div></a> <a href="index.html"><div>Главная</div></a>
@ -17,6 +19,7 @@
<a class="current" href="search.html"><div>Поисковые сервисы</div></a> <a class="current" href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a> <a href="info.html"><div>Зачем?</div></a>
</nav> </nav>
<div class="content">
<h1>Поисковые сервисы</h1> <h1>Поисковые сервисы</h1>
<h3 id="duckduckgo">DuckDuckGo</h3> <h3 id="duckduckgo">DuckDuckGo</h3>
<p> <p>

6
social.html
View File

@ -3,11 +3,12 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Социальные сети</title> <title>Социальные сети</title>
<link rel="stylesheet" href="style/grey.css">
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blue.css">
</head> </head>
<body> <body>
<div class="wrap">
<div class="mainContainer"> <div class="mainContainer">
<nav id="header"> <nav id="header">
<a href="index.html"><div>Главная</div></a> <a href="index.html"><div>Главная</div></a>
@ -17,6 +18,7 @@
<a href="search.html"><div>Поисковые сервисы</div></a> <a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a> <a href="info.html"><div>Зачем?</div></a>
</nav> </nav>
<div class="content">
<h1>Социальные сети</h1> <h1>Социальные сети</h1>
<h2>Альтернативы Вконтакте/Facebook и Twitter</h2> <h2>Альтернативы Вконтакте/Facebook и Twitter</h2>
<h3 id="mastodon">Mastodon</h3> <h3 id="mastodon">Mastodon</h3>

56
style/blue.css Normal file
View File

@ -0,0 +1,56 @@
nav {
background-color: #91d8f8;
}
nav > a {
margin: 10px 0 10px 10px; /*to collapse margins*/
border-radius: 5px;
padding: 10px;
}
nav > a:last-child {
margin: 10px; /*to collapse margins*/
}
nav > a:hover {
background-color: #bfeaff;
}
nav > a.current,
nav > a.current:hover {
background-color: #cde6ea;
}
.mainContainer {
background-color: #f8f8f8;
}
.mainContainer img {
box-shadow: 2px 3px 6px 2px rgba(0,0,0,0.7);
}
.mainContainer {
font-size: 16px;
color: #444;
}
.mainContainer h1 {
text-align: center;
font-size: 32px;
color: inherit;
}
.mainContainer h2 {
font-size: 28px;
color: inherit;
}
.mainContainer h3 {
font-size: 24px;
color: inherit;
}
.mainContainer h4 {
font-size: 20px;
color: inherit;
}

87
style/grey.css
View File

@ -1,4 +1,4 @@
.header { #header {
width: 100%; width: 100%;
min-height: 50px; min-height: 50px;
@ -6,7 +6,7 @@
background-color: rgba(10, 10, 10, .2); background-color: rgba(10, 10, 10, .2);
line-height: 40px; line-height: 40px; /*isn't it too much?*/
font-size: 28px; font-size: 28px;
font-weight: 800; font-weight: 800;
@ -40,92 +40,13 @@ nav {
background-color: rgba(200,200,200,.2); background-color: rgba(200,200,200,.2);
} }
.top-nav__item { nav > a {
display: block;
float: left;
padding: 10px 15px 12px; padding: 10px 15px 12px;
border-radius: 2px; border-radius: 2px;
transition: .2s ease;
color: #333; color: #333;
} }
.top-nav__item:hover { nav > a:hover {
background-color: #3ce; background-color: #3ce;
color: #fff; 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 ***/

94
style/main.css
View File

@ -1,15 +1,11 @@
body { html, body {
font-family: sans-serif; height: 100%;
margin: 0;
} }
.mainContainer { .mainContainer {
width: 1024px; width: 1024px;
margin: auto; margin: auto;
} min-height: 100%;
.mainContainer > h1 {
text-align: center;
} }
nav { nav {
@ -21,7 +17,6 @@ nav {
nav > a { nav > a {
flex: auto; flex: auto;
display: block; display: block;
float: left;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
text-decoration: none; text-decoration: none;
@ -50,10 +45,6 @@ nav > a:visited {
color: inherit; color: inherit;
} }
.margin {
margin: 15px;
}
nav > a > div { nav > a > div {
position: relative; position: relative;
top: 50%; top: 50%;
@ -61,26 +52,65 @@ nav > a > div {
overflow: hidden; overflow: hidden;
} }
.thumbnails { .mainContainer {
font-size: 14px;
color: #333;
text-align: left;
}
.mainContainer h1 {
text-align: center; text-align: center;
overflow: hidden; margin: 10px 0 5px 0;
}
.thumbnails > a {
display: block;
box-sizing: border-box;
float: left;
width: 25%;
height: 200px;
padding: 5px;
}
.thumbnails > a > div {
box-sizing: border-box;
height: 100%;
border-radius: 5px;
font-size: 24px; font-size: 24px;
padding-top: 20px; 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,
.mainContainer iframe {
margin: 15px 0 15px 15px;
} }
.c1 { .c1 {
@ -117,3 +147,7 @@ nav > a > div {
.clearfix:after { .clearfix:after {
clear: both; clear: both;
} }
.content {
padding: 10px;
}

12
style/reset.css
View File

@ -1,15 +1,3 @@
* {
padding: 0;
margin: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
position: relative;
}
*:before, *:before,
*:after { *:after {
box-sizing: inherit; box-sizing: inherit;