Розуміння CSS для налаштування теми BearBlog - javascript.org.ua

В цій статті ми розберемо CSS-код, який ви надали, і пояснимо його призначення та функції для налаштування теми BearBlog. Цей CSS включає різноманітні властивості стилів, змінні та налаштування, які керують тим, як буде відображатися макет, типографіка та загальний дизайн блогу.

1. Імпорт шрифта з Google

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

Мета: Цей рядок імпортує шрифт “Jost” з Google Fonts. Вказуються різні товщини шрифта від 100 до 900, а також доступні як нормальні, так і курсивні варіанти. Цей шрифт буде використовуватись для тексту на блозі.

2. CSS Змінні (Root)

:root {  
 --background-color: #f1efe9;  
 --blockquote-color: #ff4000;  
 --blockquote-text-color: #c63200;  
 --bold-color: #ff4000;  
 --code-background-color: #dadada;  
 --code-color: #0d0d0d;  
 --font-main: "Jost", serif;  
 --font-secondary: "Red Hat Text", serif;  
 --font-time: "Jost", serif;  
 --font-weight: 500;  
 --header-weight: 800;  
 --header-color: #ff4000;  
 --link-color: #e33900;  
 --text-color: #0d0d0d;  
 --visited-color: #8e2300;  
 --width: 720px;  
}

Мета: Цей розділ визначає користувацькі властивості CSS (змінні), які спрощують налаштування кольорів, шрифтів та макету теми.
--background-color: Встановлює колір фону сторінки.
--blockquote-color: Використовується для стилізації лівої межі блоку цитати.
--blockquote-text-color: Визначає колір тексту всередині блоку цитати.
--bold-color: Колір тексту для жирного (наприклад, всередині тегів або).
--code-background-color: Колір фону для елементів коду.
--code-color: Колір тексту для елементів коду.
--font-main: Основний шрифт для тексту в тілі.
--font-secondary: Другорядний шрифт, використовуваний для елементів коду.
--font-time: Шрифт для тимчасових даних.
--font-weight: Стандартна товщина шрифта.
--header-weight: Товщина шрифта для заголовків.
--header-color: Колір заголовків.
--link-color: Колір посилань.
--text-color: Колір тексту в тілі.
--visited-color: Колір відвіданих посилань.
--width: Встановлює максимальну ширину основного контенту.

3. Медіа-запит для темної теми (Пустий)

@media (prefers-color-scheme: dark) {  
}

Мета: Цей розділ призначений для майбутнього налаштування темної теми. Наразі він порожній, але сюди можна додавати стилі для зміни теми в темному режимі (наприклад, змінити кольори фону чи тексту).

4. Глобальні стилі для тегу body

body {  
 font-family: var(--font-main);  
 font-size: 1.25rem;  
 font-optical-sizing: auto;  
 font-weight: var(--font-weight);  
 font-style: normal;  
 margin: auto;  
 padding: 20px;  
 max-width: var(--width);  
 text-align: left;  
 background-color: var(--background-color);  
 word-wrap: break-word;  
 overflow-wrap: break-word;  
 line-height: 1.5;  
 color: var(--text-color);  
}

Мета: Цей блок стилізує тіло сторінки з використанням стандартних налаштувань:
Шрифт встановлюється на --font-main (Jost).
Розмір шрифта — 1.25rem (трохи більше для покращення читабельності).
Встановлюється автоматичний відступ по боках, щоб центрирувати контент.
Паддинг по 20px навколо контенту.
Максимальна ширина обмежена значенням змінної --width, яке дорівнює 720px.
Колір фону встановлюється як --background-color.
Текст буде автоматично переноситись, і встановлена висота рядка 1.5 для покращення читабельності.
Колір тексту задається як --text-color.

5. Стилі для заголовків

h1, h2, h3, h4, h5, h6 {  
 font-family: var(--font-main);  
 font-size: 2.2rem;  
 color: var(--header-color);  
 font-weight: var(--header-weight);  
}

Мета: Цей стиль застосовується до всіх тегів заголовків (h1 до h6) і включає:
Шрифт, такий же як у тексту в тілі (--font-main).
Збільшений розмір шрифта (2.2rem).
Колір заголовків — --header-color (оранжевий).
Товщина шрифта для заголовків збільшена за допомогою змінної --header-weight.

6. Стилі для посилань

a {  
 color: var(--link-color);  
 cursor: pointer;  
 text-decoration: none;  
}

a:hover {  
 text-decoration: underline;  
}

Мета: Визначає вигляд посилань:
В звичайному стані: посилання мають колір --link-color (яскраво-оранжевий), не підкреслюються, а курсор при наведенні змінюється на вказівник.
При наведенні: посилання отримують підкреслення, щоб підкреслити їхню інтерактивність.

7. Відступи для навігаційних посилань

nav a {  
 margin-right: 8px;  
}

Мета: Додає невеликий правий відступ (8px) між навігаційними посиланнями для їхнього розділення.

8. Стилі для жирного тексту

strong, b {  
 color: var(--bold-color);  
}

Мета: Текст всередині тегів і буде пофарбований в --bold-color (яскраво-оранжевий), що виділяє жирний текст.

9. Стилі для кнопок

button {  
 margin: 0;  
 cursor: pointer;  
}

Мета: Прибирає відступи у кнопок і змінює курсор на вказівник при наведенні.

10. Стилі для тега time

time {  
 font-family: var(--font-time);  
 font-style: italic;  
 font-weight: 300;  
 text-align: left;  
 font-size: 85%;  
 margin: 5px;  
 padding: 5px;  
}

Мета: Елементи time, які використовуються для відображення тимчасових даних, стилізуються:
Шрифт встановлюється на --font-time.
Текст виділяється курсивом і використовується легка товщина шрифта (300).
Розмір шрифта зменшується до 85%, щоб зробити текст менш помітним.
Невеликі відступи та паддінги для створення простору.

11. Стилі для основного контенту

main {  
 line-height: 1.5;  
}

Мета: Встановлює висоту рядка для основного контенту рівною 1.5 для покращеної читабельності.

12. Стилі для таблиць

table {  
 width: 100%;  
}

Мета: Встановлює таблицям ширину 100%, щоб вони займали всю доступну ширину в контейнері.

13. Стилі для горизонтальної лінії

hr {  
 border: 0;  
 border-top: 1px dashed;  
}

Мета: Стилізує горизонтальні лінії (<hr>) за допомогою пунктирної верхньої межі.

14. Стилі для зображень

img {  
 max-width: 100%;  
}

Мета: Забезпечує адаптивність зображень, встановлюючи максимальну ширину на 100%, щоб вони зменшувались у розмірі, якщо це необхідно, зберігаючи пропорції.

15. Стилі для коду

code {  
 font-family: var(--font-secondary);  
 font-size: 1.25rem;  
 padding: 2px;  
 background-color: var(--code-background-color);  
 color: var(--code-color);  
 border-radius: 3px;  
}

Мета: Елементи коду (наприклад, всередині тегів ``) стилізуються:
Шрифт --font-secondary (Red Hat Text).
Розмір шрифта збільшується до 1.25rem.
Легкі відступи та колір фону --code-background-color.
Колір тексту коду задається за допомогою змінної --code-color.
Закруглені кути за допомогою border-radius: 3px.

16. Стилі для блоку цитати

blockquote {  
 border-left: 2.5px solid var(--blockquote-color);  
 color: var(--blockquote-text-color);  
 padding-left: 20px;  
 font-style: italic;  
}

Мета: Блоки цитат стилізуються:
Лівою межею товщиною 2.5px з кольором --blockquote-color.
Колір тексту всередині цитати встановлюється на --blockquote-text-color.
Відступ зліва для створення простору.
Текст виводиться курсивом.

17. Стилі для футера

footer {  
 padding: 25px 0;  
 text-align: center;  
}

Мета: Додає відступи знизу і зверху для футера та вирівнює текст по центру.

18. Стилі для заголовка

.title:hover {  
 text-decoration: none;  
}

.title h1 {  
 font-size: 1.5em;  
}

Мета: Для заголовка сторінки:
При ховері прибирається текстове оформлення.
Зменшується розмір шрифта для заголовка всередині .title до 1.5em.

19. Стилі для inline елементів

.inline {  
 width: auto !important;  
}

Мета: Примусово встановлює автоширину для елементів з класом .inline, перекриваючи будь-які інші обмеження ширини за допомогою !important.

20. Стилі для виділеного тексту та коду

.highlight,  
.code {  
 padding: 1px 15px;  
 background-color: var(--code-background-color);  
 color: var(--code-color);  
 border-radius: 3px;  
 margin-block-start: 1em;  
 margin-block-end: 1em;  
 overflow-x: auto;  
}

Мета: Елементи, такі як виділений текст або код, стилізуються:
Додається паддинг для відступів.
Колір фону та тексту визначається за допомогою змінних.
Круглі кути та відступи зверху і знизу.
Додано можливість горизонтальної прокрутки для довгих рядків.

21. Стилі для списку блогів

ul.blog-posts {  
 list-style-type: none;  
 padding: unset;  
}

ul.blog-posts li {  
 display: flex;  
}ul.blog-posts li span {  
 flex: 0 0 130px;  
}ul.blog-posts li a:visited {  
 color: var(--visited-color);  
}

Мета: Ці стилі застосовуються до списку постів блогу:
Прибираються маркери списку (list-style-type: none).
Елементи списку відображаються як flex-контейнери (display: flex).
Встановлюється фіксована ширина для елементів span всередині списку.
Колір відвіданих посилань змінюється на --visited-color.

Цей детальний розбір показує, як CSS код налаштовує тему BearBlog, змінюючи типографіку, кольори, відступи та макет. Змінюючи значення CSS-змінних, ви можете легко налаштувати зовнішній вигляд блогу.

Перекладено з: Понимание CSS для настройки темы BearBlog