make bg transitions less like a flash-bulb

package.json

@@ -22,9 +22,12 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -1,213 +0,0 @@
-:root {
-
-  --poster-width: 15rem;
-  --posters-wide: 10;
-  --posters-gap: 1rem;
-}
-
-#root {
-  height: 100%;
-  width: 100%;
-}
-
-@font-face {
-  font-family: "Jura";
-  src: url("fonts/Jura-VariableFont_wght.ttf");
-}
-
-@font-face {
-  font-family: "RobotoBold";
-  src: url("fonts/Roboto-Bold.ttf")
-}
-
-body {
-
-  font-family: Jura;
-  color: white;
-}
-
-
-main {
-  height: 100%;
-  display: flex;
-  gap: 1em;
-  justify-content: center;
-  align-items: center;
-}
-
-
-
-#movie-wall-container {
-  display: inline-flex;
-  flex-wrap: wrap;
-  flex-basis: 60%;
-  align-items: center;
-  gap: 1em;
-  height: fit-content;
-}
-
-
-#sidebar {
-  flex-basis: 20%;
-  max-height: 100%;
-  min-height: 100%;
-  font-size: 1.6rem;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0.5);
-
-  display: grid;
-  grid-template-rows: 1fr 1fr 2fr 1fr;
-  align-items: center;
-  justify-content: center;
-
-  h1 {
-    font-size: 1.2em;
-    font-family: RobotoBold;
-    grid-row: 1/ span 1;
-    height: fit-content;
-    overflow: hidden;
-
-  }
-
-  a {
-    display: contents;
-  }
-
-
-  .chosen-movie-poster {
-    grid-row: 2/ span 1;
-    object-fit: cover;
-    display: flex;
-    justify-content: center;
-  }
-
-
-  #summary {
-    overflow: scroll;
-    max-height: 100%;
-    grid-row: 3/ span 1;
-  }
-
-  p {
-    font-family: Jura;
-    padding: 0.2em;
-    margin: 0.1em 0.2em 0.1em 0.2em;
-  }
-
-  footer {
-    font-size: 1.2rem;
-    grid-row: 4/ span 1;
-    overflow: hidden;
-  }
-
-}
-
-.poster {
-  width: var(--poster-width);
-  display: grid;
-  box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
-  border-radius: 1em;
-  overflow: hidden;
-
-  img {
-    height: 100%;
-    animation: fadeImage 0.5s;
-    animation-fill-mode: forwards;
-    aspect-ratio: 2/3;
-  }
-}
-
-.poster>* {
-  grid-area: 1/1;
-}
-
-.highlighted {
-  border: 0.1em solid gold;
-}
-
-
-.overlay {
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  z-index: 2;
-  opacity: 0;
-}
-
-.highlighted>.overlay {
-  background-color: rgba(255, 222, 123, 0.5);
-}
-
-.overlay:hover {
-  opacity: 1;
-}
-
-@keyframes fadeImage {
-  from {
-    filter: blur(5rem);
-  }
-
-  to {
-    filter: blur(0);
-  }
-}
-
-
-#background {
-  background-color: black;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-
-}
-
-.CrossfadeImage {
-  width: 100%;
-  height: 100%;
-  filter: blur(1rem) brightness(0.4);
-}
-
-#watch-providers-container {
-  max-width: 100%;
-  display: flex;
-  gap: 0.2rem;
-  justify-content: space-around;
-
-  .watch-providers {
-    text-align: center;
-    border: 1rem white;
-
-    h1 {
-      font-size: 1.4rem;
-    }
-
-  }
-
-  .watch-logos-container {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 0.4rem;
-    justify-content: center;
-
-
-    .watch-logo {
-      aspect-ratio: 1/1;
-      max-height: 2rem;
-
-      img {
-        width: 100%;
-      }
-    }
-
-  }
-}
-
-#hamburger {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
-}

src/App.tsx

@@ -1,14 +1,13 @@
-import './defaults.css'
-import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
 import { HamburgerMenu } from './objects/HamburgerMenu'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useLayoutEffect } from 'react'
 import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
 import { Movie } from './objects/movie-wall'
 import CrossfadeImage from 'react-crossfade-image'
 import { WatchProviders } from './objects/whereToWatch'
+import useWindowDimensions from './hooks/useWindowDimensions'
 
 export type Config = {
   language: string,
@@ -62,27 +61,50 @@ function App() {
     tmdb.getSimilar(config, chosenMovie, setMovies, setSimilarMoviesAvailable)
   }, [config])
   const crossfadeImageStyles = {
-    width: "2560px",
-    minHeight: "100%",
-    aspectRatio: "16/9"
+    width: "100vw",
+    height: "100vh",
+    aspectRatio: "16/9",
+    objectFit: "clip",
   }
+
+  const { width } = useWindowDimensions()
+
+
+  function trimMoviesForScreen(movies: Movie[]) {
+    let desiredLength = 0
+    if (width > 1280) {
+      desiredLength = 18
+    } else if (width > 640) {
+      desiredLength = 16
+    } else { desiredLength = 15 }
+    //ensure movies.length is a multiple of 6 (so it makes an orphanless grid)
+    while (movies.length < desiredLength && movies.length >= 6) { desiredLength = desiredLength - 6 }
+    return movies.slice(0, desiredLength)
+  }
+
   return (
     <>
-      <div id="background">
-        <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
-      </div>
-      <main >
-        <HamburgerMenu setConfig={setConfig} />
-        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
-        <div id="movie-wall-container">
-          <MovieWall movies={movies}
+
+      <div className="w-screen h-screen flex flex-col absolute overflow-hidden">
+        <div className="-z-10 bg-black/20 w-full h-full absolute"></div>
+        <div className="-z-20 absolute h-full blur-xl bg-black">
+          <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
+        </div>
+        <header className="bg-black py-2">
+          <HamburgerMenu setConfig={setConfig} />
+        </header>
+        <main className="flex flex-col sm:flex-row sm:justify-center items-center gap-8 grow">
+          <Sidebar className="flex flex-col justify-between items-center max-w-sm bg-black/80 text-white w-full sm:w-96 h-64 sm:h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+          <MovieWall
+            className={"flex flex-wrap gap-2 w-fit justify-center sm:max-w-lg xl:max-w-5xl "}
+            movies={trimMoviesForScreen(movies)}
             setMovies={setMovies}
             config={config}
             setChosenMovie={setChosenMovie}
             setSimilarMoviesAvailable={setSimilarMoviesAvailable}
           />
-        </div>
-      </main>
+        </main>
+      </div>
     </>
   )
 }

src/defaults.css

@@ -1,69 +0,0 @@
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
-img {
-	display: block;
-	max-width: 100%;
-}
-
-menu:not(article menu),
-ol:not(article ol),
-ul:not(article ul) {
-	list-style: none;
-}
-
-menu,
-ol,
-ul {
-	padding-left: 0;
-}
-
-article ol,
-article ul {
-	list-style-position: inside;
-}
-
-a {
-	/* Places underlines below the descenders */
-	text-underline-position: under;
-
-
-	/* Sets the thickness as a percentage of the font size */
-	text-decoration-thickness: 8;
-}
-
-/* <html> = the root */
-html {
-	font-size: 62.5%;
-	/* (62.5/100) * 16px = 10px */
-	-webkit-text-size-adjust: none;
-	/* for iOS Safari */
-	text-size-adjust: none;
-	/* for other mobile browsers */
-	height: 100vh;
-}
-
-body {
-	margin: 0;
-	height: 100%;
-
-}
-
-@media (prefers-reduced-motion: no-preference) {
-	html {
-		scroll-behavior: smooth;
-	}
-}
-
-label,
-button,
-select,
-summary,
-[type=radio],
-[type=submit],
-[type=checkbox] {
-	cursor: pointer;
-}

src/hooks/useWindowDimensions.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect, useRef } from 'react';
+
+function getWindowDimensions() {
+	const { innerWidth: width, innerHeight: height } = window;
+	return {
+		width,
+		height
+	};
+}
+
+export default function useWindowDimensions() {
+	const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+	useEffect(() => {
+		function handleResize() {
+			setWindowDimensions(getWindowDimensions());
+		}
+
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	return windowDimensions;
+}
+

src/index.css

@@ -1,73 +1,25 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* width */
+::-webkit-scrollbar {
+	width: 10px;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+/* Track */
+::-webkit-scrollbar-track {
+	background: #111;
+	border-radius: 5px;
 }
 
-a:hover {
-  color: #535bf2;
+/* Handle */
+::-webkit-scrollbar-thumb {
+	background: #444;
+	border-radius: 5px;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: #555;
 }

src/objects/HamburgerMenu.tsx

@@ -3,7 +3,7 @@ export interface HamburgerMenuProps extends React.ComponentPropsWithRef<"div"> {
   setConfig: Function;
 }
 
-export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
+export function HamburgerMenu({ setConfig, className }: HamburgerMenuProps) {
   const languages = [
     {
       value: "es",
@@ -41,7 +41,7 @@ export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
   //     }
   //   })
   // }
-  return <div id="hamburger">
+  return <div id="hamburger" className={className}>
     <select onChange={handleLangChange}>
       {languages.map((language) => <option value={language.value} key={language.value}>{language.label}</option>)}
     </select>

src/objects/movie-wall.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
 import { Config } from "../App"
 import tmdb from "./tmdb"
 
@@ -35,16 +35,20 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<any>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   config: Config;
+  className: string;
 }
 
-export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable }: MovieWallProps) {
+export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable, className }: MovieWallProps) {
+
 
   const posters: React.ReactElement[] = []
   for (let i = 0; i < movies.length; i++) {
     const movie = movies[i]
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
+
+    const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
     posters.push(
-      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
+      <Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}
@@ -52,9 +56,9 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
         setSimilarMoviesAvailable={setSimilarMoviesAvailable} />
     )
   }
-  return <>
+  return <div className={className}>
     {posters}
-  </>
+  </div>
 }
 
 interface PosterProps extends React.ComponentPropsWithRef<"div"> {
@@ -66,34 +70,31 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   isHighlighted: boolean;
+  className: string
 }
 
 
-function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
+function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
   function clickHandler() {
     setChosenMovie(movie)
     listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)
   }
   const [isLoading, setIsLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
-  const classes = [
-    "poster",
-    isHighlighted ? "highlighted" : ""
-  ].join(" ")
-  return <><div className={classes} >
+  return <><div className={className} >
     {isLoading ?
-      <div className="spinner-container">
-        <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
-      : <div className="overlay" onClick={() => clickHandler()}>
-      </div>
+      <div className="m-auto text-center h-fit w-fit">
+        <div className="lds-spinner align-middle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
+      : <div className="z-10 h-full w-full absolute cursor-pointer hover:bg-white/40" onClick={() => clickHandler()}></div>
     }
-    {hasError ?? <div className="spinner-container">⚠️</div>}
+    {hasError ?? <div className="m-auto text-center">⚠️</div>}
     <img
+      className="animate-blur object-cover w-full aspect-poster"
       src={tmdb.makeImgUrl(movie.poster_path ?? "")}
       onLoad={() => setIsLoading(false)}
       onError={() => setHasError(true)}
     />
-  </div>
+  </div >
   </>
 }
 

src/objects/sidebar.tsx

@@ -10,25 +10,40 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   similarMoviesAvailable: boolean;
   watchProviders: WatchProviders;
   config: Config;
+  className: string
 }
-export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config }: SidebarProps) {
+export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, className }: SidebarProps) {
   const apology = config.language == "es" ?
     "Resumen no disponible" :
     config.language == "en" ?
       "Summary unavailable." :
       ""
-  return <div id="sidebar">
-    <h1>{movie?.title ?? "loading"}</h1>
-    <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
-      <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />
-    </a>
-    {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-    <p id="summary">{movie.overview === null ? "Loading"
-      : movie.overview === "" ? apology
-        : movie.overview}
-    </p>
-    <WhereToWatch watchProviders={watchProviders} config={config} />
-  </div>
+  return <div id="sidebar" className={className}>
+    <div className="sm:h-14 w-fit flex justify-center items-center">
+      <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
+    </div>
+    <div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center">
+      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center">
+        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
+          objectFit: "clip",
+          height: "100%",
+          apectRatio: "2 / 3"
+        }} />
+      </a>
+      {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
+      <div className="h-32 sm:h-72 w-64 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
+        {/* TODO: make the apology vertically centered */}
+        {movie.overview === null ?
+          <p>Loading...</p>
+          : movie.overview === "" ?
+            <p>{apology}</p>
+            :
+            <p className="self-start">{movie.overview}</p>
+        }
+      </div>
+    </div>
+    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
+  </div >
 
 
 }

src/objects/tmdb.tsx

@@ -28,26 +28,32 @@ export default {
 * @returns {boolean}
 */
   getPopular: async function({ language, region, page }: Config, callback: Function) {
-    let res = await tmdb.get('/popular',
-      {
-        params: {
-          language,
-          region,
-          page
-        }
-      })
-    if (res.status === 200) {
-      res = res.data.results
-      callback(res)
-      return true
-    } else {
-      throw Error("API call failed! Response: " + JSON.stringify(res))
+    try {
+      let res = await tmdb.get('/popular',
+        {
+          params: {
+            language,
+            region,
+            page
+          }
+        })
+      console.log("POPULAR MOVIES: " + JSON.stringify(res))
+      if (res.status === 200) {
+        res = res.data.results
+        callback(res)
+        return true
+      } else {
+        throw Error("API call failed! Response: " + JSON.stringify(res))
+      }
+    } catch (error) {
+      console.error(error)
     }
   },
   /**
    * Calls TMDB/similar, then fires the callback with res.data.results.unshift(movie) as argument
    */
   getSimilar: async function({ language, page }: Config, movie: Movie, setMovies: Function, setSimilarMoviesAvailable: Function) {
+
     let res = await tmdb.get(movie.id + '/similar', {
       params: {
         language,

src/objects/whereToWatch.tsx

@@ -63,12 +63,12 @@ interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
 }
 function ProviderIcons({ providerList, link }: ProviderIconsProps) {
   const list = providerList.map((e: any, i: number) => {
-    return <div className="watch-logo">
+    return <div className="w-6 aspect-square">
       <a href={link}>
         <img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
     </div>
   })
-  return <div className="watch-logos-container">
+  return <div id="logos-container" className="w-full flex">
     {list}
   </div>
 }
@@ -76,22 +76,19 @@ function watchProvidersExist(watchProviders: any) {
   return watchProviders?.link
 
 }
-export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
-  console.log("Watch providers exist?" + watchProvidersExist(watchProviders))
-  if (!watchProvidersExist(watchProviders)) {
-    console.group()
-    console.log("Watch providers (WhereToWatch)")
-    console.log(watchProviders)
-    console.groupEnd()
-    return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
-  }
-  return <><footer id="sidebar-footer">
-    <div id="watch-providers-container">
-      {watchProviders?.flatrate?.length > 0 ? <div className="watch-providers"><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
-      {watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
-      {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
-    </div>
-    <p>Powered by Just Watch.</p>
-  </footer>
+export function WhereToWatch({ watchProviders, config, className }: WhereToWatchProps) {
+  return <><footer className={className}>
+    {watchProvidersExist(watchProviders) ?
+      <>
+        <div className="flex w-full justify-around">
+          {watchProviders?.flatrate?.length > 0 ? <div className=""><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
+          {watchProviders?.rent?.length > 0 ? <div className=""><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
+          {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
+        </div>
+        <p className="w-fit mx-auto mt-1 sm:mt-4">Powered by Just Watch.</p>
+      </> :
+      <p className="w-fit mx-auto">{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
+    }
+  </footer >
   </>
 }

src/spinner.css

@@ -1,3 +1,13 @@
+/* .overlay { */
+/*   margin: 0; */
+/*   height: 100%; */
+/*   width: 100%; */
+/*   background-color: rgba(255, 255, 255, 0.5); */
+/*   cursor: pointer; */
+/*   z-index: 2; */
+/*   opacity: 0; */
+/* } */
+/**/
 .spinner-container {
 	margin: auto;
 	text-align: center;

tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      aspectRatio: {
+        poster: "2 / 3",
+      },
+      keyframes: {
+        blur: {
+          "0%": { filter: "blur(10px)" },
+          "100%": { filter: "blur(0px)" },
+        },
+      },
+      animation: {
+        blur: "blur 0.5s linear",
+      },
+    },
+  },
+  plugins: [],
+};