72 lines
3.0 KiB
Markdown
72 lines
3.0 KiB
Markdown
# Design: Переключатель темы справа + карточка первого поста
|
||
|
||
## Context
|
||
|
||
- Тема rDedInit (PaperMod). Шапка: `themes/rDedInit/layouts/partials/header.html`,
|
||
контейнер `.nav` — `display:flex; flex-wrap:wrap; justify-content:space-between`.
|
||
- DOM-порядок в `.nav`: `<div class="logo">` → `<div class="logo-switches">`
|
||
(theme-toggle + lang-switch) → `<ul id="menu">`.
|
||
- `.post-entry` (все посты, кроме первого) имеет:
|
||
`background:var(--entry); border:1px solid var(--border);
|
||
border-radius:var(--radius); padding:var(--gap)`.
|
||
- `.first-entry` (первый пост) — НЕ имеет этих свойств (только flex/min-height).
|
||
|
||
## Changes (все в `assets/css/extended/typewriter.css`)
|
||
|
||
Этот файл подключён на всех страницах через
|
||
`layouts/partials/extend_head.html` (корневой override хука темы):
|
||
|
||
```css
|
||
.nav { flex-wrap: nowrap; }
|
||
.nav > .logo { order: 0; margin-inline-end: auto; }
|
||
.nav > #menu { order: 1; margin-inline-start: auto; }
|
||
.nav > .logo-switches { order: 2; margin-inline-start: 8px; }
|
||
|
||
article.first-entry {
|
||
background: var(--entry);
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
padding: var(--gap);
|
||
}
|
||
```
|
||
|
||
### Почему flex order, а не изменение темы
|
||
|
||
- Не трогаем `themes/rDedInit/` — обновления темы не затрут правки.
|
||
- DOM не меняется, меняется только визуальный порядок — переключатель
|
||
уходит вправо за меню, логотип остаётся слева.
|
||
|
||
### Важное открытие (2026-09-19)
|
||
|
||
`resources.Match "css/extended/*.css"` в теме ищет ТОЛЬКО в
|
||
`themes/rDedInit/assets/`, НЕ в корне сайта. Поэтому прошлый CSS
|
||
`assets/css/extended/typewriter.css` не подхватывался Hugo (JS работал,
|
||
стили — нет). Исправлено через `layouts/partials/extend_head.html`:
|
||
`resources.Get "css/extended/typewriter.css" | minify | fingerprint`
|
||
(корневой override хука `{{- partial "extend_head.html" . }}`, который
|
||
тема вызывает в head.html:149).
|
||
|
||
## Apply
|
||
|
||
```bash
|
||
make build
|
||
```
|
||
|
||
## Verify
|
||
|
||
```bash
|
||
# CSS подключён в head всех страниц
|
||
grep -o 'typewriter.min.[^"]*\.css' public/index.html
|
||
# order-правила
|
||
grep -o 'order:[012]' public/css/extended/typewriter.min.*.css
|
||
# карточка первого поста
|
||
grep -o 'article.first-entry{[^}]*}' public/css/extended/typewriter.min.*.css
|
||
```
|
||
|
||
В браузере на `/`: солнышко — крайнее справа; первый пост — карточка с
|
||
фоном/рамкой как у остальных.
|
||
|
||
## Rollback
|
||
|
||
Удалить два блока CSS из `typewriter.css` (или `git checkout` файла),
|
||
пересобрать — вернётся поведение темы по умолчанию. |