Как хакер со слишком большим количеством сторонних проектов, я предпочитаю, чтобы мои веб-сайты выглядели так , чтобы их можно было мгновенно идентифицировать. У меня очень брутальный подход к веб-дизайну, который позволяет очень легко сдвинуться с мертвой точки и получить взлом.
Один из моих давних проектов — CSS-фреймворк под названием Xess . Xess — мой любимый файл CSS, когда мне просто нужно добавить несколько слов на страницу. Я использовал его по крайней мере для следующих проектов:
- Когда Тогда Дзен
- панель администратора waifud
- хланг
- Факты о принтере
И другие внутренние проекты на рабочих местах, о которых я не могу говорить из-за ограничений NDA. Самое главное, что он делает, это позволяет вам использовать обычный семантический HTML , а затем просто пытается сделать так , чтобы он выглядел красиво для вас. Это бесклассовый фреймворк (вам не нужно использовать классы CSS, чтобы заставить его работать), и мне он очень нравится.
Тем не менее, после использования его в течение некоторого времени, он начал становиться очень мягким и повторяющимся. Все выглядит одинаково . Это становится скучным для меня. Я рассматривал различные способы исправить это, но недавно у меня был золотой момент вдохновения, когда я увидел, как один из моих любимых ботов Fediverse попал в мою ленту:
M10 22 2022 15:15 (UTC)
Я уже много лет слежу за @[email protected] на Fediverse. Дважды в день он генерирует два цвета с хорошей контрастностью и публикует в них пример изображения. Это дает вам результаты, которые выглядят следующим образом:
Пример вещи
Я малыш умами трюффо борода хэштег кальмар микстейп тильда фотобудка etsy пьет уксус скромная интеллигенция. Squid shabby chic pinterest yuccie. Lomo органическая булочка со свиным животом, чиллвейв. Mlkshk книжка-раскраска чиа, кинфолк шордитч пабст эдисон луковица марфа шалфей вибецессион подходит tumblr stumptown реликвия микстейп. Тьфу да, плз, потертый шик, скука, пинтерест, пьешь уксус, т. е. Трюффо. Церковный ключ большой завод настроения целевого фонда ассиметричное кривое клише. Пишущая машинка Tonx путин до того, как они распродали старомодный умами модный топор постиронический JOMO нормкор gochujang man булочка глянцевый мясник.
Это выглядит довольно здорово, как есть, но Xess имеет больше, чем просто стилизованный текст. Xess также стилизует ссылки, цитаты и блоки кода. Я действительно хотел, чтобы эти цвета были получены на лету, и тогда я наткнулся на вычисления HSL на лету с переменными CSS . Это пробудило мой интерес. Я мог выбрать три основных оттенка и использовать их для динамической генерации всего остального. Я немного поработал и теперь рад представить Xess 2.0.
Хесс 2.0
Вот несколько скриншотов одной из тем, которые я создал для этого: Cherry
M11 06 2022 19:37 (UTC)
вишня, тема с большим количеством сладких красных тонов
Больше всего во всем этом мне нравится то, как легко настроить тему Xess. Вам нужно всего лишь изменить три переменные, чтобы перекрасить страницу: одну для цвета фона, одну для цвета текста и одну для «акцентного» цвета (используемого для выделения, блок-кавычек и ссылок).
Не верите мне? Вот файл темы для вишни, который я показывал ранее:
: root { --background-color: 0 ; --text-color: 43 ; --accent-color: 344 ; --width: 80ch ; --padding: 0 ; }
Вот и все. Всего три цвета, максимальная ширина страницы и количество отступов вокруг основного элемента. Отсюда их можно бесконечно настраивать по своему усмотрению.
Вот некоторые другие темы, которые я приготовил:
M11 06 2022 19:34 (UTC)
кафон, тема с большим количеством насыщенных коричневых цветов, как чашка кофе
M11 06 2022 19:35 (UTC)
aoi, тема с множеством прекрасных синих оттенков
Я мог легко увидеть, как это используется с какой-то динамической генерацией цветов темы на основе пользовательских настроек или даже динамически генерируемых на уровне каждого пользователя.
Кастомизация с хлопьями Nix
У меня есть небольшая репутация пользователя NixOS. Одна из самых больших вещей, которые мне нравится делать с Xess, — это использовать его из хлопьев Nix , чтобы CSS автоматически сжимался в один крошечный файл. Я сделал функцию Nix, которая генерирует пакет с настройками CSS в один большой файл, чтобы я мог решить сразу две проблемы:
- Выполнение индивидуальных настроек Xess для каждого проекта без необходимости создавать вещи вручную или редактировать сам Xess
- Сделайте это функцией Nix, чтобы мне не приходилось слишком много думать об этом на этапе сборки.
Если вы хотите использовать настроенную версию Xess в своей сборке Nix, вот что вам нужно сделать:
Во-первых, импортируйте Xess в свой Flake и добавьте его выходные данные в свои выходные данные Flake:
{ inputs = { nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable"; utils.url = "github:numtide/flake-utils"; xess.url = "github:Xe/Xess"; }; outputs = { self, nixpkgs, utils, xess }@inputs: utils.lib.eachDefaultSystem (system: let pkgs = nixpkgs.legacyPackages.${system}; in { # ... }); }
Сделайте свою тему где-нибудь в своем репо. Я предполагаю, что это ./css/theme.css . Затем вы можете создать собственную версию Xess с помощью этого:
in { packages = { xess = Xess.packages.${system}.customized ./css/theme.css; }; # ... }
Вы можете проверить это с помощью nix build :
$ nix build .#xess
А затем просмотрите его в своем браузере с помощью python -m http.server :
$ python -m http.server
Добавьте /result/sample.html в конец URL-адреса, который генерирует для вас python, и тогда вы сможете просмотреть свои изменения CSS во всей их красе. Файл CSS, который генерирует Xess, будет находиться в $out/static/css/xess.css . Вы можете использовать это с чем-то вроде pkgs.symlinkJoin , чтобы убедиться, что все попадает в нужное место:
in { packages = rec { xess = Xess.packages.${system}.customized ./css/theme.css; bin = doSomeBuild; # the default output default = pkgs.symlinkJoin { name = "myProject-${bin.version}"; paths = [ bin xess ]; }; }; # ... }
И тогда, пока ваш веб-сайт ожидает получения данных из /static/css/xess.css , все будет работать! Nix возьмет ваши настройки, соединит их с Xess, а затем создаст составной файл CSS со всем, что в нем есть.
Вот и все! Я очень рад, что переношу Xess в будущее и делаю его более расширяемым для следующих нескольких лет работы. Я рад услышать, что вы можете сделать с Xess. Обязательно дайте мне знать, какое удовольствие вы получаете от Mastodon !