1@use "../theme" as *;
2@use "../vars" as v;
3
4// Shared page layout
5.section, .article, .contact { padding-block: clamp(2rem, 6vw, 4rem); }
6.section--flush { padding-block-start: 0; } // no cloud hero above to fill the gap
7.article-header { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
8.section-header { margin-bottom: 0.5rem; }
9
10.section-header__top { display: flex; align-items: center; gap: 0.5rem; }
11.section-header__title { font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1; margin: 0 0 0.5rem; }
12.section-header__rss { position: relative; margin-left: auto; gap: 0.15rem; }
13.section-header__rss svg { width: 1em; height: 1em; }
14.section-header__label { font-size: 0.8rem; font-weight: 500; line-height: 1.2; color: theme(muted); margin: 0; }
15.section-header__label + .section-header__title { margin-top: 0; margin-left: -0.05em; }
16// Single-tag page: a short word (e.g. "AI") looks lost at full heading size.
17.section-header__title .tag-list__name { font-size: clamp(1.85rem, 4.5vw, 2.25rem); }
18// Center the label+heading as one group (fit to the wider heading) so "Tag"
19// sits at the heading's left edge instead of centering on its own, narrower line.
20.tag-header { margin-bottom: 3rem; }
21.tag-header__desc { margin: 0 0 0.5rem; }
22.tag-header__desc p { margin: 0; }
23.tag-header__group { width: fit-content; margin-inline: auto; }
24.tag-header__group .section-header__label { font-size: 0.9rem; margin-bottom: -0.2rem; }
25
26.post-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
27.post-item { padding: 1rem 0; border-bottom: 1px solid theme(border); }
28.post-item:first-child { padding-top: 0; }
29.post-item .list__link { padding: 0; }
30.post-item__excerpt { font-size: 0.9rem; color: theme(subtle); margin: 0.5rem 0 0; line-height: 1.5; }
31
32.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid theme(border); }
33.pagination__link { font-size: 0.875rem; font-weight: 500; }
34.pagination__info { font-size: 0.8rem; color: theme(muted); font-variant-numeric: tabular-nums; }
35
36.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
37// The /tags/ index only - not .article-tags (a post's own tag footer).
38.tag-list:not(.article-tags) { padding-bottom: 0.75rem; border-bottom: 1px solid theme(border); }
39.tag-list__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: theme(muted); transition: color 0.15s ease; }
40.tag-list__link:hover { color: theme(text); }
41.tag-list__name::before { content: "#"; opacity: 0.5; }
42.tag-list__count { font-size: 0.75rem; opacity: 0.6; }
43
44.tag-back { margin-top: 1rem; }
45.tag-back__link { font-size: 0.85rem; font-weight: 500; color: theme(muted); }
46.tag-back__link::before { content: "<-\00a0"; letter-spacing: -0.17em; }
47