diff --git a/css/.base.css.swp b/css/.base.css.swp deleted file mode 100644 index ab67ffc..0000000 Binary files a/css/.base.css.swp and /dev/null differ diff --git a/css/menu.css b/css/menu.css index d4eeb44..80bf898 100644 --- a/css/menu.css +++ b/css/menu.css @@ -1,97 +1,173 @@ -.topnav { - overflow: hidden; - background-color: #1f2833; +* { + box-sizing: border-box; } -.topnav a { + +/* custom scrollbar */ +::-webkit-scrollbar { + width: .95em; +} +/* dummy content */ +.content { float: left; - display: flex; + margin: .75em 0 0 0; + transition: margin .3s ease-in-out; +} +.content > p { + margin: .25em 0 .75em 0; +} + +/* Advanced Checkbox Hack */ +body { + -webkit-animation: bugfix infinite 1s; +} + +@-webkit-keyframes bugfix { + from { + padding: 0; + } + to { + padding: 0; + } +} +input[type=checkbox] { + position: absolute; + top: -9999px; + left: -9999px; +} + +label { + position: absolute; + left: 0; + display: none; + width: 2em; + height: .5em; + padding: .05em; + font-size: 1.1em; + color: #fff; + transition: color .3s ease-in-out; + cursor: pointer; + user-select: none; + margin: 0; +} + +/* big screens */ +nav[role="off-canvas"] { + position: relative; + width: 50em; + margin: 0 auto; + transition-duration: .3s, .5s; + transition-timing-function: ease-in-out; + transition-property: left, opacity, box-shadow; +} +nav[role="off-canvas"] a { + color: #fff; + text-decoration: none; + transition: color .3s ease-in-out; + display: table-cell; + vertical-align: middle; +} +nav[role="off-canvas"] ul { + padding: 0; + margin: 0 auto; + width: 100%; +} +nav[role="off-canvas"] ul > li { + float: left; + padding: .55em .55em; + width: 8em; + margin: .5em; + opacity: .8; + text-transform: uppercase; + display: table; + cursor: pointer; text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; - border-radius: 2px; + transition-duration: .3s; + transition-timing-function: ease-in-out; + transition-property: box-shadow, color, opacity, padding-left; + cursor: pointer; +} +nav[role="off-canvas"] ul > li:hover { + color: #fff; + opacity: 1; + box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95); +} +nav[role="off-canvas"] ul > li + .active + { + color: #fff; + opacity: 1; + box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95); } - -.topnav .icon { - display: none; -} - -.dropdown { - overflow: hidden; - display: flex; -} - -.dropdown .dropbtn { - font-size: 17px; - border: 1px solid #888; - border-radius: 2px; - outline: none; - color: #c5c6c7; - background-color: #1e2832; - padding: 16px 16px; - font-family: inherit; - display: flex; -} - -.dropdown-content { - display: none; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - color: #c5c6c7; - background-color: #1e2832; - border: 1px solid #888; - border-radius: 2px; -} - -.dropdown-content a { - float: none; - padding: 12px 16px; - text-decoration: none; - display: flex; - text-align: left; -} - - -.dropdown:hover .dropdown-content { - display: inline-block; -} - -@media screen and (max-width: 716px) { - .topnav a:not(:first-child), .dropdown .dropbtn { - display: none; +/* small screens */ +@media screen and (max-width: 44em) { + html, + body { + margin: 0; + overflow-x: hidden; } - .topnav a.icon { - float: right; - display: flex; - } -} -@media screen and (max-width: 716px) { - .topnav.responsive {position: relative;} - .topnav.responsive .icon { + .content { + margin: 2.5em .5em 0 .5em; + } + + nav[role="off-canvas"] { position: absolute; - right: 0; - top: 0; + top: 3em; + left: -20em; + width: 20em; + opacity: 0; } - .topnav.responsive a { - float: none; - display: inline-block; - text-align: left; - } - .topnav.responsive .dropdown {float: none;} - .topnav.responsive .dropdown-content {position: relative;} - .topnav.responsive .dropdown .dropbtn { - display: inline-block; + nav[role="off-canvas"] ul > li { + height: 100%; width: 100%; text-align: left; + margin: 0; + background: black; + } + nav[role="off-canvas"] ul > li:hover { + box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45); + } + + label { + display: block; + } + + label:after { + position: absolute; + right: .25em; + top: 0; + content: "\2261"; + font-size: 1.8em; + } + + label:hover, + input:checked ~ label { + color: #000; + } + + input:checked ~ nav[role="off-canvas"] { + opacity: 1; + left: 0; + box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3); + } + input:checked ~ nav[role="off-canvas"] ul > li { + padding: .55em .55em .55em 1.5em; + } + input:checked ~ nav[role="off-canvas"] ul > li:hover { + padding-left: 3.5em; + } + input:checked ~ nav[role="off-canvas"] ul > li:after { + position: absolute; + right: .25em; + content: "\203A"; + color: inherit; + } + + input:checked ~ .content { + margin-left: 20.5em; + margin-right: -20.5em; } } -.active a { - color: #433; -} - - diff --git a/css/popup.css b/css/popup.css deleted file mode 100644 index 518b1ff..0000000 --- a/css/popup.css +++ /dev/null @@ -1,130 +0,0 @@ -.row > .column { - padding: 0 8px; -} - -.row:after { - content: ""; - display: table; - clear: both; -} - -.column { - float: left; - width: 25%; -} - -/* The Modal (background) */ -.modal { - display: none; - position: fixed; - z-index: 1; - padding-top: 100px; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: black; -} - -/* Modal Content */ -.modal-content { - position: relative; - background-color: #fefefe; - margin: auto; - padding: 0; - width: 90%; - max-width: 1200px; -} - -/* The Close Button */ -.close { - color: white; - position: absolute; - top: 10px; - right: 25px; - font-size: 35px; - font-weight: bold; -} - -.close:hover, -.close:focus { - color: #999; - text-decoration: none; - cursor: pointer; -} - -.mySlides { - display: none; -} - -.cursor { - cursor: pointer; -} - -/* Next & previous buttons */ -.prev, -.next { - cursor: pointer; - position: absolute; - top: 50%; - width: auto; - padding: 16px; - margin-top: -50px; - color: white; - font-weight: bold; - font-size: 20px; - transition: 0.6s ease; - border-radius: 0 3px 3px 0; - user-select: none; - -webkit-user-select: none; -} - -/* Position the "next button" to the right */ -.next { - right: 0; - border-radius: 3px 0 0 3px; -} - -/* On hover, add a black background color with a little bit see-through */ -.prev:hover, -.next:hover { - background-color: rgba(0, 0, 0, 0.8); -} - -/* Number text (1/3 etc) */ -.numbertext { - color: #f2f2f2; - font-size: 12px; - padding: 8px 12px; - position: absolute; - top: 0; -} - -img { - margin-bottom: -4px; -} - -.caption-container { - text-align: center; - background-color: black; - padding: 2px 16px; - color: white; -} - -.demo { - opacity: 0.6; -} - -.active, -.demo:hover { - opacity: 1; -} - -img.hover-shadow { - transition: 0.3s; -} - -.hover-shadow:hover { - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} diff --git a/extra.html b/extra.html index b506351..8c995be 100644 --- a/extra.html +++ b/extra.html @@ -8,28 +8,25 @@ - - -
- Главная - Почта - Мессенджеры - Соцсети - Поисковики -
- -
- Документы и агитматериалы - Подробнее -
-
- ☰ -
+ + + + + +

Устав сообщества

@@ -97,11 +94,11 @@

- + - + - + Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам, дав ссылку на этот сайт, либо распечатав и распространив листовки diff --git a/im.html b/im.html index b491c2f..47de32c 100644 --- a/im.html +++ b/im.html @@ -7,34 +7,31 @@ У вас всегда есть выбор! — Мессенджеры - - + - + + + + +

Децентрализованные мессенджеры

Способы быстро списаться и созвониться с нужным человеком

- + @@ -91,7 +88,7 @@
- + diff --git a/index.html b/index.html index 8ec5922..121daf0 100644 --- a/index.html +++ b/index.html @@ -9,26 +9,21 @@ - - + + +

Где я? О чём речь?

@@ -76,7 +71,7 @@

Просто попробуйте свободную альтернативу:

- + Замените Twitter на Mastodon — он намного удобней. (На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, @@ -84,14 +79,14 @@
- + Замените Facebook/ВК на Friendica. Также, как и Мастодон, Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами". Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда.
- + А вместо Instagram есть прекрасный PixelFed — работает в любом браузере, между прочим.
diff --git a/info.html b/info.html index 08f5c28..14e2611 100644 --- a/info.html +++ b/info.html @@ -8,27 +8,24 @@ - - + + + + +
diff --git a/mail.html b/mail.html index fa17f80..e5caad4 100644 --- a/mail.html +++ b/mail.html @@ -8,35 +8,32 @@ - - - + + + + + +

Электронная почта

Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация.

- + MailFence

MailFence

@@ -55,7 +52,7 @@
- + @@ -79,7 +76,7 @@
- + Posteo

Posteo

@@ -96,7 +93,7 @@
- + CockMail

Cockmail

@@ -113,7 +110,7 @@
- + diff --git a/search.html b/search.html index 778534d..86ee579 100644 --- a/search.html +++ b/search.html @@ -8,28 +8,25 @@ - - - + + + + + +

Зачем вообще менять поисковик?

@@ -67,7 +64,7 @@ Это не требует больших затрат вычислительных мощностей и позволяет обходиться пожертвованиями или нетаргетированной рекламой.

- + SearX

Searx

@@ -92,7 +89,7 @@ грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе.

- + Ecosia

Яркий пример — Ecosia

@@ -109,7 +106,7 @@ ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами с остальными. И это действительно работает!

- + YaCy

YaCy

Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован diff --git a/social.html b/social.html index e4fc524..9ea1890 100644 --- a/social.html +++ b/social.html @@ -8,35 +8,31 @@ - - - + + + + +

Социальные сети

Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами

- +

#вместотвиттера Mastodon

@@ -81,7 +77,7 @@
- +

#вместоВК Friendica

@@ -115,7 +111,7 @@
- +

#вместоinstagram PixelFed

@@ -155,7 +151,7 @@
- +

#вместоyoutube PeerTube