Updated containers and the image inline to be closer to the original site

components/blocks/content.tsx

@@ -25,10 +25,10 @@ export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
         <Section>
             <Container
-                className={ "" }
+                className={ "prose default-text-color" }
                 data-tina-field={ tinaField(data, "body") }
-                size="large"
+                size="small"
-                width="medium"
+                width="large"
             >
                 <TinaMarkdown components={ { ...inlineComponents, html: props => <HTMLInline { ...props } /> } } content={ data.body } />
             </Container>

components/inline/image.tsx

@@ -1,5 +1,6 @@
 import { TinaMarkdownContent } from "tinacms/dist/rich-text";
 import { RichTextTemplate } from "@tinacms/schema-tools";
+import { tinaField } from "tinacms/dist/react";
 
 enum imageSize {
     small = "small",
@@ -52,12 +53,30 @@ const Image = (props: ImageProps) => {
         }
     };
 
+    const getPositionTypeClass = (): string | undefined => {
+        switch (props.position) {
+            case imagePosition.left:
+                return "float-left";
+            case imagePosition.middle:
+                return "flex justify-center";
+            case imagePosition.right:
+                return "float-right";
+            default:
+                return undefined;
+        }
+    };
+
+    const getClassNameWithSpace = (className: string): string => `${ className ? ` ${ className }` : "" }`;
+
     const decorationTypeClass = getDecorationTypeClass();
 
     const sizeTypeClass = getSizeTypeClass();
 
-    return (<div className={ "inline-image" }>
+    const positionTypeClass = getPositionTypeClass();
-        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ sizeTypeClass ? ` ${ sizeTypeClass }` : "" }` }
+
+    return (<div className={ `not-prose inline-image${ getClassNameWithSpace(positionTypeClass) }` }>
+        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ getClassNameWithSpace(sizeTypeClass) }` }
+            data-tina-field={ tinaField(props, "imageUrl") }
             src={ props.imageUrl }/>
     </div>);
 };

components/util/container.tsx

@@ -17,7 +17,7 @@ export const Container = ({
     const widthClass = {
         small: "max-w-4xl",
         medium: "max-w-5xl",
-        large: "max-w-7xl",
+        large: "container-large",
         custom: ""
     };
 

content/pages/about.mdx

@@ -2,13 +2,14 @@
 title: About
 blocks:
   - body: >
-      ![](/uploads/photo.jpg)
 
-      Je suis **psychopraticienne en art-thérapie** et mon approche est issue de
+      <Image size="medium" decorations="default" position="right"
-      la **psychologie intégrative**, autrement dit, je m’intéresse à l’ensemble
+      imageUrl="/uploads/photo.jpg" /> Je suis **psychopraticienne en
-      de la personne : sa personnalité, son évolution dans ses différents
+      art-thérapie** et mon approche est issue de la **psychologie
-      environnements (familial, professionnel, amical) et son fonctionnement à
+      intégrative**, autrement dit, je m’intéresse à l’ensemble de la personne :
-      la fois émotionnel, affectif, comportemental, cognitif et relationnel.
+      sa personnalité, son évolution dans ses différents environnements
+      (familial, professionnel, amical) et son fonctionnement à la fois
+      émotionnel, affectif, comportemental, cognitif et relationnel.
 
 
       Ainsi, je m’adapte à vous en assemblant différentes techniques issues de
@@ -80,7 +81,6 @@ blocks:
       Maintenant, c’est à votre tour de vous présenter à moi, si vous le
       souhaitez, n’hésitez pas à me **contacter** par **téléphone, par mail ou
       via les réseaux sociaux** !
-    color: default
     _template: content
 url: aboutt
 ---
@@ -89,3 +89,5 @@ url: aboutt
 
 
 
+
+

content/pages/home.mdx

@@ -10,7 +10,7 @@ blocks:
       linkTo: main-page
     _template: carousel
   - body: >
-      <div class="text-center">
+      <div class="not-prose text-center text-4xl">
         <h1>Découvrez la PsychARThérapie,</h1>
         <h1>Quand l’art dévoile ce qui se cache en vous !</h1>
       </div>
@@ -46,17 +46,6 @@ blocks:
       Tentez l’expérience et entrez dans votre espace de création et de liberté
       !
     _template: content
-  - body: |
-      <DateTime />
-
-      <Image size="small" decorations="default" />
-
-      <NewsletterSignup placeholder="Enter your email" buttonText="Notify Me">
-        dfnfdhdhdh
-      </NewsletterSignup>
-
-      <BlockQuote />
-    _template: content
   - headline: Welcome to the Tina Starter
     text: >
       This project is set up to show you the basics of working with Tina. You're
@@ -150,6 +139,25 @@ url: home
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

styles/_styles.scss

@@ -19,6 +19,15 @@ html {
     scroll-padding-top: var(--header-Height);
 }
 
+.container-large {
+    max-width: 75rem;
+}
+
+.default-text-color {
+    color: var(--primaryColor);
+    --tw-prose-bold: #124498;
+}
+
 .font {
     font-family: 'Questrial', sans-serif;
 }

styles/image.scss

@@ -4,12 +4,12 @@
     border-radius: 1rem;
   }
   .sm-size {
-    height: 15rem;
+    max-height: 15rem;
   }
   .md-size {
-    height: 25rem;
+    max-height: 25rem;
   }
   .lg-size {
-    height: 40rem;
+    max-height: 40rem;
   }
 }