Redo the table of contents dropdown, with new animation as well

content/blog/the-quill-of-duck/index.md

@@ -34,6 +34,12 @@ disclaimer = """
 # host = "alpha.polymaths.social"
 # user = "orbitalmartian"
 # id = "01J7ETKJ19FGBDQGS1ZWZ3KEPP"
+#
+# Post on Sharkey
+#
+# host = "is-a.wyvern.rip"
+# user = "volpeon"
+# id = "9qy755nsnu2c0hbc"
 host = "toot.community"
 user = "sungsphinx"
 id = "111789185826519979"

sass/_article.scss

@@ -80,6 +80,18 @@
 		background-color: transparent;
 		padding: 0;
 
+		&[open] summary ~ * {
+			transform-origin: bottom right;
+			animation: toc-dropdown-open var(--transition);
+
+			@keyframes toc-dropdown-open {
+				from {
+					transform: scale(50%) translate(1rem, 1rem);
+					opacity: 0;
+				}
+			}
+		}
+
 		summary {
 			&::before {
 				display: none;
@@ -94,9 +106,11 @@
 			}
 		}
 
-		div {
+		#toc-dropdown {
 			-webkit-backdrop-filter: var(--blur);
+			display: flex;
 			position: absolute;
+			flex-direction: column;
 			backdrop-filter: var(--blur);
 			inset-block-end: 0;
 			inset-inline-end: 3rem;
@@ -105,18 +119,39 @@
 			background-color: var(--nav-bg);
 			padding: 1rem;
 			width: min(calc(var(--container-width) / 3), 90vw);
+			max-height: 50vh;
 
-			h2 {
-				margin-block-start: 0;
+			&-title {
 				color: var(--fg-muted-4);
-				font-weight: bold;
 				font-size: var(--font-size-x-large);
-				font-family: var(--font-system-ui);
+				line-height: 1;
+			}
+
+			&-container {
+				flex: 1;
+				mask-image: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
+				margin: 0 -1rem -1rem;
+				padding: 1rem;
+				padding-block-start: 0;
+				overflow: auto;
 			}
 
 			ul {
-				margin-block-start: 0;
+				margin: 0;
 				padding-inline-start: 0.75rem;
+				font-size: var(--font-size-small);
+
+				&:first-child {
+					margin-block-start: 0.75rem;
+				}
+
+				li::marker {
+					color: var(--fg-muted-5);
+				}
+
+				a {
+					color: var(--fg-muted-5);
+				}
 			}
 		}
 	}

sass/_input.scss

@@ -29,7 +29,7 @@ input[type="checkbox"] {
 	&::before {
 		display: block;
 		position: absolute;
-		transform: scale(0.5);
+		transform: scale(50%);
 		opacity: 0;
 		transition: var(--transition);
 		background-color: var(--contrast-color);

sass/_typography.scss

@@ -259,7 +259,7 @@ details {
 			transform: scaleY(-100%);
 		}
 
-		&~* {
+		& ~ * {
 			animation: details-open var(--transition);
 
 			@keyframes details-open {

sass/_variables.scss

@@ -64,8 +64,8 @@
 		--container-width: 720px;
 
 		// CORNERS
-		--rounded-corner-small: 0.5rem;
 		--rounded-corner: 0.75rem;
+		--rounded-corner-small: 0.5rem;
 
 		// FILTERS
 		--blur: saturate(180%) blur(0.75rem);
@@ -109,23 +109,23 @@
 		--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
 		// OPACITY
-		--disabled-opacity: 60%;
-		--dim-opacity: 80%;
 		--color-opacity: 10%;
+		--dim-opacity: 80%;
+		--disabled-opacity: 60%;
 
 		// SHADOWS
-		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 10%);
+		--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 3%), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 7%), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 3%);
 		--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 6%), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 14%), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 6%);
 		--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 50%);
-		--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 3%), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 7%), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 3%);
+		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 10%);
 
 		// STATES
 		--hover: scale(110%);
 		--active: scale(90%);
 
 		// TRANSITIONS
-		--transition-long: 0.8s;
-		--transition-longer: 0.4s;
 		--transition: 0.2s;
+		--transition-longer: 0.4s;
+		--transition-long: 0.8s;
 	}
 }

templates/article.html

@@ -76,8 +76,26 @@
 	{%- if page.extra.toc -%}
 		<details id="toc">
 			<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
-			<div>
-				{%- include "partials/toc.html" -%}
+			<div id="toc-dropdown">
+				<strong id="toc-dropdown-title">{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>
+				<div id="toc-dropdown-container">
+					<ul>
+						{%- for h1 in page.toc -%}
+							<li>
+								<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+								{%- if h1.children -%}
+									<ul>
+										{%- for h2 in h1.children -%}
+											<li>
+												<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+											</li>
+										{%- endfor -%}
+									</ul>
+								{%- endif -%}
+							</li>
+						{%- endfor -%}
+					</ul>
+				</div>
 			</div>
 		</details>
 	{%- endif -%}