@rileybathurst/paddle 1.1.1 → 1.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/PaddleComposition.tsx

@@ -13,14 +13,13 @@ type defaultPaddlerTypes = {
     image: GatsbyImageType;
   };
 }
-
 const DefaultPaddler = ({ sport, defaultKayaker, defaultPaddleboarder }: defaultPaddlerTypes) => {
   if (sport === "sup") {
     return (
       <GatsbyImage
         image={defaultPaddleboarder.image.localFile.childImageSharp.gatsbyImageData}
         alt={defaultPaddleboarder.image.alternativeText || "Paddleboarder"}
-        className="img__wrapped paddler"
+        className=" paddler"
       />
     )
   }
@@ -28,7 +27,7 @@ const DefaultPaddler = ({ sport, defaultKayaker, defaultPaddleboarder }: default
     <GatsbyImage
       image={defaultKayaker.image.localFile.childImageSharp.gatsbyImageData}
       alt={defaultKayaker.image.alternativeText || "Kayaker"}
-      className="img__wrapped paddler"
+      className=" paddler"
     />
   )
 }
@@ -42,24 +41,33 @@ interface CompositionTypes {
   defaultPaddleboarder: {
     image: GatsbyImageType;
   }
-  WaterTexture: {
+  sandTexture: {
+    image: GatsbyImageType;
+  };
+  waterTexture: {
     image: GatsbyImageType;
   };
 }
-export const PaddleComposition = ({ sport, image, defaultKayaker, defaultPaddleboarder, WaterTexture }: CompositionTypes) => {
+export const PaddleComposition = ({ sport, image, defaultKayaker, defaultPaddleboarder, sandTexture, waterTexture }: CompositionTypes) => {
   return (
     <div className="composition">
       <GatsbyImage
-        image={WaterTexture.image.localFile.childImageSharp.gatsbyImageData}
-        alt={WaterTexture.image.alternativeText || "Water Texture"}
-        className="img__wrapped texture-1"
+        image={waterTexture.image.localFile.childImageSharp.gatsbyImageData}
+        alt={waterTexture.image.alternativeText || "Water Texture"}
+        className="texture-1"
+      />
+
+      <GatsbyImage
+        image={sandTexture.image.localFile.childImageSharp.gatsbyImageData}
+        alt={sandTexture.image.alternativeText || "Sand Texture"}
+        className="texture-2"
       />
 
       {image ?
         <GatsbyImage
           image={image.localFile.childImageSharp.gatsbyImageData}
           alt={image.alternativeText || "Composition Image"}
-          className="img__wrapped paddler"
+          className=" paddler"
         />
         : <DefaultPaddler
           sport={sport}

package/src/styles/layout.css

@@ -384,7 +384,6 @@ header {
 /*------------------*/
 
 .composition {
-  /* grid-area: composition; /* ? is this still used */
   display: grid;
   grid-template-columns: 5% 10% 70% 10% 5%;
   grid-template-rows: 5% 90% 5%;
@@ -395,6 +394,12 @@ header {
     max-width: 100%;
   }
 
+  /* * img__wrapped */
+  > * {
+    border-radius: 0.25rem;
+    box-shadow: var(--penumbra);
+  }
+
   > img {
     display: block;
   }
@@ -428,13 +433,13 @@ header {
     height: calc(100% - 4px);
   }
 
-  .t1 {
+  .texture-1 {
     grid-column: 1/5;
     grid-row: 1/3;
     aspect-ratio: 16/9;
   }
 
-  .t2 {
+  .texture-2 {
     grid-column: 2/6;
     grid-row: 2/4;
     aspect-ratio: 16/9;