diff options
| -rw-r--r-- | index.html | 97 | ||||
| -rwxr-xr-x | style.css | 364 |
2 files changed, 461 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..1a8c66e --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html lang="ru"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <title>Малая Сеть</title> + <link rel="stylesheet" href="style.css"> + + </head> + <body> + <h1>Малая Сеть</h1> + <div class="bh-row bh-no-border"> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h3>О чём это</h3> + </div> + + <div class="bh-col-8"> + <div class="bh-wide-row bh-no-border"> + <div class="bh-col-2"> + + </div> + </div> + + <p>Малая Сеть — в англоязычном сегменте, чтоб подчеркнуть "маленькость" используется намеренно искажённый термин SmolNet, его же будем использовать и мы — простой и независимый сегмент интернета, ресурсы ориентированные на текст, отсутствие коммерции, вариант "медленной жизни" в сети.</p> + <aside class="bh-aside-left"> + введение + </aside> + <p>Сразу оговоримся — Малая Сеть включает в себя не только "Малый Веб" (Small Web), но и некоторые другие, ещё более нишевые вещи, вроде протокола Gemini и серверов PubNix, но пока + мы будем вести речь именно о той её части, что живёт в WWW.</p> + <p>И эта часть представляет из себя разрозненное полотно мелких сайтов, сделанных по старинке (зачастую на коленке и левой ногой), но полностью некоммерческих, развивающихся и живущих своей + собственной независимой жизнью вдали от шумных, стандартизированных, прилизанных и до омезрения коммерциализированных соцсетей. + </p> + <p>В качестве экскурса в прошлое и настоящее Малой Сети настоятельно рекомендуем ознакомиться со статьёй <a href="https://sn4il.site/small.html">"Заново открываем Small Web"</a> (по ссылке русский перевод).</p> + <hr> + <ul> + <li class="bh-title">Сервисы (ознакомьтесь или читайте дальше)</li> + <li class="bh-item"><a href="./webring">Webring</a> или кольцо сайтов</li> + <li class="bh-item"><a href="https://search.smolnet.ru">Небольшой поисковик</a>, работающий только по русскоязычным сайтам Малого Веба</li> + </ul> + </div> + </div> + + + <div class="bh-col-4"> + <h3>Для чего создан этот сайт</h3> + </div> + + <div class="bh-col-8"> + <div class="bh-wide-row bh-no-border"> + <div class="bh-col-2"> + + </div> + </div> + + <p>Мы действуем в согласии с принципами, сформулированными в <a href="https://sn4il.site/stm.html">Манифесте Малых Вещей</a>, стремясь малыми делами понемного сделать этот мир немного лучше в меру наших скромных сил. + В случае этого сайта — сделать немного лучше Сеть, сохранив и, по возможности развив то уникальное, что обитает на обочине Большого Веба и не видно большинству его обитателей.</p> + <p>Ниже приведены цитаты из указанного манифеста, описывающие, за популяризацию чего именно мы выступаем: </p> + </div> + <div class="bh-col-4"> + <h4>Что за Малые Вещи?</h4> + </div> + <div class="bh-col-8"> + <i> + Малые вещи — это искусство, медиа, технологии и культура, создаваемые людьми, к которым относятся справедливо, для людей, к которым и которые относятся справедливо, это свободный и устойчивый взаимообмен. Никаких корпоративных правителей, привратников, технологий сетевого масштабирования и способов разбогатеть за чужой счёт. + </i> + <hr> + </div> + + + <div class="bh-col-4"> + <h4>Почему за Малые Вещи?</h4> + </div> + <div class="bh-col-8"> + <i> + Потому что в мире, где Творчество и Взаимодействие предельно коммерциализированы, акт Создания Вещи или построения сообщества, не подпадающих под влияние наших корпоративных правителей — это радикальный акт. + Потому что большие и сложные сообщества и системы сложно управляются без ресурсов правительств и корпораций. Если мы сохраним вещи на Человеческом уровне вместо Глобального, у нас есть шанс стать успешными на Человеческом уровне (а это, в частности — выживание и стабильность, построение отношений и т.д.). + Потому что 4 корпорации контролируют 90% наших новостей и развлечений, три корпорации [в России всё ещё хуже] контролируют львиную долю онлайн-взаимодействий, и ни одну корпорацию ни мало не колышет, выживем ли мы или сдохнем. Слишком много власти сконцентрировано в руках слишком малой прослойки населения. + Они покупают политиков, влияют на выборы, пишут наши законы, игнорируя неудобные. Они строят игру таким образом, что только они достаточно большие, чтоб играть в неё. + Мы, как личности и малые сообщества, должны работать совместно. Мы должны проложить собственный путь. + </i> + </div> + + + +</div> +<div class="bh-col-10"> + <center> + [ <a href="./ring/">RuWR</a> ]<br>[<a href="./ring/prev.html?id=0">←Назад</a> | <a href="./ring/rand.html?id=0">Случайный сайт</a> | <a href="./ring/list.html?id=0">Список</a> | <a href="./ring/next.html?id=0">Вперёд→</a> ] + <hr> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) +</center> + <hr> + </div> + </body> +</html> diff --git a/style.css b/style.css new file mode 100755 index 0000000..2b2d92c --- /dev/null +++ b/style.css @@ -0,0 +1,364 @@ +@charset "UTF-8"; +html, body, div, h1, h2, h3, h4, h5, span, ul, ol, li { + padding: 0; + margin: 0; } + +ul, ol, li { + list-style: none; } + +body { + font-family: Helvetica, Arial; + color: #333333; + font-size: 1em; } + +.bh-content { + padding-top: 2em; } + +.bh-row { + width: 80%; + margin: 0 auto; + position: relative; } + +.bh-wide-row { + width: 100%; + position: relative; } + +.bh-row, .bh-wide-row { + float: none; + clear: both; + padding-bottom: 2em; + border-bottom: 1px solid #ccc; } + .bh-row:before, .bh-row:after, .bh-wide-row:before, .bh-wide-row:after { + content: ""; + display: table; } + .bh-row:after, .bh-wide-row:after { + clear: both; } + +.bh-no-border { + border: none; } + +.bh-col-1 { + width: 8.33333%; + float: left; + position: relative; } + +.bh-col-2 { + width: 16.66667%; + float: left; + position: relative; } + +.bh-col-3 { + width: 25%; + float: left; + position: relative; } + +.bh-col-4 { + width: 33.33333%; + float: left; + position: relative; } + +.bh-col-5 { + width: 41.66667%; + float: left; + position: relative; } + +.bh-col-6 { + width: 50%; + float: left; + position: relative; } + +.bh-col-7 { + width: 58.33333%; + float: left; + position: relative; } + +.bh-col-8 { + width: 66.66667%; + float: left; + position: relative; } + +.bh-col-9 { + width: 75%; + float: left; + position: relative; } + +.bh-col-10 { + width: 83.33333%; + float: left; + position: relative; } + +.bh-col-11 { + width: 91.66667%; + float: left; + position: relative; } + +.bh-col-12 { + width: 100%; + float: left; + position: relative; } + +.bh-vert-1 { + padding-top: 1em; } + +.bh-vert-2 { + padding-top: 2em; } + +.bh-vert-3 { + padding-top: 3em; } + +h1, h2, h3 { + font-weight: bold; + text-transform: uppercase; } + +h1 { + font-size: 3em; + line-height: 1em; + padding-bottom: 0.2em; + display: table; + letter-spacing: -0.02em; } + +h2 { + font-size: 2.3em; + line-height: 1em; + letter-spacing: -0.02em; } + +h3 { + font-size: 1.6em; + line-height: 1.2em; + letter-spacing: -0.02em; } + +p { + font-size: 1.2em; + line-height: 1.7em; + letter-spacing: -0.01em; } + p:last-of-type:after { + display: block; + width: 5em; + height: 5px; + background: #333; + content: " "; + margin: 1em 0 0; } + +a { + color: #333; + text-decoration: none; + border-bottom: 1px solid #999; + padding-bottom: 0.2em; } + a:hover { + border-bottom-color: dodgerblue; } + +small { + font-size: 0.8em; + color: #999; } + +aside { + font-size: 0.8em; + color: #999; + font-style: italic; + position: absolute; + width: 25%; } + aside.bh-aside-left { + left: -29%; } + aside.bh-aside-right { + right: -29%; } + +ol, ul { + width: 100%; + clear: both; + float: none; + padding-bottom: 1em; } + ol li, ul li { + font-size: 1.2em; + line-height: 1.7em; } + ol li.bh-title, ul li.bh-title { + font-weight: bold; + border-bottom: 1px solid #ccc; + text-transform: uppercase; + display: table; + margin-bottom: 0.4em; + padding-bottom: 0.4em; + color: #666; } + +ol { + counter-reset: customlistcounter; } + ol li.bh-item:before { + content: counter(customlistcounter); + counter-increment: customlistcounter; + display: block; + position: absolute; + color: #999; + margin-left: -1.5em; } + +ul li.bh-item:before { + content: "–"; + display: block; + position: absolute; + color: #999; + margin-left: -1.5em; } +ul.bh-timeline header { + text-transform: uppercase; + font-size: 0.8em; + font-weight: bold; + color: #666; } +ul.bh-timeline li.bh-timeline-item { + padding-top: 1em; + padding-left: 2em; + border-left: 1px solid #ccc; } + ul.bh-timeline li.bh-timeline-item:before { + content: ""; + display: block; + width: 0.5em; + height: 0.5em; + background: #ccc; + border-radius: 2em; + position: absolute; + margin: 0.6em 0 0 -2.3em; + z-index: 1000; } + ul.bh-timeline li.bh-timeline-item small { + display: block; + line-height: 1.4em; } + ul.bh-timeline li.bh-timeline-item:last-of-type { + position: relative; } + ul.bh-timeline li.bh-timeline-item:last-of-type:after { + height: calc(100% - 1.6em); + width: 20px; + position: absolute; + background: #fff; + display: block; + content: ""; + margin-left: -2.3em; + bottom: 0; + z-index: 999; } +ul.bh-timeline:before { + height: 1.9em; + width: 20px; + position: absolute; + background: #fff; + display: block; + content: ""; + margin-left: -1px; } + +.bh-gray { + color: #999; } + .bh-gray a { + color: #999; } + +.bh-light-gray { + color: #ccc; } + .bh-light-gray a { + color: #ccc; } + +button { + background: #fff; + border: 1px solid #999; + font-size: 1em; + padding: 1em 2em; + border-radius: 3em; + text-transform: uppercase; + font-weight: bold; + color: #999; + cursor: pointer; + outline: none; } + button:hover { + color: dodgerblue; + border-color: dodgerblue; } + button:active { + background: #eee; } + button.bh-cancel { + border-color: #D1200D; + color: #D1200D; } + button.bh-cancel:hover { + border-color: #A10F04; + color: #A10F04; } + button.bh-cancel:active { + background: #eee; } + button.bh-disabled { + border-color: #ccc; + color: #ccc; + cursor: default; } + button.bh-disabled:hover { + border-color: #ccc; + color: #ccc; } + button.bh-disabled:active { + background: #fff; } + +table.bh-table { + width: 100%; + margin: 1em 0; + border-spacing: 0; + border-collapse: separate; } + table.bh-table thead tr th { + font-size: 0.8em; + text-transform: uppercase; + text-align: left; + border-bottom: 2px solid #ccc; + padding-bottom: 1em; } + table.bh-table tbody tr td { + font-size: 1.2em; + padding: 0.7em 0; + border-bottom: 1px solid #ccc; } + table.bh-table tbody tr:last-of-type td { + border-bottom: none; } + +div.bh-input { + margin-bottom: 1.5em; } + div.bh-input small { + padding-top: 0.3em; + display: block; + font-size: 0.75em; } + div.bh-input label { + font-size: 0.7em; + color: #999; + text-transform: uppercase; + font-weight: bold; + margin-bottom: 0.7em; + display: block; } + div.bh-input input[type=text], div.bh-input input[type=password], div.bh-input textarea { + width: 100%; + display: block; + font-family: Helvetica, Arial; + font-size: 1.2em; + color: #333; + background: none; + border: none; + border-bottom: 1px solid #ddd; + padding-bottom: 0.5em; + outline: none; } + div.bh-input input[type=text]:focus, div.bh-input input[type=password]:focus, div.bh-input textarea:focus { + border-color: #999; } + div.bh-input.bh-invalid label { + color: #D1200D; } + div.bh-input.bh-invalid input[type=text], div.bh-input.bh-invalid input[type=password] { + border-bottom-color: #D1200D; } +div.bh-search { + width: 100%; + position: relative; } + div.bh-search input { + display: block; + float: left; + background: #fff; + border: 1px solid #ccc; } + div.bh-search input[type=text] { + padding: 1em 2em; + border-top-left-radius: 3em; + border-bottom-left-radius: 3em; + font-size: 1em; + outline: none; + margin-right: 0; + border-right: none; + width: calc(100% - 6em); } + div.bh-search input[type=submit] { + font-size: 0.8em; + padding: 1.3em 2em 1.4em 1em; + border-top-right-radius: 3em; + border-bottom-right-radius: 3em; + text-transform: uppercase; + font-weight: bold; + color: #999; + cursor: pointer; + outline: none; + margin-left: 0; + right: 0; + position: absolute; } + +/*# sourceMappingURL=bauhaus.css.map */ |