feat: add ToC

src/pages/articles/_article.css

@@ -23,7 +23,7 @@
 	}
 
 	@media (width <= 960px) {
-		gap: 2rem 0;
+		gap: 0;
 		padding-inline: 1rem;
 	}
 }

src/pages/index.astro

@@ -1,12 +1,10 @@
 ---
-import { Picture } from "astro:assets";
 import BaseLayout from "@modules/core/components/baseLayout/BaseLayout.astro";
 import LatestArticles from "@modules/core/components/latestArticles/LatestArticles.astro";
 import MyWork from "@modules/home/components/myWork/MyWork.astro";
 import Testimonials from "@modules/home/components/testimonials/Testimonials.astro";
 import Welcome from "@modules/home/components/welcome/Welcome.astro";
 
-// table of contents (details on mobile)
 // check responsive
 // todo: add signature email
 // todo: add small transitions & animations

src/ui/assets/images/svg-components/cookie/Cookie.tsx

@@ -18,6 +18,7 @@ export const Cookie = ({ fill = "currentColor", title = "Cookie", classNames, ..
 			y="0px"
 			viewBox="0 0 120.23 122.88"
 			xmlSpace="preserve"
+			role="img"
 			fill={fill}
 			{...props}
 		>

src/ui/assets/images/svg-components/infinite/Infinite.tsx

@@ -16,6 +16,7 @@ export const Infinite = ({ fill = "currentColor", title = "Loading...", classNam
 			height="23.1"
 			width="55"
 			preserveAspectRatio="xMidYMid meet"
+			role="img"
 			fill={fill}
 			{...props}
 		>

src/ui/assets/images/svg-components/leftArrow/LeftArrow.tsx

@@ -8,7 +8,7 @@ interface LeftArrowProps extends SVGProps<SVGSVGElement> {
 
 export const LeftArrow = ({ fill = "currentColor", title = "Arrow", classNames, ...props }: LeftArrowProps) => {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" className={clsx(classNames)} {...props}>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" role="img" className={clsx(classNames)} {...props}>
 			<title>{title}</title>
 			<g id="Left">
 				<polygon

src/ui/assets/images/svg-components/pin/Pin.tsx

@@ -9,7 +9,7 @@ interface PinProps extends SVGProps<SVGSVGElement> {
 
 export const Pin = ({ fill, title = "Pin", classNames, ...props }: PinProps) => {
 	return (
-		<svg viewBox="-4 0 36 36" className={clsx(classNames)} {...props}>
+		<svg viewBox="-4 0 36 36" role="img" className={clsx(classNames)} {...props}>
 			<title>{title}</title>
 			<path
 				fill={fill}

src/ui/modules/article/components/tableOfContents/TableOfContents.astro

@@ -10,14 +10,17 @@ const { tableOfContents } = Astro.props as TableOfContentsProps;
 ---
 <aside class="article__table-of-contents__wrapper" role="complementary">
     <nav class="article__table-of-contents__nav">
-        <h5>Table of Contents</h5>
-        <ul class="article__table-of-contents__list flex column-nowrap">
-            {tableOfContents.map(({ id, heading, level}, index) => (
-                <li class="article__table-of-contents__item" style={`--inline-level: ${level};`}>
-                    <a class="article__table-of-contents__item__link flex align-center --underline-on-hover --is-clickable" href={`#${id}`} style={`--for: --section-${index + 1}`}>{heading}</a>
-                </li>
-            ))}
-        </ul>
+        <details class="article__table-of-contents__details" open>
+            <summary class="article__table-of-contents__summary">
+                <h5>Table of Contents</h5></summary>
+                <ul class="article__table-of-contents__list flex column-nowrap">
+                    {tableOfContents.map(({ id, heading, level}, index) => (
+                        <li class="article__table-of-contents__item" style={`--inline-level: ${level};`}>
+                            <a class="article__table-of-contents__item__link flex align-center --underline-on-hover --is-clickable" href={`#${id}`} style={`--for: --section-${index + 1}`}>{heading}</a>
+                        </li>
+                    ))}
+                </ul>
+        </details>
     </nav>
 </aside>
 

src/ui/modules/article/components/tableOfContents/table-of-contents.css

@@ -1,4 +1,5 @@
 .article__table-of-contents__nav {
+	--animation-range: entry 70cqh;
 	animation: fade-in linear forwards;
 	animation-range: var(--animation-range);
 	animation-timeline: view();
@@ -8,22 +9,82 @@
 	opacity: 0;
 	padding: 0.25rem 1rem;
 	position: absolute;
-	--animation-range: entry 70cqh;
 	translate: calc(-50% + 1rem) 0;
 	width: max-content;
 
 	&.--is-visible .article__table-of-contents__item {
 		translate: 0 0;
 	}
+
+	@media (width <= 960px) {
+		position: relative;
+		translate: 0;
+		left: auto;
+		opacity: 1;
+		width: 100%;
+	}
 }
 
 .article__table-of-contents__wrapper {
 	position: sticky;
 	top: calc(var(--header-height) + 2rem);
+
+	@media (width <= 960px) {
+		position: relative;
+		top: 0;
+		width: 100%;
+		margin-block: 1rem;
+	}
+}
+
+.article__table-of-contents__summary {
+	margin-block-end: 0.5rem;
+	position: relative;
+	transition: background-position .2s;
+
+	&::before {
+		content: "";
+		background: url("/src/ui/assets/images/svg/chevron-down.svg") no-repeat right center / 1rem;
+		position: absolute;
+		right: 0;
+		top: 50%;
+		translate: 0 -50%;
+		transition: transform .2s;
+		width: 1rem;
+		height: 1rem;
+		visibility: hidden;
+	}
+
+	@media (width <= 960px) {
+		&::before {
+			visibility: visible;
+		}
+	}
+}
+
+.article__table-of-contents__details {
+	height: 1.5rem;
+	transition: height 0.2s;
+
+	&[open] {
+		height: auto;
+
+		@media (width <= 960px) {
+			overflow: clip;
+		}
+	}
+}
+
+.article__table-of-contents__details[open] .article__table-of-contents__summary::before {
+	transform: translateY(-50%) rotate(0.5turn);
 }
 
 .article__table-of-contents__list {
 	gap: 0.25rem 0;
+
+	@media (width <= 960px) {
+		justify-content: flex-start;
+	}
 }
 
 .article__table-of-contents__item {
@@ -32,6 +93,11 @@
 	transition: translate calc(0.25s * var(--inline-level));
 	translate: 100px 0;
 	width: fit-content;
+
+	@media (width <= 960px) {
+		transition: none;
+		translate: 0;
+	}
 }
 
 .article__table-of-contents__item__link {

src/ui/styles/base/base.css

@@ -49,8 +49,12 @@
 		min-height: 100dvh;
 		width: 100%;
 
-		&:not(.--is-projects) {
+		&:not(.--is-projects, .--is-article) {
 			margin: calc(var(--header-height)) auto 0;
+
+			@media (width <= 960px) {
+				margin: 0 auto;
+			}
 		}
 	}
 
@@ -74,6 +78,13 @@
 
 	summary {
 		-webkit-tap-highlight-color: transparent;
+		list-style: none;
+		pointer-events: none;
+
+		@media (width <= 960px) {
+			cursor: pointer;
+			pointer-events: auto;
+		}
 	}
 
 	mark {