wide picture support back

pages/[...slug].tsx

@@ -121,6 +121,7 @@ const Index: NextPage<Props> = props => {
                                         width={x.data.width}
                                         height={x.data.height}
                                         caption={x.data.caption}
+                                        wide={x.wide}
                                     />
                                 )
 

src/components/Picture/index.tsx

@@ -25,14 +25,16 @@ function size(w: number, h: number, tolerance: number) {
 
 export type PictureProps = Pic & {
     style?: React.CSSProperties
+    wide?: boolean
 }
 
-export const Picture: React.FC<PictureProps> = memo(props => {
+export const Picture: React.FC<PictureProps> = memo(({ wide = false, ...props }) => {
     const ss = size(props.width, props.height, 0.95)
     const layout = modifiers.get(ss)
+    const w = ss === 'horizontal' ? wide : false
 
     return (
-        <figure className={`${s.pic} ${layout}`}>
+        <figure className={`${s.pic} ${layout} ${w ? s.wide : ''}`}>
             <Image
                 src={props.src}
                 alt={props.alt}

src/components/Picture/picture.module.css

@@ -1,10 +1,13 @@
 .pic {
-    /* position: relative; */
-    /* width: calc(100% + var(--kazimir-image-increase)); */
-    /* margin-left: calc(-0.5 * var(--kazimir-image-increase)); */
     margin-bottom: var(--size-xl);
 }
 
+.pic.wide {
+    position: relative;
+    width: calc(100% + var(--picture-wide-increase));
+    margin-left: calc(-0.5 * var(--picture-wide-increase));
+}
+
 .pic.vertical {
     max-width: 60%;
 }

src/remote/factory.ts

@@ -50,6 +50,7 @@ export function createPageTokens(components: StrapiComponent[]): Token[] {
             case 'hudozka.image': {
                 return {
                     token: 'image',
+                    wide: component.wide,
                     data: {
                         alt: component.caption,
                         caption: component.caption,

src/style/style.css

@@ -53,7 +53,7 @@
 
     /* KAZIMIR */
     --kazimir-caption-margin: 0px;
-    --kazimir-image-increase: 50px;
+    --picture-wide-increase: 100px;
 }
 
 * {
@@ -183,7 +183,7 @@ a.invisible {
         --content-margin: var(--size-m);
         --content-wide-margin: var(--size-m) var(--size-m);
 
-        --kazimir-image-increase: 0px;
+        --picture-wide-increase: 0px;
     }
 }
 

src/types.ts

@@ -113,6 +113,7 @@ export type TextToken = {
 
 export type ImageToken = {
     token: 'image'
+    wide: boolean
     data: Pic
 }