Add index.html

4 years ago · 5363954095
parent 856db4599a
commit 5363954095
5 changed files with 49 additions and 19 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 node_modules
-public
+public/*
+!public/index.html
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<link rel="stylesheet" href="out/bundle.css">
+		<title>Cute and Funny</title>
+	</head>
+	<body class="max-w-4xl mx-auto px-4 my-8">
+		<script src="out/bundle.js"></script>
+	</body>
+</html>
--- a/rollup.config.js
+++ b/rollup.config.js
@ -43,9 +43,7 @@ export default {
 		production && terser()
 	],
 	
-	watch: {
-		clearScreen: false,
-	},
+	watch: { clearScreen: false },
 };

 function serve() {
--- a/src/index.svelte
+++ b/src/index.svelte
@ -16,7 +16,7 @@
 		file_list = await fetch(url.root + url.files)
 			.then(resp => resp.text())
 			.then(data => data.split('\n'));
-
+		
 		// Loop backwards efficiently.
 		for (let i = file_list.length - 2; i >= 0; i--) {
 			const file = file_list[i];
@ -34,9 +34,9 @@
 </script>

 {#if file_list}
-	<section>
+	<section class="flex flex-row justify-center flex-wrap">
 		{#each thumb_list as thumb, i}
-			<img on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" />
+			<img class="m-1" on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" />
 		{/each}
 	</section>
 {/if}
--- a/src/lightbox.svelte
+++ b/src/lightbox.svelte
@ -47,6 +47,7 @@
 		switch(e.key) {
 		case 'ArrowRight':
 			open = open === (images.length - 2) ? 0 : open + 1;
+			slide_classes = 'slide-in-right';
 			break;
 		case 'ArrowLeft':
 			open = open === 0 ? images.length - 2 : open - 1;
@ -62,21 +63,38 @@
 </script>

 <style>
-
+	.slide-in-right {
+    animation: slide-in-right .3s ease;
+	}
+	
+	@keyframes slide-in-right {
+    from {
+			visibility: hidden;
+			transform: translate3d(60%, 0, 0);
+			opacity: 0;
+		}
+    to {
+			visibility: visible;
+			transform: translate3d(0, 0, 0);
+			opacity: 1;
+		}
+	}
+	
 	.slide-in-left {
    animation: slide-in-left .3s ease;
 	}
 	
 	@keyframes slide-in-left {
    from {
-      opacity: 0;
-      transform: translate3d(-60%, 0, 0);
-    }
+			visibility: hidden;
+			transform: translate3d(-60%, 0, 0);
+			opacity: 0;
+		}
    to {
-      visibility: visible;
-      transform: translate3d( 0, 0, 0);
-      opacity: 1;
-    }
+			visibility: visible;
+			transform: translate3d( 0, 0, 0);
+			opactiy: 1;
+		}
 	}
 	
 	.lightbox {
@ -85,8 +103,6 @@
    left: 0;
    width: 100vw;
    height: 100vh;
-    opacity: 1;
-    transition: opacity 1s; /* This is being applied when we add `slide_classes' */
 		display: flex;
    justify-content: center;
    align-items: center;
@ -101,8 +117,10 @@

 <svelte:window on:keydown={handle_keys} />

-<div id="lightbox" class="{class_list} {slide_classes}" on:click={close}>
+<div id="lightbox" class="{class_list}" on:click={close}>
+	<header>
+	</header>
 	<img class=" hidden" rel="preload" src="{image[0]}" />
-	<img class="object-contain max-w-full max-h-full" src="{image[1]}" />
+	<img class="object-contain max-w-full max-h-full {slide_classes}" src="{image[1]}" />
 	<img class="hidden" rel="preload" src="{image[2]}" />
 </div>