Prismic x Astro newsletter challenge

1-layout-styles.astro

<style is:global>
	:root {
		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
		--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
		--color-text: #F4E7FF;
		--color-text-secondary: #C3B6FE;
		--grey-1: #0F172A;
		--grey-2: #1D293B;
		--grey-3: #344155;
		--box-shadow-glow: #6A21A7 0 1px 5px;
		--space-gradient: linear-gradient(#0F172A 70%, #240240);
	}

	html {
		font-family: system-ui, sans-serif;
		font-size: var(--font-size-base);
		color: var(--color-text);
		background-size: 100% max(100vh, 100%);
	}

	body {
		margin: 0;
		background: url('https://astro.build/stars.png'), var(--space-gradient);
		height: 100%;
		min-height: 100vh;
	}

	a, a:visited {
		color: var(--color-text-secondary);
		text-decoration: none;
		transition: background-color 0.2s;
		border-radius: 0.2rem;
	}

	a:hover, a:focus-visible {
		background-color: var(--grey-2);
	}
</style>

2-index-base.astro

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Welcome to Astro.">
	<main>
		<h1>Welcome to <span class="text-gradient">Star Gazers</span></h1>
	</main>
</Layout>

<style>
	:root {
		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
	}
	h1 {
		margin: 2rem 0;
	}
	main {
		margin: auto;
		padding: 1em;
		max-width: 60ch;
	}
	.text-gradient {
		font-weight: 900;
		background-image: var(--astro-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 100% 200%;
		background-position-y: 100%;
		border-radius: 0.4rem;
		animation: pulse 4s ease-in-out infinite;
	}
	@keyframes pulse {
		0%,
		100% {
			background-position-y: 0%;
		}
		50% {
			background-position-y: 80%;
		}
	}
</style>

3-image-base.svelte

<!--src/components/Image.svelte-->
<script>
  export let title = '';
  export let url = '';
  export let alt = '';
  export let media_type = 'image';
</script>

<figure>
  {#if media_type === 'image'}
    <img class="media" src={url} alt={alt} />
  {:else}
    <!--for videos and other media, embed with an iframe-->
    <iframe class="media" title={title} width="500" height="300" src={url}></iframe>
  {/if}
  <figcaption>
    <!--slot extra information like a "learn more" link or image description-->
    <slot name="figcaption" />
  </figcaption>
</figure>

<style>
  figure {
    background: var(--grey-1);
    border: 2px solid var(--grey-2);
    box-shadow: var(--box-shadow-glow);
    border-radius: 0.5rem;
    margin: 0;
    padding-bottom: 1rem;
  }

  figcaption {
    padding-inline: 1rem;
  }

  .media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: inherit;
    border: none;
  }
</style>

4-carousel-base.svelte

<!--src/components/Carousel.svelte-->
<script>
import Image from './Image.svelte';

export let images = [];
</script>

<div class="buttons">
  <button aria-label="Previous">
    <!--left arrow icon-->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--material-symbols" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><title>Previous</title><path fill="currentColor" d="m12.3 15.3l-2.6-2.6q-.15-.15-.225-.325Q9.4 12.2 9.4 12t.075-.375q.075-.175.225-.325l2.6-2.6q.475-.475 1.087-.212q.613.262.613.937v5.15q0 .675-.613.937q-.612.263-1.087-.212Z"></path></svg>
  </button>
  <h2>TODO: set this heading!</h2>
  <button aria-label="Next">
    <!--right arrow icon-->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--material-symbols" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><title>Next</title><path fill="currentColor" d="M11.7 15.3q-.475.475-1.087.212Q10 15.25 10 14.575v-5.15q0-.675.613-.937q.612-.263 1.087.212l2.6 2.6q.15.15.225.325q.075.175.075.375t-.075.375q-.075.175-.225.325Z"></path></svg>
  </button>
</div>
<div class="images">
  {#each images as image, idx}
    <div class="image-container">
      <Image title={image.title} url={image.url} alt={image.explanation} media_type={image.media_type}>
        <a slot="figcaption" href={`/${image.date}`}>Learn more</a>
      </Image>
    </div>
  {/each}
</div>

<style>
  .buttons {
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
  }
  
  .images {
    display: grid;
    width: 100%;
  } 

  /* Display every image on top of each other */
  /* This will help us cross-fade between images! */
  .image-container {
    grid-area: 1 / -1;
  }

  button {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    border-radius: 0.3rem;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  button:hover, button:focus-visible {
    background-color: var(--grey-2);
  }

  button svg {
    width: 100%;
    height: auto;
  }

  h2 {
    text-align: center;
    font-size: var(--font-size-base);
  }

  a, a:visited {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
  }
</style>