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}