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

new theme, a bit of aligning, a bit of sutomasibility for further themes

Browse Source
This commit is contained in:
Blue 2019-07-28 15:28:23 +03:00
parent dba71eaa20
commit 2a36eab2e3
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;