New styles; database function

the-pudding · Oct 3, 2024 · 6a46925 · 6a46925
1 parent d604ab3
commit 6a46925
Show file tree

Hide file tree

Showing 36 changed files with 462 additions and 172 deletions.
diff --git a/src/components/Board/Board.Artist.svelte b/src/components/Board/Board.Artist.svelte
@@ -7,61 +7,86 @@
 
 	export let artist;
 	export let currentArtistIndex;
+
+	let artWidth;
+	let artHeight;
 </script>
 
-<div class="artist">
-	<h2 class="artist__title">{artist.name}</h2>
+<div class="artist title-font">
+	<div class="artist__title">{artist.name}</div>
 	<p class="artist__description">
 		Debuted in {artist["debut year"]} under {artist.company} and their highest streaming
 		song is
-		<Player {artist} {currentArtistIndex} />
 	</p>
 
-	<div class="artist__art">
-		{#if $isShowingToploader}
+	<Player {artist} {currentArtistIndex} />
+
+	<div
+		class="artist__art"
+		bind:clientWidth={artWidth}
+		bind:clientHeight={artHeight}
+	>
+		<div class="inner {artWidth < artHeight ? 'use-width' : 'use-height'}">
+			<div class="layer back"></div>
+
+			<div
+				class="layer image"
+				style:--image="url({base}/assets/images/{artist.id}.jpg)"
+			></div>
+
 			<div
-				in:fade={{ duration: 500 }}
-				class="toploader"
-				style:--toploader-url="url({base}/assets/toploaders/{$toploaderImageName}.png)"
+				class="layer plastic"
+				style:--image="url({base}/assets/toploaders/plastic.png)"
 			></div>
-		{/if}
-		<div
-			class="image"
-			style:--image="url({base}/assets/images/{artist.id}.jpg)"
-		></div>
+
+			{#if $isShowingToploader}
+				<div
+					in:fade={{ duration: 500 }}
+					class="layer toploader"
+					style:--image="url({base}/assets/toploaders/{$toploaderImageName}.png)"
+				></div>
+			{/if}
+		</div>
 		<!-- <img src="{base}/assets/images/{artist.id}.jpg" alt="" /> -->
 	</div>
 </div>
 
 <style lang="scss">
 	.artist {
-		font-size: 24px;
 		width: 100%;
-		color: #000;
 		font-weight: 400;
-		letter-spacing: -0.8px;
 		margin: 0;
-		line-height: 1.3;
 		text-align: left;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		flex-grow: 1;
+		font-size: 40px;
+
+		@media only screen and (max-width: 600px) {
+			font-size: 36px;
+		}
 
 		&__title {
+			color: #000;
+			font-weight: bold;
+			margin: 0;
+
 			@media only screen and (max-width: 600px) {
 				margin: 0;
 			}
 		}
 
 		&__description {
-			color: rgba(120, 120, 120, 1);
+			margin: 0px;
+			color: #787878;
 			-webkit-font-smoothing: antialiased;
 			-moz-osx-font-smoothing: grayscale;
 			text-rendering: optimizeLegibility;
+			font-weight: lighter;
 
 			@media only screen and (max-width: 600px) {
-				font-size: 16px;
+				// font-size: 16px;
 			}
 		}
 
@@ -70,38 +95,82 @@
 			display: flex;
 			align-items: center;
 			gap: 0.25rem;
-			font-weight: 500;
+			font-weight: 400;
 		}
 
 		&__art {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-grow: 1;
-			max-height: 100%;
-			overflow: hidden;
-			position: relative;
+			width: 100%;
+			height: 100%;
 
-			.toploader {
+			@media only screen and (max-width: 600px) {
+				margin: 0.5rem 0px;
+			}
+			.inner {
+				display: flex;
+				justify-content: center;
+				align-items: center;
 				width: 100%;
 				height: 100%;
-				background-image: var(--toploader-url);
-				background-repeat: no-repeat;
-				background-position: center;
-				background-size: contain;
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
 
-			.image {
-				height: 100%;
-				width: 100%;
+				&.use-width {
+					.layer {
+						width: 100%;
+						aspect-ratio: 1 / 1;
+					}
+				}
+
+				&.use-height {
+					.layer {
+						height: 100%;
+						aspect-ratio: 1 / 1;
+					}
+				}
+
+				.layer {
+					background-image: var(--image);
+					background-repeat: no-repeat;
+					background-position: center;
+					background-size: contain;
+					position: absolute;
+					margin: 0 auto;
+					left: 0;
+					right: 0;
+				}
+
+				.back {
+					border-radius: 16px;
+					// width: 100%;
+					// height: 100%;
+					background-color: #f7f7f7;
+
+					filter: drop-shadow(2px 2px 6px #ddd);
+					// background-repeat: no-repeat;
+					// background-position: center;
+					// background-size: contain;
+					// position: absolute;
+					// margin: 0 auto;
+					// top: 0;
+					// left: 0;
+					// right: 0;
+				}
+
+				.plastic {
+					z-index: 10;
+				}
+
+				.toploader {
+					z-index: 20;
+				}
+				.plastic {
+					border-radius: 16px;
+					background-size: cover;
+					mix-blend-mode: darken;
+				}
 
-				background: var(--image);
-				background-repeat: no-repeat;
-				background-position: center;
-				background-size: contain;
+				.image {
+					border-radius: 5px;
+					transform: scale(0.9);
+				}
 			}
 		}
 	}

diff --git a/src/components/Board/Board.Counter.svelte b/src/components/Board/Board.Counter.svelte
@@ -4,12 +4,13 @@
 	export let maxArtistIndex;
 </script>
 
-<p class="count">{$currentArtistIndex + 1} of {maxArtistIndex}</p>
+<p class="count title-font">{$currentArtistIndex + 1} of {maxArtistIndex}</p>
 
 <style lang="scss">
 	.count {
+		font-family: var(--title);
 		color: rgba(120, 120, 120, 1);
-		font-size: 14px;
+		font-size: 30px;
 		margin: 0;
 		font-weight: 500;
 		-webkit-font-smoothing: antialiased;
@@ -20,7 +21,7 @@
 		flex-shrink: 0;
 
 		@media only screen and (max-width: 600px) {
-			margin-bottom: 5px;
+			margin-bottom: 10px;
 		}
 	}
 </style>
diff --git a/src/components/Board/Board.Player.svelte b/src/components/Board/Board.Player.svelte
@@ -34,7 +34,7 @@
 	}
 </script>
 
-<span class="artist__player" on:click={toggleAudio}>
+<div class="artist__player" on:click={toggleAudio}>
 	{#if playing}
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -57,17 +57,20 @@
 		</svg>
 	{/if}
 
-	{artist.song}
-</span>
+	<span> {artist.song}</span>
+</div>
 
 <style lang="scss">
 	.artist__player {
 		display: flex;
 		align-items: center;
-		gap: 0.25rem;
+		gap: 0.75rem;
 		font-weight: 500;
 		cursor: pointer;
 		margin-top: 0.25rem;
+		color: #787878;
+
+	
 
 		svg {
 			height: 35px;
@@ -76,6 +79,10 @@
 			transition: fill 0.25s;
 		}
 
+		span {
+			margin-top: 7px;
+		}
+
 		&:hover {
 			svg {
 				fill: #555;