diff options
| -rw-r--r-- | index.html | 310 | ||||
| -rw-r--r-- | neo.css | 1151 |
2 files changed, 1327 insertions, 134 deletions
@@ -3,153 +3,195 @@ <head> <meta charset="UTF-8"> - <link rel="stylesheet" type="text/css" href="brutalist.css"> + <link rel="stylesheet" type="text/css" href="neo.css"> <title>Улиточий домик</title> </head> <body> - - <div class="header"> - <div class="header-name"> - <h4>Улиточий домик 🐌</h4> - </div> + <section class="presentation"> + <h1 class="title">Улиточий домик 🐌</h1> + <p class="description"> + Это персональная страница Снэйла (ака Улитка). </p> + <p> + Об авторе + </p> + <span class="h-card"> + <p class="p-note">Администратор проекта <a href="http://thedroth.rocks" target="_blank" + rel="noopener noreferrer">https://thedroth.rocks</a>. В обычной жизни — скромный DevOps-инженер. </p> + <p class="p-note">Пишу простую электронную музыку (последний релиз - <a + href="https://music.yandex.ru/album/35168964">Игра в слова</a>), играю на нескольких музыкальных инструментах. + </p> + <p class="p-note"><i>Размещается на прикроватном "сервере" на базе Raspberry Pi.</i></p> + </section> + + <h4>Этот сайт также доступен в</h4> + <div class="container"> + <button class="nb-button orange"> + <a href="http://[304:37d5:af3d:76fb::1]">Yggdrasil</a> + </button> + <button class="nb-button green"> + <a href="http://sn4il.i2p" target="_blank">I2P</a>. + + </button> </div> - - <p> - Это персональная страница Снэйла (ака Улитка). </p> - <p> - Об авторе - </p> - <span class="h-card"> - <p class="p-note">Администратор проекта <a href="http://thedroth.rocks" target="_blank" - rel="noopener noreferrer">https://thedroth.rocks</a>. В обычной жизни — скромный DevOps-инженер. </p> - <p class="p-note">Пишу простую электронную музыку (последний релиз - <a - href="https://music.yandex.ru/album/35168964">Игра в слова</a>), играю на нескольких музыкальных инструментах.</p> - <p class="p-note"><i>Размещается на прикроватном "сервере" на базе Raspberry Pi.</i></p> - <ul><h4>Этот сайт также доступен в</h4> - <li> - <a href="http://[304:37d5:af3d:76fb::1]">Yggdrasil</a> - </li> - <li> - <a href="http://sn4il.i2p" target="_blank">I2P</a>. - </li> - </ul> - <ul><h4>Ссылки</h4> - <li> - Маленькое и простенькое <a href="./radio">интернет-радио</a> 🎧 - </li> - <li> - <a href="https://blog.sn4il.site/sn4il/" class="u-url u-uid" rel="me">Sn4il</a> - Аккаунт в Fediverse | <a - href="http://[304:37d5:af3d:76fb::3]" target="_blank">Зеркало</a> в Yggdrasil. - </li> - <li> - <a href="https://music.yandex.ru/artist/19350795">Музыка</a> - </li> - <li> - <a href="http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x296cf59abd4a6b09af0c941fb391fc4aeb132cb9">Ключ - GPG</a> - </li> - <li> - <a href="https://git.sn4il.site" target="_blank">Git-репозитории</a> | <a href="http://[304:37d5:af3d:76fb::2]" - target="_blank">Зеркало</a> в Yggdrasil. - </li> - <li> - Трансляции в <a href="https://bsky.app/profile/sn4il.blog.sn4il.site.ap.brid.gy">Bluesky</a> и <a - href="https://fed.brid.gy/web/sn4il.site">Fediverse</a> - </li> - </ul> - <br /> - - <ul class="h-feed"><h4>Статьи</h4> - <div> - <li class="h-entry"> - - <header class="p-name"><a href="./rusprom.html">Список российских производителей</a></header> - <time class="dt-published" datetime="2023-12-02 12:00:00"></time> - <time class="dt-updated" datetime="2025-01-16 12:00:00"></time> - <blockquote> - На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто - бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму - (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же - предоставлены): - Предприятия ВПК, атомпрома и нефтепереработки не включаю. Список периодически пополняется. - </blockquote> - </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> - <blockquote>Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, - оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". - Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться - своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, - но зачастую забавная, креативная и интересная... - </blockquote> - </li> - - <li> - <header><a href="./disqus.html">О дискуссиях и делах</a></header> - <blockquote> - «Если ты споришь с идиотом, то, веротяно, он делает то же самое»<br> - Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне - восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость - оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию - и свалить , а дальше sapienti sat... - </blockquote> - </li> - - <li> - <header><a href="./howsel.html">[Перевод] Инвесторам на заметку. 17 важных наблюдений за поведением людей</a> - </header> - <small> - (копипаст перевода Моргана Хаузела с канала "На пенсию в 35 лет") - </small> - <blockquote> - <br> - Сто миллиардов человек жили на этой планете. Почти восемь миллиардов из них живы и сегодня. У каждого из них - есть своя история, но лишь у немногих есть возможность ее рассказать. - Каждый из них видел что-то свое и думал о чем-то уникальном. Большинство знает то, чего вы не можете постичь, - а вы испытали то, во что они не поверят. - Инвесторам на заметку. 17 важных наблюдений за поведением людей - Но очень многие модели поведения универсальны для разных поколений и географических регионов. Обстоятельства - меняются, а реакции людей - нет. Технологии развиваются, но неуверенность, слепые пятна и доверчивость все еще - с нами. - В этой статье описаны 17 наиболее распространенных и важных, на мой взгляд, аспектов мышления людей. - Это длинный пост, но каждый пункт можно прочитать по отдельности. Пропустите те, с которыми вы не согласны, и - перечитайте те, с которыми согласны. - </blockquote> - </li> - <li class="h-entry"> - <header class="p-name"><a href="./stm.html">[Перевод] Манифест Малых Вещей</a></header> - - <time class="dt-published" datetime="2024-03-12 12:00:00"></time> - - <blockquote> - Многие ключевые технологические и культурные инновации последних столетий имели целью уменьшить мир, сократить - или устранить расстояния, сделать нас, людей, ближе друг к другу. Печать, транспорт, телефон, радио, - телевидение, домашние кинотеатры, интернет — каждая на свой манер усилила наше влияние на окружающий мир, - сделав его части меньше. - </blockquote> - </li> + <hr> + + <h4>Ссылки</h4> + <div class="container"> + <button class="nb-button default">Маленькое и простенькое <a href="./radio">интернет-радио</a> 🎧</button> + + <button class="nb-button orange"> + <a href="https://blog.sn4il.site/sn4il/" class="u-url u-uid" rel="me">Sn4il</a> - Аккаунт в Fediverse + </button> + <button class="nb-button green"> + <a href="https://music.yandex.ru/artist/19350795">Музыка</a></button> + </div> + <div class="container"> + <button class="nb-button blue"> + <a href="http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x296cf59abd4a6b09af0c941fb391fc4aeb132cb9">Ключ + GPG</a></button> + <button class="nb-button default"> + <a href="https://git.sn4il.site" target="_blank">Git-репозитории</a> </button> + </div> + <br /> + + <section class="sections"> + <h4>Статьи</h4> + <div class="container"> + <div class="card" class="h-entry"> + <a href="./rusprom.html"> + <div class="card-content"> + <div class="text-small">обновлено 27 января, 2025 + <time class="dt-published" datetime="2023-12-02 12:00:00"></time> + <time class="dt-updated" datetime="2025-01-16 12:00:00"></time> + </div> + <p> + <strong>Список российских производителей</strong> + </p> + <blockquote> + На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего + чисто + бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по + максимуму + (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же + предоставлены): + Предприятия ВПК, атомпрома и нефтепереработки не включаю. Список периодически пополняется. + </blockquote> + <p><strong>Learn More -></strong></p> + </div> + </a> + </div> + + <div class="card" class="h-entry"> + <a href="./small.html"> + <div class="card-content"> + <div class="text-small"> (перевод статьи <a + href="https://neustadt.fr/essays/the-small-web/">https://neustadt.fr/essays/the-small-web/)</a> + </div> + <p> + <strong>[Перевод] Заново открываем Small Web</strong> + </p> + <blockquote> + Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, + оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения + "конверсии". + Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью + поделиться + своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и + неряшливая, + но зачастую забавная, креативная и интересная... + </blockquote> + <p><strong>Learn More -></strong></p> + </div> + </a> + </div> </div> - </ul> - - <ul> - <h4>Просто чтоб было</h4> - <li class="bh-item"> - Зеркало русского перевода Linux From Scratch: <br> - <a href="./lfs-12.2-sysv/index.html">Версия 12.2 без SystemD</a> - </li> - </ul> + <div class="container"> + <div class="card" class="h-entry"> + <a href="./disqus.html"> + <div class="card-content"> + <p> + <strong>О дискуссиях и делах</strong> + </p> + <blockquote> + «Если ты споришь с идиотом, то, веротяно, он делает то же самое»<br> + Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне + восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на + непробиваемость + оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою + позицию + и свалить , а дальше sapienti sat... + </blockquote> + <p><strong>Learn More -></strong></p> + </div> + </a> + </div> + + <div class="card" class="h-entry"> + <a href="./stm.html"> + <div class="card-content"> + <p> + <strong>Манифест Малых Вещей</strong> + </p> + <blockquote> + Многие ключевые технологические и культурные инновации последних столетий имели целью уменьшить мир, + сократить + или устранить расстояния, сделать нас, людей, ближе друг к другу. Печать, транспорт, телефон, радио, + телевидение, домашние кинотеатры, интернет — каждая на свой манер усилила наше влияние на окружающий + мир, + сделав его части меньше. + </blockquote> + <p><strong>Learn More -></strong></p> + </div> + </a> + </div> </div> + <div class="container"> + <div class="card" class="h-entry"> + <a href="./howsel.html"> + <div class="card-content"> + <div class="text-small">(копипаст перевода Моргана Хаузела с канала "На пенсию в 35 лет") + </a> + </div> + <p> + <strong>[Перевод] Инвесторам на заметку. 17 важных наблюдений за поведением людей</strong> + </p> + <blockquote> + Сто миллиардов человек жили на этой планете. Почти восемь миллиардов из них живы и сегодня. У каждого из них + есть своя история, но лишь у немногих есть возможность ее рассказать. + Каждый из них видел что-то свое и думал о чем-то уникальном. Большинство знает то, чего вы не можете постичь, + а вы испытали то, во что они не поверят. + Инвесторам на заметку. 17 важных наблюдений за поведением людей + Но очень многие модели поведения универсальны для разных поколений и географических регионов. Обстоятельства + меняются, а реакции людей - нет. Технологии развиваются, но неуверенность, слепые пятна и доверчивость все еще + с нами. + В этой статье описаны 17 наиболее распространенных и важных, на мой взгляд, аспектов мышления людей. + Это длинный пост, но каждый пункт можно прочитать по отдельности. Пропустите те, с которыми вы не согласны, и + перечитайте те, с которыми согласны. + </blockquote> + <p><strong>Learn More -></strong></p> + </div> + </a> + </div> </div> </div> + </section> + + <section> + <p> + <h4>Просто чтоб было</h4> + </p> + <p> + Зеркало русского перевода Linux From Scratch: <br> + <a href="./lfs-12.2-sysv/index.html">Версия 12.2 без SystemD</a> + </p> + </section> + </body> -</html> +</html>
\ No newline at end of file @@ -0,0 +1,1151 @@ +*, +*::before, +*::after { + box-sizing: border-box +} + +html { + font-family: Arial, sans-serif +} + +.container{ + + display: flex; + + flex-direction: row; + + justify-content: flex-start; + + padding: 20px; +} + +.nb-button.default { + display: inline-block; + padding: 10px 20px; + background-color: #fff; + color: #000; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.default:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #aaa +} + +.nb-button.default:focus { + outline-color: transparent +} + +.nb-button.default.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.orange { + display: inline-block; + padding: 10px 20px; + background-color: #ff5733; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.orange:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #d64b2b +} + +.nb-button.orange:focus { + outline-color: transparent +} + +.nb-button.orange.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.blue { + display: inline-block; + padding: 10px 20px; + background-color: #0077b6; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.blue:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #005785 +} + +.nb-button.blue:focus { + outline-color: transparent +} + +.nb-button.blue.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.green { + display: inline-block; + padding: 10px 20px; + background-color: #40d39c; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.green:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #30ac7e +} + +.nb-button.green:focus { + outline-color: transparent +} + +.nb-button.green.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.sky-blue { + display: inline-block; + padding: 10px 20px; + background-color: #b9e2f8; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.sky-blue:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #91bed6 +} + +.nb-button.sky-blue:focus { + outline-color: transparent +} + +.nb-button.sky-blue.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.pale-red { + display: inline-block; + padding: 10px 20px; + background-color: #ffc5c8; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.pale-red:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #ffb2b2 +} + +.nb-button.pale-red:focus { + outline-color: transparent +} + +.nb-button.pale-red.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.pale-violet { + display: inline-block; + padding: 10px 20px; + background-color: #bc98cb; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.pale-violet:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #b482c9 +} + +.nb-button.pale-violet:focus { + outline-color: transparent +} + +.nb-button.pale-violet.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.soft-blue { + display: inline-block; + padding: 10px 20px; + background-color: #4799ae; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.soft-blue:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #378589 +} + +.nb-button.soft-blue:focus { + outline-color: transparent +} + +.nb-button.soft-blue.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.pale-cyan { + display: inline-block; + padding: 10px 20px; + background-color: #b9e7de; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.pale-cyan:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #a0e5d7 +} + +.nb-button.pale-cyan:focus { + outline-color: transparent +} + +.nb-button.pale-cyan.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-button.pale-yellow { + display: inline-block; + padding: 10px 20px; + background-color: #fdfd96; + color: #000; + border: none; + cursor: pointer; + font-size: 16px; + font-weight: bold; + text-align: center; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #000000; + transition: background-color 0.3s ease, transform 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.1s ease +} + +.nb-button.pale-yellow:hover { + box-shadow: 3px 3px 0px #000000; + background-color: #fcfc7e +} + +.nb-button.pale-yellow:focus { + outline-color: transparent +} + +.nb-button.pale-yellow.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.rounded { + border-radius: 9999px +} + +.nb-input.default { + padding: 10px; + background-color: #fff; + color: #000; + border: 2px solid #ccc; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.default:hover { + background-color: #aaa +} + +.nb-input.default:focus { + outline-color: transparent; + border-color: #aaa +} + +.nb-input.default.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.default::placeholder { + color: #000; + opacity: 1; + text-align: left +} + +.nb-input.orange { + padding: 10px; + background-color: #ff5733; + color: #000; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.orange:hover { + background-color: #d64b2b +} + +.nb-input.orange:focus { + outline-color: transparent; + border-color: #d64b2b +} + +.nb-input.orange.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.orange::placeholder { + color: #000; + opacity: 1; + text-align: left +} + +.nb-input.blue { + padding: 10px; + background-color: #0077b6; + color: #fff; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.blue:hover { + background-color: #005785 +} + +.nb-input.blue:focus { + outline-color: transparent; + border-color: #005785 +} + +.nb-input.blue.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.blue::placeholder { + color: #fff; + opacity: 1; + text-align: left +} + +.nb-input.green { + padding: 10px; + background-color: #40d39c; + color: #fff; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.green:hover { + background-color: #30ac7e +} + +.nb-input.green:focus { + outline-color: transparent; + border-color: #30ac7e +} + +.nb-input.green.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.green::placeholder { + color: #fff; + opacity: 1; + text-align: left +} + +.nb-input.sky-blue { + padding: 10px; + background-color: #b9e2f8; + color: #fff; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.sky-blue:hover { + background-color: #91bed6 +} + +.nb-input.sky-blue:focus { + outline-color: transparent; + border-color: #91bed6 +} + +.nb-input.sky-blue.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.sky-blue::placeholder { + color: #fff; + opacity: 1; + text-align: left +} + +.nb-input.pale-red { + padding: 10px; + background-color: #ffc5c8; + color: #fff; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.pale-red:hover { + background-color: #ffb2b2 +} + +.nb-input.pale-red:focus { + outline-color: transparent; + border-color: #ffb2b2 +} + +.nb-input.pale-red.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.pale-red::placeholder { + color: #fff; + opacity: 1; + text-align: left +} + +.nb-input.pale-violet { + padding: 10px; + background-color: #bc98cb; + color: #fff; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.pale-violet:hover { + background-color: #b482c9 +} + +.nb-input.pale-violet:focus { + outline-color: transparent; + border-color: #b482c9 +} + +.nb-input.pale-violet.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.pale-violet::placeholder { + color: #fff; + opacity: 1; + text-align: left +} + +.nb-input.soft-blue { + padding: 10px; + background-color: #4799ae; + color: #fff; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.soft-blue:hover { + background-color: #378589 +} + +.nb-input.soft-blue:focus { + outline-color: transparent; + border-color: #378589 +} + +.nb-input.soft-blue.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.soft-blue::placeholder { + color: #fff; + opacity: 1; + text-align: left +} + +.nb-input.pale-cyan { + padding: 10px; + background-color: #b9e7de; + color: #fff; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.pale-cyan:hover { + background-color: #a0e5d7 +} + +.nb-input.pale-cyan:focus { + outline-color: transparent; + border-color: #a0e5d7 +} + +.nb-input.pale-cyan.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.pale-cyan::placeholder { + color: #fff; + opacity: 1; + text-align: left +} + +.nb-input.pale-yellow { + padding: 10px; + background-color: #fdfd96; + color: #000; + border: 2px solid #000; + border-radius: 0.25rem; + box-shadow: 2px 2px 0px 0px #000; + border-radius: 5px; + font-family: Arial, sans-serif; + font-size: 16px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease +} + +.nb-input.pale-yellow:hover { + background-color: #fcfc7e +} + +.nb-input.pale-yellow:focus { + outline-color: transparent; + border-color: #fcfc7e +} + +.nb-input.pale-yellow.disabled { + background-color: #ccc; + cursor: not-allowed +} + +.nb-input.pale-yellow::placeholder { + color: #000; + opacity: 1; + text-align: left +} + +.text-black { + color: #000 +} + +.text-white { + color: #fff +} + +.text-red { + color: #dc341e +} + +.text-orange { + color: #ff5733 +} + +.text-blue { + color: #0077b6 +} + +.text-green { + color: #40d39c +} + +.text-sky-blue { + color: #b9e2f8 +} |