востаннє зміни до оформлення щоденника я робив, здається, два з половиною роки тому, коли «прикручував» пошук, тож зовсім забув, де що і як це робиться. jekyll наче на позір простий у використанні, — але насправді зовсім ні. колись я таки знайду час і натхнення, клоную собі barf і перероблю для… максимального мінімалізму? але поки що потицяю знову наосліп, пригадаю і занотую на згадку.
що треба/хочеться нашвидкуруч поміняти:
- списки (
ul) мають бути вирівнені вліво без виключення; - зменшити розмір шрифту блоків коду до 80-90%;
- змінити посилання на соціальні мережі: прибрати facebook, twitter i github, додати codeberg та pleroma;
- вибрати альтернативний шрифт для щоденника.
виключення списків
поточна версія щоденника використовує тему minima-reboot (дуже стару версію) для jekyll з дуже невеликими змінами; тема виключає весь текст (казати «вирівнює по ширині» неправильно — але це часто надміру розріджує текст в коротких рядках, дуже негарно; потрібна невеличка зміна в css. стилі css знаходяться в /_sass/minima-reboot/_layout.scss; стилю для ul немає (чому?), додаю:
#content {
...
ul {
text-align: left;
}
...
розмір шрифту блоків коду
додаю один рядок до існуючого стилю pre:
.highlight pre {
...
font-size: 80%;
}
посилання на соціальні мережі
ці посилання (в підвалі сторінки) не є частиною теми, — їх визначено в налаштуваннях jekyll/сайту, /_config.yml:
footer_icons:
- username: mastodon.social/@tivasyk
url: https://mastodon.social/@tivasyk
icon: mastodon.svg
- username: facebook.com/tivasyk
url: https://facebook.com/tivasyk
icon: facebook.svg
- username: twitter.com/tivasyk
url: https://twitter.com/tivasyk
icon: twitter.svg
- username: github.com/tivasyk
url: https://github.com/tivasyk
icon: github.svg
структура очевидна, треба видалити непотрібні блоки, замість них додати потрібні:
footer_icons:
- username: mastodon.social/@tivasyk
url: https://mastodon.social/@tivasyk
icon: mastodon.svg
- username: social.net.ua/users/tivasyk
url: https://social.net.ua/users/tivasyk
icon: pleroma.svg
- username: codeberg.org/tivasyk
url: https://codeberg.org/tivasyk
icon: codeberg.svg
залишилось знайти підходящі однотонні логотипи у форматі svg для pleroma й codeberg, і закинути їх до /_includes/. щоправда, є одне «але»: я не пам’ятаю, чи jekyll перегенерує увесь сайт, якщо змінено _config.yml — поки що продовжу, а тоді буде видно (або доведеться лізти в журнали контейнера); принаймні, нові сторінки мають підхоплювати ці налаштування.
альтернативний шрифт
нещодавно випробовував brother majestic 800, і вподобав собі шрифт цієї друкарки; на жаль, не можу нічого схожого знайти з підтримкою кирилиці. поточна версія щоденника використовує інший улюблений шрифт, ibm plex, за посиланням з google fonts — проте я не певен, чи це працює до пуття, бо всі мої веб-оглядачі теж налаштовані використовувати plex локально як основний шрифт… на додачу, добрі люди пропонують не використовувати google fonts, тому що це неетично і навіть може призвести до юридичних наслідків.
отже, приберу <link rel=...> з посиланням на googleapis з файлу /_includes/head.html та скористаюсь підказками й помічником google-webfont-helper, щоби роздавати ibm plex зі свого сервера, разом із самим щоденником: файли шрифта (normal, italic, bold та bold-italic у форматі woff2) йдуть до /assets/fonts/, а визнечення шрифтів з невеликими змінами — до /_sass/minima-reboot/_layout.scss:
/* ibm-plex-sans-regular - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: normal;
src: url('../fonts/ibm-plex-sans-v19-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-italic - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: normal;
src: url('../fonts/ibm-plex-sans-v19-cyrillic_latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-600 - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: bold;
src: url('../fonts/ibm-plex-sans-v19-cyrillic_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-600italic - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: bold;
src: url('../fonts/ibm-plex-sans-v19-cyrillic_latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
поки що все.