feat: revert moment titles styles similar original designs

kingsdigitallab · Nov 12, 2024 · fc8bd9f · fc8bd9f
1 parent 2533191
commit fc8bd9f
Showing 1 changed file with 54 additions and 101 deletions.
diff --git a/src/lib/components/Moment.svelte b/src/lib/components/Moment.svelte
@@ -18,50 +18,49 @@
 </script>
 
 <article id="moment">
-	<header class="surface-2">
-		<section>
-			<span class="n">{meta.n}</span>
-			<section>
-				{#if metaExtra}
-					<hgroup>
-						<h1 data-pagefind-filter="moment">{metaExtra.title}</h1>
-						<h2>
-							{#if title}
-								<span>{title.year}</span>
-								{title.name}
-							{:else}
-								{meta.title}
-							{/if}
-						</h2>
-					</hgroup>
-				{:else}
-					<h1 data-pagefind-filter="moment">
+	<header>
+		<section class="surface-2">
+			{#if metaExtra}
+				<hgroup>
+					<h1 data-pagefind-filter="moment">{metaExtra.title}</h1>
+					<h2>
 						{#if title}
 							<span>{title.year}</span>
 							{title.name}
 						{:else}
 							{meta.title}
 						{/if}
-					</h1>
-				{/if}
-				<ol>
-					{#each moments as cur}
-						<li>
-							<a
-								href={`${path}${getMomentN(cur.n)}`}
-								class:active={cur.n === meta.n}
-								title="Moment {cur.n}"
-							>
-								{#if cur.n === meta.n}
-									<RectangleHorizontal />
-								{:else}
-									<RectangleVertical />
-								{/if}
-							</a>
-						</li>
-					{/each}
-				</ol>
-			</section>
+					</h2>
+				</hgroup>
+			{:else}
+				<h1 data-pagefind-filter="moment">
+					{#if title}
+						<span>{title.year}</span>
+						{title.name}
+					{:else}
+						{meta.title}
+					{/if}
+				</h1>
+			{/if}
+
+			<ol>
+				<span class="n">{meta.n}</span>
+				{#each moments as cur}
+					<li>
+						<a
+							href={`${path}${getMomentN(cur.n)}`}
+							class:active={cur.n === meta.n}
+							title="Moment {cur.n}"
+						>
+							{#if cur.n === meta.n}
+								<RectangleHorizontal />
+							{:else}
+								<RectangleVertical />
+							{/if}
+						</a>
+					</li>
+				{/each}
+			</ol>
 		</section>
 
 		<img
@@ -124,64 +123,27 @@
 		& > section {
 			width: 100%;
 			height: 100%;
-			display: flex;
+			padding: var(--size-5);
 			margin: 0;
-			justify-content: center;
-			align-items: center;
-			background-color: var(--powder-blue);
-			& > span {
+			& h1 {
 				max-inline-size: none;
-				max-width: var(--size-9);
-				color: var(--midnight-blue);
-				text-align: center;
-				font-size: var(--font-size-4);
-				background-color: var(--powder-blue);
-				flex: 1;
+				padding: var(--size-2);
 			}
-			& > section {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				width: 100%;
-				padding: var(--size-4);
-				margin: 0;
-				background: var(--midnight-blue);
-				& h1 {
-					max-inline-size: none;
-					text-wrap: auto;
-					font-weight: 400;
-					font-size: var(--font-size-5);
-					height: 50%;
-					width: 100%;
-					flex: 1;
-					text-align: center;
-					padding-bottom: var(--size-2);
-					& > span {
-						font-size: var(--font-size-8);
-						display: block;
-					}
-				}
-				& h2 {
-					max-inline-size: none;
-					text-wrap: auto;
-					font-weight: 400;
-					font-size: var(--font-size-4);
-					height: 50%;
-					width: 100%;
-					flex: 1;
-					text-align: center;
-					border-top: var(--size-1) solid var(--powder-blue);
-					padding-top: var(--size-7);
-					& > span {
-						font-size: var(--font-size-7);
-						display: block;
-					}
-				}
-				& ol {
-					height: 50%;
-					width: 100%;
-					flex: 1;
+			& h2 {
+				max-inline-size: none;
+				margin-top: var(--size-2);
+				padding-top: var(--size-5);
+			}
+			& ol {
+				& span {
+					margin: -4px 30px 0 0;
+					color: var(--yellow);
 				}
+				display: flex;
+				gap: var(--size-1);
+				align-items: center;
+				/*justify-content: center;*/
+				padding-top: var(--size-4);
 			}
 		}
 
@@ -192,15 +154,6 @@
 			width: 100%;
 		}
 
-		& ol {
-			display: flex;
-			gap: var(--size-1);
-			padding-inline: var(--header-padding-inline);
-			align-items: center;
-			justify-content: center;
-			padding-top: var(--size-4);
-		}
-
 		& a.active {
 			border: none;
 		}