Add Maria Kannegaard

src/components/Card.astro

@@ -1,23 +1,32 @@
 ---
+import classNames from "classnames";
 import ImageWithBlurredBackground from "./ImageWithBlurredBackground.astro";
 
 export interface Props {
   title: string;
   href: string;
   id: string;
   imageType?: string;
+  className?: string;
 }
 
-const { href, title, id, imageType } = Astro.props;
+const { href, title, id, imageType, className } = Astro.props;
 
 const image = imageType ? `${id}.${imageType}` : `${id}.jpg`;
 ---
 
 <li
-  class={`rounded-xl w-full h-96 sm:h-72 transition-transform group hover:rotate-1`}
+  class={classNames(
+    `rounded-xl w-full h-96 sm:h-72 transition-transform group hover:rotate-1`,
+    className,
+  )}
 >
   <a href={href} class="relative block h-full w-full">
-    <ImageWithBlurredBackground src={`/artist/${image}`} alt={title} />
+    <ImageWithBlurredBackground
+      src={`/artist/${image}`}
+      alt={title}
+      className="rounded-xl"
+    />
     <h2
       class={`absolute bottom-0 right-0 w-full translate-x-2 translate-y-4 sm:translate-x-4 sm:translate-y-4  text-xl text-center
       p-4 rounded-xl transition-transform group-hover:-rotate-2 bg-pink`}

src/pages/artist/maria-kannegaard.mdx

@@ -1,9 +1,9 @@
 ---
 layout: ../../layouts/ArtistLayout.astro
 id: maria-kannegaard
-imageAttribution: Fotografens Navn
+imageAttribution: Jens Westbye
 title: Maria Kannegaard
-# shortTitle: Artistsen
+shortTitle: Maria Kannegaard
 author: Kim Klev
 authorImage: kim-klev.jpg
 tagline: Borte Vekk Meg I Morgen (bestillingsverk)
@@ -14,7 +14,7 @@ tidalUrl: https://tidal.com/browse/artist/31988?u
 # youtubeUrl: Lim inn URL-en til Youtube-videoen, e.g. https://www.youtube.com/watch?v=iUd7MoKsRFE
 sponsoredByBergesenstiftelsen: false # true hvis logoen til Bergesenstiftelsen skal vises, false hvis ikke
 hideFromProgram: true # true hvis den skal skjules fra programsiden, false hvis den skal vises
-hideFromArtistList: true # true hvis den skal skjules fra forsiden, false hvis den skal vises
+hideFromArtistList: false # true hvis den skal skjules fra forsiden, false hvis den skal vises
 isFree: false # true hvis den er gratis, false hvis ikke
 requiresFreeTicket: false # true hvis konserten er gratis, men krever gratisbillett
 isPlaceholder: false

src/pages/artist/template.mdx

@@ -2,6 +2,7 @@
 layout: ../../layouts/ArtistLayout.astro
 id: artistnavn-uten-æøå-og-med-bindestrek-instedetfor-mellomrom
 imageAttribution: Fotografens Navn
+imageType: jpg # jpg eller png
 title: Artist Artistsen
 shortTitle: Artistsen
 author: Kim Klev

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import partition from "lodash/partition";
 
+import classNames from "classnames";
 import BuyTicketsButton from "../components/BuyTicketsButton.astro";
 import Card from "../components/Card.astro";
 import PlaceholderCard from "../components/PlaceholderCard.astro";
@@ -55,7 +56,7 @@ const byOrder = (a, b) => {
       >
         {
           [...upcomingArtists.sort(byOrder), ...pastArtists.sort(byOrder)].map(
-            (artist) => {
+            (artist, index) => {
               const {
                 frontmatter: { title, id, hideFromArtistList },
               } = artist;
@@ -64,7 +65,17 @@ const byOrder = (a, b) => {
                 return null;
               }
 
-              return <Card href={`/artist/${id}`} title={title} id={id} />;
+              return (
+                <Card
+                  className={classNames({
+                    "h-[600px] sm:col-span-2 sm:row-span-2 sm:h-[600px]":
+                      index === 0,
+                  })}
+                  href={`/artist/${id}`}
+                  title={title}
+                  id={id}
+                />
+              );
             },
           )
         }

tailwind.config.cjs

@@ -46,8 +46,8 @@ module.exports = {
         "-100": "-1",
       },
       boxShadow: {
-        solid: `-6px 6px 0px 0px ${colors.beige}`,
-        "solid-hover": `-10px 10px 0px 0px ${colors["beige"]}`,
+        solid: `-6px 6px 0px 0px ${colors["pink"]}`,
+        "solid-hover": `-10px 10px 0px 0px ${colors["pink"]}`,
       },
       animation: {
         orbit: "orbit-right 10s linear infinite",