Merge pull request #149 from HaudinFlorence/fix_alignment_issues_in_mobile_design

Fix alignment issues in mobile design

Author: SylvainCorlay

.github/workflows/static.yml

@@ -51,4 +51,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

docusaurus.config.ts

@@ -16,7 +16,7 @@ const config: Config = {
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "/QuantStack/", // Usually your GitHub org/user name.
+  organizationName: "/HaudinFlorence/", // Usually your GitHub org/user name.
   projectName: "quantstack.github.io", // Usually your repo name.
 
   onBrokenLinks: "throw",

src/components/about/styles.module.css

@@ -24,7 +24,7 @@
   line-height: 20px;
   letter-spacing: 0.25px;
   color: var(--ifm-text-color-on-primary-p1);
-  text-align: center;
+  text-align: justify;
 }
 
 div .row {
@@ -138,9 +138,9 @@ div .join_the_team_text {
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .value_card {
-    height: 400px;
+    height: 420px;
     width: 264px;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-lg);
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
     border-radius: 8px;
     box-shadow: 0px 0px 8px 1px #c8c8c7;
     background-color: var(--ifm-color-primary-p1);
@@ -158,6 +158,11 @@ div .join_the_team_text {
     color: var(--ifm-text-color-on-primary-p1);
   }
 
+  .value_text p {
+    text-align: justify;
+    padding: 0;
+  }
+
   .large_portrait_card {
     width: 100%;
     height: 100%;
@@ -189,7 +194,7 @@ div .join_the_team_text {
 @media only screen and (min-width: 996px) {
   /*Desktop*/
   .value_card {
-    height: 540px;
+    height: 460px;
     width: 264px;
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
     border-radius: 8px;

src/components/home/WhatWeDo/styles.module.css

@@ -27,9 +27,15 @@ div .topics_header {
 
   .topics_card {
     width: 100%;
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-lg);
+    text-align: justify;
+  }
+
+  .topics_card .p {
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-lg);
   }
 
+
   .services_link_desktop {
     display: none;
    }

src/components/projects/AllProjects.tsx

@@ -1,18 +1,23 @@
 import { projectsDetails } from "./descriptions/projectsDetails";
-import ProjectCard from "./ProjectCard"
+import ProjectCard from "./ProjectCard";
+import styles from "./styles.module.css";
 
 export default function AllProjects() {
   return (
-    <div className="container flex-full-centered" style={{marginBottom: "var(--ifm-spacing-3xl)"}}>
-        <ul className="row">
-          {projectsDetails.map((project, index) => {
-            return(
-              <li className="projects-list" key={index}>
-                <div className="col">
-                  <ProjectCard project={project}/>
-                </div>
-              </li>
-            )
+    <div
+      className={
+        "container flex-full-centered" + " " + styles.all_projects_container
+      }
+    >
+      <ul className="row --no-gutters">
+        {projectsDetails.map((project, index) => {
+          return (
+            <li className="projects-list" key={index}>
+              <div className="col" style={{ paddingLeft: "0" }}>
+                <ProjectCard project={project} />
+              </div>
+            </li>
+          );
         })}
       </ul>
     </div>

src/components/projects/ProjectCard.tsx

@@ -5,7 +5,7 @@ export default function ProjectCard({ project }): JSX.Element {
   const base = `${prefix}${project.name}` 
   return (
     <div className="container">
-      <div className="row row--no-gutters horizontally-centered">
+      <div className="row row--no-gutters">
         <div
           className={"col col--6 col" + " " + styles.project_text}
         >

src/components/projects/styles.module.css

@@ -17,7 +17,7 @@ div .project_title {
 
 .project_description {
   padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);
-  text-align: center;
+  text-align: justify;
 }
 
 .project_description p {
@@ -26,6 +26,10 @@ div .project_title {
 
 @media only screen and (max-width: 996px) {
   /*Mobile*/
+  .all_projects_container {
+    margin-bottom:  var(--ifm-spacing-3xl);
+    
+  }
 
   .header_container {
     padding-top: var(--ifm-spacing-2xl);
@@ -44,12 +48,12 @@ div .project_title {
     font-weight: 400;
     line-height: 20px;
     letter-spacing: 0.25px;
-    text-align: center;
+    text-align: justify;
     margin-bottom: var(--ifm-spacing-lg);
-    padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl);
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-xl);
   }
 
-  .col_project_text p {
+  .project_text {
     background-color: white;
     text-align: justify;
   }
@@ -77,6 +81,10 @@ div .project_title {
 
 @media only screen and (min-width: 996px) {
   /*Desktop*/
+
+  .all_projects_container {
+    margin:  0 0 var(--ifm-spacing-5xl) 0 ;
+  }
   .header_container {
     margin-top: var(--ifm-spacing-6xl);
   }
@@ -95,10 +103,6 @@ div .project_title {
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl);
   }
 
-  .header_text p {
-    text-align: center;
-  }
-
   .project_text {
     background-color: var(--ifm-color-orange-light);
     padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);

src/components/services/SpecialProjects.tsx

@@ -7,7 +7,7 @@ export default function SpecialProjects() {
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
           <div className="row">
-            <div className="col col--4 col--offset-2">
+            <div className={"col col--4 col--offset-2"} style={{textAlign:"justify"}}>
               <h2>Special projects</h2>
               <SpecialProjectsMD />
             </div>

src/components/services/Support.tsx

@@ -11,7 +11,7 @@ export default function Support() {
               <SupportIllustration  height={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
             </div>
           </div>
-          <div className={"col col--6"}>
+          <div className={"col col--6"} style={{textAlign:"justify"}}>
             <h2>Professional Support</h2>
             <SupportMD />
           </div>

src/css/custom.css

@@ -92,6 +92,7 @@
 
 ul {
   padding-left: 0;
+  margin-left:0;
 }
 
 .container {
@@ -211,7 +212,7 @@ ul {
     line-height: 150%;
     line-height: 20px;
     letter-spacing: 0.25px;
-    text-align: center;
+    padding: 0 var(--ifm-spacing-lg) 
   }
 
   li {
@@ -297,6 +298,7 @@ ul {
     margin: var(--ifm-spacing-2xl) 0;
   }
 
+  
   h1 {
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
@@ -637,10 +639,12 @@ a.menu__link:active {
 .cards-list {
   list-style-type: none;
   padding: none;
+  margin-left: 0;
 }
 
 .projects-list {
   list-style-type: none;
   padding: none;
+  margin-left:0;
   width: 100%;
-}
+}