Update footer and fix a column width issue in projects page in deskto…

…p design.

.docusaurus/docusaurus.config.mjs

@@ -46,7 +46,7 @@ export default {
       "title": "",
       "logo": {
         "alt": "QuantStack Logo",
-        "src": "/img/quantstack/logo-website.svg"
+        "src": "img/quantstack/logo-website.svg"
       },
       "items": [
         {
@@ -115,17 +115,35 @@ export default {
           "title": " ",
           "items": [
             {
-              "html": "\n                      \n                      <img src=\"img/quantstack/logo-quantstack.svg\" alt=\"QuantStack logo\" width=\"200px\" />\n                      <div class=\"footer-astronaut\">\n                      <img src=\"img/quantstack/astronaut-footer.svg\" alt=\"Astronaut\" />\n                      </div>\n                    "
+              "label": " ",
+              "className": "quantstack-astronaut-footer",
+              "href": "/home"
             }
           ]
         },
         {
-          "title": " ",
+          "title": "Follow us on",
           "items": [
             {
-              "label": "Home",
-              "href": "/home/"
+              "label": "GitHub",
+              "className": "github-icon",
+              "href": "https://github.com/QuantStack"
+            },
+            {
+              "label": "LinkedIn",
+              "className": "linkedin-icon",
+              "href": "https://www.linkedin.com/company/quantstack/mycompany/"
             },
+            {
+              "label": "X",
+              "className": "x-icon",
+              "href": "https://twitter.com/QuantStack"
+            }
+          ]
+        },
+        {
+          "title": "Menu ",
+          "items": [
             {
               "label": "Projects",
               "href": "/projects/"
@@ -152,11 +170,12 @@ export default {
           "title": " ",
           "items": [
             {
-              "html": "\n              <div>\n              <div class=\"social-media-links\">\n                <a href=\"https://github.com/QuantStack\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Visit our Github page\">\n                        <img src=\"img/socialmedias/GH.svg\" alt=\"Visit our GitHub page\" width=\"36\" height=\"36\" />\n                </a>\n                <a href=\"https://www.linkedin.com/company/quantstack/mycompany/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Visit our LinkedIn page\">\n                <img src=\"img/socialmedias/LinkedIn.svg\" alt=\"Visit our LinkedIn page\" width=\"36\" height=\"36\" />\n                </a>\n                <a href=\"https://twitter.com/QuantStack\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Visit our X page\">\n                <img src=\"img/socialmedias/X.svg\" alt=\"Visit our X page\" width=\"36\" height=\"36\" />\n                </a>\n                </div>\n                  <div class=\"office-address\">\n                      <b>QuantStack Office </b><br/>\n                      16 avenue Curti <br/>\n                      94 100 Saint Maur des Fossés <br/>\n                      France\n                  </div>\n                </div>\n                    "
+              "html": "\n              \n                  <div class=\"office-address\">\n                  <b> QuantStack Office </b> <br/> \n                  <br/>\n                      16, avenue Curti <br/>\n                      94 100 Saint Maur des Fossés <br/>\n                      France\n                  </div>\n               \n                    "
             }
           ]
         }
       ],
+      "copyright": "Copyright © 2024 · QuantStack website · Built with Docusaurus",
       "style": "light"
     },
     "prism": {

docusaurus.config.ts

@@ -2,6 +2,8 @@ import { themes as prismThemes } from "prism-react-renderer";
 import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 
+let copyright = `Copyright © ${new Date().getFullYear()} · QuantStack website · Built with Docusaurus`;
+
 const config: Config = {
   title: "QuantStack",
   tagline: "",
@@ -62,8 +64,7 @@ const config: Config = {
       title: "",
       logo: {
         alt: "QuantStack Logo",
-        src: "/img/quantstack/logo-website.svg"
-
+        src: "img/quantstack/logo-website.svg",
       },
 
       items: [
@@ -129,30 +130,43 @@ const config: Config = {
         },
       ],
     },
-   
+
     footer: {
       links: [
         {
           title: " ",
           items: [
             {
-              html: `
-
-                      <img src="img/quantstack/logo-quantstack.svg" alt="QuantStack logo" width="200px" />
-                      <div class="footer-astronaut">
-                      <img src="img/quantstack/astronaut-footer.svg" alt="Astronaut" />
-                      </div>
-                    `,
+              label: " ",
+              className: "quantstack-astronaut-footer",
+              href: "/home",
             },
           ],
         },
+
         {
-          title: " ",
+          title: "Follow QuantStack on",
           items: [
             {
-              label: "Home",
-              href: "/home/",
+              label: "GitHub",
+              className: "github-icon",
+              href: "https://github.com/QuantStack",
+            },
+            {
+              label: "LinkedIn",
+              className: "linkedin-icon",
+              href: "https://www.linkedin.com/company/quantstack/mycompany/",
             },
+            {
+              label: "X",
+              className: "x-icon",
+              href: "https://twitter.com/QuantStack",
+            },
+          ],
+        },
+        {
+          title: "Menu ",
+          items: [
             {
               label: "Projects",
               href: "/projects/",
@@ -175,35 +189,29 @@ const config: Config = {
             },
           ],
         },
+
+
         {
           title: " ",
           items: [
             {
               html: `
-              <div>
-              <div class="social-media-links">
-                <a href="https://github.com/QuantStack" target="_blank" rel="noreferrer noopener" aria-label="Visit our Github page">
-                        <img src="img/socialmedias/GH.svg" alt="Visit our GitHub page" width="36" height="36" />
-                </a>
-                <a href="https://www.linkedin.com/company/quantstack/mycompany/" target="_blank" rel="noreferrer noopener" aria-label="Visit our LinkedIn page">
-                <img src="img/socialmedias/LinkedIn.svg" alt="Visit our LinkedIn page" width="36" height="36" />
-                </a>
-                <a href="https://twitter.com/QuantStack" target="_blank" rel="noreferrer noopener" aria-label="Visit our X page">
-                <img src="img/socialmedias/X.svg" alt="Visit our X page" width="36" height="36" />
-                </a>
-                </div>
+
                   <div class="office-address">
-                      <b>QuantStack Office </b><br/>
-                      16 avenue Curti <br/>
+                  <b> QuantStack Office </b> <br/> 
+                  <br/>
+                      16, avenue Curti <br/>
                       94 100 Saint Maur des Fossés <br/>
                       France
                   </div>
-                </div>
+
                     `,
             },
           ],
         },
       ],
+
+      copyright: copyright,
     },
 
     prism: {

src/components/projects/desktop/ProjectDesktop.tsx

@@ -19,7 +19,7 @@ export default function ProjectDesktop({
               </div>
             </div>
             <div
-              className={"col col--3" + " " + styles.col_custom_picture_right}
+              className={"col col--4" + " " + styles.col_custom_picture_right}
               style={{ border: project.pictureBorderDesktop }}
             >
               <div className={styles.project_picture}></div>

src/css/custom.css

@@ -45,11 +45,13 @@
   --ifm-spacing-lg: 24px;
   --ifm-spacing-xl: 36px;
   --ifm-spacing-2xl: 56px;
+  --ifm-spacing-7xl: 240px;
   --ifm-spacing-3xl: 64px;
   --ifm-spacing-4xl: 96px;
   --ifm-spacing-5xl: 120px;
   --ifm-spacing-6xl: 144px;
   --ifm-spacing-7xl: 240px;
+  --ifm-spacing-8xl: 400px;
 }
 
 @media only screen and (max-width: 996px) {
@@ -98,6 +100,10 @@
     line-height: 20px; /* 142.857% */
     letter-spacing: 0.25px;
   }
+
+  .office-address {
+
+  }
 }
 
 @media only screen and (min-width: 996px) {
@@ -148,7 +154,7 @@
     .container {
       max-width: none;
     }
-}
+  }
 
   p {
     font-family: var(--ifm-font-family-roboto);
@@ -159,6 +165,15 @@
     text-align: justify;
     /*margin-bottom: var(--ifm-spacing-lg);*/
   }
+  .office-address {
+    margin-left: var(--ifm-spacing-6xl);
+    text-align: start;
+    color: var(--ifm-color-neutral-black);
+  }
+  .social-media-links {
+    margin-left: var(--ifm-spacing-3xl);
+    text-align: start;
+  }
 }
 
 .spacing-none {
@@ -185,7 +200,6 @@
   height: var(--ifm-spacing-lg);
 }
 
-
 .spacing-xl {
   height: var(--ifm-spacing-xl);
 }
@@ -213,6 +227,11 @@
 .spacing-7xl {
   height: var(--ifm-spacing-7xl);
 }
+
+.spacing-8xl {
+  height: var(--ifm-spacing-8xl);
+}
+
 .link-container {
   display: flex;
   align-items: center;
@@ -290,12 +309,6 @@
   text-align: start;
 }
 
-.office-address {
-  margin-left: var(--ifm-spacing-3xl);
-  text-align: start;
-  color: var(--ifm-color-neutral-black);
-}
-
 /*
 Hyperlink states are crucial for accessibility.
 Please double check before changing the rules below.
@@ -401,11 +414,29 @@ a.menu__link:active {
   background: url(@site/static/img/quantstack/logo-website.svg);
   content: "";
   display: flex;
+  height: 40px;
+  width: 40px;
+  background-repeat: no-repeat;
+}
+
+.quantstack-astronaut {
+  background: url(@site/static/img/quantstack/astronaut.svg);
+  content: "";
+  display: flex;
   height: 100px;
   width: 100px;
   background-repeat: no-repeat;
 }
 
+.quantstack-astronaut-footer {
+  background: url(@site/static/img/quantstack/astronaut-footer.svg);
+  content: "";
+  display: flex;
+  height: 200px;
+  width: 200px;
+  background-repeat: no-repeat;
+}
+
 .github-icon:hover {
   opacity: 0.6;
 }