Поисковые сервисы
DuckDuckGo
- +Самая популярная и простая в использовании поисковая система, заботящаяся о конфиденциальности. DuckDuckGo финансируется за счет рекламы, @@ -57,7 +57,7 @@
Searx
- +Searx — это метапоисковой движок с открытым исходным кодом, который ищет с помощью других поисковых систем, не сообщая им о вас ничего. diff --git a/social.html b/social.html index 7d6db90..0dec071 100644 --- a/social.html +++ b/social.html @@ -74,7 +74,7 @@ "гуманитарию" локальная лента может показаться скучноватой.
Приложения
- +-
Android
@@ -110,7 +110,7 @@ связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами". - +Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей @@ -140,7 +140,7 @@
Diaspora
- +Одна из старейших альтернатив ВК и Facebook. Диаспора также состоит из множества мелких сайтов, @@ -169,7 +169,7 @@ Пример аккаунта — https://pixelfed.social/earth , пример поста — https://pixelfed.social/p/earth/22346
- +Сеть состоит из мелких независимых сайтов, способных общаться между собой, так что вы можете свободно фолловить людей с других сайтов PixelFed, diff --git a/style/main.css b/style/main.css index ff77983..cf00f11 100644 --- a/style/main.css +++ b/style/main.css @@ -3,18 +3,17 @@ html, body { } .mainContainer { - width: 1024px; + width: 85%; margin: auto; min-height: 100%; } .button { - width: 180px; - border-radius: 5px; + border-radius: 5px; display: block; padding: 20px; background-color: #cde6ea; - box-sizing: border-box; + box-sizing: content-box; text-decoration: none; font-weight: bold; color: inherit; @@ -24,6 +23,10 @@ html, body { transition: background-color 0.2s ease; } + + + + nav { display: flex; overflow: hidden; @@ -31,10 +34,10 @@ nav { } nav > a { + padding: 20px; flex: auto; display: block; - padding: 20px; - box-sizing: border-box; + box-sizing: content-box; text-decoration: none; font-weight: bold; color: inherit; @@ -69,6 +72,54 @@ nav > a > div { overflow: hidden; } + +@media only screen and (max-width : 640px) { + nav { + display: block; + overflow: hidden; + background-color: #93ff83; + } + + nav > a { + padding: 20px; + flex: auto; + display: block; + box-sizing: content-box; + text-decoration: none; + font-weight: bold; + color: inherit; + text-align: center; + background-color: transparent; + font-size: 18px; + + transition: background-color 0.2s ease; + } + + nav > a.current { + background-color: #5db9ef; + } + + nav > a:hover, + .button:hover { + background-color: rgba(0, 0, 0, 0.2); + } + + nav > a.current:hover { + background-color: #5397ca; + } + + nav > a:visited { + color: inherit; + } + + nav > a > div { + position: relative; + top: 50%; + transform: translateY(-50%); + overflow: hidden; + } +} + .mainContainer { font-size: 14px; color: #333;