Border radius on project images

Author: chicio

CHANGELOG.md

@@ -6,14 +6,15 @@ Release date: 2024-12-30
 
 #### Added
 
-- update deps to latest releases
-- lunr search
+- Update deps to latest releases
+- Lunr search
+- Various ui improvements
 
 #### Removed
 
-- algolia search implementation
-- loadable components
-- unused/useless deps
+- Algolia search implementation
+- Loadable components
+- Unused/useless deps
 
 #### Fixed
 

src/components/design-system/molecules/project.tsx

@@ -8,6 +8,7 @@ import { ProjectCallToAction } from "../../../logic/projects";
 import { Paragraph } from "../atoms/paragraph";
 import { List } from "../atoms/list";
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";
+import { gatsbyImageWrapperSelector } from "../utils-css/gatsby-image-selector";
 
 interface ProjectContainerProps {
   reverse: boolean;
@@ -36,6 +37,16 @@ const ProjectImageContainer = styled(ProjectContentContainer)`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  ${gatsbyImageWrapperSelector} {
+    overflow: hidden;
+    border-radius: 4px;
+    box-shadow: 0 3px 10px 0 ${(props) => props.theme.light.boxShadowLight};
+
+    ${mediaQuery.dark} {
+      box-shadow: 0 3px 10px 0 ${(props) => props.theme.dark.boxShadowLight};
+    }
+  }
 `;
 
 const CallToActionContainer = styled.div`

src/components/design-system/utils-css/gatsby-image-selector.ts

@@ -1 +1,2 @@
 export const gatsbyImagePlaceholderSelector = "& [data-placeholder-image]";
+export const gatsbyImageWrapperSelector = "& [data-gatsby-image-wrapper]";