Try another rendering for the project page.

Author: HaudinFlorence

src/components/projects/desktop/ProjectDesktop.tsx

@@ -7,10 +7,10 @@ export default function ProjectDesktop({
   if (project.reverse === "false") {
     return (
       <div className={"container" + " " + styles.project_container}>
-        <div className={"row" + " " + "padding-none" + " " + "margin-none"}>
+        <div className={"row" + " " + "padding-none" + " " + "margin-none"+" "+ styles.row_project}>
           <div
             className={
-              "col col--6 col--offset-1" + " " + styles.col_project_text
+              "col col--6" + " " + styles.col_project_text
             }
           >
             <div className={styles.project_title}>{project.title}</div>
@@ -20,15 +20,15 @@ export default function ProjectDesktop({
           </div>
           <div
             className={
-              "col col--4" +
+              "col col--5" +
               " " +
               "flex-full-centered" +
               " " +
               "padding-none" +
               " " +
               styles.col_project_picture_right
             }
-            style={{ border: project.pictureBorderDesktop }}
+            /*style={{ border: project.pictureBorderDesktop }}*/
           >
             <div className={styles.project_picture}></div>
             <img
@@ -43,16 +43,17 @@ export default function ProjectDesktop({
   } else if (project.reverse === "true") {
     return (
       <div className={"container" + " " + styles.project_container}>
-        <div className={"row" + " " + "padding-none" + " " + "margin-none"}>
+        <div className={"row" + " " + "padding-none" + " " + "margin-none" + " "+ styles.row_project}>
           <div
             className={
-              "col col--4 col--offset-1" +
+              "col col--5" +
               " " +
              "flex-full-centered" + " "+ "padding-none"+
               " " +
               styles.col_project_picture_left
             }
-            style={{ border: project.pictureBorderDesktop }}
+            /*style={{ border: project.pictureBorderDesktop }}*/
+            style={{border: "Opx"}}
           >
             <div className={styles.project_picture}>
               <img

src/components/projects/styles.module.css

@@ -111,30 +111,36 @@ div .schedule_container {
   }
 
   .project_description {
-    padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);
+    /*padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);*/
     text-align: center;
   }
 
   .project_description p {
     color: var(--ifm-text-color-project-card);
   }
 
+  .row_project {
+    background-color: var(--ifm-background-color-project-card);
+    border-radius: 10px;
+    box-shadow: 0px 0px 8px 1px #d0cb54;
+  }
+
   .col_project_text {
     background-color: var(--ifm-background-color-project-card);
     padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
     border-radius: 10px;
-    box-shadow: 0px 0px 8px 1px #d0cb54;
+    /*box-shadow: 0px 0px 8px 1px #d0cb54;*/
   }
 
   .col_project_picture_left {
     margin-right: var(--ifm-spacing-lg);
-    border-radius: 10px;
-    box-shadow: 0px 0px 8px 1px;
+    /*border-radius: 10px;*/
+    /*border: solid 2px;*/
   }
 
   .col_project_picture_right {
     margin-left: var(--ifm-spacing-lg);
-    box-shadow: 0px 0px 8px 1px;
+    border-radius: 10px;
   }
 
   .col_schedule {

src/css/custom.css

@@ -31,7 +31,6 @@
   --ifm-background-color: white;
   --ifm-background-color-dark-mode: #1c1c16;
 
-
   --ifm-text-color: #1c1c16;
   --ifm-text-color-dark-mode: white;
 
@@ -74,7 +73,10 @@
   --ifm-text-color-large-portrait-card-dark-mode: #1c1c16;
 
   --ifm-background-color-project-card: var(--ifm-color-orange-light);
-  --ifm-background-color-project-card-dark-mode: #1c1c16;
+  --ifm-background-color-project-card-dark-mode:#1e1c00;
+
+  --ifm-text-color-project-card: #1c1c16;
+  --ifm-text-color-project-card-dark-mode: white;
 
   --ifm-color-text-on-primary-p1: #1c1c16;
   --ifm-color-text-on-primary-p1-dark-mode: black;