chore: update images styles

8 files changed, 111 insertions, 33 deletions

diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss
index 3a4f283..8a1d51f 100644
--- a/src/components/molecules/images/responsive-image.module.scss
+++ b/src/components/molecules/images/responsive-image.module.scss
@@ -1,26 +1,49 @@
 @use "@styles/abstracts/functions" as fun;
 
+.caption {
+  margin: 0;
+  padding: fun.convert-px(4) var(--spacing-2xs);
+  background: var(--color-bg-secondary);
+  border: fun.convert-px(1) solid var(--color-border-light);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+}
+
 .wrapper {
   display: flex;
   flex-flow: column;
   width: fit-content;
-  margin: 0;
+  margin: 0 auto;
   position: relative;
   text-align: center;
-}
 
-.caption {
-  margin: 0;
-  padding: fun.convert-px(4) var(--spacing-2xs);
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border-light);
-  font-weight: 500;
+  &--has-borders {
+    .caption {
+      margin-top: fun.convert-px(4);
+    }
+  }
+
+  &--has-borders#{&}--has-link {
+    .link {
+      padding: fun.convert-px(4);
+    }
+  }
+
+  &--has-borders#{&}--no-link {
+    padding: fun.convert-px(4);
+    border: fun.convert-px(1) solid var(--color-border);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+      var(--color-shadow);
+  }
 }
 
 .link {
   display: flex;
   flex-flow: column;
   background: none;
+  border: fun.convert-px(1) solid var(--color-border);
+  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+    var(--color-shadow);
   text-decoration: none;
 
   .caption {
@@ -29,6 +52,11 @@
 
   &:hover,
   &:focus {
+    box-shadow: 0 0 fun.convert-px(2) 0 var(--color-shadow-light),
+      fun.convert-px(2) fun.convert-px(2) fun.convert-px(4) fun.convert-px(1)
+        var(--color-shadow-light),
+      fun.convert-px(4) fun.convert-px(4) fun.convert-px(8) fun.convert-px(2)
+        var(--color-shadow-light);
     transform: scale(var(--scale-up, 1.05));
   }
 
@@ -40,6 +68,8 @@
   }
 
   &:active {
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+      fun.convert-px(1) var(--color-shadow-light);
     transform: scale(var(--scale-down, 0.95));
 
     .caption {
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index 35d9116..4294208 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -7,6 +7,9 @@ import ResponsiveImage from './responsive-image';
 export default {
   title: 'Molecules/Images/ResponsiveImage',
   component: ResponsiveImage,
+  args: {
+    withBorders: false,
+  },
   argTypes: {
     alt: {
       control: {
@@ -75,6 +78,20 @@ export default {
         required: true,
       },
     },
+    withBorders: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Add borders around the image.',
+      table: {
+        category: 'Styles',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
 } as ComponentMeta<typeof ResponsiveImage>;
 
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index d07dd6c..4541df8 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -31,6 +31,10 @@ export type ResponsiveImageProps = Omit<
    * The image width.
    */
   width: number | string;
+  /**
+   * Wrap the image with borders.
+   */
+  withBorders?: boolean;
 };
 
 /**
@@ -45,10 +49,18 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
   layout,
   objectFit,
   target,
+  withBorders,
   ...props
 }) => {
+  const bordersModifier = withBorders
+    ? 'wrapper--has-borders'
+    : 'wrapper--no-borders';
+  const linkModifier = target ? 'wrapper--has-link' : 'wrapper--no-link';
+
   return (
-    <figure className={`${styles.wrapper} ${className}`}>
+    <figure
+      className={`${styles.wrapper} ${styles[bordersModifier]} ${styles[linkModifier]} ${className}`}
+    >
       {target ? (
         <Link href={target} className={styles.link}>
           <Image
diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss
index e813625..895bae5 100644
--- a/src/components/organisms/layout/overview.module.scss
+++ b/src/components/organisms/layout/overview.module.scss
@@ -33,12 +33,12 @@
       }
     }
   }
-}
 
-.cover {
-  width: 100%;
-  height: fun.convert-px(175);
-  margin: 0 auto var(--spacing-md);
-  padding: var(--spacing-2xs);
-  border: fun.convert-px(1) solid var(--color-border);
+  .cover {
+    width: fit-content;
+    max-height: fun.convert-px(175);
+    margin-bottom: var(--spacing-sm);
+    padding: var(--spacing-2xs);
+    border: fun.convert-px(1) solid var(--color-border);
+  }
 }
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index d49dee1..b110e68 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -43,8 +43,8 @@ const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => {
     <div className={`${styles.wrapper} ${className}`}>
       {cover && (
         <ResponsiveImage
-          objectFit="contain"
           className={styles.cover}
+          objectFit="contain"
           {...cover}
         />
       )}
diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
index 04acad9..a5299fe 100644
--- a/src/styles/pages/article.module.scss
+++ b/src/styles/pages/article.module.scss
@@ -11,7 +11,7 @@
   margin-right: var(--spacing-2xs);
   padding: var(--spacing-2xs) var(--spacing-xs);
 
-  &__icon {
+  figure {
     max-width: fun.convert-px(22);
     margin-right: var(--spacing-2xs);
   }
diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss
index 8359881..0cd3654 100644
--- a/src/styles/pages/partials/_article-media.scss
+++ b/src/styles/pages/partials/_article-media.scss
@@ -1,11 +1,20 @@
+@use "@styles/abstracts/functions" as fun;
+
 @mixin styles {
   figure {
-    margin: var(--spacing-md) 0;
+    display: flex;
+    flex-flow: column;
+    width: fit-content;
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
   }
 
   figcaption {
-    margin-top: var(--spacing-xs);
-    font-size: var(--font-size-sm);
-    text-align: center;
+    margin: 0;
+    padding: fun.convert-px(4) var(--spacing-2xs);
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(1) solid var(--color-border-light);
+    font-weight: 500;
   }
 }
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
index f75a4d5..33e59a1 100644
--- a/src/styles/pages/partials/_article-wp-blocks.scss
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -62,6 +62,24 @@
     }
   }
 
+  .wp-block-image {
+    display: flex;
+    flex-flow: column;
+    width: fit-content;
+    margin: 0 auto;
+    padding: fun.convert-px(4);
+    position: relative;
+    border: fun.convert-px(1) solid var(--color-border);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+      var(--color-shadow);
+    text-align: center;
+
+    figcaption {
+      margin-top: fun.convert-px(4);
+      font-size: var(--font-size-sm);
+    }
+  }
+
   .wp-block-gallery {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
@@ -142,18 +160,10 @@
         }
       }
     }
-  }
 
-  .wp-block-image {
-    img {
-      display: block;
-      margin: auto;
-      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-          var(--color-shadow-light),
-        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-          var(--color-shadow-light);
-      text-align: center;
+    .wp-block-image img {
+      height: 100%;
+      object-fit: cover;
     }
   }