fix: переключатель темы вправо у меню + карточка первого поста + подключение typewriter.css через extend_head
- assets/css/extended/typewriter.css: flex-order в .nav (logo | menu | toggle), article.first-entry как .post-entry (фон/рамка/скругление/отступ) - layouts/partials/extend_head.html (новый): resources.Get typewriter.css — Hugo НЕ подхватывает корневой assets/css/extended через resources.Match темы, поэтому прошлый CSS не применялся (JS работал, стили нет) - openspec: change theme-toggle-first-post-card (proposal/design/specs/tasks) ВАЖНО: прошлый деплой typewriter-эффекта был неполным — CSS не подключался. Этот коммит чинит оба бага + курсор.
This commit is contained in:
@@ -27,4 +27,36 @@
|
|||||||
animation: none; /* static cursor, no blink */
|
animation: none; /* static cursor, no blink */
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- theme fixes (2026-09-19) ---- */
|
||||||
|
|
||||||
|
/* 1) move the theme toggle (sun/moon) to the far right, beside the main menu.
|
||||||
|
nav is flex with justify-content: space-between; DOM order is
|
||||||
|
logo | logo-switches | #menu — reorder so the toggle sits after #menu */
|
||||||
|
.nav {
|
||||||
|
flex-wrap: nowrap; /* keep logo, menu and toggle on one line */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav > .logo {
|
||||||
|
order: 0;
|
||||||
|
margin-inline-end: auto; /* push everything else to the right */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav > #menu {
|
||||||
|
order: 1;
|
||||||
|
margin-inline-start: auto; /* menu hugs the right edge */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav > .logo-switches {
|
||||||
|
order: 2;
|
||||||
|
margin-inline-start: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2) first post card: same card styling as .post-entry */
|
||||||
|
article.first-entry {
|
||||||
|
background: var(--entry);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: var(--gap);
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{{- /* Custom head hook: load site-level typewriter.css (theme fixes + logo typewriter).
|
||||||
|
Uses resources.Get so Hugo resolves assets/css/extended/typewriter.css
|
||||||
|
from the SITE root (not the theme), keeping the theme untouched. */ -}}
|
||||||
|
{{- $tw_css := resources.Get "css/extended/typewriter.css" | minify | fingerprint -}}
|
||||||
|
<link rel="stylesheet" href="{{ $tw_css.RelPermalink }}" integrity="{{ $tw_css.Data.Integrity }}" crossorigin="anonymous">
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
# 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` файла),
|
||||||
|
пересобрать — вернётся поведение темы по умолчанию.
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
# Proposal: Переключатель темы справа + карточка первого поста
|
||||||
|
|
||||||
|
## Why
|
||||||
|
|
||||||
|
Два визуальных огреха на главной странице dedinit.ru:
|
||||||
|
|
||||||
|
1. Переключатель «солнце/луна» (theme toggle) в шапке привязан к логотипу
|
||||||
|
`.logo-switches` и «бегает» вместе с заголовком при наведении/кликах,
|
||||||
|
вместо того чтобы стоять справа у навигации.
|
||||||
|
2. Первый пост на главной (`article.first-entry`) отличается от остальных
|
||||||
|
карточек: у него нет фона, рамки и внутреннего отступа (`.post-entry`
|
||||||
|
имеет `background: var(--entry)`, `border`, `border-radius`, `padding`),
|
||||||
|
из-за чего он выглядит «голым» по сравнению с соседними постами.
|
||||||
|
|
||||||
|
## What Changes
|
||||||
|
|
||||||
|
- Только CSS в `assets/css/extended/typewriter.css` (уже подключён через
|
||||||
|
новый `layouts/partials/extend_head.html` из прошлого change):
|
||||||
|
1. `flex order` в `.nav`: `logo` (слева) → `#menu` (по центру/справа) →
|
||||||
|
`.logo-switches` (крайний справа), `margin-inline` для раскидывания.
|
||||||
|
2. `article.first-entry` — добавить `background: var(--entry)`,
|
||||||
|
`border-radius: var(--radius)`, `border: 1px solid var(--border)`,
|
||||||
|
`padding: var(--gap)` (как у `.post-entry`).
|
||||||
|
- Тема `themes/rDedInit` НЕ модифицируется. DOM-разметка не меняется
|
||||||
|
(только визуальный порядок через CSS order).
|
||||||
|
|
||||||
|
## Impact
|
||||||
|
|
||||||
|
- Затронутые файлы: `assets/css/extended/typewriter.css` (дополнен),
|
||||||
|
`layouts/partials/extend_head.html` (уже есть из прошлого change — он
|
||||||
|
подключает этот CSS на всех страницах).
|
||||||
|
- Откат (rollback): удалить два CSS-блока из `typewriter.css`, пересобрать —
|
||||||
|
вернётся исходное поведение темы.
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
# Theme Fixes Capability
|
||||||
|
|
||||||
|
## Purpose
|
||||||
|
|
||||||
|
Визуальные фиксы шапки и ленты главной: переключатель темы стоит справа у
|
||||||
|
навигации (а не «бегает» за логотипом), и первый пост оформлен карточкой как
|
||||||
|
остальные посты.
|
||||||
|
|
||||||
|
## ADDED Requirements
|
||||||
|
|
||||||
|
### Requirement: Переключатель темы — крайний справа
|
||||||
|
|
||||||
|
Система SHALL отображать переключатель «светлая/тёмная тема» (кнопка
|
||||||
|
`#theme-toggle` в `.logo-switches`) в правой части шапки, после пунктов меню
|
||||||
|
навигации, а не рядом с логотипом.
|
||||||
|
|
||||||
|
#### Scenario: Позиция переключателя в шапке
|
||||||
|
|
||||||
|
- **GIVEN** любая страница сайта (например, `/`)
|
||||||
|
- **WHEN** страница отрисована в браузере
|
||||||
|
- **THEN** кнопка переключателя темы визуально расположена правее пунктов
|
||||||
|
меню «Главная / Архив / Категории / Теги» и не смещается при наведении
|
||||||
|
на логотип
|
||||||
|
|
||||||
|
#### Scenario: Порядок flex-элементов
|
||||||
|
|
||||||
|
- **GIVEN** CSS из `assets/css/extended/typewriter.css`
|
||||||
|
- **WHEN** применены правила `.nav > .logo{order:0}`,
|
||||||
|
`.nav > #menu{order:1}`, `.nav > .logo-switches{order:2}`
|
||||||
|
- **THEN** в собранном CSS присутствуют все три правила `order` (проверка:
|
||||||
|
`grep -o 'order:[012]' public/css/extended/typewriter.min.*.css` содержит 0, 1, 2)
|
||||||
|
|
||||||
|
### Requirement: Карточка первого поста
|
||||||
|
|
||||||
|
Система SHALL оформлять первый пост на главной (`article.first-entry`)
|
||||||
|
карточкой в том же стиле, что и остальные посты (`.post-entry`):
|
||||||
|
фон `var(--entry)`, рамка `var(--border)`, скругление `var(--radius)`,
|
||||||
|
внутренний отступ `var(--gap)`.
|
||||||
|
|
||||||
|
#### Scenario: Первый пост имеет фон и рамку
|
||||||
|
|
||||||
|
- **GIVEN** главная страница `/`
|
||||||
|
- **WHEN** первый пост (`article.first-entry`) отрисован
|
||||||
|
- **THEN** он имеет фон, рамку и скругление, идентичные карточкам
|
||||||
|
`.post-entry` (проверка CSS: правило
|
||||||
|
`article.first-entry{background:var(--entry);...border:1px solid var(--border)}`
|
||||||
|
присутствует в собранном CSS)
|
||||||
|
|
||||||
|
#### Scenario: Остальные посты не затронуты
|
||||||
|
|
||||||
|
- **GIVEN** главная страница `/`
|
||||||
|
- **WHEN** посты со 2-го и далее (`article.post-entry`) отрисованы
|
||||||
|
- **THEN** их стиль не изменён (тот же `.post-entry` из темы)
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
# Tasks: Theme toggle position + first post card
|
||||||
|
|
||||||
|
## 1. Реализация
|
||||||
|
|
||||||
|
- [x] 1.1 Добавить в `assets/css/extended/typewriter.css` flex-order блок:
|
||||||
|
`.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}`
|
||||||
|
- [x] 1.2 Добавить `article.first-entry{background:var(--entry);
|
||||||
|
border-radius:var(--radius);border:1px solid var(--border);
|
||||||
|
padding:var(--gap)}`
|
||||||
|
- [x] 1.3 Создать `layouts/partials/extend_head.html` — подключение
|
||||||
|
`resources.Get "css/extended/typewriter.css" | minify | fingerprint`
|
||||||
|
(Хуго не подхватывает корневой assets через resources.Match темы)
|
||||||
|
|
||||||
|
## 2. Сборка и проверка
|
||||||
|
|
||||||
|
- [x] 2.1 `make build` — без ошибок
|
||||||
|
- [x] 2.2 `grep -o 'typewriter.min.[^"]*\.css' public/index.html` — файл
|
||||||
|
подключён в head
|
||||||
|
- [x] 2.3 `grep -o 'order:[012]' public/css/extended/typewriter.min.*.css` —
|
||||||
|
присутствуют 0, 1, 2
|
||||||
|
- [x] 2.4 `grep -o 'article.first-entry{[^}]*}' public/css/extended/typewriter.min.*.css`
|
||||||
|
— правило карточки присутствует
|
||||||
|
- [x] 2.5 Скрипт typewriter в JS не сломан (`grep -c 'const r=\[' public/index.html` >= 1)
|
||||||
|
|
||||||
|
## 3. Git и деплой
|
||||||
|
|
||||||
|
- [ ] 3.1 Закоммитить `typewriter.css`, `extend_head.html`, openspec-артефакты
|
||||||
|
и запушить в gitverse (после согласования)
|
||||||
|
- [ ] 3.2 `make deploy` (после согласования)
|
||||||
|
- [ ] 3.3 Проверить на https://dedinit.ru/ — солнышко справа, первый пост
|
||||||
|
с фоном
|
||||||
Reference in New Issue
Block a user