diff --git a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx index 31e71bf..6e33bee 100644 --- a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx +++ b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx @@ -33,6 +33,8 @@ interface SectionAccordionProps { * Accordion-style section that collapses to a navigation link when inactive. */ export function SectionAccordion({ number, title, id, isActive, href, children }: SectionAccordionProps) { + const heading = `${number}. ${title}`; + return (
{isActive ? ( @@ -43,7 +45,7 @@ export function SectionAccordion({ number, title, id, isActive, href, children } className="font-heading font-black text-5xl leading-[1.2] mb-0" style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }} > - {number}. {title} + {heading} @@ -52,13 +54,17 @@ export function SectionAccordion({ number, title, id, isActive, href, children } ) : ( - -

+ - {number}. {title} -

+ {heading} + )}
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css index 28b65c7..847c92d 100644 --- a/src/shared/styles/theme.css +++ b/src/shared/styles/theme.css @@ -273,17 +273,42 @@ /* Editorial rich-text typography */ .rich-text { max-width: 65ch; - line-height: 1.65; + line-height: var(--line-height-relaxed); font-feature-settings: "onum"; hanging-punctuation: first last; text-wrap: pretty; - hyphens: auto; } .rich-text p + p { margin-top: 1.2em; } +.rich-text ul { + list-style: none; + padding-left: 0; + margin: 1em 0; +} + +.rich-text ul li { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.65em; + align-items: start; + margin-top: 0.5em; +} + +.rich-text ul li:first-child { + margin-top: 0; +} + +.rich-text ul li::before { + content: "◆"; + color: var(--blue); + font-size: 0.55em; + /* line-height matches parent so diamond centers within the first line box */ + line-height: calc(var(--line-height-relaxed) / 0.55); +} + /* Cross-section view transition (navigation between sections) */ ::view-transition-old(section-content) { animation-name: section-fade-out; diff --git a/src/widgets/SkillsSection/ui/SkillsSection/SkillsSection.tsx b/src/widgets/SkillsSection/ui/SkillsSection/SkillsSection.tsx index 1688784..2b0e7ff 100644 --- a/src/widgets/SkillsSection/ui/SkillsSection/SkillsSection.tsx +++ b/src/widgets/SkillsSection/ui/SkillsSection/SkillsSection.tsx @@ -23,7 +23,7 @@ export default async function SkillsSection() {
{Object.entries(categories).map(([category, items]) => (
-

{category}

+

{category}

{items.map((skill) => ( {skill.name}