diff options
| -rw-r--r-- | disqus.html | 64 | ||||
| -rw-r--r-- | howsel.html | 67 | ||||
| -rw-r--r-- | index.html | 316 | ||||
| -rw-r--r-- | rusprom.html | 66 | ||||
| -rwxr-xr-x | small.html | 63 | ||||
| -rw-r--r-- | stm.html | 170 | ||||
| -rw-r--r--[-rwxr-xr-x] | style.css | 491 |
7 files changed, 527 insertions, 710 deletions
diff --git a/disqus.html b/disqus.html index 4361583..ecc7c65 100644 --- a/disqus.html +++ b/disqus.html @@ -1,26 +1,30 @@ <!DOCTYPE html> -<html lang="en-gb"> - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>О дискуссиях и делах</title> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <div class="bh-row bh-no-border"> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h1>О дискуссиях и делах</h1> - </div> - - <div class="bh-col-8"> - <div class="bh-wide-row bh-no-border"> - <div class="bh-col-2"> - - </div> - </div> +<html> +<head> +<meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="style.css"> +<title>Улиточий домик</title> + +</head> +<body> + + + <div class="terminal"> + <div class="header"> + <div class="header-name"><h4>О дискуссиях и делах 🐌</h4></div> + <div class="header-buttons"> + <ul> + <li> × </li> + <li> + </li> + <li> − </li> + </ul> + </div> + </div> + + <div class="terminal-window"> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat disqus.txt.txt</span> <br /> <p>«Если ты споришь с идиотом, то, веротяно, он делает то же самое»</p> <p>Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию и свалить , а дальше sapienti sat.</p> @@ -38,12 +42,14 @@ </div> </div> </div> - <div class="bh-col-10"> - <center> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </center> - <hr> - </div> - </body> - </html> +</div> +</div> +<div> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) +</center> + <hr> + </div> + </body> +</html> diff --git a/howsel.html b/howsel.html index 73b56d3..ae1a4d0 100644 --- a/howsel.html +++ b/howsel.html @@ -1,27 +1,31 @@ <!DOCTYPE html> -<html lang="en-gb"> - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>Инвесторам на заметку. 17 важных наблюдений за поведением людей</title> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <div class="bh-row bh-no-border"> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h3>Инвесторам на заметку. 17 важных наблюдений за поведением людей</h3> - </div> - - <div class="bh-col-8"> - <div class="bh-wide-row bh-no-border"> - <div class="bh-col-2"> - - </div> - </div> +<html> +<head> +<meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="style.css"> +<title>Улиточий домик</title> + +</head> + +<body> + - + <div class="terminal"> + <div class="header"> + <div class="header-name"><h4>Инвесторам на заметку. 17 важных наблюдений за поведением людей</h4></div> + <div class="header-buttons"> + <ul> + <li> × </li> + <li> + </li> + <li> − </li> + </ul> + </div> + </div> + + <div class="terminal-window"> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat howsel.txt</span> <br /> + (копипаст перевода Моргана Хаузела с канала "На пенсию в 35 лет") <p> Сто миллиардов человек жили на этой планете. Почти восемь миллиардов из них живы и сегодня. У каждого из них есть своя история, но лишь у немногих есть возможность ее рассказать. @@ -281,12 +285,13 @@ </div> </div> </div> - <div class="bh-col-10"> - <center> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </center> - <hr> - </div> - </body> - </html> - +</div> +</div> +<div> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) +</center> + <hr> + </div> + </body> +</html> @@ -1,153 +1,181 @@ <!DOCTYPE html> -<html lang="ru"> - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>Улиточий домик - Sn4il site</title> - <link rel="stylesheet" href="style.css"> - <link rel='alternate' title='Atom feed' href="https://createfeed.fivefilters.org/index.php?url=https%3A%2F%2Fsn4il.site&max=5&order=document&guid=0" type='application/atom+xml'/> - </head> - <body> - <h1>Улиточий домик</h1> - <div class="bh-row bh-no-border"> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h3>мир вам, Земляне.</h3> - </div> - - <div class="bh-col-8"> - <div class="bh-wide-row bh-no-border"> - <div class="bh-col-2"> - - </div> - </div> - - <p>Это персональная страница Снэйла (ака Улитка). </p> - <aside class="bh-aside-left"> - Об авторе - </aside> - - <p>Администратор проекта <a href="http://smolnet.ru" target="_blank" rel="noopener noreferrer">https://smolnet.ru</a>. В обычной жизни — скромный DevOps-инженер. </p> - <p>Пишу простую электронную <a href="https://music.yandex.ru/artist/19350795">музыку</a> (последний релиз - <a href="https://music.yandex.ru/album/33173862">Фантазия</a>), играю на нескольких музыкальных инструментах.</p> - - </div> - </div> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h3>ссылки</h3> - </div> - <div class="bh-col-8"> - <ul> - <aside class="bh-aside-left"> - сервисы - </aside> - <li class="bh-item"> - <a href="https://txt.sn4il.site">Txtdot</a> - html-to-text proxy. "Опрощающий" веб-прокси, рендерящий хитросложные тяжёлые страницы в чистый удобочитаемый текст. - </li> - <li class="bh-item"> - <a href="https://short.sn4il.site">Liteshort</a> — сокращалка ссылок - </li> - <li class="bh-item"> - <a href="https://ao.sn4il.site">AnonymousOverflow</a> — быстрый/лёгкий фронт для Stackoverflow - </li> - <li class="bh-item"> - <a href="https://rl.sn4il.site">RedLib</a> — быстрый/лёгкий фронт для Reddit - </li> - <li class="bh-item"> - <a href="https://pw.sn4il.site">PWPush</a> — сервис для безопасной передачи паролей (время хранения настраивается) - </li> - <hr> - <aside class="bh-aside-left"> - контакты - </aside> - <li class="bh-item"><a href="https://music.yandex.ru/artist/19350795" target="_blank" rel="noopener noreferrer">Музыка</a> (2024-08-31 запланирован новый релиз после долгого поиска издателя) - </li> - <li class="bh-item"> - <a href="https://blog.sn4il.site/sn4il" target="_blank" rel="noopener noreferrer">Аккаунт в Fediverse</a> - </li> - <li class="bh-item"> - <a href="http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x296cf59abd4a6b09af0c941fb391fc4aeb132cb9" target="_blank" rel="noopener noreferrer">Ключ GPG</a> - </li> - <li class="bh-item"> - <a href="https://git.sn4il.site" target="_blank" rel="noopener noreferrer">Git-репозитории</a> - </li> - <li class="bh-item"> - <a href="https://boosty.to/phast" target="_blank" rel="noopener noreferrer">Дать чаевые</a> - </li> - <hr> - <aside class="bh-aside-left"> - просто чтоб было - </aside> - <li class="bh-item"> - Зеркало русского перевода Linux From Scratch: <br> - <a href="./lfs-12.2-sysv/index.html">Версия 12.2 без SystemD</a> - </li> - </ul> - </div> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h3>статьи</h3> - </div> - <div class="bh-col-8"> - <ul class="bh-timeline"> - <li class="bh-timeline-item"> - <header><a href="./rusprom.html">Список российских производителей</a></header> - <small> - На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): - Предприятия ВПК, атомпрома и нефтепереработки не включаю. Список периодически пополняется. - </small> - </li> - <aside class="bh-aside-left"> - понемногу переносятся из gemini - </aside> - <li class="bh-timeline-item"> - <header><a href="./small.html">[Перевод] Заново открываем Small Web</a></header> - <small> - (перевод статьи <a href="https://neustadt.fr/essays/the-small-web/">https://neustadt.fr/essays/the-small-web/)</a><br> - Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная... - </small> - </li> - - <li class="bh-timeline-item"> - <header><a href="./disqus.html">О дискуссиях и делах</a></header> - <small> - «Если ты споришь с идиотом, то, веротяно, он делает то же самое»<br> - Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию и свалить , а дальше sapienti sat... - </small> - </li> - - <li class="bh-timeline-item"> - <header><a href="./howsel.html">[Перевод] Инвесторам на заметку. 17 важных наблюдений за поведением людей</a></header> - <small> - (копипаст перевода Моргана Хаузела с канала "На пенсию в 35 лет") - <br> - Сто миллиардов человек жили на этой планете. Почти восемь миллиардов из них живы и сегодня. У каждого из них есть своя история, но лишь у немногих есть возможность ее рассказать. - Каждый из них видел что-то свое и думал о чем-то уникальном. Большинство знает то, чего вы не можете постичь, а вы испытали то, во что они не поверят. - Инвесторам на заметку. 17 важных наблюдений за поведением людей - Но очень многие модели поведения универсальны для разных поколений и географических регионов. Обстоятельства меняются, а реакции людей - нет. Технологии развиваются, но неуверенность, слепые пятна и доверчивость все еще с нами. - В этой статье описаны 17 наиболее распространенных и важных, на мой взгляд, аспектов мышления людей. - Это длинный пост, но каждый пункт можно прочитать по отдельности. Пропустите те, с которыми вы не согласны, и перечитайте те, с которыми согласны. - </small> - </li> - <li class="bh-timeline-item"> - <header><a href="./stm.html">[Перевод] Манифест Малых Вещей</a></header> - <small> - Многие ключевые технологические и культурные инновации последних столетий имели целью уменьшить мир, сократить или устранить расстояния, сделать нас, людей, ближе друг к другу. Печать, транспорт, телефон, радио, телевидение, домашние кинотеатры, интернет — каждая на свой манер усилила наше влияние на окружающий мир, сделав его части меньше. - - </li> - - </ul> - </div> - </div> - +<html> +<head> +<meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="style.css"> +<title>Улиточий домик</title> + +</head> + +<body> + + + <div class="terminal"> + <div class="header"> + <div class="header-name"><h4>Улиточий домик 🐌</h4></div> + <div class="header-buttons"> + <ul> + <li> × </li> + <li> + </li> + <li> − </li> + </ul> + </div> + </div> + + <div class="terminal-window"> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat about.txt</span> <br /> + <span class="user">user@server </span> <span class="path">$</span><span class="command">Это персональная страница Снэйла (ака Улитка). </p> + <p> + Об авторе + </p> + <p>Администратор проекта <a href="http://smolnet.ru" target="_blank" rel="noopener noreferrer">https://smolnet.ru</a>. В обычной жизни — скромный DevOps-инженер. </p> + <p>Пишу простую электронную <a href="https://music.yandex.ru/artist/19350795">музыку</a> (последний релиз - <a href="https://music.yandex.ru/album/33173862">Фантазия</a>), играю на нескольких музыкальных инструментах.</p> + </span> <br /> + + <br /> + <span class="user">user@server </span><span class="path">$</span><span class="cursor"> </span> + </p> + </div> +<br /> +<br /> +</div> +</div> + <div class="terminal"> + <div class="header"> + <div class="header-name"><h4>Содержание</h4></div> + <div class="header-buttons"> + <ul> + <li> × </li> + <li> + </li> + <li> − </li> + </ul> + </div> </div> + + <div class="terminal-window"> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat services.txt</span> <br /></p> + <ul> + + сервисы + + <li class="bh-item"> + <a href="https://txt.sn4il.site">Txtdot</a> - html-to-text proxy. "Опрощающий" веб-прокси, рендерящий хитросложные тяжёлые страницы в чистый удобочитаемый текст. + </li> + <li class="bh-item"> + <a href="https://short.sn4il.site">Liteshort</a> — сокращалка ссылок + </li> + <li class="bh-item"> + <a href="https://ao.sn4il.site">AnonymousOverflow</a> — быстрый/лёгкий фронт для Stackoverflow + </li> + <li class="bh-item"> + <a href="https://rl.sn4il.site">RedLib</a> — быстрый/лёгкий фронт для Reddit + </li> + <li class="bh-item"> + <a href="https://pw.sn4il.site">PWPush</a> — сервис для безопасной передачи паролей (время хранения настраивается) + </li> + </ul> + <hr> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat articles.txt</span> <br /></p> + <ul> + статьи + <li> + + <header><a href="./rusprom.html">Список российских производителей</a></header> + <small> + На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): + Предприятия ВПК, атомпрома и нефтепереработки не включаю. Список периодически пополняется. + </small> + </li> + <li> + <header><a href="./small.html">[Перевод] Заново открываем Small Web</a></header> + <small> + (перевод статьи <a href="https://neustadt.fr/essays/the-small-web/">https://neustadt.fr/essays/the-small-web/)</a><br> + Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная... + </small> + </li> + + <li> + <header><a href="./disqus.html">О дискуссиях и делах</a></header> + <small> + «Если ты споришь с идиотом, то, веротяно, он делает то же самое»<br> + Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию и свалить , а дальше sapienti sat... + </small> + </li> + + <li> + <header><a href="./howsel.html">[Перевод] Инвесторам на заметку. 17 важных наблюдений за поведением людей</a></header> + <small> + (копипаст перевода Моргана Хаузела с канала "На пенсию в 35 лет") +<br> +Сто миллиардов человек жили на этой планете. Почти восемь миллиардов из них живы и сегодня. У каждого из них есть своя история, но лишь у немногих есть возможность ее рассказать. +Каждый из них видел что-то свое и думал о чем-то уникальном. Большинство знает то, чего вы не можете постичь, а вы испытали то, во что они не поверят. +Инвесторам на заметку. 17 важных наблюдений за поведением людей +Но очень многие модели поведения универсальны для разных поколений и географических регионов. Обстоятельства меняются, а реакции людей - нет. Технологии развиваются, но неуверенность, слепые пятна и доверчивость все еще с нами. +В этой статье описаны 17 наиболее распространенных и важных, на мой взгляд, аспектов мышления людей. +Это длинный пост, но каждый пункт можно прочитать по отдельности. Пропустите те, с которыми вы не согласны, и перечитайте те, с которыми согласны. + </small> + </li> + <li> + <header><a href="./stm.html">[Перевод] Манифест Малых Вещей</a></header> + <small> + Многие ключевые технологические и культурные инновации последних столетий имели целью уменьшить мир, сократить или устранить расстояния, сделать нас, людей, ближе друг к другу. Печать, транспорт, телефон, радио, телевидение, домашние кинотеатры, интернет — каждая на свой манер усилила наше влияние на окружающий мир, сделав его части меньше. + + </li> + + </ul> + + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat contacts.txt</span> <br /></p> + <ul> + контакты + + <li class="bh-item"><a href="https://music.yandex.ru/artist/19350795" target="_blank" rel="noopener noreferrer">Музыка</a> + </li> + <li class="bh-item"> + <a href="https://blog.sn4il.site/sn4il" target="_blank" rel="noopener noreferrer">Аккаунт в Fediverse</a> + </li> + <li class="bh-item"> + <a href="http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x296cf59abd4a6b09af0c941fb391fc4aeb132cb9" target="_blank" rel="noopener noreferrer">Ключ GPG</a> + </li> + <li class="bh-item"> + <a href="https://git.sn4il.site" target="_blank" rel="noopener noreferrer">Git-репозитории</a> + </li> + <li class="bh-item"> + <a href="https://boosty.to/phast" target="_blank" rel="noopener noreferrer">Дать чаевые</a> + </li> + </ul> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat stuff.txt</span> <br /></p> + + <ul> + просто чтоб было + + <li class="bh-item"> + Зеркало русского перевода Linux From Scratch: <br> + <a href="./lfs-12.2-sysv/index.html">Версия 12.2 без SystemD</a> + </li> + </ul> + + + <br /> + <span class="user">user@server </span><span class="path">$</span><span class="cursor"> </span><br /> + <br /> + </p> + </div> + + +</div> + +</div> </div> -<div class="bh-col-10"> +<div> <center> В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) </center> <hr> </div> </body> -</html> +</html>
\ No newline at end of file diff --git a/rusprom.html b/rusprom.html index b8b6ff8..d25e9a4 100644 --- a/rusprom.html +++ b/rusprom.html @@ -1,25 +1,30 @@ <!DOCTYPE html> -<html lang="en-gb"> - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>Отечественные производители</title> - <link rel="stylesheet" href="style.css?v=4552bcf67384bb346e427f6ab62513d8"> - </head> - <body> - <div class="bh-row bh-no-border"> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h3>Отечественные производители</h3> - </div> +<html> +<head> +<meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="style.css"> +<title>Улиточий домик</title> + +</head> + +<body> + + + <div class="terminal"> + <div class="header"> + <div class="header-name"><h4>Отечественные производители 🐌</h4></div> + <div class="header-buttons"> + <ul> + <li> × </li> + <li> + </li> + <li> − </li> + </ul> + </div> + </div> - <div class="bh-col-8"> - <div class="bh-wide-row bh-no-border"> - <div class="bh-col-2"> - - </div> - </div> + <div class="terminal-window"> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat rusprom.txt</span> <br /> На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): @@ -32,11 +37,6 @@ <li class="bh-item">Astra - Linux, системы автоматизации, виртаулизации, биллинга...</li> <li class="bh-item">Bask - одежда https://bask.ru</li> <li class="bh-item">BatNorton - одежда. Санкт-Петербург, Краснодар</li> - -<aside class="bh-aside-left"> -(UPD 2024-04-19) -</aside> - <li class="bh-item">Botavikos - косметика</li> <li class="bh-item">Calculate - Linux</li> <li class="bh-item">Carat - Мебель, Воронеж</li> @@ -132,11 +132,13 @@ </div> </div> </div> -<div class="bh-col-10"> -<center> -В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) -</center> - <hr> </div> -</body> -</html> +</div> +<div> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) +</center> + <hr> + </div> + </body> +</html>
\ No newline at end of file @@ -1,28 +1,30 @@ <!DOCTYPE html> -<!DOCTYPE html> -<html lang="en-gb"> - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>заново открываем Small Webe</title> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <h1>заново открываем Small Web</h1> - <div class="bh-row bh-no-border"> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h3>Вступление</h3> - </div> +<html> +<head> +<meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="style.css"> +<title>Улиточий домик</title> + +</head> - <div class="bh-col-8"> - <div class="bh-wide-row bh-no-border"> - <div class="bh-col-2"> - - </div> - </div> +<body> + + <div class="terminal"> + <div class="header"> + <div class="header-name"><h4>Заново открываем Small Web🐌</h4></div> + <div class="header-buttons"> + <ul> + <li> × </li> + <li> + </li> + <li> − </li> + </ul> + </div> + </div> + + <div class="terminal-window"> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat about.txt</span> <br /> (перевод статьи https://neustadt.fr/essays/the-small-web/) <blockquote> @@ -37,8 +39,7 @@ И нет, я не к тому, что раньше всё было лучше. Не было. Были трояны, вредоносные программы, бесконечные всплывающие окна, отвратительные подходы к безопасности, несовместимость браузеров, тормозные Java-апплеты... Нет, технически современная сеть более безопасна и пригодна для использования. Данное эссе — моя попытка показать вам, как может выглядеть независимая Сеть, чем она отличается от сайтов, доминирующих сегодня, почему она стоит того, чтоб её исследовать, и как легко стать её частью. </p> -</div> -</div> + <div class="bh-wide-row bh-vert-2"> <div class="bh-col-4"> <h2>Дизайн в ретро-стиле</h2> @@ -328,12 +329,14 @@ Google монополизировал не только поиск — оста </div> </div> </div> - <div class="bh-col-10"> - <center> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </center> - <hr> - </div> +</div> +</div> +<div> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) +</center> + <hr> + </div> </body> </html> @@ -1,35 +1,41 @@ <!DOCTYPE html> -<html lang="en-gb"> - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>Манифест малых вещей</title> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <div class="bh-row bh-no-border"> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> - <h3>Манифест Малых Вещей</h3> - </div> +<html> +<head> +<meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="style.css"> +<title>Улиточий домик</title> + +</head> + +<body> + + + <div class="terminal"> + <div class="header"> + <div class="header-name"><h4>Манифест Малых Вещей</h4></div> + <div class="header-buttons"> + <ul> + <li> × </li> + <li> + </li> + <li> − </li> + </ul> + </div> + </div> - <div class="bh-col-8"> - <div class="bh-wide-row bh-no-border"> - <div class="bh-col-2"> - - </div> - </div> + <div class="terminal-window"> + <p> + <span class="user">user@server </span> <span class="path">$</span><span class="command">cat stm.txt</span> <br /> + <p> <i>Малое важно, малое в основе (большое — лишь отражение малого)</i> </p> </div> - <div class="bh-col-4"> + <div> <h4>Малая технология, малая экономика, малое сообщество</h4> </div> - <div class="bh-col-8"> + <div> <p> Многие ключевые технологические и культурные инновации последних столетий имели целью уменьшить мир, сократить или устранить расстояния, сделать нас, людей, ближе друг к другу. Печать, транспорт, телефон, радио, телевидение, домашние кинотеатры, интернет — каждая на свой манер усилила наше влияние на окружающий мир, сделав его части меньше. @@ -37,50 +43,50 @@ </div> - <div class="bh-col-4"> + <div> <h4> Но у всего есть цена</h4> </div> - <div class="bh-col-8"> + <div> <p> Технология сама по себе — не добро и не зло, и даже не нейтральная сила природы. Она меняет мир, перестраивая его под видение её создателя, регулятора и владельца. Нефтяные корпорации отравляют наши озёра и реки, понемногу поджаривая планету. Фэйсбук следит за каждым нашим шагом в сети, используя эти данные для низведения нас до ничтожеств. Дисней владеет огромной частью современного фольклора. FCC решает, кому можно запустить радиостанцию и на каких условиях. Телевидение превращает разумных людей в обезумевших фанатов психованных чудищ, а психованных чудищ — в знаменитостей, политиков и харизматичных лидеров. </p> </div> - <div class="bh-col-4"> + <div> <h4>Всё должно быть иначе</h4> </div> - <div class="bh-col-8"> + <div> <p> То, что происходит, происходит в силу комбинации факторов, большинство из которых можно свести к "Мотивации к выгоде". Для некоторых компаний разозлить людей — значит повысить вовлечённость, а повышение вовлечённости — верный способ заработать денег. Другим деньги приносит контроль вашего доступа к вашей же собственной культуре, контроль над тем, кто имеет право рассказывать истории. И когда. И как. Для этих крупных корпораций мотивов Помощи и Улучшения просто не существует. Делать мир лучшим местом — невыгодно. </p> </div> - <div class="bh-col-4"> + <div> <h4>Будет непросто</h4> </div> - <div class="bh-col-8"> + <div> <p> Большинство новых технологий, особенно цифровых, проходят путь от зарождения к корпоратизации, на котором они расцветают как результат труда разроненных групп людей с различными целями, исследующими создаваемое технологией пространство, зачастую без оглядки на прибыль (ну или хоть с какой-то мотивацией, выходящей за границы чистой прибыли). После, как правило, следует период сокращения и объединения вокруг вещей, приносящих наибольшие деньги (или, в случае с телевидением — наибольшую поддержку со стороны правительственных комиссий) — и остаётся у вас HBO/Discovery, Disney, Facebook, Джо Роган [Российские аналоги читателю, думаю, несложно подставить самостоятельно]. </p> </div> - <div class="bh-col-4"> + <div> <h4>Но от мотивации прибылью можно отказаться! Но у всего есть цена</h4> </div> - <div class="bh-col-8"> + <div> <p> Выступления местных театральных студий всё ещё происходят, несмотря на то, что это перестало быть выгодным лет сто назад. Местные музыканты всё ещё играют, хотя лишь один из ста сможет заработать себе на жизнь музыкой, и ещё меньшая доля сможет таки Сделать Это. Малые творцы создают видеоигры в свободное время потому, что им это нравится. Сотни людей работают вместе над поддержанием и развитием свободных и открытых альтернатив крупным социальным сетям, за свой счёт. </p> </div> - <div class="bh-col-4"> + <div> <h4>Ars enim mutare — искусство ради преобразования</h4> </div> - <div class="bh-col-8"> + <div> <p> Эти вещи происходят независимо — авторы делают вещи, потому что хотят делать вещи. Они трудятся, зачастую изолированно, за небольшое вознаграждение. Это — призыв к солидарности, поддержке и целенаправленному творчеству. Мы можем изменить мир и поддерживать друг друга на этом пути. Мы можем отказаться от деятельности, обогащающей корпорации, стремящиеся заставить нас страдать, а то и уничтожить нас. Мы можем — и должны — быть самодостаточными. @@ -88,20 +94,20 @@ </div> - <div class="bh-col-4"> + <div> <h4>Что за Малые Вещи?</h4> </div> - <div class="bh-col-8"> + <div> <p> Малые вещи — это искусство, медиа, технологии и культура, создаваемые людьми, к которым относятся справедливо, для людей, к которым и которые относятся справедливо, это свободный и устойчивый взаимообмен. Никаких корпоративных правителей, привратников, технологий сетевого масштабирования и способов разбогатеть за чужой счёт. </p> </div> - <div class="bh-col-4"> + <div> <h4>Почему Малые Вещи?</h4> </div> - <div class="bh-col-8"> + <div> <p> Потому что в мире, где Творчество и Взаимодействие предельно коммерциализированы, акт Создания Вещи или построения сообщества, не подпадающих под влияние наших корпоративных правителей — это радикальный акт. Потому что большие и сложные сообщества и системы сложно управляются без ресурсов правительств и корпораций. Если мы сохраним вещи на Человеческом уровне вместо Глобального, у нас есть шанс стать успешными на Человеческом уровне (а это, в частности — выживание и стабильность, построение отношений и т.д.). @@ -109,14 +115,11 @@ Они покупают политиков, влияют на выборы, пишут наши законы, игнорируя неудобные. Они строят игру таким образом, что только они достаточно большие, чтоб играть в неё. Мы, как личности и малые сообщества, должны работать совместно. Мы должны проложить собственный путь. </p> - </div> - </div> - - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> + + <div> <h3>Малое общество</h3> </div> - <div class="bh-col-8"> + <div> <p> Это — политический документ, описывающий стремления, мотивации и взгляды небольшой группы людей, практикующих творчество на уровне сообщества. Следование этим творческим, социальным и технологическим принципам может помочь в построении более честных и справедливых сообществ. Мы живём в эру беспрецендентного изобилия, распределённого крайне неравномерно. Изобилие, создаваемое нашим трудом, нашим творчеством, нашими сообществами, отнято у нас, использовано против благосостояния наших соседей и продано нам обратно. @@ -127,11 +130,11 @@ </p> </div> </div> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> + <div > + <div> <h3>Малое сообщество</h3> </div> - <div class="bh-col-8"> + <div> <p> Мы строим движение, но движение, Состоящее-из-Людей. Малые группы людей образуют сообщества. Группы сообществ создают сети. Сети малых сообществ могут добиться большего и принимать решения быстрее, чем одна большая группа. Мы можем и должны заботиться о своих соседях и членах нашего сообщества. Мы присматриваем друг за другом. Мы рассказываем свои истории. Мы защищаем наше сообщество, и смотрим за тем, чтоб каждый имел кров и пищу в меру наших возможностей. @@ -139,20 +142,20 @@ </div> </div> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> + <div > + <div> <h3>Малые технологии</h3> </div> - <div class="bh-col-8"> + <div> <p> Большие технологии построены на отъёме и угнетении, и являют собой инструменты идеологической обработки и радикализации. Малые технологии — это технологии для людей, технологии человеческого масштаба. Понятные, реализуемые, этичные. Они не шпионят за вами, не воруют у вас, не пытаются вами манипулировать. Малые технологии — это крупная тема, заслуживающая больше слов, чем я могу тут сказать. </p> </div> - <div class="bh-col-4"> + <div> <h4>Социальные медиа</h4> </div> - <div class="bh-col-8"> + <div> <p> Пишите блог, запустите газету, используйте Федивёрс в конце концов. Всё что угодно, только не Facebook[ВК] и Google[Yandex]. Общение: отправляйте электронную почту, запустите сервер Matrix, не позволяйте Gmail [Yandex] и Facebook [VK] контролировать вашу переписку. @@ -160,57 +163,57 @@ </p> </div> - <div class="bh-col-4"> + <div> <h4>Распределённость</h4> </div> - <div class="bh-col-8"> + <div> <p> Держите собственный вебсайт. Используйте Wordpress или Neocities, да любую другую платформу. Если вы не хотите платить за аренду сервера — запустите что-нибудь вроде Yunohost на Raspberry Pi у себя в кладовке. Оно не будет доступно 100% времени, не будет быстрым, но будет Достаточно Хорошо, и вы многому научитесь в процессе. </p> </div> - <div class="bh-col-4"> + <div> <h4>творчество</h4> </div> - <div class="bh-col-8"> + <div> <p> Свободные инструменты для творчества существуют, и они замечательны. Посмотрите на Krita, Glimpse, Kdenlive, и десятки других [для музыки советую MuseScore]. Все мои работы выполнены на Свободном ПО. </p> </div> - <div class="bh-col-4"> + <div> <h4>Малые медиа</h4> </div> - <div class="bh-col-8"> + <div> <p> Делайте вещи потому, что вам это нравится. Делитесь результатами потому, что вам хочется поделиться. Люди делали это с начала времён. Члены Группы Искусств и Ремёсел Ройкрофтера сами издавали журналы в 1890х с использованием печатного пресса, Lainsville TV и Videofreex создавали независимое телевидение с помощью первых любительских камер. Вам не нужен бюджет, вам не нужны технологии, нужно просто, чтоб вам было что сказать. </p> </div> </div> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> + <div > + <div> <h3>Малые вещи</h3> </div> - <div class="bh-col-8"> + <div> <p> Это список вещей, которые малы. Не каждая из них удовлетворяет каждому принципу Манифеста, но суть у них одна. </p> </div> - <div class="bh-col-4"> + <div> <h4>Самиздат и комиксы</h4> </div> - <div class="bh-col-8"> + <div> <p> Самиздат [в оригинале - Zines] (самостоятельно издаваемые самодельные журналы) Мал по самой своей сути. Журналы самиздата обычно делаются вручную, и распространяются либо бесплатно, либо очень дёшево. Посмотрите, вдруг что есть в вашем местном книжном или музыкальном магазине. </p> </div> - <div class="bh-col-4"> + <div> <h4>Медленная/Малая/Инди сеть</h4> </div> - <div class="bh-col-8"> + <div> <p> Интернет не должен принадлежать Amazon, Facebook и Goggle [MailRu, VK, Yandex]. Проекты вроде Gemini представляют собой новый тип сети. Проекты вроде Федивёрса создают альтернативу Твиттеру и Фейсбуку. Tilde-серверы (пабниксы) и места вроде SDF предоставляют сообществам технических энтузиастов возможность собраться вместе вне контроля болших корпораций. Электронная почта, за пределами Gmail/Yandex/Yahoo, по-прежнему федеративна и равноправна. @@ -218,31 +221,31 @@ </p> </div> - <div class="bh-col-4"> + <div> <h4>Подкасты</h4> </div> - <div class="bh-col-8"> + <div> <p> Большинство подкастов — это Малые Медиа, даже если они себя таковыми не считают. Они выпускаются независимо, и распространяются с помощью малой технологии (RSS). Корпорации вроде Spotify, Apple, Google пытались огородить подкасты, но кто угодно может зайти на большинство сайтов подкастов и подписаться на любой. На это опираются многие подкасты, распространяемые под свободными лицензиями. Большинство подкастов запускаются кое-как, и это не просто Достаточно. Это Хорошо. Примите несовершенства, отриньте совершенство. </p> </div> - <div class="bh-col-4"> + <div> <h4>Музыка</h4> </div> - <div class="bh-col-8"> + <div> <p> Множество Малой музыки производится ежедневно. Большинство DIY и панка — это Малая музыка, но сложно найти лучший пример воплощения духа Малого производства, чем All Hail West Texas от The Mountain Goats. Записанный на встроенный микрофон бумбокса, этот глубоко эмоциональный и совершенный альбом живёт и наслаждается своими недостатками. «Hail Satan, tonight». Он лицензирован не под CC, но является предшественником всей концепции. </p> </div> </div> - <div class="bh-wide-row bh-vert-2"> - <div class="bh-col-4"> + <div > + <div> <h3>Принципы Малого Творчества</h3> </div> - <div class="bh-col-8"> + <div> <ul> <li class="bh-title"> Масштаб и сложность — это ловушки</li> @@ -341,12 +344,11 @@ <li class="bh-item">заботьтесь о себе, и, если можете, о близких</li> </ul> </div> - </div> - </div> - <div class="bh-col-4"> + </div> + <div> <h3>Другие Малые Вещи</h3> </div> - <div class="bh-col-8"> + <div> Люди всегда создают малые игры, малые программы, малое искусство. Это хорошо! Мы соберём так много малых вещей, как только сможем, в регулярную статью с нашем журнале Analog Revolution и на нашем сайте. @@ -360,16 +362,14 @@ </ul> <hr /> + </div> </div> - - - - <div class="bh-col-10"> - <center> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </center> - <hr> - </div> - </body> - </html> + <div> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Тривиальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) + </center> + <hr> + </div> + </body> + </html> diff --git a/style.css b/style.css index 813d133..7677e03 100755..100644 --- a/style.css +++ b/style.css @@ -1,364 +1,137 @@ -@charset "UTF-8"; -html, body, div, h1, h2, h3, h4, h5, span, ul, ol, li { - padding: 0; - margin: 0; } - -ul, ol, li { - list-style: none; } - -body { - font-family: Helvetica, Arial; - color: #000333; - font-size: 1em; } - -.bh-content { - padding-top: 2em; } - -.bh-row { - width: 80%; - margin: 0 auto; - position: relative; } - -.bh-wide-row { - width: 100%; - position: relative; } - -.bh-row, .bh-wide-row { - float: none; - clear: both; - padding-bottom: 2em; - border-bottom: 1px solid #ccc; } - .bh-row:before, .bh-row:after, .bh-wide-row:before, .bh-wide-row:after { - content: ""; - display: table; } - .bh-row:after, .bh-wide-row:after { - clear: both; } - -.bh-no-border { - border: none; } - -.bh-col-1 { - width: 8.33333%; - float: left; - position: relative; } - -.bh-col-2 { - width: 16.66667%; - float: left; - position: relative; } - -.bh-col-3 { - width: 25%; - float: left; - position: relative; } - -.bh-col-4 { - width: 33.33333%; - float: left; - position: relative; } - -.bh-col-5 { - width: 41.66667%; - float: left; - position: relative; } - -.bh-col-6 { - width: 50%; - float: left; - position: relative; } - -.bh-col-7 { - width: 58.33333%; - float: left; - position: relative; } - -.bh-col-8 { - width: 66.66667%; - float: left; - position: relative; } - -.bh-col-9 { - width: 75%; - float: left; - position: relative; } - -.bh-col-10 { - width: 83.33333%; - float: left; - position: relative; } - -.bh-col-11 { - width: 91.66667%; - float: left; - position: relative; } - -.bh-col-12 { - width: 100%; - float: left; - position: relative; } - -.bh-vert-1 { - padding-top: 1em; } - -.bh-vert-2 { - padding-top: 2em; } - -.bh-vert-3 { - padding-top: 3em; } - -h1, h2, h3 { +html,body { + background-color: #000; + color: #e5e5e5; + height: 97%; +} + +/* Create the whole terminal which cosists of a window and a header */ +.terminal { + width: 98%; + min-height:10%; + border-width: 1px; + border-top-color: #dfdede; + border-bottom-color: #949494; + border-right-color: #AAAAAA; + border-left-color: #e0dfdf; + border-style: solid; + border-radius: 6px; + background-color: #272727; + color: #e5e5e5; + margin-bottom: 10px; + -webkit-box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75); + -moz-box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75); + box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75); +} + +li { padding: 10px; } +/* The terminal window where you put the content */ +.terminal .terminal-window { + padding: 15px; + font-size: medium; + font-weight: normal; + font-family: "Courier New", Monaco, monospace; +} + +/* Sets the color for a path such as ~/page/menu $ */ +.terminal .terminal-window .path { + margin-right: 10px; + color:#729fcf; +} +/* Sets the color and font type for a user such as user@server */ +.terminal .terminal-window .user { + color:#6fc736; 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: #000; - content: " "; - margin: 1em 0 0; } +} +/* Decide how links within a menu class in the window should look like */ +.terminal .terminal-window .menu a { + /* text-decoration: none; */ + color: #e5e5e5; + font-weight: normal; +} a { - color: #000; - text-decoration: none; - border-bottom: 2px solid #ffde17; - padding-bottom: 0.2em; } - a:hover { - border-bottom-color: dodgerblue; } - -small { - font-size: 0.8em; - color: #333; } - -aside { - font-size: 0.8em; - color: #666; - 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 #be1e2d; - text-transform: uppercase; - display: table; - margin-bottom: 0.4em; - padding-bottom: 0.4em; - color: #333; } - -ol { - counter-reset: customlistcounter; } - ol li.bh-item:before { - content: counter(customlistcounter); - counter-increment: customlistcounter; - display: block; - position: absolute; - color: #333; - margin-left: -1.5em; } - -ul li.bh-item:before { - content: "–"; - display: block; - position: absolute; - color: #333; - margin-left: -1.5em; } -ul.bh-timeline header { - text-transform: uppercase; - font-size: 0.8em; + /* text-decoration: none; */ + color: #FFFFFF; + font-weight: normal; + } + +a:visited { + color: #FFFFFF; + font-weight: normal; +} +/* Create mouse over effect */ +.terminal .terminal-window .menu a:hover { 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: #be1e2d; - 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: #333; } - .bh-gray a { - color: #333; } - -.bh-light-gray { - color: #ccc; } - .bh-light-gray a { - color: #ccc; } - -button { - background: #fff; - border: 1px solid #333; - font-size: 1em; - padding: 1em 2em; - border-radius: 3em; - text-transform: uppercase; - font-weight: bold; - color: #333; +} +/* Create the blinkin cursor*/ +.terminal .terminal-window .cursor { + background-color: #e5e5e5; + animation: blink 1s steps(5, start) infinite; + -webkit-animation: blink 1s steps(5, start) infinite; +} +@keyframes blink { + to { + visibility: hidden; + } +} +@-webkit-keyframes blink { + to { + visibility: hidden; + } +} + + + + +/* The header contains the name of the terminal and the buttons for + closing, maximizing, minimizing */ +.terminal .header { + position: relative; + overflow:hidden; /*This makes the heigth adjust to the content. + It is necessary because this div contains floating divs */ + background-image: linear-gradient(to top, #d6d6d6 0%, #e5e5e5 100%); + padding: 2px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +/* The buttons in the top right corner...*/ +.terminal .header .header-buttons { + + float:right; + width:40%; +} + +.terminal .header .header-buttons ul { + display: inline; + list-style-type: none; + color:#404040; + + +} +/* ... are implemented as a list... */ +.terminal .header .header-buttons ul li { + list-style-type: none; + display: inline; + float: right; + font-size: x-large; + border-radius: 6px; + margin-right: 10px; + font-weight:normal; 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: #333; - 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: #000; - 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: #333; } - div.bh-input.bh-invalid label { - color: #D1200D; } - div.bh-input.bh-invalid input[type=text], div.bh-input.bh-invalid input[type=password] { - border-bottom-color: #D1200D; } -div.bh-search { - width: 100%; - position: relative; } - div.bh-search input { - display: block; - float: left; - background: #fff; - border: 1px solid #ccc; } - div.bh-search input[type=text] { - padding: 1em 2em; - border-top-left-radius: 3em; - border-bottom-left-radius: 3em; - font-size: 1em; - outline: none; - margin-right: 0; - border-right: none; - width: calc(100% - 6em); } - div.bh-search input[type=submit] { - font-size: 0.8em; - padding: 1.3em 2em 1.4em 1em; - border-top-right-radius: 3em; - border-bottom-right-radius: 3em; - text-transform: uppercase; - font-weight: bold; - color: #333; - cursor: pointer; - outline: none; - margin-left: 0; - right: 0; - position: absolute; } - -/*# sourceMappingURL=bauhaus.css.map */ +} +/* ... and just like in Mint there is a mouse-over effect */ +.terminal .header .header-buttons ul li:hover { + font-weight:bold; + color: #00000; +} +/* Change the properties of the window name */ +.terminal .header .header-name h4 { + float:left; + width:50%; + text-align:right; + font-size: large; + margin: 5px; + letter-spacing: 1px; + color: #404040; +} |