From 575bed34aa0b70091ae0c2d476b3666ce0bef5ff Mon Sep 17 00:00:00 2001 From: Sn4il Date: Fri, 3 May 2024 15:04:13 +0300 Subject: Bauhaus design --- disqus.html | 40 ++-- index.html | 144 +++++++---- rusprom.html | 226 ++++++++--------- small.html | 451 +++++++++++++++++++++------------- style.css | 759 ++++++++++++++++++++++++++-------------------------------- style.css.bak | 339 -------------------------- 6 files changed, 872 insertions(+), 1087 deletions(-) delete mode 100755 style.css.bak diff --git a/disqus.html b/disqus.html index 98d8b4e..5d46986 100644 --- a/disqus.html +++ b/disqus.html @@ -4,17 +4,24 @@ - Улиточий домик - Sn4il site - + О дискуссиях и делах + -
+
+
+
+

О дискуссиях и делах

+
+ +
+
+
+ +
+
-
-
-
-

О дискуссиях и делах

«Если ты споришь с идиотом, то, веротяно, он делает то же самое»

Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию и свалить , а дальше sapienti sat.

Отстранённость от непосредственного участия в спорах (в которых, как когда-то казалось, может родиться не только предрасположенность к инсульту, но и истина) никак не мешает мне наблюдать как за собственно дискуссиями, так и за каналами пропаганды разных сторон. И таки здесь, по крайней мере, в моём личном инфопузыре, безоговорочно доминируют ЛОМы (лидеры общестенного мнения), выступающие от некоторых башен Кремля, а вот представители тусовки, называвшей седя в 90-е демократами (96-й показал, кхм... некое несоответствие термину), а ныне именующиеся либералами (тоже так себе попадание) люто сливаются из-за пониженной способности к адаптации.

@@ -28,12 +35,15 @@

Не спорь, юзернейм! Делай!

-
-
-
- - - +
+
+
+
+
+ В согласии с духом Трививальных Технологий |  Хостинг: VDSина (скидка 10% по партнёрской ссылке) +
+
+
+ + diff --git a/index.html b/index.html index ec8b4a1..0451b6c 100644 --- a/index.html +++ b/index.html @@ -5,59 +5,107 @@ Улиточий домик - Sn4il site - + -
- -
-
-

Улиточий домик

-

Мир вам, Земляне.

-

Это персональная страница Снэйла (ака Улитка). 

-

Об авторе

-

Администратор проекта https://thedroth.rocks. В обычной жизни — скромный DevOps-инженер.

-

Пишу простую электронную музыку, играю на нескольких музыкальных инструментах.

-
- Txtdot - html-to-text proxy. "Опрощающий" веб-прокси, рендерящий хитросложные тяжёлые страницы в чистый удобочитаемый текст. -
-

Статьи (понемногу переносятся из gemini)

- Список российских производителей
- О дискуссиях и делах
- [перевод] Заново открываем Small Web
-
-

Контакты и ссылки

-

- Музыка -
- Последний релиз - Отблеск -

-

- Аккаунт в Fediverse -

-

- Ключ GPG -

-

- Git-репозитории -

-

- Дать чаевые -

-
-

- Просто чтоб было — зеркало русского перевода Linux From Scratch:
- Версия 12.1 без SystemD -

+
+
+
+

мир вам, Земляне.

+
+ +
+
+
+ +
+
+ +

Это персональная страница Снэйла (ака Улитка). 

+ -
+

Администратор проекта https://thedroth.rocks. В обычной жизни — скромный DevOps-инженер.

+

Пишу простую электронную музыку, играю на нескольких музыкальных инструментах.

+ +
+
+
+
+

статьи

+
+
+
    +
  • +
    Список российских производителей
    + + На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): + Предприятия ВПК, атомпрома и нефтепереработки не включаю. Список периодически пополняется. + +
  • + +
  • +
    [перевод] Заново открываем Small Web
    + + (перевод статьи https://neustadt.fr/essays/the-small-web/)
    + Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная... +
    +
  • + +
  • +
    О дискуссиях и делах
    + + «Если ты споришь с идиотом, то, веротяно, он делает то же самое»
    + Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию и свалить , а дальше sapienti sat... +
    +
  • +
+
+
+ + -
-
- +
+
+

контакты и ссылки

+
+
+ +
+
+
+
+
+ В согласии с духом Трививальных Технологий |  Хостинг: VDSина (скидка 10% по партнёрской ссылке) +
+
+
diff --git a/rusprom.html b/rusprom.html index 3e7261e..da16bd4 100644 --- a/rusprom.html +++ b/rusprom.html @@ -4,123 +4,133 @@ - Улиточий домик - Sn4il site + Отечественные производители -
+
+
+
+

Отечественные производители

+
+ +
+
+
+ +
+
-
-
-
-

Отечественные производители (UPD 2024-04-19)

-

На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): -Предприятия ВПК, атомпрома и нефтепереработки не включаю, потому родной Нижний Новгород тут представлен будет очень бледно.

+На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): +Предприятия ВПК, атомпрома и нефтепереработки не включаю, потому родной Нижний Новгород тут представлен будет очень бледно. +
    -
  • AlphaPet - корм для кошек, Дмитров
  • -
  • Art&Fact - косметика
  • -
  • Alt - Linux
  • -
  • Astra - Linux, системы автоматизации, виртаулизации, биллинга...
  • -
  • Bask - одежда https://bask.ru
  • -
  • BatNorton - одежда. Санкт-Петербург, Краснодар
  • -
  • Botavikos - косметика
  • -
  • Calculate - Linux
  • -
  • Carat - Мебель, Воронеж
  • -
  • Cosmomedica - косметика
  • -
  • Darina - бытовая техника. Пермь
  • -
  • Dave Marshall- обувь https://www.ursus.ru
  • -
  • Ecolatier - косметика. Москва
  • -
  • Elis - одежда. Ростов-на-Дону
  • -
  • Emka fashion - женская одежда. Москва, Калуга
  • -
  • First in space - женская одежда. Москва
  • -
  • Fischer audio - наушники, Санкт-Петербург
  • -
  • Jamm kids - детская одежда. http://jamm.pro/about
  • -
  • Happy lab - косметика
  • -
  • Gloria Jeans - джинсы, Ростов-на-Дону
  • -
  • Grass - автохимия и чистящие средства. Санкт-Петербург
  • -
  • Gulliver - игрушки и одежда для детей
  • -
  • Kitfort - бытовая техника
  • -
  • Kennerton - наушники. Санкт-Петербург
  • -
  • Kora - косметика https://kora.ru/o-kompanii/
  • -
  • Laplanger - пуховики. Санкт-Петербург
  • -
  • Levrana - косметика, Санкт-Петербург
  • -
  • Luzar - автозапчасти. https://luzar.ru/aboutAlphaPet-корм для кошек, Дмитров
  • -
  • Nordski - одежда https://nordski.ru/o-nas/brand/
  • -
  • PALETO - пуховики. Оренбург
  • -
  • Pozis - бытовая техника. Зеленодольск
  • -
  • Priz - одежда. Новосибирск
  • -
  • Ralf Ringer - обувь. Москва, Владимир
  • -
  • Red Fox - одежда, флиски. Санкт-Петербург
  • -
  • Revyline - ирригаторы. https://revyline.ru/about-as
  • -
  • Sanita-сантехника, Самара
  • -
  • Scenda - обувь
  • -
  • Sela - женская и детская одежда. Москва.
  • -
  • Sigil - тени для век https://sigil.me (жена рекомендует)
  • -
  • Smorodina - косметика
  • -
  • Sokolov - украшения
  • -
  • Splat - зубная паста. Новгород
  • -
  • Synergetic - бытовая химия. Нижний Новгород
  • -
  • Systeme Electric - электротовары. Самара, Козьмодемьянск, Санкт-Петербург
  • -
  • Swift chaser - катера, Самара
  • -
  • Tofa - обувь. Тула
  • -
  • Tyumen Battery - аккумуляторы
  • -
  • VOLTER - стабилизаторы напряжения. Донецк.

  • -
  • АКОМ - аккумуляторы, Тольятти

  • -
  • Амет - термосы, Челябинск
  • -
  • Анна Шарова - косметика, https://annasharovabeauty.com
  • -
  • Бештау - электроника (отчественные компонентны — далеко не все, свой дизайн, корпуса, поверхностный монтаж)
  • -
  • Биг фильтр - авто фильтры. Санкт-Петербург
  • -
  • Бирюса - бытовая техник, Красноярск
  • -
  • ВАЗ - Куда ж без него. Тольятти
  • -
  • Верфь - сумки. Санкт-Петербург
  • -
  • Восток - часы, Чистополь (Татарстан)
  • -
  • ГАЗ - Газель тащит весь малый бизнес. Нижний Новгород
  • -
  • Гельтек - косметика, https://geltek.ru
  • -
  • Дятьково Мебель - Мебель :-)
  • -
  • Ивановский трикотаж
  • -
  • Интерскол - электроиструмент, производство в РФ, Испании и Китае.
  • -
  • КамАЗ - очевидное, Набережные Челны
  • -
  • Калашников - охотничье оружие
  • -
  • Краснополянская косметика - косметика. Красная Поляна
  • -
  • Кукмара - посуда, Кукмор (Татарстан)
  • -
  • Лысьвенский завод - эмалированная посуда, Лысьва
  • -
  • Натура сиберика - косметика
  • -
  • Невская косметика - косметика, Санкт-Петербург
  • -
  • Нева Металл Посуда - кухонная посуда, Санкт-Петербург
  • -
  • НИЗ - инструменты. Новосибирск
  • -
  • Ноэму - акустика. Новосибирск.
  • -
  • Октава - микрофоны, Тула
  • -
  • Оскольская керамика - сантехника, Старый Оскол
  • -
  • Полимербыт - бытовые изделия из полимеров
  • -
  • Русское время - часы
  • -
  • Сивера - одежда. https://new.sivera.ru/tech/
  • -
  • Снорри - наушники
  • -
  • Сплав - одежда (туристическая и милитари) https://www.splav.ru/about/
  • -
  • Сударь - одежда. г.Ковров
  • -
  • Стройкерамика - керамогранит, Новосибирск
  • -
  • УАЗ - легенда жэ! Ульяновск
  • -
  • Фарадей - обувь.
  • -
  • Чебоксарский трикотаж - одежда
  • -
  • ЭлитСпецОбувь (Prosafe) - рабочая обувь
  • -
+
  • AlphaPet - корм для кошек, Дмитров
  • +
  • Art&Fact - косметика
  • +
  • Alt - Linux
  • +
  • Astra - Linux, системы автоматизации, виртаулизации, биллинга...
  • +
  • Bask - одежда https://bask.ru
  • +
  • BatNorton - одежда. Санкт-Петербург, Краснодар
  • + + -

    UPD 2024-04-19:

    -
      Электроника: -
    • OSIO, ECHIPS - Ноутбуки (импортозамещение частичное, но налоги таки платятся здесь, что не может не радовать)
    • +
    • Botavikos - косметика
    • +
    • Calculate - Linux
    • +
    • Carat - Мебель, Воронеж
    • +
    • Cosmomedica - косметика
    • +
    • Darina - бытовая техника. Пермь
    • +
    • Dave Marshall- обувь https://www.ursus.ru
    • +
    • Ecolatier - косметика. Москва
    • +
    • Elis - одежда. Ростов-на-Дону
    • +
    • Emka fashion - женская одежда. Москва, Калуга
    • +
    • First in space - женская одежда. Москва
    • +
    • Fischer audio - наушники, Санкт-Петербург
    • +
    • Jamm kids - детская одежда. http://jamm.pro/about
    • +
    • Happy lab - косметика
    • +
    • Gloria Jeans - джинсы, Ростов-на-Дону
    • +
    • Grass - автохимия и чистящие средства. Санкт-Петербург
    • +
    • Gulliver - игрушки и одежда для детей
    • +
    • Kitfort - бытовая техника
    • +
    • Kennerton - наушники. Санкт-Петербург
    • +
    • Kora - косметика https://kora.ru/o-kompanii/
    • +
    • Laplanger - пуховики. Санкт-Петербург
    • +
    • Levrana - косметика, Санкт-Петербург
    • +
    • Luzar - автозапчасти. https://luzar.ru/aboutAlphaPet-корм для кошек, Дмитров
    • +
    • Nordski - одежда https://nordski.ru/o-nas/brand/
    • +
    • PALETO - пуховики. Оренбург
    • +
    • Pozis - бытовая техника. Зеленодольск
    • +
    • Priz - одежда. Новосибирск
    • +
    • Ralf Ringer - обувь. Москва, Владимир
    • +
    • Red Fox - одежда, флиски. Санкт-Петербург
    • +
    • Revyline - ирригаторы. https://revyline.ru/about-as
    • +
    • Sanita-сантехника, Самара
    • +
    • Scenda - обувь
    • +
    • Sela - женская и детская одежда. Москва.
    • +
    • Sigil - тени для век https://sigil.me (жена рекомендует)
    • +
    • Smorodina - косметика
    • +
    • Sokolov - украшения
    • +
    • Splat - зубная паста. Новгород
    • +
    • Synergetic - бытовая химия. Нижний Новгород
    • +
    • Systeme Electric - электротовары. Самара, Козьмодемьянск, Санкт-Петербург
    • +
    • Swift chaser - катера, Самара
    • +
    • Tofa - обувь. Тула
    • +
    • Tyumen Battery - аккумуляторы
    • +
    • VOLTER - стабилизаторы напряжения. Донецк.
    • +
    • АКОМ - аккумуляторы, Тольятти
    • +
    • Амет - термосы, Челябинск
    • +
    • Анна Шарова - косметика, https://annasharovabeauty.com
    • +
    • Бештау - электроника (отчественные компонентны — далеко не все, свой дизайн, корпуса, поверхностный монтаж)
    • +
    • Биг фильтр - авто фильтры. Санкт-Петербург
    • +
    • Бирюса - бытовая техник, Красноярск
    • +
    • ВАЗ - Куда ж без него. Тольятти
    • +
    • Верфь - сумки. Санкт-Петербург
    • +
    • Восток - часы, Чистополь (Татарстан)
    • +
    • ГАЗ - Газель тащит весь малый бизнес. Нижний Новгород
    • +
    • Гельтек - косметика, https://geltek.ru
    • +
    • Дятьково Мебель - Мебель :-)
    • +
    • Ивановский трикотаж
    • +
    • Интерскол - электроиструмент, производство в РФ, Испании и Китае.
    • +
    • КамАЗ - очевидное, Набережные Челны
    • +
    • Калашников - охотничье оружие
    • +
    • Краснополянская косметика - косметика. Красная Поляна
    • +
    • Кукмара - посуда, Кукмор (Татарстан)
    • +
    • Лысьвенский завод - эмалированная посуда, Лысьва
    • +
    • Натура сиберика - косметика
    • +
    • Невская косметика - косметика, Санкт-Петербург
    • +
    • Нева Металл Посуда - кухонная посуда, Санкт-Петербург
    • +
    • НИЗ - инструменты. Новосибирск
    • +
    • Ноэму - акустика. Новосибирск.
    • +
    • Октава - микрофоны, Тула
    • +
    • Оскольская керамика - сантехника, Старый Оскол
    • +
    • Полимербыт - бытовые изделия из полимеров
    • +
    • Русское время - часы
    • +
    • Сивера - одежда. https://new.sivera.ru/tech/
    • +
    • Снорри - наушники
    • +
    • Сплав - одежда (туристическая и милитари) https://www.splav.ru/about/
    • +
    • Сударь - одежда. г.Ковров
    • +
    • Стройкерамика - керамогранит, Новосибирск
    • +
    • УАЗ - легенда жэ! Ульяновск
    • +
    • Фарадей - обувь.
    • +
    • Чебоксарский трикотаж - одежда
    • +
    • ЭлитСпецОбувь (Prosafe) - рабочая обувь
    • +
    • OSIO, ECHIPS - Ноутбуки (импортозамещение частичное, но налоги таки платятся здесь, что не может не радовать)

    Сам пользуюсь, например, Китфортом (чайники замечательные), Полимербытом — большинство контейнеров дома от них, ЭлитСпецОбувью, ну и Сплат с Синергетиком мимо не проходят.


    -

    Список неспешно пополняется.

    -
    -
    - - - - - - +
    +
    +
    +
    +
    +
    +В согласии с духом Трививальных Технологий |  Хостинг: VDSина (скидка 10% по партнёрской ссылке) +
    +
    +
    + + \ No newline at end of file diff --git a/small.html b/small.html index d9ec13b..627a18b 100755 --- a/small.html +++ b/small.html @@ -5,204 +5,329 @@ - Улиточий домик - Sn4il site - + заново открываем Small Webe + -
    +

    заново открываем Small Web

    +
    +
    +
    +

    Вступление

    +
    -
    -
    -
    -

    Заново открываем Small Web

    -

    (перевод статьи https://neustadt.fr/essays/the-small-web/)

    +
    +
    +
    + +
    +
    + +(перевод статьи https://neustadt.fr/essays/the-small-web/)
    -

    Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная.

    +Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная.
    -

    Parimal Satyal, 25 мая 2020

    -

    Каждый редизайн сайта начинается со вдохновения.

    -

    Вдохновением для конкретно этого (https://neustadt.fr) послужили две странички: Чистый и читабельный вебсайт Андерса, вдохновивший на домашнюю страничку, и сайт Marijn, напомнивший, каким прикольным может быть веб. Цвета, графика, креативная навигация, интересные идеи... сам процесс прокликивания чьей-нибудь персональной странички в 2020м вызывает во мне ностальгию по Сети конца 90х и ранних 2000х, на которой я вырос.

    -

    Некоторые из вас, возможно, уже читали мою предыдущую статью Against an Increasingly User Hostile Web. В ней я утверждаю, что мы заменяем открытую Сеть, объединяющую и вдохновляющую, на ту, что ограничивает людей и превращает их в товар. Я говорил о том, что современная Сеть, следящая, разбухшая и огороженная, конфликтует с той открытой Сетью, что я люблю. И я был приятно удивлён тем, как много людей разделяют мои чувства, людей, писавших мне письма, ответы в собственных блогах и обсуждавших это на форумах. Несмотря на полуторагодовую давность, статья всё так же, к сожалению, отражает текущее состояние Сети.

    -

    Но то, что я наткнулся на сайт Marijn, вселило в меня надежду. Она провела меня по кроличьей норе множества других мелких вебсайтов, созданных людьми со всевозможными интересами: фильмы, авиация, музыка, искусство, компьютеры. Это напомнило мне о том, что креативная, персональная, прикольная Сеть, на которой я вырос, не превратилась в тень прошлого — она всё ещё здесь, в 2020. Просто надо знать, где искать.

    -

    И нет, я не к тому, что раньше всё было лучше. Не было. Были трояны, вредоносные программы, бесконечные всплывающие окна, отвратительные подходы к безопасности, несовместимость браузеров, тормозные Java-апплеты... Нет, технически современная сеть более безопасна и пригодна для использования.

    -

    Данное эссе — моя попытка показать вам, как может выглядеть независимая Сеть, чем она отличается от сайтов, доминирующих сегодня, почему она стоит того, чтоб её исследовать, и как легко стать её частью.

    -

    Дизайн в ретро-стиле

    -

    На моей домашней страничке я упоминаю, что этот сайт "дань уважения креативной сети 90х". И это не только потому, что на нём есть анимированные гифки и гостевая книга. Сам способ его создания — тот же, которым я пользовался при создании своих первых сайтов: всё написано на голом HTML.

    -

    Никаких систем управления контентом, никаких генераторов, шаблонов, тем, плагинов. Простая разметка и стиль — базовые кирпичики, из которых строится сеть.

    -

    Изначально я не планировал так поступать. Ранее я использовал генератор статических сайтов, чтоб получить чистый HTML, и просто работал над новым дизайном для него. Но моя трехлетняя установка node.js теперь долбила меня сообщениями об ошибках, говоря, что некоторые зависимости должны быть обновлены, и ч топлагин более не совеместим. Ну а так как я ленив, и не хотел чинить это всё, я подумал — а почему бы не делать всё руками, не создавая проблем на ровном месте.

    -

    Так я и сделал. Решил писать всё руками на чистом HTML и CSS, вручную вставляя ссылки на все страницы и даже заполняя RSS-ленту. И буду честным, давно я так не развлекался, создавая сайт, с тех пор как впервые начал играться с Microsoft Frontpage и Adobe Photoshop 4.0 в конце 90х/начале 2000х.

    -

    Такой подход не сработал бы с более крупным сайтом. Но в случае с малышом вроде моего, с десятком страниц, очевидны плюсы: никаких зависимостей, простота обслуживания, уверенность в будущем, легко перенести в другое место, и, самое главное, чертовски интересно в работе. Я засиживался до шести утра два дня подряд, работая над дизайном, не потому что не мог уснуть, а потому, что не желал останавливаться. Надо заметить, что около 30% времени было потрачено на прочёсывание GifCities.org и Internet Archive на предмет анимированных гифок и фоновых изображений.

    -

    Переработка дизайна сайта в такой манере сподвигла меня прошерстить архивы старых сайтов в поисках интересных реликвий из старой сети. Что, в свою очередь, привело меня на прикольные, креативные вебсайты, активно поддерживаемые до сих пор.

    -

    Для понимания, что эти мелкие сайты из себя представляют, и почему я считаю, что они важны, нам надо обратиться к прошлому.

    -

    Первые веб-страницы

    -

    В девяностые Сеть пребывала во младенчестве. Возможно, вы знаете эту историю.

    -

    Её только-только, в 1991, изобрёл сэр Тим Бёрнерс-Ли, выпустив как общественное достояние в 1993м, делая тем самым доступной для использования и строительства всему миру. В самом начале Сеть была доступна преимущественно технически подкованнаму народу, благодаря протоколам тех времён, таких как Gopher [ныне живее всех живых - прим.пер.], FTP, Usenet и других. И до появления первого удобного графического браузера Mosaic, вышедшего в 1993, рядовому пользователю компьютера было непросто начать освоение Сети. Кто-то, как я, например, открыл Сеть позже, когда на сцену вышли Netscape Navigator — порождение Mosaic, ныне породившее Firefox и Internet Explorer.

    -

    Это было ужасно восхитительно. В отличие от традиционных СМИ, вы теперь могли взаимодействовать и принимать участие в происходящем. Это была первая всепланентная система связи, в которой кто угодно, где угодно в мире, мог создать собственную страничку и делиться своими мыслями и идеями со всем миром. В Netscape позднее даже добавили редактор, позволявший пользователям создавать веб-страницы визуально, как будто работая в текстовом процессоре (WYSIWYG, как это тогда называлось: what you see is what you get — что видишь, то и получаешь). Целью было дать возможность каждому, не обладающему техническими навыками, создать страничку.

    -

    Но страничку надо разместить где-то в Сети. Где же?

    -

    Нужен был сетевой хост, на котором можно было выложить страничку и поделиться её публичным адресом, чтоб люди могли её посетить. В идеале бы ещё и бесплатно, чтоб можно было попробовать это просто для развлечения, не особо заморачиваясь. Тут-то и появились Geocities, вместе с другими веб-хостингами, такими как Tripod, Fortunecity и Freeservers (в России это были Chat.ru, Narod.ru и подобные - прим.пер.). Они стали, пожалуй, самым мощным катализатором демократизации Сети.

    -

    Вид на Geocities из февраля 1998

    -

    Это было так просто — любой желающий мог создать бесплатную учётную запись и создать вебсайт, чтоб делиться своими идеями и хобби. И они делились! Люди создавали сайты, практически обо всём: музыке, философии, арт-проектах, псевдографических рисунках, конфетах и собственной жизни.

    -

    Ключевым моментом было то, что большинство этих людей, создателей сайтов, не были ни профессионалами, ни компаниями — просто люди, которые хотели поделиться своими интересами. Как я поступил в 2001, со своим неофициальным фан-сайтом немецкой группы Gamma Ray:

    -

    Фан-сайт группы Gamma Ray на Geocities, 2001

    -

    Но как хоть кто-нибудь должен узнать о существовании этих страничек? Гугла-то тогда не было. Существовали поисковые машины, такие как Lycos, Excite и Northern Lights, но они не шли ни в какое сравнение с современными поисковыми движками. Чтоб найти что-то нужное, недостаточно было просто ввести несколько слов и в пару кликов получить информацию.

    -

    Нет, сеть тогда больше напоминала путешествие. Это было место, в которое вы отправлялись, чтоб открыть новые пространства, это напоминало исследование открытого моря. Новое виртуальное пространство, которое приводило в разные странные, интересные, восхитительные места. Таковой была Сеть. По крайней мере, в нашем коллективном воображении.

    -

    Мастера и навигаторы

    -

    Сеть была иным местом в те годы, и для её описания использовали другие слова. В статье, озаглавленной Киберпространство, в старомодной манере, авторы из проекта Rhizome отмечают очень важную вещь:

    +Parimal Satyal, 25 мая 2020 +Каждый редизайн сайта начинается со вдохновения. +Вдохновением для конкретно этого (https://neustadt.fr) послужили две странички: Чистый и читабельный вебсайт Андерса, вдохновивший на домашнюю страничку, и сайт Marijn, напомнивший, каким прикольным может быть веб. Цвета, графика, креативная навигация, интересные идеи... сам процесс прокликивания чьей-нибудь персональной странички в 2020м вызывает во мне ностальгию по Сети конца 90х и ранних 2000х, на которой я вырос. +Некоторые из вас, возможно, уже читали мою предыдущую статью Against an Increasingly User Hostile Web. В ней я утверждаю, что мы заменяем открытую Сеть, объединяющую и вдохновляющую, на ту, что ограничивает людей и превращает их в товар. Я говорил о том, что современная Сеть, следящая, разбухшая и огороженная, конфликтует с той открытой Сетью, что я люблю. И я был приятно удивлён тем, как много людей разделяют мои чувства, людей, писавших мне письма, ответы в собственных блогах и обсуждавших это на форумах. Несмотря на полуторагодовую давность, статья всё так же, к сожалению, отражает текущее состояние Сети. +Но то, что я наткнулся на сайт Marijn, вселило в меня надежду. Она провела меня по кроличьей норе множества других мелких вебсайтов, созданных людьми со всевозможными интересами: фильмы, авиация, музыка, искусство, компьютеры. Это напомнило мне о том, что креативная, персональная, прикольная Сеть, на которой я вырос, не превратилась в тень прошлого — она всё ещё здесь, в 2020. Просто надо знать, где искать. +И нет, я не к тому, что раньше всё было лучше. Не было. Были трояны, вредоносные программы, бесконечные всплывающие окна, отвратительные подходы к безопасности, несовместимость браузеров, тормозные Java-апплеты... Нет, технически современная сеть более безопасна и пригодна для использования. +Данное эссе — моя попытка показать вам, как может выглядеть независимая Сеть, чем она отличается от сайтов, доминирующих сегодня, почему она стоит того, чтоб её исследовать, и как легко стать её частью. +
    +
    +
    +
    +

    Дизайн в ретро-стиле

    +
    +
    + +На моей домашней страничке я упоминаю, что этот сайт "дань уважения креативной сети 90х". И это не только потому, что на нём есть анимированные гифки и гостевая книга. Сам способ его создания — тот же, которым я пользовался при создании своих первых сайтов: всё написано на голом HTML. +Никаких систем управления контентом, никаких генераторов, шаблонов, тем, плагинов. Простая разметка и стиль — базовые кирпичики, из которых строится сеть. +Изначально я не планировал так поступать. Ранее я использовал генератор статических сайтов, чтоб получить чистый HTML, и просто работал над новым дизайном для него. Но моя трехлетняя установка node.js теперь долбила меня сообщениями об ошибках, говоря, что некоторые зависимости должны быть обновлены, и ч топлагин более не совеместим. Ну а так как я ленив, и не хотел чинить это всё, я подумал — а почему бы не делать всё руками, не создавая проблем на ровном месте. +Так я и сделал. Решил писать всё руками на чистом HTML и CSS, вручную вставляя ссылки на все страницы и даже заполняя RSS-ленту. И буду честным, давно я так не развлекался, создавая сайт, с тех пор как впервые начал играться с Microsoft Frontpage и Adobe Photoshop 4.0 в конце 90х/начале 2000х. +Такой подход не сработал бы с более крупным сайтом. Но в случае с малышом вроде моего, с десятком страниц, очевидны плюсы: никаких зависимостей, простота обслуживания, уверенность в будущем, легко перенести в другое место, и, самое главное, чертовски интересно в работе. Я засиживался до шести утра два дня подряд, работая над дизайном, не потому что не мог уснуть, а потому, что не желал останавливаться. Надо заметить, что около 30% времени было потрачено на прочёсывание GifCities.org и Internet Archive на предмет анимированных гифок и фоновых изображений. +Переработка дизайна сайта в такой манере сподвигла меня прошерстить архивы старых сайтов в поисках интересных реликвий из старой сети. Что, в свою очередь, привело меня на прикольные, креативные вебсайты, активно поддерживаемые до сих пор. +Для понимания, что эти мелкие сайты из себя представляют, и почему я считаю, что они важны, нам надо обратиться к прошлому. + +
    +
    +
    +
    +

    Первые веб-страницы

    +
    +
    + +В девяностые Сеть пребывала во младенчестве. Возможно, вы знаете эту историю. +Её только-только, в 1991, изобрёл сэр Тим Бёрнерс-Ли, выпустив как общественное достояние в 1993м, делая тем самым доступной для использования и строительства всему миру. В самом начале Сеть была доступна преимущественно технически подкованнаму народу, благодаря протоколам тех времён, таких как Gopher [ныне живее всех живых - прим.пер.], FTP, Usenet и других. И до появления первого удобного графического браузера Mosaic, вышедшего в 1993, рядовому пользователю компьютера было непросто начать освоение Сети. Кто-то, как я, например, открыл Сеть позже, когда на сцену вышли Netscape Navigator — порождение Mosaic, ныне породившее Firefox и Internet Explorer. +Это было ужасно восхитительно. В отличие от традиционных СМИ, вы теперь могли взаимодействовать и принимать участие в происходящем. Это была первая всепланентная система связи, в которой кто угодно, где угодно в мире, мог создать собственную страничку и делиться своими мыслями и идеями со всем миром. В Netscape позднее даже добавили редактор, позволявший пользователям создавать веб-страницы визуально, как будто работая в текстовом процессоре (WYSIWYG, как это тогда называлось: what you see is what you get — что видишь, то и получаешь). Целью было дать возможность каждому, не обладающему техническими навыками, создать страничку. +Но страничку надо разместить где-то в Сети. Где же? +Нужен был сетевой хост, на котором можно было выложить страничку и поделиться её публичным адресом, чтоб люди могли её посетить. В идеале бы ещё и бесплатно, чтоб можно было попробовать это просто для развлечения, не особо заморачиваясь. Тут-то и появились Geocities, вместе с другими веб-хостингами, такими как Tripod, Fortunecity и Freeservers (в России это были Chat.ru, Narod.ru и подобные - прим.пер.). Они стали, пожалуй, самым мощным катализатором демократизации Сети. +
    +Вид на Geocities из февраля 1998 +
    +Это было так просто — любой желающий мог создать бесплатную учётную запись и создать вебсайт, чтоб делиться своими идеями и хобби. И они делились! Люди создавали сайты, практически обо всём: музыке, философии, арт-проектах, псевдографических рисунках, конфетах и собственной жизни. +Ключевым моментом было то, что большинство этих людей, создателей сайтов, не были ни профессионалами, ни компаниями — просто люди, которые хотели поделиться своими интересами. Как я поступил в 2001, со своим неофициальным фан-сайтом немецкой группы Gamma Ray: +
    +Фан-сайт группы Gamma Ray на Geocities, 2001 +
    +Но как хоть кто-нибудь должен узнать о существовании этих страничек? Гугла-то тогда не было. Существовали поисковые машины, такие как Lycos, Excite и Northern Lights, но они не шли ни в какое сравнение с современными поисковыми движками. Чтоб найти что-то нужное, недостаточно было просто ввести несколько слов и в пару кликов получить информацию. +Нет, сеть тогда больше напоминала путешествие. Это было место, в которое вы отправлялись, чтоб открыть новые пространства, это напоминало исследование открытого моря. Новое виртуальное пространство, которое приводило в разные странные, интересные, восхитительные места. Таковой была Сеть. По крайней мере, в нашем коллективном воображении. +
    +
    +
    +
    +

    Мастера и навигаторы

    +
    +
    + +Сеть была иным местом в те годы, и для её описания использовали другие слова. В статье, озаглавленной Киберпространство, в старомодной манере, авторы из проекта Rhizome отмечают очень важную вещь:
    -

    Современные браузеры стараются быть невидимыми, сливаясь с визуальным окружением рабочей станции, пытаясь убедить пользователя, что "облако" — это продолжение его жёсткого диска. В 90е дизайн браузера придерживался противоположного подхода, используя иконографию, ассоциируемую с путешествиями, чтоб передать ощущение отправки в путешествие. Netscape Navigator, использовавший штурвал в своём логотипе, давал очень явную отсылку к морскому происхождению префикса "cyber", Internet Explorer же своим лого обещал взять пользователя в путешествие вокруг земного шара.

    +Современные браузеры стараются быть невидимыми, сливаясь с визуальным окружением рабочей станции, пытаясь убедить пользователя, что "облако" — это продолжение его жёсткого диска. В 90е дизайн браузера придерживался противоположного подхода, используя иконографию, ассоциируемую с путешествиями, чтоб передать ощущение отправки в путешествие. Netscape Navigator, использовавший штурвал в своём логотипе, давал очень явную отсылку к морскому происхождению префикса "cyber", Internet Explorer же своим лого обещал взять пользователя в путешествие вокруг земного шара.
    -

    старые логотипы Netscape Navigator и Internet Explorer

    -

    Навигация. Исследование. Просмотр. Сёрфинг. Сеть была сродни виртуальному представлению физического пространства. Был даже англоязычный термин webspace (сетевое пространство). В Geocities это выражалось концепцией Соседств — так назывались категории сайтов, например Зона51 для научной фантастики, Хартленд для семей и домашних животных, ТропическийЛес для проблем окружающей среды, Вена для классической музыки, МысКанаверал для науки и математики.

    -

    Соседства Geocities, 1998

    -

    Ещё одно слово, часто использовавшееся во времена Geocities, ныне вышедшее из обихода, "вебмастер". Идея была в том, что вы создавали место в Сети, в которым вы были хозяином (мастером). Вы приветствовали поетителей (иногда экраном заставки), проводили их по окрестностями, объясняя, о чём это место и какие пространства для них доступны (как правило, на домашней страничке), и напоминали им оставить заметку в гостевой книге, прежде чем отправиться восвояси.

    -

    Но семантика Сети былых времён имела смысл только в контексте практического взаимодействия с ней. Вы крайне редко заходили за чем-то одним, с тем, чтоб сразу уйти обратно. Вы, как правило заходили на вебсайт, и осматривались вокруг. Вы обозревали.

    -

    Это отсылает нас к изначальному вопросу о том, как же интернавты обнаруживали ваш сайт впервые. Вы были везунчиком, если ваш сайт отображался в догугловских поисковиках, но даже если он там появлялся, это, скорее всего, значило, что кто-то активно ищет именно его. Но ведь не каждый посетитель вашего сайта действительно искал чего-то конкретного. Они могли просто разыскивать вебсайты на интересующую их тематику.

    -

    Одним из способов сделать это были каталоги сайтов, такие как Соседства Geocities (или, например, Rambler, Улитка и Апорт в рунете — прим. пер.): списки вебсайтов, часто разделённые на категории и подкатегории. Фактически, большинство поисковиков были также каталогами, или порталами, как их тогда называли.

    -

    1997 - Excite, совмещающий в себе каталог сайтов, организованных в каналы, и поисковик

    -

    Одним из крупнейших был DMOZ open-directory project, основанный на каталогах Mozilla, чьей целью было "создать наиболее всеобъемлющий каталог Сети, опираясь на огромную армию редакторов-волонтёров". Вы и сейчас можете просмотреть версию этого каталога 2001 года для осознания того, как это работало.

    -

    Другой способ обнаружения новых вебсайтов опирался на ключевую особенность Сети — гиперссылки. Вы заходили на один сайт и обнаруживали путь на множество других, примерно как если вы сейчас зайдёте в мой раздел "Retro stuff" и проследуете по одной из ссылок на что-нибудь интересное, где-то в сети. Идея перекрёстных ссылок между сайтами была обыденностью; большинство сайтов имели страницы "ссылки" со своей собственной персональной коллекцией интересных страниц.

    -

    Перекрёстные ссылки были основным способом, которым лично я обнаруживал свои любимые сайты, которые потом добавлял в закладки, чтоб иметь возможность зайти снова. Фактически, практика перекрёстных ссылок включала интересный культурный элемент: сетевые кольца (webrings).

    -

    Пример сетевого кольца на тему Европейской истории

    -

    Сетевые кольца были "круговыми" коллекциями вебсайтов, зачастую созданными вокруг одной темы. Идея была в том, что вы могли переходить с одного сайта на другой, щёлкая на кнопки "следующий" или "предыдущий", которые каждый член Кольца размещал внизу своей домашней странички. Теперь они тоже практически исчезли.

    -

    Современные привратники

    -

    Сегодня большая часть времени, проводимого в сети, проходит либо непосредственно на небольшом количестве доминирующих платформ вроде Facebook/ВК, либо опосредовано через них.

    -

    Столь огромное количество "контента" постоянно пропихивается через вас, как пользователя, что нынче редко кто из нас решается на самостоятельное исследование и поиск. Нам просто не нужно. Но эти платформы процветают на "вовлечении пользователя" — лайки, комментарии, репосты — и их алгоритмы предпочитают демонстрировать тот контент, что генерирует нужное поведение. Вместо обозревания, Сеть сейчас для большинства пользователей — бесконечный и зачастую ошеломляющий поток контента и комментариев, отобранных алгоритмами, основанными на том, что, по их мнению, вам уже нравится, и что вовлечёт вас. Эта практика прямо противоположна исследованию.

    -

    Когда вы не получаете информацию пассивно, а вместо этого активно ищете что-либо, вас, скорее всего, затянет в единую точку сингулярности, где сейчас находятся 87% всех пользователей сети — Google.

    -

    Гугл стал де-факто привратником сети, судьёй, решающим, что полезно, и что достойно быть увиденным. Большинство сайтов, ссылки на которые вы обнаружите на первой странице поисковой выдачи, то есть те, на которые вы скорее всего кликните - менее 1% пользователей нажимают на ссылки на второй странице — специально разработаны, чтоб попасть туда, отпимизированы под алгоритмы Гугла. Одно из последствий этого — большинство вебсайтов, на которые люди переходят "естественным образом", созданы профессионалами и маркетологами, "позиционирующими" их на нужных ключевых словах. Это означает, что малая, любительская сеть прячется в тени сетевых профессионалов, строящих дизайн вокруг специфических ключевых слов и аудитории.

    -

    Запрос bartending recipes в Гугле не приведёт вас в Малую Сеть

    -

    Google монополизировал не только поиск — остальные поисковики, такие как Bing, DuckDuckGo и Quant всё ещё далеко позади — это ещё и крупнейшая торговая площадка. В прошлом году 31% мировых затрат на рекламу ($103,73 миллиарда) пришлись на площадки Google. Власть, которую даёт такое положение, вкупе с присутствием практически на каждом крупном сайте (посредством широко распространённой платформы аналитики (относительно конфиденциальности которой имеются обоснованные сомнения ) означает, что он может активно продвигать своё собственное видение Сети.

    -

    И эта сеть сильно отличается от "малой сети", создаваемой вебмастерами 90х и ранних 2000х. Сеть Google обладает другим набором ценностей и терминологией, что приходит с ними: персонализация, взгляды, вовлечение, конверсия, производительность, оптимизация.

    -

    Коммерческая (маркетинговая) Сеть

    -

    В сети всегда было место коммерции и маркетингу.

    -

    Amazon уже в 1995 году продавал книги онлайн, eBay был запущен в 1997, а Dell к концу того же года продал оборудования больше, чем на миллион долларов. К 2000м, невзирая на крах доткомов, сетевая коммерция росла. Это развитие было естественным — сеть позволила продавцам контактировать с более удалёнными клиентами, без необходимости опираться на телефонные заказы, факс или почтовую систему. Коммерческая сеть сосуществовала и росла вместе с частной, любительской. Открытая природа сети означала, что любые сайты могут процветать.

    -

    Но сегодняшняя Сеть по большей части коммерческая. Малая сеть любителей не имеет ни ресурсов, ни желания конкурировать за видимость и аудиторию тем способом, которым это делает сеть коммерческая.

    -

    Компании и маркетологи осознали, что сеть предоставила новые возможности для продажи большего количества товара, и таргетирования пользователей на основе отслеживания их сетевой активности. Они принялись вкладывать деньги в цифровые рекламные стратегии, анализируя, как люди используют сеть, о чём говорят, что ищут и на что нажимают. Маркетинговые компании убедили брэнды, что те должны присутствовать в сети и производить контент, чтоб быть более релевантными, потому что их клиенты уже там. Они изобрели такие термины как "нативная реклама" и "спонсорский контент" (это контент, созданный так, чтоб выглядеть как обычная статья, но по сути являющийся оплаченной рекламой). Компании начали вбухивать деньги в цифровые стратегии, чтоб понимать и влиять на поведение интернет-пользователей по их желанию.

    -

    Такие конторы как Quantcast предлагают детальный анализ поведенческих и психографических данных на нас — пользователй, включающие наши действия на различных веб-сайтах, позволяя маркетологам отслеживать и влиять на нас

    -

    С такой стратегией относительно контента, аналитикой (инфраструктура слежки, о которой я говорил в предыдущей статье и поисковой оптимизацией, коммерческая сеть привнесла принципиально отличный набор приоритетов: вовлечь "аудиторию", обратить её и удержать как можно дольше.

    -

    Для них Сеть — всего лишь один из каналов торговли.

    -

    В сравнении с Малой сетью, коммерческая — расчётливая и хищническая. Она способна динамически генерировать сотни страниц вокруг любого распространённого поискового запроса. Она может отслеживать пользователя на множестве сайтов, анализируя его действия, и используя эту информацию для более точного таргетирования. И у неё очень серьёзные ресурсы. За прошлый год компании потратили более 300 миллиардов евро на онлайн-рекламу, большая часть из которых пошла тем самым привратникам — Google и Facebook — которые продают ис способность лучше таргетировать вас, базируясь на той информации, которую вы им дали.

    -

    Всё это говорит о том, что пользователи сети пришли к тому, что взаимодействуют они большую часть времени в видимой хищнической коммерческой сети, в то время как множество мелких любительских сайтов остаются скрытыми информационным шумом.

    -

    Продукто-ориентированный вебсайт

    -

    Дизайн современной коммерческой сети "стерилен": он прилизан, он следует конвенциям и оптимизирован для эффективности. Это — одна из причин, почему так много вебсайтов, которые вы посещаете сегодня, выглядят одинаково. Кодекс коммерческой сети стал настолько доминантным, что мы просто забыли, что малая сеть всё ещё существует, и имеет абсолютно иные приоритеты.

    -

    Современные принципы веб-дизайна крайне редко нацелены на обычного человека, ищущего, как создать свой вебсайт или ищущего что-то, в чём он заинтересован. Вместо этого они фокусируются на эффективных вебсайтах:

    +
    +старые логотипы Netscape Navigator и Internet Explorer +
    +Навигация. Исследование. Просмотр. Сёрфинг. Сеть была сродни виртуальному представлению физического пространства. Был даже англоязычный термин webspace (сетевое пространство). В Geocities это выражалось концепцией Соседств — так назывались категории сайтов, например Зона51 для научной фантастики, Хартленд для семей и домашних животных, ТропическийЛес для проблем окружающей среды, Вена для классической музыки, МысКанаверал для науки и математики. +
    +Соседства Geocities, 1998 +
    +Ещё одно слово, часто использовавшееся во времена Geocities, ныне вышедшее из обихода, "вебмастер". Идея была в том, что вы создавали место в Сети, в которым вы были хозяином (мастером). Вы приветствовали поетителей (иногда экраном заставки), проводили их по окрестностями, объясняя, о чём это место и какие пространства для них доступны (как правило, на домашней страничке), и напоминали им оставить заметку в гостевой книге, прежде чем отправиться восвояси. +Но семантика Сети былых времён имела смысл только в контексте практического взаимодействия с ней. Вы крайне редко заходили за чем-то одним, с тем, чтоб сразу уйти обратно. Вы, как правило заходили на вебсайт, и осматривались вокруг. Вы обозревали. +Это отсылает нас к изначальному вопросу о том, как же интернавты обнаруживали ваш сайт впервые. Вы были везунчиком, если ваш сайт отображался в догугловских поисковиках, но даже если он там появлялся, это, скорее всего, значило, что кто-то активно ищет именно его. Но ведь не каждый посетитель вашего сайта действительно искал чего-то конкретного. Они могли просто разыскивать вебсайты на интересующую их тематику. +Одним из способов сделать это были каталоги сайтов, такие как Соседства Geocities (или, например, Rambler, Улитка и Апорт в рунете — прим. пер.): списки вебсайтов, часто разделённые на категории и подкатегории. Фактически, большинство поисковиков были также каталогами, или порталами, как их тогда называли. +
    +1997 - Excite, совмещающий в себе каталог сайтов, организованных в каналы, и поисковик +
    +Одним из крупнейших был DMOZ open-directory project, основанный на каталогах Mozilla, чьей целью было "создать наиболее всеобъемлющий каталог Сети, опираясь на огромную армию редакторов-волонтёров". Вы и сейчас можете просмотреть версию этого каталога 2001 года для осознания того, как это работало. +Другой способ обнаружения новых вебсайтов опирался на ключевую особенность Сети — гиперссылки. Вы заходили на один сайт и обнаруживали путь на множество других, примерно как если вы сейчас зайдёте в мой раздел "Retro stuff" и проследуете по одной из ссылок на что-нибудь интересное, где-то в сети. Идея перекрёстных ссылок между сайтами была обыденностью; большинство сайтов имели страницы "ссылки" со своей собственной персональной коллекцией интересных страниц. +Перекрёстные ссылки были основным способом, которым лично я обнаруживал свои любимые сайты, которые потом добавлял в закладки, чтоб иметь возможность зайти снова. Фактически, практика перекрёстных ссылок включала интересный культурный элемент: сетевые кольца (webrings). +
    +Пример сетевого кольца на тему Европейской истории +
    +Сетевые кольца были "круговыми" коллекциями вебсайтов, зачастую созданными вокруг одной темы. Идея была в том, что вы могли переходить с одного сайта на другой, щёлкая на кнопки "следующий" или "предыдущий", которые каждый член Кольца размещал внизу своей домашней странички. Теперь они тоже практически исчезли. +
    +
    +
    +
    +

    Современные привратники

    +
    +
    + + +Сегодня большая часть времени, проводимого в сети, проходит либо непосредственно на небольшом количестве доминирующих платформ вроде Facebook/ВК, либо опосредовано через них. +Столь огромное количество "контента" постоянно пропихивается через вас, как пользователя, что нынче редко кто из нас решается на самостоятельное исследование и поиск. Нам просто не нужно. Но эти платформы процветают на "вовлечении пользователя" — лайки, комментарии, репосты — и их алгоритмы предпочитают демонстрировать тот контент, что генерирует нужное поведение. Вместо обозревания, Сеть сейчас для большинства пользователей — бесконечный и зачастую ошеломляющий поток контента и комментариев, отобранных алгоритмами, основанными на том, что, по их мнению, вам уже нравится, и что вовлечёт вас. Эта практика прямо противоположна исследованию. +Когда вы не получаете информацию пассивно, а вместо этого активно ищете что-либо, вас, скорее всего, затянет в единую точку сингулярности, где сейчас находятся 87% всех пользователей сети — Google. +Гугл стал де-факто привратником сети, судьёй, решающим, что полезно, и что достойно быть увиденным. Большинство сайтов, ссылки на которые вы обнаружите на первой странице поисковой выдачи, то есть те, на которые вы скорее всего кликните - менее 1% пользователей нажимают на ссылки на второй странице — специально разработаны, чтоб попасть туда, отпимизированы под алгоритмы Гугла. Одно из последствий этого — большинство вебсайтов, на которые люди переходят "естественным образом", созданы профессионалами и маркетологами, "позиционирующими" их на нужных ключевых словах. Это означает, что малая, любительская сеть прячется в тени сетевых профессионалов, строящих дизайн вокруг специфических ключевых слов и аудитории. +
    +Запрос bartending recipes в Гугле не приведёт вас в Малую Сеть +
    +Google монополизировал не только поиск — остальные поисковики, такие как Bing, DuckDuckGo и Quant всё ещё далеко позади — это ещё и крупнейшая торговая площадка. В прошлом году 31% мировых затрат на рекламу ($103,73 миллиарда) пришлись на площадки Google. Власть, которую даёт такое положение, вкупе с присутствием практически на каждом крупном сайте (посредством широко распространённой платформы аналитики (относительно конфиденциальности которой имеются обоснованные сомнения ) означает, что он может активно продвигать своё собственное видение Сети. +И эта сеть сильно отличается от "малой сети", создаваемой вебмастерами 90х и ранних 2000х. Сеть Google обладает другим набором ценностей и терминологией, что приходит с ними: персонализация, взгляды, вовлечение, конверсия, производительность, оптимизация. +
    +
    +
    +
    +

    Коммерческая (маркетинговая) Сеть

    +
    +
    + + +В сети всегда было место коммерции и маркетингу. +Amazon уже в 1995 году продавал книги онлайн, eBay был запущен в 1997, а Dell к концу того же года продал оборудования больше, чем на миллион долларов. К 2000м, невзирая на крах доткомов, сетевая коммерция росла. Это развитие было естественным — сеть позволила продавцам контактировать с более удалёнными клиентами, без необходимости опираться на телефонные заказы, факс или почтовую систему. Коммерческая сеть сосуществовала и росла вместе с частной, любительской. Открытая природа сети означала, что любые сайты могут процветать. +Но сегодняшняя Сеть по большей части коммерческая. Малая сеть любителей не имеет ни ресурсов, ни желания конкурировать за видимость и аудиторию тем способом, которым это делает сеть коммерческая. +Компании и маркетологи осознали, что сеть предоставила новые возможности для продажи большего количества товара, и таргетирования пользователей на основе отслеживания их сетевой активности. Они принялись вкладывать деньги в цифровые рекламные стратегии, анализируя, как люди используют сеть, о чём говорят, что ищут и на что нажимают. Маркетинговые компании убедили брэнды, что те должны присутствовать в сети и производить контент, чтоб быть более релевантными, потому что их клиенты уже там. Они изобрели такие термины как "нативная реклама" и "спонсорский контент" (это контент, созданный так, чтоб выглядеть как обычная статья, но по сути являющийся оплаченной рекламой). Компании начали вбухивать деньги в цифровые стратегии, чтоб понимать и влиять на поведение интернет-пользователей по их желанию. +
    +Такие конторы как Quantcast предлагают детальный анализ поведенческих и психографических данных на нас — пользователй, включающие наши действия на различных веб-сайтах, позволяя маркетологам отслеживать и влиять на нас +
    +С такой стратегией относительно контента, аналитикой (инфраструктура слежки, о которой я говорил в предыдущей статье и поисковой оптимизацией, коммерческая сеть привнесла принципиально отличный набор приоритетов: вовлечь "аудиторию", обратить её и удержать как можно дольше. +Для них Сеть — всего лишь один из каналов торговли. +В сравнении с Малой сетью, коммерческая — расчётливая и хищническая. Она способна динамически генерировать сотни страниц вокруг любого распространённого поискового запроса. Она может отслеживать пользователя на множестве сайтов, анализируя его действия, и используя эту информацию для более точного таргетирования. И у неё очень серьёзные ресурсы. За прошлый год компании потратили более 300 миллиардов евро на онлайн-рекламу, большая часть из которых пошла тем самым привратникам — Google и Facebook — которые продают ис способность лучше таргетировать вас, базируясь на той информации, которую вы им дали. +Всё это говорит о том, что пользователи сети пришли к тому, что взаимодействуют они большую часть времени в видимой хищнической коммерческой сети, в то время как множество мелких любительских сайтов остаются скрытыми информационным шумом. +
    +
    +
    +
    +

    Продукто-ориентированный вебсайт

    +
    +
    + +Дизайн современной коммерческой сети "стерилен": он прилизан, он следует конвенциям и оптимизирован для эффективности. Это — одна из причин, почему так много вебсайтов, которые вы посещаете сегодня, выглядят одинаково. Кодекс коммерческой сети стал настолько доминантным, что мы просто забыли, что малая сеть всё ещё существует, и имеет абсолютно иные приоритеты. +Современные принципы веб-дизайна крайне редко нацелены на обычного человека, ищущего, как создать свой вебсайт или ищущего что-то, в чём он заинтересован. Вместо этого они фокусируются на эффективных вебсайтах:
    -

    Не используйте слишком много цветов. Пишите короткие цепляющие вводные. Не позволяйте контенту быть слишком длинным. Оптимизируйте для SEO. Выпускайте видео-контент, продолжительность концентрации внимания уменьшается. Используйте очевидный призыв к действию. Пропихивайте свою подписку. Держите важную информацию выше края. Не заставляйте пользователя думать. Следуйте конвенциям.

    -
    -

    Универсальные принципы дизайна, улучшающие конверсию

    -

    Современные вебсайты разработаны так, чтоб направлять поведение пользователя к определённым целям: покупка, нажатие, распространение или подписка. Слова, цвета, сообщения — подчинены этим целям, как упаковка продуктов в супермаркете.

    -

    Статья 2008 года в Smashing Magazine под названием 10 принципов хорошего дизайна вебсайта на вершине поисковой выдачи, когда я искал "хороший веб-дизайн" в процессе написания этого эссе. Есть множество других, зачастую более новых, но все они в общей сложности говорят одно и то же. Автор конкретно этой статьи даже вполне ясно начинает её так: «... дизайн, построенный вокруг пользователя, зарекомендовал себя как стандартный подход в успешном и ориентированном на прибыль веб-дизайне».

    -

    Но сеть не всегда "ориентирована на прибыль", и ей уж точно не нужно быть "построенной вокруг пользователя" (и я это заявляю, как UX-консультант). В противном случае места для творчества и самовыражения оставалось бы ничтожно мало. Богатое разнообразие сети было бы низведено к онлайновому эквиваленту массивного, организованного, стерильного торгового центра, призванного стимулировать продажи. Нет, сеть не может быть и "построенной вокруг автора", вокруг хобби или собак!

    -

    Стоит помнить, что сайт не обязательно должен быть продуктом — он может быть объектом искусства. Сеть — ещё и творческое и культурное пространство, которое не должно ограничивать себя соглашениями, навязанными коммерческим дизайном продукта или маркетингом.

    -

    Сеть как творческое пространство

    -

    С доминированием коммерческой сети и упорядочиванием их кодекса и технологий, большинству людей легко подумать, будто сеть — это сложная машина. Большинство сайтов сегодня создаются сложными системами управления контентом, стратегиями SEO и SMM, множеством плагинов, детализированной аналитикой и отслеживанием аудитории, оптимизированными под разные контрольные точки и обслуживаемыми глобальными CDN.

    -

    Но сеть-то намного проще. Вам, на самом деле, нужно две вещи: вебсервер и HTML (ну и базовый CSS для разметки). И вам не нужно делать его "user-centered" — как ранние вебмастеры на Geocities выстругивали свой собственный уголок в сети, вы можете выразить себя в любой манере, которой захотите. В этом разница между продуктом и искусством.

    -

    Художник не станет добавлять больше красного цвета в рисунок или изменять композицию только потому, что маркетинговые исследования показывают, что людям это больше нравится. Это видение творца — кому-то понравится, кому-то нет. Но это творение, по своим правилам. Вопрос "эффективности" здесь просто бессмысленен. И то же самое касается Малой Сети.

    -

    Если коммерческая сеть — "промышленная", то можно сказать, что Малая Сеть — "кустарная". Одно не лучше другого. Они служат разным целям и могут сосуществовать в открытой сети. И тем не менее, было бы стыдно проводить время только в коммерческой Сети, не давая себе возможности изучить творчество, страстность и причудливость Малой Сети.

    -

    И чтобы продемонстрировать вам, насколько сильно она может отличаться от современных вебсайтов, я собрал для вас несколько примеров, которыми проиллюстрирую богатство Малой Сети.

    -

    Моменты прошлого

    -

    Сперва посмотрим на маленькие вебсайты из прошлого, и после двинемся к тем, что живут и здравствуют ныне.

    -

    За возможность откопать эти сайты и предоставить вам доступ к ним, я благодарю поразительную работу по архивированию Сети, выполненную:

    +Не используйте слишком много цветов. Пишите короткие цепляющие вводные. Не позволяйте контенту быть слишком длинным. Оптимизируйте для SEO. Выпускайте видео-контент, продолжительность концентрации внимания уменьшается. Используйте очевидный призыв к действию. Пропихивайте свою подписку. Держите важную информацию выше края. Не заставляйте пользователя думать. Следуйте конвенциям. +
    +Универсальные принципы дизайна, улучшающие конверсию
    +Современные вебсайты разработаны так, чтоб направлять поведение пользователя к определённым целям: покупка, нажатие, распространение или подписка. Слова, цвета, сообщения — подчинены этим целям, как упаковка продуктов в супермаркете. +Статья 2008 года в Smashing Magazine под названием 10 принципов хорошего дизайна вебсайта на вершине поисковой выдачи, когда я искал "хороший веб-дизайн" в процессе написания этого эссе. Есть множество других, зачастую более новых, но все они в общей сложности говорят одно и то же. Автор конкретно этой статьи даже вполне ясно начинает её так: «... дизайн, построенный вокруг пользователя, зарекомендовал себя как стандартный подход в успешном и ориентированном на прибыль веб-дизайне». +Но сеть не всегда "ориентирована на прибыль", и ей уж точно не нужно быть "построенной вокруг пользователя" (и я это заявляю, как UX-консультант). В противном случае места для творчества и самовыражения оставалось бы ничтожно мало. Богатое разнообразие сети было бы низведено к онлайновому эквиваленту массивного, организованного, стерильного торгового центра, призванного стимулировать продажи. Нет, сеть не может быть и "построенной вокруг автора", вокруг хобби или собак! +Стоит помнить, что сайт не обязательно должен быть продуктом — он может быть объектом искусства. Сеть — ещё и творческое и культурное пространство, которое не должно ограничивать себя соглашениями, навязанными коммерческим дизайном продукта или маркетингом. +
    +
    +
    +
    +

    Сеть как творческое пространство

    +
    +
    + +С доминированием коммерческой сети и упорядочиванием их кодекса и технологий, большинству людей легко подумать, будто сеть — это сложная машина. Большинство сайтов сегодня создаются сложными системами управления контентом, стратегиями SEO и SMM, множеством плагинов, детализированной аналитикой и отслеживанием аудитории, оптимизированными под разные контрольные точки и обслуживаемыми глобальными CDN. +Но сеть-то намного проще. Вам, на самом деле, нужно две вещи: вебсервер и HTML (ну и базовый CSS для разметки). И вам не нужно делать его "user-centered" — как ранние вебмастеры на Geocities выстругивали свой собственный уголок в сети, вы можете выразить себя в любой манере, которой захотите. В этом разница между продуктом и искусством. +Художник не станет добавлять больше красного цвета в рисунок или изменять композицию только потому, что маркетинговые исследования показывают, что людям это больше нравится. Это видение творца — кому-то понравится, кому-то нет. Но это творение, по своим правилам. Вопрос "эффективности" здесь просто бессмысленен. И то же самое касается Малой Сети. +Если коммерческая сеть — "промышленная", то можно сказать, что Малая Сеть — "кустарная". Одно не лучше другого. Они служат разным целям и могут сосуществовать в открытой сети. И тем не менее, было бы стыдно проводить время только в коммерческой Сети, не давая себе возможности изучить творчество, страстность и причудливость Малой Сети. +И чтобы продемонстрировать вам, насколько сильно она может отличаться от современных вебсайтов, я собрал для вас несколько примеров, которыми проиллюстрирую богатство Малой Сети. +
    +
    +
    +
    +

    Моменты прошлого

    +
    +
    + +Сперва посмотрим на маленькие вебсайты из прошлого, и после двинемся к тем, что живут и здравствуют ныне. +За возможность откопать эти сайты и предоставить вам доступ к ним, я благодарю поразительную работу по архивированию Сети, выполненную:
      -
    • Internet Archive - благодаря 439 миллиардам веб-страниц, сохранённым с середины 90х, позволяет путешествовать во времени, и видеть, как сайты выглядели раньше

      +
    • Internet Archive - благодаря 439 миллиардам веб-страниц, сохранённым с середины 90х, позволяет путешествовать во времени, и видеть, как сайты выглядели раньше
    • -
    • Restorativland — "восстановленная виртуальная галерея архивных сайтов Geocities, отсортированных по соседству"

      +
    • Restorativland — "восстановленная виртуальная галерея архивных сайтов Geocities, отсортированных по соседству"
    -

    Перейдём к примерам.

    -

    A Laurel & Hardy Fansite

    -

    Фан-сайт, созданный в 1998, посвящённый комедийному дуету Стена Лорела и Оливера Харди. Вот что о сайте говорит его автор:

    + +

    Перейдём к примерам.

    +

    +

    A Laurel & Hardy Fansite

    +Фан-сайт, созданный в 1998, посвящённый комедийному дуету Стена Лорела и Оливера Харди. Вот что о сайте говорит его автор:
    -

    На этом вебсайте вы найдёте: более сотни фотографий, небольшую коллекцию звуковых файлов, полный набор фильмов — от эры немого кино до звукового. Когда-нибудь задумывались, о чём они поют? Отправляйтесь на страницу текстов и читайте. Лорел и Харди были звёздами, но они никогда не добились бы этого без помощи других людей. Вы можете посмотреть, кто это был на странице Актёрский Состав.

    +На этом вебсайте вы найдёте: более сотни фотографий, небольшую коллекцию звуковых файлов, полный набор фильмов — от эры немого кино до звукового. Когда-нибудь задумывались, о чём они поют? Отправляйтесь на страницу текстов и читайте. Лорел и Харди были звёздами, но они никогда не добились бы этого без помощи других людей. Вы можете посмотреть, кто это был на странице Актёрский Состав.
    -

    Если вы перейдёте на страницу информации, вы обнаружите, что в разделе "зачем" ответ просто "а почему нет!!". И действительно — почему бы нет!

    -

    -

    Visit A Laurel & Hardy Fansite on Restorativland

    -

    Fractal explorer

    -

    Сайт Фабио Цесари (на тот момент — 24-летний студент компьютерной специальности Университета Болоньи, Италия), полностью посвящённый фракталам. Включает очень ясные объяснения, галереи изображений и пошаговые инструкции:

    +Если вы перейдёте на страницу информации, вы обнаружите, что в разделе "зачем" ответ просто "а почему нет!!". И действительно — почему бы нет! +
    +
    +Visit A Laurel & Hardy Fansite on Restorativland +

    +

    +

    Fractal explorer

    +Сайт Фабио Цесари (на тот момент — 24-летний студент компьютерной специальности Университета Болоньи, Италия), полностью посвящённый фракталам. Включает очень ясные объяснения, галереи изображений и пошаговые инструкции:
    -

    Многие люди, должно быть, были очарованы бесконечной сложностью и красотой фракталов. Я написал это краткое руководство, чтоб объяснить простыми словами, как генерируются множества Мандельброта и Жюлиа. Этот документ предоставляет неформальное введение в эти темы, и рассматривается исключительно как точка отсчёта в изучении информации о фракталах и фрактальной геометрии.

    +Многие люди, должно быть, были очарованы бесконечной сложностью и красотой фракталов. Я написал это краткое руководство, чтоб объяснить простыми словами, как генерируются множества Мандельброта и Жюлиа. Этот документ предоставляет неформальное введение в эти темы, и рассматривается исключительно как точка отсчёта в изучении информации о фракталах и фрактальной геометрии.
    -

    -

    Visit Fractal Explorer on Internet Archive

    -

    The National Coca-Cola Bottle Clearing House

    -

    Этот сайт — почти наверняка исчерпывающий список всех юбилейных бутылок Coca-Cola начиная с 70х. Встречаются неожиданные пункты. Например, знали ли вы, что была специальная бутылка в 240мл для выставки Dominos Pizza International Expo 1991 года, как и вообще о существовании такой выставки? Или 300мл бутылка к Английской Королевской Свадьбе 1982 года?

    -

    -

    Visit The National Coca-Cola Bottle Clearing House on Restorativland

    -

    NetHistory

    -

    До интернета существовал BITNET, "мировой лидер сетевых коммуникаций для исследовательских и учебных заведений, помог заложить основу для последующего внедрения интернета, особенно за пределами США". ( LivingInternet.com )

    -

    Этот вебсайт — "неофициальная история BITNET и интернета":

    +
    + +
    +Visit Fractal Explorer on Internet Archive +

    +

    +

    The National Coca-Cola Bottle Clearing House

    +Этот сайт — почти наверняка исчерпывающий список всех юбилейных бутылок Coca-Cola начиная с 70х. Встречаются неожиданные пункты. Например, знали ли вы, что была специальная бутылка в 240мл для выставки Dominos Pizza International Expo 1991 года, как и вообще о существовании такой выставки? Или 300мл бутылка к Английской Королевской Свадьбе 1982 года? +

    +Visit The National Coca-Cola Bottle Clearing House on Restorativland +

    +

    +

    NetHistory

    +До интернета существовал BITNET, "мировой лидер сетевых коммуникаций для исследовательских и учебных заведений, помог заложить основу для последующего внедрения интернета, особенно за пределами США". ( LivingInternet.com ) +Этот вебсайт — "неофициальная история BITNET и интернета":
    -

    Если вам нужна сухая, формальная история Интернета, вы не по адресу. Назначение NetHistory в том, чтоб дат вам прочувствовать, каково было в дни становления BITNET и интернета. Надеемся, мы дадим вам некоторый обзор и приведём к пониманию опыта раннего Internet (хотя можно утверждать, что рассматриваемый опыт во многом схож с сиденем перед терминалом мэйнфрейма среди ночи под гудение Twinkie-and-Jolt). Ну, в худшем случае, развлечётесь

    +Если вам нужна сухая, формальная история Интернета, вы не по адресу. Назначение NetHistory в том, чтоб дат вам прочувствовать, каково было в дни становления BITNET и интернета. Надеемся, мы дадим вам некоторый обзор и приведём к пониманию опыта раннего Internet (хотя можно утверждать, что рассматриваемый опыт во многом схож с сиденем перед терминалом мэйнфрейма среди ночи под гудение Twinkie-and-Jolt). Ну, в худшем случае, развлечётесь
    -

    У NetHistory есть обширные архивы публикаций ранних сетей (VM/COM, NetMonth, FSFNet, DargonZine, Nutworks, The Gilding Byte например), и "точки зрения людей, которые были там, когда творилась история BITNET и Internet"

    -

    -

    Visit NetHistory on Internet Archive

    -

    joan stark's ASCII Art Gallery

    -

    Находите текстовое творчество скучным? Этому художнику есть, что вам сказать:

    +У NetHistory есть обширные архивы публикаций ранних сетей (VM/COM, NetMonth, FSFNet, DargonZine, Nutworks, The Gilding Byte например), и "точки зрения людей, которые были там, когда творилась история BITNET и Internet" +

    +Visit NetHistory on Internet Archive +

    +

    +

    joan stark's ASCII Art Gallery

    +Находите текстовое творчество скучным? Этому художнику есть, что вам сказать:
    -

    Вы передумаете после посещения этого вебсайта. Графика с низкой пропускной способностью — намного больше, чем смайлики и эмотиконы. ASCII Art развился за пределы простой техники компьютерной графики и стал популярной формой искусства. Вы будете поражены, что можно создать используюя только символы ASCII (American Standard Code of Information Interchange). Часть текстовой графики на этом сайте раскрашена с помощью html, часть — просто текст. И все эти произведения уникальны, созданы вручную, и определённо не то же самое, что старые скучные текстовки, которые вы, должно быть, ожидали увидеть!

    +Вы передумаете после посещения этого вебсайта. Графика с низкой пропускной способностью — намного больше, чем смайлики и эмотиконы. ASCII Art развился за пределы простой техники компьютерной графики и стал популярной формой искусства. Вы будете поражены, что можно создать используюя только символы ASCII (American Standard Code of Information Interchange). Часть текстовой графики на этом сайте раскрашена с помощью html, часть — просто текст. И все эти произведения уникальны, созданы вручную, и определённо не то же самое, что старые скучные текстовки, которые вы, должно быть, ожидали увидеть!
    -

    -

    Visit joan stark's ASCII Art Galleryon Internet Archive

    -

    Настоящее время

    -

    Сколь бы ни был я восхищён артефактами прошлого, ещё больший восторг я испытал, узнав, что Малая Сеть всё ещё существует, как и в моём детстве. Она просто стала менее заметна. Среди проектов, вносящих вклад в её жизнь, три показались мне особенно захватывающими:

    +
    +
    +Visit joan stark's ASCII Art Galleryon Internet Archive +

    +
    +
    +
    +
    +

    Настоящее время

    +
    +
    + + +Сколь бы ни был я восхищён артефактами прошлого, ещё больший восторг я испытал, узнав, что Малая Сеть всё ещё существует, как и в моём детстве. Она просто стала менее заметна. Среди проектов, вносящих вклад в её жизнь, три показались мне особенно захватывающими:
      -
    • Wilby.me — поисковый движок по олдскульным, интересныи и информативным веб-страницам. Есть полезная кнопка "Surprise me!", выдающая случайный результат.

      +
    • Wilby.me — поисковый движок по олдскульным, интересныи и информативным веб-страницам. Есть полезная кнопка "Surprise me!", выдающая случайный результат.
    • -
    • Neocities.org — современный вебхостинг, позволяющий каждому создать простенький вебсайт бесплатно, и влиться в сообщество, где можно взаимодействовать с другими вебмастерами.

      +
    • Neocities.org — современный вебхостинг, позволяющий каждому создать простенький вебсайт бесплатно, и влиться в сообщество, где можно взаимодействовать с другими вебмастерами.
    • -
    • Curlie — "Крупнейший сетевой каталог, редактируемый вручную. Создаётся и поддерживается энтузиазмом сообщества редакторов-добровольцев".

      +
    • Curlie — "Крупнейший сетевой каталог, редактируемый вручную. Создаётся и поддерживается энтузиазмом сообщества редакторов-добровольцев".
    -

    Ottaviana's Kitchen

    -

    Вебсайт из 1996 года, всё ещё живёт и здравствует, предоставляя итальянские рецепты, передающиеся из поколения в поколение:

    +

    +

    Ottaviana's Kitchen

    +Вебсайт из 1996 года, всё ещё живёт и здравствует, предоставляя итальянские рецепты, передающиеся из поколения в поколение:
    -

    Мои дед и бабка имигрировали из Италии. Они прибыли на остров Эллис в поисках американской мечты. Здесь, в Ньюарке, штат Нью Джерси, родилась моя мама. Эти рецепты передала маме её мама, а она передала мне. У меня нет детей, так что лучший способ передать эти рецепты - опубликовать на моей странице, чтоб все могли насладиться ими, и, возможно, создать на их основе свою традицию. Ну, приятного аппетита!

    +Мои дед и бабка имигрировали из Италии. Они прибыли на остров Эллис в поисках американской мечты. Здесь, в Ньюарке, штат Нью Джерси, родилась моя мама. Эти рецепты передала маме её мама, а она передала мне. У меня нет детей, так что лучший способ передать эти рецепты - опубликовать на моей странице, чтоб все могли насладиться ими, и, возможно, создать на их основе свою традицию. Ну, приятного аппетита!
    -

    -

    Visit Ottaviana's Kitchen

    -

    Europäische Schmetterlinge

    -

    Немецкий сайт о бабочках Германии, создан в 1998 и поддерживался до 2005 Марио Байером. Но это не просто очередной сайт про бабочек. Это — практически исчерпывающая коллекция сведений обо всех бабочках Европы, организованная по роду/виду, каждая снабжена описанием, индикацией времени полёта, подходящими растениями, и фото (по большей части сделанными автором лично).

    -

    -

    Visit Europäische Schmetterlinge

    +

    +Visit Ottaviana's Kitchen +

    +

    +

    Europäische Schmetterlinge

    +Немецкий сайт о бабочках Германии, создан в 1998 и поддерживался до 2005 Марио Байером. Но это не просто очередной сайт про бабочек. Это — практически исчерпывающая коллекция сведений обо всех бабочках Европы, организованная по роду/виду, каждая снабжена описанием, индикацией времени полёта, подходящими растениями, и фото (по большей части сделанными автором лично). +

    +Visit Europäische Schmetterlinge

    Marseillaise.org

    -

    Всё, что вы хотели знать о Марсельезе — на сайте Йена Паттерсона, существующем "в той или иной форме с 1996 года".

    +Всё, что вы хотели знать о Марсельезе — на сайте Йена Паттерсона, существующем "в той или иной форме с 1996 года".
    -

    Добро пожаловать. Не сомневаюсь, что вы пришли, чтоб разобраться, что за суета была 14-го июля. Думаю, здесь вы найдёте всё, что хотели знать. Марсельеза - национальный гимн Франции, многими считающийся наиболее волнующим из всех гимнов. Здесь вы обнаружите текст, ноты, аудиофайлы и перевод на английский.

    +Добро пожаловать. Не сомневаюсь, что вы пришли, чтоб разобраться, что за суета была 14-го июля. Думаю, здесь вы найдёте всё, что хотели знать. Марсельеза - национальный гимн Франции, многими считающийся наиболее волнующим из всех гимнов. Здесь вы обнаружите текст, ноты, аудиофайлы и перевод на английский.
    -

    -

    Visit Marseillaise.org

    -

    The Webtender

    -

    Хотите смешать собственный коктейль? Webtender, существующий с 1995 года, предоставляет более 6000 рецептов, руокводство с информацией о барной посуде, инструментах, измерениях и ингредиентах, форум, вики и даже позволяет подобрать рецепт под текущее содержимое вашего бара!

    -

    -

    Webtender

    -

    Distant Skies - A Crystalis Fansite

    -

    Фанатский сайт по action-RPG игре под названием Crystalis:

    +

    +Visit Marseillaise.org +

    +

    +

    The Webtender

    +Хотите смешать собственный коктейль? Webtender, существующий с 1995 года, предоставляет более 6000 рецептов, руокводство с информацией о барной посуде, инструментах, измерениях и ингредиентах, форум, вики и даже позволяет подобрать рецепт под текущее содержимое вашего бара! +

    +Webtender +

    +

    +

    Distant Skies - A Crystalis Fansite

    +Фанатский сайт по action-RPG игре под названием Crystalis:
    -

    'Cristalis' — это action-RPG игра для Nintendo Entertainment System. Выпущена в Японии в апреле 1990, и в США в июле того же года. Была высоко оценена критиками своего времени за графику и геймплей и породило армию вдохновенных поклонников. В Японии игра называлась ゴッド・スレイヤー はるか天空のソナタ или Убийца БогаЖ Соната о далёком небе.

    +'Cristalis' — это action-RPG игра для Nintendo Entertainment System. Выпущена в Японии в апреле 1990, и в США в июле того же года. Была высоко оценена критиками своего времени за графику и геймплей и породило армию вдохновенных поклонников. В Японии игра называлась ゴッド・スレイヤー はるか天空のソナタ или Убийца БогаЖ Соната о далёком небе.
    -

    Сайт построем в визуальном стиле самой игры и предоставляет детальную информацию о сюжете, персонажах, игровом мире, заклинаниях и предметах в игре. И даже мне, абсолютно незнакомому с этой игрой, было интересно полистать.

    -

    -

    Visit Distant Skies - A Crystalis Fansite

    -

    Ваш собственный уголок в Сети

    -

    Итак, Малая Сеть всё ещё существует, и всё ещё предоставляет нам все виды сайтов для обозрения и исследования.

    -

    И как бы ни было весело изучать всё это, лучше всего — влиться и принять участие, создав свой собственный вебсайт. Не на огороженных платформах или в соцсетях, управляемых рекламными корпорациями, а просто в своём собственном маленьком уголке сети. Это лучший способ увидеть, как на самом-то деле проста Сеть.

    -

    Вы можете просто выложить свои рисунки, поделиться мыслями и идеями, или обзорами на любимый сорт виски. Создайте вебсайт, чтоб делиться своими заметками или рецептами. Или списком любимых адресов в вашем городе — для путешественников.

    -

    Всё, что вам нужно — выучить базовую разметку (HTML) и стили (CSS), создать сайт на бесплатном хостинге вроде Neocities.org и вступить в игру. Как вы могли догадаться, Neocities — это бесплатный хостинг вроде Geocities (ну разве что рекламы нет), чья миссия заявлена как "сделать Сеть снова прикольной, вернуть вам контроль над самовыражением в Сети". Обнаружение и присоединение к Neocities было одной причин моего восторга от Малой Сети. Вы можете потратить часы в навигации по огромному количеству сайтов, размещённых там, или же просто завести учётную запись и вступить в игру.

    -

    -

    Если вы не умеете делать сайты, у HTMLDog есть прекрасные руководства по базовому изучению HTML и CSS. Если вы предпочитаете видео — у Khan Academy есть прекрасный курс для начинающих Making Webpages.

    -

    Если у вас совсем нет опыта, может потребоваться некоторое время, чтоб въехать во все эти размеры текста, цвета, добавление изображений и ссылок между страницами, но мне кажется, это тоже часть веселья.

    -

    Вы, разумеется, всегда можете использовать готовый шаблон сайта или тему, и использовать их как есть, но это отдельное упражнение. Это как разница между покупкой картины и обучением рисованию или скульптуре. Конечный результат может быть одинаков, но практика различна.

    -

    Ещё одна вещь касательно Сети — вы всегда можете посмотреть исходные коды любого публичного вебсайта в поисках вдохновения и с целью изучения. Выбирайте простые, базовые — современная сеть полна разбухших жирных сайтов, делающих HTML нечитаемым. Но, например, этот сайт использует базовую разметку HTML и CSS и предлагает вам поиграть с его исходниками. Всё — в общественном достоянииm так что можете копировать и изменять (и можно даже без обратных ссылок, всё свободно).

    +Сайт построем в визуальном стиле самой игры и предоставляет детальную информацию о сюжете, персонажах, игровом мире, заклинаниях и предметах в игре. И даже мне, абсолютно незнакомому с этой игрой, было интересно полистать. +

    +Visit Distant Skies - A Crystalis Fansite +

    +
    +
    +
    +
    +

    Ваш собственный уголок в Сети

    +
    +
    + +Итак, Малая Сеть всё ещё существует, и всё ещё предоставляет нам все виды сайтов для обозрения и исследования. +И как бы ни было весело изучать всё это, лучше всего — влиться и принять участие, создав свой собственный вебсайт. Не на огороженных платформах или в соцсетях, управляемых рекламными корпорациями, а просто в своём собственном маленьком уголке сети. Это лучший способ увидеть, как на самом-то деле проста Сеть. +Вы можете просто выложить свои рисунки, поделиться мыслями и идеями, или обзорами на любимый сорт виски. Создайте вебсайт, чтоб делиться своими заметками или рецептами. Или списком любимых адресов в вашем городе — для путешественников. +Всё, что вам нужно — выучить базовую разметку (HTML) и стили (CSS), создать сайт на бесплатном хостинге вроде Neocities.org и вступить в игру. Как вы могли догадаться, Neocities — это бесплатный хостинг вроде Geocities (ну разве что рекламы нет), чья миссия заявлена как "сделать Сеть снова прикольной, вернуть вам контроль над самовыражением в Сети". Обнаружение и присоединение к Neocities было одной причин моего восторга от Малой Сети. Вы можете потратить часы в навигации по огромному количеству сайтов, размещённых там, или же просто завести учётную запись и вступить в игру. +
    +
    +Если вы не умеете делать сайты, у HTMLDog есть прекрасные руководства по базовому изучению HTML и CSS. Если вы предпочитаете видео — у Khan Academy есть прекрасный курс для начинающих Making Webpages. +Если у вас совсем нет опыта, может потребоваться некоторое время, чтоб въехать во все эти размеры текста, цвета, добавление изображений и ссылок между страницами, но мне кажется, это тоже часть веселья. +Вы, разумеется, всегда можете использовать готовый шаблон сайта или тему, и использовать их как есть, но это отдельное упражнение. Это как разница между покупкой картины и обучением рисованию или скульптуре. Конечный результат может быть одинаков, но практика различна. +Ещё одна вещь касательно Сети — вы всегда можете посмотреть исходные коды любого публичного вебсайта в поисках вдохновения и с целью изучения. Выбирайте простые, базовые — современная сеть полна разбухших жирных сайтов, делающих HTML нечитаемым. Но, например, этот сайт использует базовую разметку HTML и CSS и предлагает вам поиграть с его исходниками. Всё — в общественном достоянииm так что можете копировать и изменять (и можно даже без обратных ссылок, всё свободно).
    -
    -
    -
    - +
    +
    +
    +
    +
    + В согласии с духом Трививальных Технологий |  Хостинг: VDSина (скидка 10% по партнёрской ссылке) +
    +
    +
    diff --git a/style.css b/style.css index c888fa7..2b2d92c 100755 --- a/style.css +++ b/style.css @@ -1,433 +1,364 @@ -@import url('https://fonts.cdnfonts.com/css/sf-mono?styles=36552,36546'); +@charset "UTF-8"; +html, body, div, h1, h2, h3, h4, h5, span, ul, ol, li { + padding: 0; + margin: 0; } -*, -*:before, -*:after { - box-sizing: border-box; -} +ul, ol, li { + list-style: none; } body { - max-width: 48em; - margin: 0 auto; - line-height: 1.5; - padding: 0.5rem 1rem; - word-wrap: break-word; - height: 100%; - background-color: #e2e0de; - color: #363533; - font-weight: 400; - font-size: 15px; - font-family: 'SF Mono', sans-serif; - line-height: 1.725; - text-rendering: geometricPrecision; - display: flex; - flex-direction: column; - overflow-wrap: break-word; -} - -video { - aspect-ratio: 16 / 9; -} - -sup { - padding: 0 2px; - border-radius: 5px; - line-height: 99%; - left: 4px; - position: relative; - bottom: 4px; -} + font-family: Helvetica, Arial; + color: #333333; + font-size: 1em; } -a { - text-decoration: none; - color: #6495ED; -} +.bh-content { + padding-top: 2em; } -pre { - overflow-x: auto; - border-radius: 4px; - background: #dedcd9; - color: #333; - padding: 10px 15px; - font-size: 90%; -} +.bh-row { + width: 80%; + margin: 0 auto; + position: relative; } -code { - border-radius: 3px; - background: #dedcd9; - color: #333; - padding: 0 4px; - font-size: 90%; - border: 1px dotted #666; -} - -blockquote { - border-left: 2px solid #6495ED; - margin-left: 1rem; - padding-left: 1rem; - background: #dedcd9; - border-radius: 4px; -} - -input[type="file"] { - margin-bottom: 1rem; - width: 100%; -} - -select, -input[type=file]::file-selector-button { - background: rgb(201, 201, 203, 0.4); - border: none; - border-radius: 4px; - padding: 0.3rem; -} - -select:hover, -input[type=file]::file-selector-button:hover { - background: rgb(201, 201, 203); -} - -input[type="text"] { - height: auto; - font-size: inherit; +.bh-wide-row { width: 100%; - color: inherit; - border-radius: 4px; - border: inherit; -} - -input[class^="snac-btn-"] { - background: rgb(201, 201, 203, 0.4); - border: none; - border-radius: 4px; - padding: 0.3rem; - font-size: 85%; -} - -input[class^="snac-btn-"]:hover { - background: rgb(201, 201, 203); -} - -input[name="telegram_bot"] { - margin-bottom: 0.5rem; -} - -.snac-note input[value="Post"], -.snac-top-controls input[value="Post"], -.snac-top-controls input[value="Follow"], -.snac-top-controls input[value="Boost"], -.snac-top-controls input[value="Update user info"] { - background: rgb(100, 149, 237, 0.2); - color: #6495ED; - border: none; - border-radius: 4px; - padding: 0.5rem 1rem; - font-weight: 700; -} - -.snac-note input[value="Post"]:hover, -.snac-top-controls input[value="Post"]:hover, -.snac-top-controls input[value="Follow"]:hover, -.snac-top-controls input[value="Boost"]:hover, -.snac-top-controls input[value="Update user info"]:hover { - background: rgb(100, 149, 237, 0.3); -} - -.snac-top-controls input[value="Follow"], -.snac-top-controls input[value="Boost"] { - margin-top: 0.5rem; -} - - -.snac-top-controls > div > details > summary::marker { - content: "✏️ "; -} - -.snac-top-controls #new_post_form details:first-of-type summary::marker { - content: "📎 "; -} - -.snac-top-controls #new_post_form details:last-of-type summary::marker { - content: "📊 "; -} - -.snac-top-controls > details:first-of-type summary::marker { - content: "🗃️ "; -} - -.snac-top-controls > details:last-of-type summary::marker { - content: "⚙️ "; -} - - -form[id$=_reply_form] details:first-of-type summary::marker { - content: "📎 "; -} - -.snac-controls details:first-of-type summary::marker { - content: "🗨️ "; -} - -h2::before { - position: absolute; - left: -1.2rem; - color: #6495ED; - content: "#"; - font-size: 1.5rem; -} + 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; } -h2 { - position: relative; - display: block; - margin-left: 1rem; -} - -textarea, -input { - outline: none; - padding: 0.3rem; - background: #dedcd9; - border: none; - border-radius: 4px; -} - -textarea[name="bio"], -textarea[name="metadata"] { - width: 100%; -} +.bh-col-2 { + width: 16.66667%; + float: left; + position: relative; } -textarea:focus, -input:focus { - background: #eae9e7; -} +.bh-col-3 { + width: 25%; + float: left; + position: relative; } -summary { - border-radius: 4px; - padding: 0.1rem 0.2rem; - width: fit-content; -} +.bh-col-4 { + width: 33.33333%; + float: left; + position: relative; } -summary:hover { - cursor: pointer; - background: rgb(201, 201, 203, 0.4); -} - -.snac-embedded-video, -img { - max-width: 100%; - border-radius: 4px; -} - -.snac-origin { - font-size: 85%; - color: limegreen; - margin-top: 0.3rem; -} - -.snac-origin>a { - color: #363533; -} - -.snac-score { - float: right; - font-size: 85%; - margin-left: 0.5rem; -} - -.snac-top-user-banner > img { - width: 100%; -} - -.snac-metadata { - margin-bottom: 1rem; -} - -.snac-top-user-name { - font-size: 150%; - margin-bottom: -1.1rem; - margin-top: 0.5rem; -} - -.snac-top-user-id { - font-size: 110%; - margin-bottom: 1rem; -} - -.snac-top-user-bio { - margin-bottom: 1em; -} - -.snac-top-user-bio br { - display: none; -} - -.snac-top-nav { - color: #e2e0de; - display: flex; - align-items: center; - justify-content: end; -} - -.snac-top-nav > a { - text-transform: capitalize; - border-left: 1px solid; - padding-left: 0.6rem; - line-height: 1em; -} +.bh-col-5 { + width: 41.66667%; + float: left; + position: relative; } -.snac-top-nav > a:first-of-type { - padding-left: 0; - border-left: 0; -} +.bh-col-6 { + width: 50%; + float: left; + position: relative; } + +.bh-col-7 { + width: 58.33333%; + float: left; + position: relative; } -.snac-top-nav>a:hover { - text-decoration: underline; -} +.bh-col-8 { + width: 66.66667%; + float: left; + position: relative; } -.snac-top-nav>.snac-avatar { - margin-right: auto; -} +.bh-col-9 { + width: 75%; + float: left; + position: relative; } -.snac-avatar { +.bh-col-10 { + width: 83.33333%; float: left; - height: 2.5rem; - aspect-ratio: 1 / 1; - margin-right: 0.5rem; - border-radius: 8px; -} - -.snac-author { - font-size: 95%; - text-decoration: none; - font-weight: 700; - color: #363533; -} + position: relative; } -.snac-author-tag { - font-size: 90%; - color: #363533; +.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; -} - -.snac-pubdate { - color: #a0a0a0; - font-size: 90%; - float: right; -} - -.snac-top-controls { - padding-bottom: 1.5em; -} - -.e-content summary { - margin-bottom: 1rem; - color: palevioletred; -} - -.snac-post { - border-top: 1px solid #c1c1c1; - margin-bottom: 1rem; -} - -.snac-post-header { - line-height: 1.3; -} - -.snac-children { - padding-left: 1.5em; - border-left: 1px solid #c1c1c1; -} - -.snac-textarea { - font-family: inherit; + 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%; - color: inherit; - border-radius: 4px; - border: inherit; -} - -.snac-history { - display: none; -} - -.snac-btn-mute { - float: right; - margin-left: 0.5em; -} - -.snac-btn-unmute { - float: right; - margin-left: 0.5em; -} - -.snac-btn-follow { - float: right; - margin-left: 0.5em; -} - -.snac-btn-unfollow { - float: right; - margin-left: 0.5em; -} - -.snac-btn-hide { - float: right; - margin-left: 0.5em; -} - -.snac-btn-delete { - float: right; - margin-left: 0.5em -} - -.snac-btn-limit { - float: right; - margin-left: 0.5em; -} - -.snac-btn-unlimit { - float: right; - margin-left: 0.5em; -} - -.snac-footer { - margin-top: 2em; - font-size: 75%; - color: #666; -} - -.snac-poll-result { - margin-left: auto; - margin-right: auto; -} - -@media (max-width: 500px) { - body { - font-size: 14px; - } - - sup { - left: 2px; - } - - .snac-children { - padding-left: 1em; - } - - input[class^="snac-btn-"] { - font-size: 80%; - } - - .snac-pubdate { - font-size: 80%; - } - - h2::before { - top: -0.2rem; - } - - .snac-top-nav > a { - padding-left: 0.2rem; - margin: -0.2rem; - } -} + 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 */ diff --git a/style.css.bak b/style.css.bak deleted file mode 100755 index de97607..0000000 --- a/style.css.bak +++ /dev/null @@ -1,339 +0,0 @@ - -/*Begin copy-pasted segment from meowcity.club (with minor ajustments)*/ -/*Links styling*/ -a[href]:before { - content: "["; -} -a[href]:after { - content: "]"; -} -a[href], -a>span /*Only required because some instances do some strange stuff with links*/{ - color: cyan; - text-decoration: none; -} - - -/*Header styling*/ -h1, -.p-name, -.snac-top-user-name { - font-size: 1em!important; - color: red; -} -h1:before, -.p-name:before, -.snac-top-user-name { - content: "# "; -} - -h2, -.snac-top-user-id { - font-size: 1em!important; - color: deepskyblue; -} -h2:before, -.snac-top-user-id::before { - content: "## "; -} - -h3 { - font-size: 1em; - color: magenta; -} -h3>a /*h3 colouring overrides the link*/{ - color: magenta; -} -h3:not(.terminal-input)::before { - content: "### "; -} - -h4:before { - content: "#### " -} -h4 { - font-size: 1em; - color: pink; -} - - -/*Markup styling*/ -strong, -strong>span/*Once again due to weird instance styling*/ { - color: coral; -} -strong:before { - content: "<"; -} -strong:after { - content: ">"; -} -ul { - list-style-type: none; -} -li>h3:before /*List prefix overrides h3 prefix*/{ - content: "- " !important; -} -li:not(:has(h3)):before { - content: "- "; -} - - -/*Default SNAC css*/ -body { - width: 85%; - margin: auto; - line-height: 1.5; - padding: 0.8em; - word-wrap: break-word; -} - -pre { - overflow-x: scroll; /*Don't crop on overflow; this doesn't happen very often*/ -} - -.snac-embedded-video, -img { - max-width: 100% -} - -.snac-origin { - font-size: 85% -} -.snac-score { - float: right; - font-size: 85% -} - -.snac-top-user { - text-align: center; - padding-bottom: 2em -} - -.snac-top-user-name { - font-size: 200% -} - -.snac-top-user-id { - font-size: 150% -} - -.snac-avatar { - float: left; - height: 2.5em; - padding: 0.25em -} - -.snac-author { - font-size: 90%; - text-decoration: none -} - -.snac-author-tag { - font-size: 80% -} - -.snac-pubdate { - color: #a0a0a0; - font-size: 90% -} - -.snac-top-controls { - padding-bottom: 1.5em -} - -.snac-post { - border-top: 1px solid #a0a0a0; -} - -.snac-children { - padding-left: 2em; - border-left: 1px solid #a0a0a0; -} - -.snac-textarea { - font-family: inherit; - width: 100% -} - -.snac-history { - border: 1px solid #606060; - border-radius: 3px; - margin: 2.5em 0; - padding: 0 2em -} - -.snac-btn-mute { - float: right; - margin-left: 0.5em -} - -.snac-btn-unmute { - float: right; - margin-left: 0.5em -} - -.snac-btn-follow { - float: right; - margin-left: 0.5em -} - -.snac-btn-unfollow { - float: right; - margin-left: 0.5em -} - -.snac-btn-hide { - float: right; - margin-left: 0.5em -} - -.snac-btn-delete { - float: right; - margin-left: 0.5em -} - -.snac-btn-limit { - float: right; - margin-left: 0.5em -} - -.snac-btn-unlimit { - float: right; - margin-left: 0.5em -} - -.snac-footer { - margin-top: 2em; - font-size: 75% -} -.snac-poll-result { - margin-left: auto; - margin-right: auto; -} - -/*Begin og segment*/ -* { - background-color: black; - color: white; - font-family: monospace; -} - -/*This makes buttons look like any other text - this was intended to have surrounding symbols, -but it doesn't work on inputs, so you may want to re-enable the border for a11y*/ -input[type=submit] { - border-width: 0px; - color: lime; - font-size: .9em; - cursor: pointer; -} -input[type=text] { - border-width: 0px; -} - -/*Summary ajustments*/ -details[open]>summary::marker { - content: "v " -} -details>summary:hover { - cursor: pointer; -} -details>summary::marker { - color: hotpink; - content: "> " -} - -/*Changes user @s in mentions and in posts*/ -.snac-origin>a, -.snac-post-with-desc>p>b>a, -.mention, -.snac-author-tag, -.mention>span { - color: mediumslateblue!important -} -.snac-origin>a::before, -.mention::before, -.snac-author::before, -.snac-author-tag::before, -.snac-post-with-desc>p>b>a:before { - content: "("!important; -} -.snac-origin>a::after, -.mention::after, -.snac-author::after, -.snac-author-tag::after, -.snac-post-with-desc>p>b>a::after { - content: ")"!important -} - -/*Changes date from mm-dd-yyyy to [mm-dd-yyyy]*/ -.snac-pubdate::before { - content: "[" -} -.snac-pubdate::after { - content: "]" -} - -/*Origin ajustments - this includes boosts and replies*/ -.snac-origin { - color: indianred -} -.snac-origin::before { - content: "((" -} -.snac-origin::after { - content: "))" -} - -/*Media fixes*/ -.snac-embedded-video, -img { - max-width: 200px; - max-height: 200px; - height: fit-content; - object-fit: contain; -} -.snac-content-attachments>a::before, -.snac-content-attachments>a::after { - content: "" -} -.snac-content-attachments, -img { - animation-play-state: paused; -} -.snac-content-attachments:hover, -img:hover { - animation-play-state: running; -} - -.snac-top-user { - text-align: left; - padding-top: 1em; -} - -/*The below only styling works on webkit browsers*/ -input[type=submit]::after { - content: "]" -} -input[type=submit]::before { - content: "[" -} -input[type=checkbox] { - visibility: hidden; -} -input[type=checkbox]::after { - visibility: visible; - content: "[-]"; - color: red; -} -input[type=checkbox]::after:checked { - content: "[X]" -} - -/*Hides pinned posts in private view*/ -/*Only works in userstyles; change to instance URL*/ -@-moz-document regexp(".*/admin.*") { - .snac-post:has(.snac-post-header > .snac-score > span) { - display: none; - } -} -- cgit v1.2.3