Merge pull request #44 from dowjcr/issue-16

dowjcr · Jul 7, 2024 · 02ba5f0 · 02ba5f0
2 parents 246ddd6 + 95fb9c2
commit 02ba5f0
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 105 deletions.
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -1,17 +1,14 @@
 <script>
 	import { page } from '$app/stores';
 	import Sacha from '$lib/assets/404-hedgehog.jpg';
+	let bgurl = "bg-[url('" + Sacha + "')]"
 </script>
 
-<div class="bg-slate-50 dark-bg-surface-900">
-	<div class="absolute m-auto bottom-0 md:h-screen h-[50vh]">
-		<img src={Sacha} alt="Sacha the hedgehog" class="object-cover h-full" />
-	</div>
-	<div class="w-full my-auto box-border relative">
-		<div class="h-full grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10 items-center">
-			<div></div>
+<div class="bg-slate-50 dark-bg-surface-900 h-full">
+	<div class="w-full h-full my-auto box-border bg-cover relative {bgurl}">
+		<div class="grid grid-cols-1 h-full md:grid-cols-2 items-center">
 			<div
-				class="order-last md:card p-10 !bg-slate-50 dark:!bg-surface-900 mx-auto lg:my-24 flex flex-col items-center md:items-start text-center md:text-left space-y-4"
+				class="order-last md:col-start-2 md:card p-10 !bg-slate-50 dark:!bg-surface-900 mx-auto lg:my-24 flex flex-col gap-4 items-center md:items-start text-center md:text-left"
 			>
 				<h1 class="h1 !text-5xl md:!text-6xl max-w-[600px] font-bold">
 					<span
@@ -24,7 +21,6 @@
 					message: “<span class="font-mono opacity-50">{$page.status}: {$page.error?.message}</span
 					>”
 				</p>
-				<div></div>
 				<div class="flex gap-4 font-bold">
 					<a
 						href="/"

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -79,7 +79,7 @@
 <!-- Use stopPropagation to override Chrome for Windows search shortcut -->
 <svelte:window on:keydown|stopPropagation={onWindowKeydown} />
 <Modal components={modalRegistry} />
-<Toast zIndex='z-[1000]'/>
+<Toast zIndex="z-[1000]" />
 <NavBarDrawer />
 <AppShell
 	regionPage="scroll-smooth"
@@ -214,5 +214,7 @@
 		</AppBar>
 	</svelte:fragment>
 	<slot />
-	<Footer />
+	<svelte:fragment slot="pageFooter">
+		<Footer />
+	</svelte:fragment>
 </AppShell>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
+	import { DateTime } from 'luxon'
+	let year = DateTime.now().setZone('Europe/London').year
 </script>
 
 <div class="bg-slate-50 dark:bg-surface-900 border-t border-surface-500/10 text-xs md:text-base">
-	<div class="w-full max-w-7xl p-4 pt-16 space-y-10">
+	<div class="w-full p-3">
 		<div></div>
-		<section class="flex flex-col justify-center content-center items-center space-y-5">
+		<section class="flex flex-col justify-center content-center items-center">
 			<div class="grid grid-cols-1 gap-2 place-content-center place-items-center">
-				<!-- <p class="!text-sm opacity-80">© Downing College JCR 2024. All rights reserved.</p> -->
+				<p class="!text-sm opacity-80">© Downing College JCR {year}. All rights reserved.</p>
 			</div>
 		</section>
 	</div>

diff --git a/src/routes/[nav]/+page.svelte b/src/routes/[nav]/+page.svelte
@@ -12,66 +12,67 @@
 <svelte:head>
 	<title>{pageTitle} | Downing JCR</title>
 </svelte:head>
-
-<div class="bg-primary-50 dark:bg-surface-700 w-full lg:grid grid-cols-3 p-10 lg:p-28 gap-28">
-	<div
-		class="col-span-2 mr-auto flex flex-col items-center md:items-start text-center md:text-left space-y-3"
-	>
-		<h1
-			class="h1 !text-5xl md:!text-6xl max-w-[600px] !text-surface-900 dark:!text-primary-300 dark:font-bold"
+<div class="h-full grid grid-rows-[min-content_auto]">
+	<div class="bg-primary-50 dark:bg-surface-700 w-full lg:grid grid-cols-3 p-10 lg:p-14 gap-28">
+		<div
+			class="col-span-2 mr-auto flex flex-col items-center md:items-start text-center md:text-left space-y-3"
 		>
-			{pageTitle}
-		</h1>
+			<h1
+				class="h1 !text-5xl md:!text-6xl max-w-[600px] !text-surface-900 dark:!text-primary-300 dark:font-bold"
+			>
+				{pageTitle}
+			</h1>
+			{#if data.committeePage}
+				<div class="w-full bg-transparent pt-2 pb-8">
+					<AuthorCard
+						officeTitle={data.committeePage.lastEditedByTitle}
+						authorNames={data.committeePage.lastEditedByNames}
+						timestamp={data.committeePage.lastEditedAt}
+					/>
+				</div>
+			{/if}
+			<div class="text-left prose md:prose-lg lg:prose-xl !text-pretty">
+				{@html restContent}
+			</div>
+		</div>
 		{#if data.committeePage}
-			<div class="w-full bg-transparent pt-2 pb-8">
-				<AuthorCard
-					officeTitle={data.committeePage.lastEditedByTitle}
-					authorNames={data.committeePage.lastEditedByNames}
-					timestamp={data.committeePage.lastEditedAt}
-				/>
+			<div class="hidden lg:block m-auto">
+				<AvatarIcon officeTitle={data.committeePage.lastEditedByTitle} width="w-64" />
 			</div>
 		{/if}
-		<div class="text-left prose md:prose-lg lg:prose-xl !text-pretty">
-			{@html restContent}
-		</div>
 	</div>
-	{#if data.committeePage}
-		<div class="hidden lg:block m-auto">
-			<AvatarIcon officeTitle={data.committeePage.lastEditedByTitle} width="w-64" />
-		</div>
-	{/if}
-</div>
 
-<div
-	class="mx-auto p-4 sm:p-8 md:p-10 bg-slate-50 dark:bg-surface-900 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-content-center md:place-items-center gap-4"
->
-	{#await data.pages then pages}
-		{#each pages || [] as p (p.path)}
-			{#if p.path !== data.relPath}
-				<!-- md:w-[22rem] lg:w-80 xl:w-96 2xl:w-[27rem] -->
-				<div
-					class="h-full rounded-container-token hover:variant-soft-primary active:variant-ghost-primary"
-				>
-					<a href={p.fullPath} class="size-full">
-						<div class="size-full px-8 py-6 space-y-3">
-							<div>
-								<h1 class="font-heading-token font-bold text-lg">{p.title}</h1>
-								<h2 class="font-heading-token text-base">
-									{makeSubtitle(p.html)}
-								</h2>
-							</div>
-							<div class="w-full bg-transparent">
-								<AuthorCard
-									officeTitle={p.lastEditedByTitle}
-									authorNames={p.lastEditedByNames}
-									timestamp={p.lastEditedAt}
-									timeText="Edited on"
-								/>
-							</div>
-						</div></a
+	<div
+		class="w-full mx-auto p-4 sm:p-8 md:p-10 bg-slate-50 dark:bg-surface-900 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-content-center md:place-items-center gap-4"
+	>
+		{#await data.pages then pages}
+			{#each pages || [] as p (p.path)}
+				{#if p.path !== data.relPath}
+					<!-- md:w-[22rem] lg:w-80 xl:w-96 2xl:w-[27rem] -->
+					<div
+						class="h-full rounded-container-token hover:variant-soft-primary active:variant-ghost-primary"
 					>
-				</div>
-			{/if}
-		{/each}
-	{/await}
+						<a href={p.fullPath} class="size-full">
+							<div class="size-full px-8 py-6 space-y-3">
+								<div>
+									<h1 class="font-heading-token font-bold text-lg">{p.title}</h1>
+									<h2 class="font-heading-token text-base">
+										{makeSubtitle(p.html)}
+									</h2>
+								</div>
+								<div class="w-full bg-transparent">
+									<AuthorCard
+										officeTitle={p.lastEditedByTitle}
+										authorNames={p.lastEditedByNames}
+										timestamp={p.lastEditedAt}
+										timeText="Edited on"
+									/>
+								</div>
+							</div></a
+						>
+					</div>
+				{/if}
+			{/each}
+		{/await}
+	</div>
 </div>
diff --git a/src/routes/news/+page.svelte b/src/routes/news/+page.svelte
@@ -6,47 +6,47 @@
 <svelte:head>
 	<title>News | Downing JCR</title>
 </svelte:head>
-
-<div class="bg-primary-50 dark:bg-surface-700 w-full lg:grid grid-cols-3 p-10 lg:p-28 gap-28">
-	<div
-		class="col-span-2 mr-auto flex flex-col items-center md:items-start text-center md:text-left space-y-3"
-	>
-		<h1
-			class="h1 !text-5xl md:!text-6xl max-w-[600px] !text-surface-900 dark:!text-primary-300 dark:font-bold"
+<div class="h-full grid grid-rows-[min-content_auto]">
+	<div class="bg-primary-50 dark:bg-surface-700 w-full lg:grid grid-cols-3 p-10 lg:p-14 gap-28">
+		<div
+			class="col-span-2 mr-auto flex flex-col items-center md:items-start text-center md:text-left space-y-3"
 		>
-			News
-		</h1>
+			<h1
+				class="h1 !text-5xl md:!text-6xl max-w-[600px] !text-surface-900 dark:!text-primary-300 dark:font-bold"
+			>
+				News
+			</h1>
+		</div>
 	</div>
-</div>
 
-<div
-	class="mx-auto p-4 sm:p-8 md:p-10 bg-slate-50 dark:bg-surface-900 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-content-center md:place-items-center gap-4"
->
-	{#each $newsStore as newsItem, idx (newsItem.publishedAt)}
-		<!-- md:w-[22rem] lg:w-80 xl:w-96 2xl:w-[27rem]  -->
-		<div
-			class="h-full rounded-container-token hover:variant-soft-primary active:variant-ghost-primary"
-		>
-			<a href={`/news/${$newsStore.length - idx}`} class="size-full">
-				<div class="size-full px-8 py-6 space-y-3">
-					<div>
-						<h1 class="font-heading-token font-bold text-lg">{newsItem.title}</h1>
-						<h2 class="font-heading-token text-base">{makeSubtitle(newsItem.html)}</h2>
-					</div>
-					<div class="w-full bg-transparent">
-						<AuthorCard
-							officeTitle={newsItem.lastEditedByTitle}
-							authorNames={newsItem.lastEditedByNames}
-							timestamp={newsItem.publishedAt}
-							timeText="Published on"
-						/>
+	<div
+		class="mx-auto p-4 sm:p-8 md:p-10 bg-slate-50 dark:bg-surface-900 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-content-center md:place-items-center gap-4"
+	>
+		{#each $newsStore as newsItem, idx (newsItem.publishedAt)}
+			<!-- md:w-[22rem] lg:w-80 xl:w-96 2xl:w-[27rem]  -->
+			<div
+				class="h-full rounded-container-token hover:variant-soft-primary active:variant-ghost-primary"
+			>
+				<a href={`/news/${$newsStore.length - idx}`} class="size-full">
+					<div class="size-full px-8 py-6 space-y-3">
+						<div>
+							<h1 class="font-heading-token font-bold text-lg">{newsItem.title}</h1>
+							<h2 class="font-heading-token text-base">{makeSubtitle(newsItem.html)}</h2>
+						</div>
+						<div class="w-full bg-transparent">
+							<AuthorCard
+								officeTitle={newsItem.lastEditedByTitle}
+								authorNames={newsItem.lastEditedByNames}
+								timestamp={newsItem.publishedAt}
+								timeText="Published on"
+							/>
+						</div>
 					</div>
-				</div>
-			</a>
-		</div>
-	{/each}
+				</a>
+			</div>
+		{/each}
+	</div>
 </div>
-
 <!-- <style>
 	* {
 		border: red 1px solid;