@turnipxenon/pineapple 2.4.36 → 2.4.38

package/.svelte-kit/__package__/components/navigation_component/NavigationComponent.svelte

@@ -12,242 +12,244 @@ export let currentIndex = 0;
 const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
 $:
   visiblePages = pageFlatList.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize);
-</script>
-
-<div class="navigation-wrapper">
-	{#if (title)}
-		<Card>
-			<h1 slot="content" class="default-card navigation-title">
-				{title}
-			</h1>
-		</Card>
-	{/if}
-
-	<NavigationControl bind:currentIndex={currentIndex}
-	                   bind:contentLength={pageFlatList.length}
-	                   bind:pageSize={pageSize}></NavigationControl>
-
-	<div class="navigation-component">
-		<!-- all the misc routes-->
-		{#each visiblePages as pageMeta}
-			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
-			<button class="navigation-element"
-			        title={fullPath}
-			        on:click={createGoToFunction(fullPath)}>
-				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl}
-					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
-				{/if}
-				<section class="blurb-text">
-					<h2>{pageMeta.title}</h2>
-					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
-					<p>{pageMeta.description ?? ""}</p>
-					Tags:
-					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
-						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
-						{/each}
-					{:else}
-						None
-					{/if}
-				</section>
-			</button>
-		{/each}
-
-		{#if visiblePages.length === 0}
-			<Card>
-				<p class="default-card" slot="content">Sorry, no content was found</p>
-			</Card>
-		{/if}
-	</div>
-
-	<NavigationControl bind:currentIndex={currentIndex}
-	                   bind:contentLength={pageFlatList.length}
-	                   bind:pageSize={pageSize}></NavigationControl>
-
-</div>
-
-<style>
-    @media (max-width: 800px) {
-        img {
-            max-height: 20rem;
-            width: 100%;
-            flex-basis: 100%;
-            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
-        }
-
-        .navigation-element {
-            flex-direction: column;
-        }
-    }
-
-    @media (min-width: 801px) {
-        .navigation-element {
-            flex-direction: row;
-        }
-
-        img {
-            width: 20em;
-        }
-    }
-
-    .dark .navigation-element {
-        background-color: rgb(var(--color-surface-800));
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-        --tw-ring-inset: inset;
-        --tw-ring-color: rgb(250 250 250 / 0.05);
-}
-
-    .navigation-element:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .navigation-element:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .navigation-element:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-    .navigation-element {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
-}
-
-    .navigation-element > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .navigation-element:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .navigation-element:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .navigation-element {
-        background-color: rgb(var(--color-surface-100));
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-        --tw-ring-inset: inset;
-        --tw-ring-color: rgb(23 23 23 / 0.05);
-        border-radius: var(--theme-rounded-container);
-}
-
-    .dark .navigation-element {
-        background-color: rgb(var(--color-surface-800));
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-        --tw-ring-inset: inset;
-        --tw-ring-color: rgb(250 250 250 / 0.05);
-}
-
-    a.navigation-element {
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-}
-
-    a.navigation-element:hover {
-        --tw-brightness: brightness(1.05);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .navigation-element {
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-}
-
-    .navigation-element:hover {
-        --tw-scale-x: 101%;
-        --tw-scale-y: 101%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-    .navigation-element {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
-}
-
-    :is(.dark .navigation-element) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
-}
-
-    .navigation-element {
-        display: flex;
-        /*flex-direction: row;*/
-        text-align: start;
-        align-items: flex-start;
-        padding: 0;
-    }
-
-    img {
-        height: 20em;
-        -o-object-fit: cover;
-           object-fit: cover;
-        padding: var(--theme-border-base);
-        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
-    }
-
-    .navigation-component {
-        display: flex;
-        flex-direction: column;
-        gap: 2em;
-    }
-
-    .navigation-title {
-        text-align: center;
-    }
-
-    .blurb-text {
-        padding: 2em;
-        flex-grow: 1;
-        white-space: initial;
-        min-width: 0;
-    }
-
-    .navigation-wrapper {
-        display: flex;
-        flex-direction: column;
-        max-width: 1000px;
-    }
-
-    .tag-container {
-        margin: 0.25lh 0;
-    }
+</script>
+
+<div class="navigation-wrapper">
+	{#if (title)}
+		<Card>
+			<h1 slot="content" class="default-card navigation-title">
+				{title}
+			</h1>
+		</Card>
+	{/if}
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+	<div class="navigation-component">
+		<!-- all the misc routes-->
+		{#each visiblePages as pageMeta}
+			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
+			<button class="navigation-element"
+			        title={fullPath}
+			        on:click={createGoToFunction(fullPath)}>
+				{#if pageMeta.imageUrl}
+					<img src={pageMeta.imageUrl}
+					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{/if}
+				<section class="blurb-text">
+					<h2>{pageMeta.title}</h2>
+					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+					<p>{pageMeta.description ?? ""}</p>
+					Tags:
+					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+						{#each pageMeta.tags as tagValue}
+							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
+						{/each}
+					{:else}
+						None
+					{/if}
+				</section>
+			</button>
+		{/each}
+
+		{#if visiblePages.length === 0}
+			<Card>
+				<p class="default-card" slot="content">Sorry, no content was found</p>
+			</Card>
+		{/if}
+	</div>
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+</div>
+
+<style>
+    @media (max-width: 800px) {
+        img {
+            max-height: 20rem;
+            width: 100%;
+            flex-basis: 100%;
+            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
+        }
+
+        .navigation-element {
+            flex-direction: column;
+        }
+    }
+
+    @media (min-width: 801px) {
+        .navigation-element {
+            flex-direction: row;
+        }
+
+        img {
+            width: 20em;
+        }
+    }
+
+    .dark .navigation-element {
+        background-color: rgb(var(--color-surface-800));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(250 250 250 / 0.05);
+}
+
+    .navigation-element:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .navigation-element:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .navigation-element {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .navigation-element > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .navigation-element:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element {
+        background-color: rgb(var(--color-surface-100));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(23 23 23 / 0.05);
+        border-radius: var(--theme-rounded-container);
+}
+
+    .dark .navigation-element {
+        background-color: rgb(var(--color-surface-800));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(250 250 250 / 0.05);
+}
+
+    a.navigation-element {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+}
+
+    a.navigation-element:hover {
+        --tw-brightness: brightness(1.05);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+}
+
+    .navigation-element:hover {
+        --tw-scale-x: 101%;
+        --tw-scale-y: 101%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+    .navigation-element {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+
+    :is(.dark .navigation-element) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+
+    .navigation-element {
+        display: flex;
+        /*flex-direction: row;*/
+        text-align: start;
+        align-items: flex-start;
+        padding: 0;
+    }
+
+    img {
+        height: 20em;
+        -o-object-fit: cover;
+           object-fit: cover;
+        padding: var(--theme-border-base);
+        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
+    .navigation-title {
+        text-align: center;
+        max-width: initial;
+    }
+
+    .blurb-text {
+        padding: 2em;
+        flex-grow: 1;
+        white-space: initial;
+        min-width: 0;
+    }
+
+    .navigation-wrapper {
+        display: flex;
+        flex-direction: column;
+        max-width: 1000px;
+		    width: 100%;
+    }
+
+    .tag-container {
+        margin: 0.25lh 0;
+    }
 </style>

package/.svelte-kit/__package__/components/navigation_component/NavigationControl.svelte

@@ -29,93 +29,93 @@ onMount(() => {
   query.set("pageSize", pageSize.toString());
   goto(`?${query.toString()}`);
 });
-</script>
-
-<div class="navigation-control-container">
-	<button class="navigation-control-button"
-	        disabled={currentIndex <= 0}
-	        on:click={() => {movePage(false)}}>{"<"}</button>
-	<Card marginBottom="0"><p slot="content" style="margin: 1em">Page {currentIndex + 1}</p></Card>
-	<button class="navigation-control-button"
-	        disabled={(currentIndex + 1) * pageSize >= contentLength}
-	        on:click={() => {movePage(true)}}>{">"}</button>
-</div>
-
-<style>
-    .navigation-control-container {
-        display: flex;
-        justify-content: space-between;
-        margin: 1lh 0;
-    }
-
-    :is(.dark .navigation-control-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-secondary));
-}
-
-    .navigation-control-button:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .navigation-control-button:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .navigation-control-button:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-    .navigation-control-button {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
-}
-
-    .navigation-control-button > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .navigation-control-button:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .navigation-control-button:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .navigation-control-button {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-secondary));
-}
-
-    :is(.dark .navigation-control-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-secondary));
-}
+</script>
+
+<div class="navigation-control-container">
+	<button class="navigation-control-button"
+	        disabled={currentIndex <= 0}
+	        on:click={() => {movePage(false)}}>{"<"}</button>
+	<Card marginBottom="0"><p slot="content" style="margin: 1em">Page {currentIndex + 1}</p></Card>
+	<button class="navigation-control-button"
+	        disabled={(currentIndex + 1) * pageSize >= contentLength}
+	        on:click={() => {movePage(true)}}>{">"}</button>
+</div>
+
+<style>
+    .navigation-control-container {
+        display: flex;
+        justify-content: space-between;
+        margin: 1lh 0;
+    }
+
+    :is(.dark .navigation-control-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-secondary));
+}
+
+    .navigation-control-button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .navigation-control-button:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-control-button:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .navigation-control-button {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .navigation-control-button > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .navigation-control-button:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-control-button:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-control-button {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-secondary));
+}
+
+    :is(.dark .navigation-control-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-secondary));
+}
 </style>