From c00c73094bd294648d714a05bf7b881a69d3cbe4 Mon Sep 17 00:00:00 2001 From: HaudinFlorence Date: Sun, 14 Jul 2024 14:09:33 +0200 Subject: [PATCH] Keep on working on style and css classes. Add svg pictures for the mobile menu. --- src/components/about/Avatar.tsx | 2 +- src/components/about/FourValues.tsx | 2 +- src/components/about/LargePortraitCard.tsx | 2 +- src/components/about/SmallPortraitCard.tsx | 2 +- src/components/about/SubTeam.tsx | 1 - src/components/about/index.tsx | 25 +- src/components/about/styles.module.css | 4 - src/components/blog/styles.module.css | 4 +- src/components/careers/Header.tsx | 14 -- src/components/careers/InterviewPicture.tsx | 2 +- src/components/careers/VisitWTJProfile.tsx | 17 +- src/components/careers/index.tsx | 23 +- src/components/careers/styles.module.css | 29 --- src/components/contact/index.tsx | 2 +- src/components/contact/styles.module.css | 3 - src/components/home/AboutQS/index.tsx | 33 +-- src/components/home/AboutQS/styles.module.css | 39 ++- src/components/home/Hero/LogosTableBy8.tsx | 64 ++--- src/components/home/Hero/index.tsx | 6 +- src/components/home/Hero/styles.module.css | 7 +- src/components/home/Home.tsx | 4 +- src/components/home/LearnMore/index.tsx | 13 +- .../home/LearnMore/styles.module.css | 33 +-- src/components/home/LinkToAboutUs.tsx | 2 +- src/components/home/LinkToBlogs.tsx | 2 +- src/components/home/LinkToContact.tsx | 2 +- src/components/home/LinkToServices.tsx | 2 +- src/components/home/News/index.tsx | 8 +- src/components/home/News/styles.module.css | 13 +- .../home/ProjectsOverview/Computing.tsx | 2 +- .../home/ProjectsOverview/Jupyter.tsx | 2 +- .../home/ProjectsOverview/Robotics.tsx | 2 +- .../home/ProjectsOverview/RoboticsReverse.tsx | 6 +- .../home/ProjectsOverview/SpecialProjects.tsx | 2 +- .../home/ProjectsOverview/SupplyChain.tsx | 2 +- .../ProjectsOverview/SupplyChainReversed.tsx | 6 +- .../home/ProjectsOverview/index.tsx | 3 +- .../home/ProjectsOverview/styles.module.css | 6 + src/components/home/WhatWeDo/Topics.tsx | 14 +- src/components/home/WhatWeDo/TopicsCard.tsx | 13 +- src/components/home/WhatWeDo/index.tsx | 16 +- .../home/WhatWeDo/styles.module.css | 65 +++-- src/components/home/styles.module.css | 52 +++- src/components/projects/Header.tsx | 4 +- src/components/projects/ProjectCard.tsx | 14 +- src/components/projects/ScheduleAMeeting.tsx | 12 +- .../projects/styles.module copy.css | 199 --------------- src/components/projects/styles.module.css | 41 +--- src/components/services/SpecialProjects.tsx | 2 +- src/components/services/Support.tsx | 2 +- src/components/services/index.tsx | 6 +- src/components/services/styles.module.css | 26 -- src/css/custom.css | 230 +++++++++++++++--- static/img/icons/AboutUs.svg | 5 + static/img/icons/Blog.svg | 5 + static/img/icons/Careers.svg | 5 + static/img/icons/ContactUs.svg | 5 + static/img/icons/Home.svg | 5 + static/img/icons/Projects.svg | 5 + static/img/icons/Services.svg | 5 + 60 files changed, 512 insertions(+), 610 deletions(-) delete mode 100644 src/components/projects/styles.module copy.css create mode 100644 static/img/icons/AboutUs.svg create mode 100644 static/img/icons/Blog.svg create mode 100644 static/img/icons/Careers.svg create mode 100644 static/img/icons/ContactUs.svg create mode 100644 static/img/icons/Home.svg create mode 100644 static/img/icons/Projects.svg create mode 100644 static/img/icons/Services.svg diff --git a/src/components/about/Avatar.tsx b/src/components/about/Avatar.tsx index b8e173e08..ccfa12038 100644 --- a/src/components/about/Avatar.tsx +++ b/src/components/about/Avatar.tsx @@ -11,7 +11,7 @@ export default function Avatar({ person }) { height={"160px"} alt={ "Avatar of " + - person.CompleteName + + person.completeName + "working at QuantStack as a " + person.position } diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx index 0d9615afc..6b87931b2 100644 --- a/src/components/about/FourValues.tsx +++ b/src/components/about/FourValues.tsx @@ -4,7 +4,7 @@ import { valuesDetails } from "./Values/valuesDetails"; export default function FourValues() { return ( -
+

diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx index d014e068f..b3e6bb51d 100644 --- a/src/components/about/LargePortraitCard.tsx +++ b/src/components/about/LargePortraitCard.tsx @@ -49,7 +49,7 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) { className={styles.avatar} alt={ "Avatar of " + - person.CompleteName + + person.completeName + "working at QuantStack as a " + person.position } diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx index 27f387c78..a27e5feee 100644 --- a/src/components/about/SmallPortraitCard.tsx +++ b/src/components/about/SmallPortraitCard.tsx @@ -56,7 +56,7 @@ export function SmallPortraitCard({ person, avatarUrl, setOffsets }) { height={"160px"} alt={ "Avatar of " + - person.CompleteName + + person.completeName + "working at QuantStack as a " + person.position } diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx index 9863704fc..37d753323 100644 --- a/src/components/about/SubTeam.tsx +++ b/src/components/about/SubTeam.tsx @@ -1,5 +1,4 @@ import styles from "./styles.module.css"; -import Link from "@docusaurus/Link"; import PopupPortrait from "./SmallPortraitCard"; export default function SubTeam ({ diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx index 7a5af1460..8afda826f 100644 --- a/src/components/about/index.tsx +++ b/src/components/about/index.tsx @@ -14,12 +14,11 @@ import FourValues from "./FourValues"; import SubTeam from "./SubTeam"; import LinkToContact from "../home/LinkToContact"; - export function About() { return (
-
+
@@ -59,24 +58,10 @@ export function About() {
-
-

- Join the team -

-
- QuantStack is seeking talents in the open-source scientific computing - community. Join a team committed to open-science and free software. -
+
+
Join the team
+ QuantStack is seeking talents in the open-source scientific computing + community. Join a team committed to open-science and free software.
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css index a7fe31b88..255f9d8ae 100644 --- a/src/components/about/styles.module.css +++ b/src/components/about/styles.module.css @@ -60,10 +60,6 @@ div .row { margin-right: 0; } -.about_container { - margin-top: var(--ifm-spacing-6xl); -} - .value_card { height: 540px; width: 264px; diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css index e6c1d0aa0..1c2bd06e8 100644 --- a/src/components/blog/styles.module.css +++ b/src/components/blog/styles.module.css @@ -90,6 +90,4 @@ div .blogpost_date { var(--ifm-spacing-lg); } -.blogposts_container { - margin: var(--ifm-spacing-6xl) 0; -} + diff --git a/src/components/careers/Header.tsx b/src/components/careers/Header.tsx index 475d3f23c..e69de29bb 100644 --- a/src/components/careers/Header.tsx +++ b/src/components/careers/Header.tsx @@ -1,14 +0,0 @@ -import styles from "./styles.module.css"; -import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png"; - -export default function Header() { - return ( -
-

Join the QuantStack team!

-
- {"Picture -
-
- ); - } - \ No newline at end of file diff --git a/src/components/careers/InterviewPicture.tsx b/src/components/careers/InterviewPicture.tsx index 3f60a13fb..346ae47cd 100644 --- a/src/components/careers/InterviewPicture.tsx +++ b/src/components/careers/InterviewPicture.tsx @@ -9,7 +9,7 @@ export default function InterviewPicture({ person }) { src={person.pictureRoute} alt={ "Picture of" + - person.CompleteName + + person.completeName + "working at QuantStack as a" + person.position } diff --git a/src/components/careers/VisitWTJProfile.tsx b/src/components/careers/VisitWTJProfile.tsx index 70456763f..2fdf1a938 100644 --- a/src/components/careers/VisitWTJProfile.tsx +++ b/src/components/careers/VisitWTJProfile.tsx @@ -1,22 +1,9 @@ -import styles from "./styles.module.css"; import LinkToWTJ from "./LinkToWTJ"; export default function VisitWTJProfile() { return ( -
-

- LEARN MORE ON OUR WELCOME TO THE JUNGLE WEB PAGE -

+
+ Learn more on our Welcome to the Jungle web page.
); diff --git a/src/components/careers/index.tsx b/src/components/careers/index.tsx index 8297ba5af..f0626cd37 100644 --- a/src/components/careers/index.tsx +++ b/src/components/careers/index.tsx @@ -4,15 +4,32 @@ import Interviews from "./Interviews"; import Header from "./Header"; import VisitWTJProfile from "./VisitWTJProfile"; import JoinTheTeam from "./JoinTheTeam"; +import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png"; export default function Careers() { return (
-
-
+
+
-
+

Join the QuantStack team!

+
+ { +
+
-
-
-
+
+
+
+
We are a team of expert of open-source developers, the very same people behind a number of technologies that you already use.
-
-
-
+
+
+
{
-
-
- - -
+
+
+
+ +
diff --git a/src/components/home/AboutQS/styles.module.css b/src/components/home/AboutQS/styles.module.css index 50e8015e7..78a6dcea0 100644 --- a/src/components/home/AboutQS/styles.module.css +++ b/src/components/home/AboutQS/styles.module.css @@ -1,15 +1,32 @@ -.about_us_container { - margin-top: var(--ifm-spacing-2xl); - background-color: var(--ifm-color-primary-p1); -} +@media only screen and (max-width: 996px) { + .aboutQS_container { + background-color: var(--ifm-color-secondary-s2); + color: white; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0 + var(--ifm-spacing-2xl); + text-align: center; + } + + .aboutQS_text { + font-size: 14px; + text-align: center; + margin-bottom: var(--ifm-spacing-xl); + } -div .text_container { - color: var(--ifm-color-primary-p2); } -.text_container { - font-size: 24px; - text-align: center; - margin-bottom: var(--ifm-spacing-lg); - padding: var(--ifm-spacing-5xl) var(--ifm-spacing-5xl); +@media only screen and (min-width: 996px) { + .aboutQS_container { + margin-top: var(--ifm-spacing-2xl); + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-color-primary-p2); + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-5xl) 0 + var(--ifm-spacing-5xl); + } + + .aboutQS_text { + font-size: 24px; + text-align: center; + margin-bottom: var(--ifm-spacing-lg); + } } diff --git a/src/components/home/Hero/LogosTableBy8.tsx b/src/components/home/Hero/LogosTableBy8.tsx index 9c72cd763..38ee0df16 100644 --- a/src/components/home/Hero/LogosTableBy8.tsx +++ b/src/components/home/Hero/LogosTableBy8.tsx @@ -67,28 +67,28 @@ export function LogosTable1() { return (
-
+
{"Logo
-
+
{"Logo
-
+
{"Logo
-
+
-
+
{"Logo
-
+
-
+
{"Logo
-
+
-
+
{"Logo
-
+
{"Logo
-
+
{"Logo
-
+
-
+
{"Logo
-
+
{"Logo
-
+
{"Logo
-
+
-
+
{"Logo
-
+
-
+
{"Logo
-
+
-
+
-
+
{"Logo
-
+
{"Logo
-
+
+
-
+
-
+
{"Logo
-
+
{"Logo
-
+
-
+
{"Logo
-
+
{"Logo
-
+
-
+
-
+

Open-source for discovery, science, and education

@@ -21,7 +21,7 @@ export function Hero() { Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.

-
+
+ <> - + ); } diff --git a/src/components/home/LearnMore/index.tsx b/src/components/home/LearnMore/index.tsx index 9467dc5ae..ce20d37e8 100644 --- a/src/components/home/LearnMore/index.tsx +++ b/src/components/home/LearnMore/index.tsx @@ -1,15 +1,12 @@ -import styles from "./styles.module.css"; import LinkToContact from "../LinkToContact"; +import styles from "./styles.module.css"; export default function LearnMore() { return ( -
-

WANT TO LEARN MORE?

- -
- Schedule a meeting and benefit from our expertise on Jupyter, - Conda-forge, high-performance computing, and open-source development. -
+
+
Want to learn more?
+ Schedule a meeting and benefit from our expertise on Jupyter, Conda-forge, + high-performance computing, and open-source development.
); diff --git a/src/components/home/LearnMore/styles.module.css b/src/components/home/LearnMore/styles.module.css index 7619d9aec..b0e623c6d 100644 --- a/src/components/home/LearnMore/styles.module.css +++ b/src/components/home/LearnMore/styles.module.css @@ -1,24 +1,13 @@ -div .learn_more_text { - color: var(--ifm-color-secondary-s2); +@media only screen and (max-width: 996px) { + /*Mobile*/ + .learn_more_container { + display: none; + } } -div .learn_more_title { - color: var(--ifm-color-secondary-s2); -} - -.learn_more_container { - background-color: var(--ifm-color-secondary-s1); - text-align: center; - padding: var(--ifm-spacing-2xl); -} - -.learn_more_text { - text-align: center; - font-family: var(--ifm-font-family-roboto); - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 36px; /* 128.571% */ - padding: var(--ifm-spacing-2xl); - color: var(--ifm-color-secondary-s2); -} +@media only screen and (max-width: 996px) { + /*Desktop*/ + .learn_more_container { + + } + } \ No newline at end of file diff --git a/src/components/home/LinkToAboutUs.tsx b/src/components/home/LinkToAboutUs.tsx index 3876b75e8..adbe99591 100644 --- a/src/components/home/LinkToAboutUs.tsx +++ b/src/components/home/LinkToAboutUs.tsx @@ -5,7 +5,7 @@ export default function LinkToAboutUs({label}) { return (
{label} diff --git a/src/components/home/LinkToBlogs.tsx b/src/components/home/LinkToBlogs.tsx index 22c9b85c9..2ae3acb53 100644 --- a/src/components/home/LinkToBlogs.tsx +++ b/src/components/home/LinkToBlogs.tsx @@ -3,7 +3,7 @@ import Link from "@docusaurus/Link"; export default function LinkToBlogs({label}) { return ( -
+
{label} diff --git a/src/components/home/LinkToServices.tsx b/src/components/home/LinkToServices.tsx index 4ddd3a15c..7c7c7252e 100644 --- a/src/components/home/LinkToServices.tsx +++ b/src/components/home/LinkToServices.tsx @@ -5,7 +5,7 @@ export default function LinkToServices({label}) { return (
{label} diff --git a/src/components/home/News/index.tsx b/src/components/home/News/index.tsx index 6ca295afb..aa7b6f79e 100644 --- a/src/components/home/News/index.tsx +++ b/src/components/home/News/index.tsx @@ -1,6 +1,5 @@ import BlogpostCard from "../../blog/BlogpostCard"; import blogpostsDetails from "@site/src/components/blog/blogpostsDetails.json"; -import Link from "@docusaurus/Link"; import styles from "./styles.module.css"; import LinkToBlogs from "../LinkToBlogs"; @@ -8,12 +7,13 @@ export default function News() { const numberOfBlogs = blogpostsDetails.length; return (
-
+
-

Recent blog contributions

+

Recent blog contributions

+
-
    +
    • +
      +
      +
      +

      Special projects

      diff --git a/src/components/home/ProjectsOverview/SupplyChain.tsx b/src/components/home/ProjectsOverview/SupplyChain.tsx index 301d7b40e..599579e70 100644 --- a/src/components/home/ProjectsOverview/SupplyChain.tsx +++ b/src/components/home/ProjectsOverview/SupplyChain.tsx @@ -4,7 +4,7 @@ import MambaPictureUrl from "@site/static/img/projects/mamba_console.png"; export default function SupplyChainProjects() { return ( -
      +
      +
      +
      diff --git a/src/components/home/ProjectsOverview/styles.module.css b/src/components/home/ProjectsOverview/styles.module.css index 2fef72356..444c67f83 100644 --- a/src/components/home/ProjectsOverview/styles.module.css +++ b/src/components/home/ProjectsOverview/styles.module.css @@ -1,3 +1,9 @@ +@media (max-width: 996px) { + .projects_overview_container { + display: none; + } +} + .project_desktop { margin-bottom: var(--ifm-spacing-3xl); } diff --git a/src/components/home/WhatWeDo/Topics.tsx b/src/components/home/WhatWeDo/Topics.tsx index 9536e1a07..299818d2c 100644 --- a/src/components/home/WhatWeDo/Topics.tsx +++ b/src/components/home/WhatWeDo/Topics.tsx @@ -1,25 +1,19 @@ -import styles from "./styles.module.css"; import { topicsDetails } from "./topics/topicsDetails"; import { TopicsCard } from "./TopicsCard"; import JupyterMD from "./topics/Jupyter.md"; import SupplyChainMD from "./topics/SupplyChain.md"; import ComputingMD from "./topics/Computing.md"; - const TopicsDescriptions = [JupyterMD, SupplyChainMD, ComputingMD]; export function Topics() { return (
      -
      -
        +
        +
          {topicsDetails.map((topics, index) => (
        • -
          +
          -
          {topics.name}
          -
          +
          +
          + {topics.name} +
          +
          ); } -export default TopicsCard; \ No newline at end of file +export default TopicsCard; diff --git a/src/components/home/WhatWeDo/index.tsx b/src/components/home/WhatWeDo/index.tsx index 092990236..639da4997 100644 --- a/src/components/home/WhatWeDo/index.tsx +++ b/src/components/home/WhatWeDo/index.tsx @@ -1,24 +1,30 @@ import styles from "./styles.module.css"; import Topics from "./Topics"; import LinkToServices from "../LinkToServices"; -import { useEffect, useState } from "react"; - +import LinkToProjects from "../LinkToProjects"; export function WhatWeDo() { return (
          -
          +
          +
          + +
          +
          +
          +
          +

          What we do

          -
          +
          -
          +
          diff --git a/src/components/home/WhatWeDo/styles.module.css b/src/components/home/WhatWeDo/styles.module.css index a12014ea2..f8bc679e9 100644 --- a/src/components/home/WhatWeDo/styles.module.css +++ b/src/components/home/WhatWeDo/styles.module.css @@ -1,10 +1,3 @@ -@media only screen and (max-width: 996px) { - /*Mobile*/ - .header { - display: none; - } -} - .topics_header { font-family: var(--ifm-font-family-rubik-one); font-size: var(--ifm-font-size-secondary-title); @@ -19,21 +12,49 @@ div .topics_header { color: var(--ifm-color-neutral-n2); } -.header { - color: var(--ifm-text-color-on-primary-p1); -} -.whatwedo_container { - background-color: var(--ifm-color-primary-p1); - padding: var(--ifm-spacing-2xl); - margin-top: var(--ifm-spacing-5xl); +@media only screen and (max-width: 996px) { + /*Mobile*/ + .header { + display: none; + } + + + .whatwedo_container { + /*background-color: var(--ifm-color-primary-p1);*/ + padding: 0; + margin-top: 0; + } + + .topics_card { + width: 100%; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); + margin-bottom: var(--ifm-spacing-xl); + } } -.topics_card { - height: 462px; - width: 350px; - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); - border-radius: 8px; - box-shadow: 0px 0px 8px 1px #c8c8c7; - background-color: var(--ifm-color-orange-light); - margin-bottom: var(--ifm-spacing-2xl); +@media only screen and (min-width: 996px) { + .header { + color: var(--ifm-text-color-on-primary-p1); + } + + .projects_link_container { + display: none; + } + + .whatwedo_container { + background-color: var(--ifm-color-primary-p1); + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0 + var(--ifm-spacing-2xl); + margin-top: var(--ifm-spacing-3xl); + } + + .topics_card { + height: 462px; + width: 350px; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + background-color: var(--ifm-color-orange-light); + margin-bottom: var(--ifm-spacing-xl); + } } diff --git a/src/components/home/styles.module.css b/src/components/home/styles.module.css index 9003e776a..50ded0cd5 100644 --- a/src/components/home/styles.module.css +++ b/src/components/home/styles.module.css @@ -1,6 +1,48 @@ -.link_to { - background-color: var(--ifm-color-orange-jupyter); - color: var(--ifm-text-color-on-primary-p1); - width: 358px; - font-weight: 700; +@media only screen and (max-width: 996px) { + /*Mobile*/ + .link_to { + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + .link_to_services { + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + + .link_to_about_us { + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } +} + +@media only screen and (min-width: 996px) { + .link_to { + background-color: var(--ifm-color-orange-jupyter); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + .link_to_services { + background-color: var(--ifm-color-orange-jupyter); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + + .link_to_about_us { + background-color: var(--ifm-color-secondary-s2); + color: white; + width: 358px; + font-weight: 700; + } } diff --git a/src/components/projects/Header.tsx b/src/components/projects/Header.tsx index 268459f71..08e773c77 100644 --- a/src/components/projects/Header.tsx +++ b/src/components/projects/Header.tsx @@ -3,10 +3,10 @@ import HeaderMD from "./descriptions/Header.md"; export default function Header() { return ( -
          +
          -

          Working in the open

          +

          Working in the open

          diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx index 39a92fbec..bcdbfea25 100644 --- a/src/components/projects/ProjectCard.tsx +++ b/src/components/projects/ProjectCard.tsx @@ -3,8 +3,8 @@ import styles from "./styles.module.css"; export default function ProjectCard({ project }): JSX.Element { /*if (project.reverse === "false") {*/ return ( -
          -
          +
          +
          {project.title}
          @@ -36,15 +36,11 @@ export default function ProjectCard({ project }): JSX.Element { ); /* } else if (project.reverse === "true") { return ( -
          -
          +
          +
          +
          -
          -
          - Schedule a meeting and benefit from our experience in Python, C++, - in-browser data visualization, and high-performance computing. -
          - +
          + Schedule a meeting and benefit from our experience in Python, C++, + in-browser data visualization, and high-performance computing. +
          diff --git a/src/components/projects/styles.module copy.css b/src/components/projects/styles.module copy.css deleted file mode 100644 index 3c09ade7e..000000000 --- a/src/components/projects/styles.module copy.css +++ /dev/null @@ -1,199 +0,0 @@ -.h1_custom { - padding: 0; -} - -div .schedule_container { - background-color: var(--ifm-color-secondary-s1); -} - -/*@media only screen and (max-width: 480px) { - /*Mobile */ - .project_container { - padding: var(--ifm-spacing-sm) var(--ifm-spacing-lg); - margin-bottom: var(--ifm-spacing-xs); - width: 200px; - height: 100px; - background-color: var(--ifm-color-orange-light); - } - - .header_text { - font-family: var(--ifm-font-family-roboto); - color: var(--ifm-color-primary-p2); - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 20px; - letter-spacing: 0.25px; - text-align: center; - padding: 0 var(--ifm-spacing-lg); - } - - .project_title_small { - margin-top: var(--ifm-spacing-md); - color: var(--ifm-color-neutral-n1); - font-family: var(--ifm-font-family-roboto); - font-size: var(--ifm-font-size-normal); - font-style: normal; - font-weight: 400; - line-height: 24px; - letter-spacing: 0.5px; - width: 150px; - text-align: center; - } - - .header_container { - padding: var(--ifm-spacing-lg) 0; - background-color: var(--ifm-color-primary-p1); - } - - .ul.row.row_all_projects { - padding-left: 0; - } - - .schedule_container { - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-3xl); - } - - .schedule_text { - font-family: var(--ifm-font-family-roboto); - color: var(--ifm-color-secondary-s2); - font-size: 14px; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 20px; - letter-spacing: 0.1px; - text-align: center; - margin-bottom: var(--ifm-spacing-2xl); - } - - .project_image_container { - padding: var(--ifm-spacing-xl) 0; - text-align: center; - } - - .project_title_popup { - padding: 8px 32px 8px 20px; - text-align: left; - color: var(--ifm-text-color); - font-family: var(--ifm-font-family-bebas-neue); - font-size: 24px; - font-style: normal; - font-weight: 600; - line-height: 150%; - letter-spacing: 1.056px; - height: 52px; - } - - .project_description_container { - padding: var(--ifm-spacing-xl) var(--ifm-spacing-3xl); - } -/*} - -/*@media only screen and (min-width: 996px) { - /*Desktop */ - .project_container { - margin-bottom: var(--ifm-spacing-lg); - margin-left: 0; - padding: 0; - /*background-color: var(--ifm-color-orange-light);*/ - /*border-radius: 10px; - box-shadow: 0px 0px 8px 1px #d0cb54;*/ - } - - .project_title { - margin-bottom: var(--ifm-spacing-md); - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: bolder; - line-height: 150%; - text-align: start; - } - - div .project_title { - color: var(--ifm-color-primary-p2); - } - - .project_description { - /*padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);*/ - text-align: center; - } - - .project_description p { - color: var(--ifm-color-primary-p2); - } - - /*.row_project { - background-color: var(--ifm-color-orange-light); - border-radius: 10px; - box-shadow: 0px 0px 8px 1px #d0cb54; - width: 1200px; - }*/ - - .col_project_text { - background-color: var(--ifm-color-orange-light); - padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl); - border-radius: 10px; - /*box-shadow: 0px 0px 8px 1px #d0cb54;*/ - } - - .col_project_picture_left { - margin-right: var(--ifm-spacing-lg); - border-radius: 10px; - } - - .col_project_picture_right { - margin-left: var(--ifm-spacing-lg); - border-radius: 10px; - } - - .col_schedule { - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl); - margin: 0; - max-width: none; - } - - .header_text { - font-family: var(--ifm-font-family-roboto); - color: var(--ifm-color-primary-p2); - font-size: 22px; - font-style: normal; - font-weight: 400; - line-height: 28px; /* 142.857% */ - text-align: center; - margin-bottom: var(--ifm-spacing-6xl); - } - - .header_container { - margin-top: var(--ifm-spacing-6xl); - padding: 0; - } - - .schedule_text { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: 800; - line-height: 150%; - text-align: center; - margin-bottom: var(--ifm-spacing-2xl); - } - - div .schedule_text { - color: var(--ifm-color-secondary-s2); - } - - .link_to_button_custom { - margin: var(--ifm-spacing-lg) 0; - } - - .schedule_a_meeting_container { - margin-top: var(--ifm-spacing-7xl); - } - - .all_projects_desktop_container { - margin-left: var(--ifm-spacing-6xl); - margin-right: var(--ifm-spacing-6xl); - } -/*} diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css index 677fb667c..6bb94a700 100644 --- a/src/components/projects/styles.module.css +++ b/src/components/projects/styles.module.css @@ -1,18 +1,7 @@ -.h1_custom { - padding-left: var(--ifm-spacing-4xl); - margin-top: var(--ifm-spacing-6xl); -} - div .schedule_container { background-color: var(--ifm-color-secondary-s1); } -.project_container { - margin-bottom: var(--ifm-spacing-lg); - margin-left: 0; - padding: 0; -} - .project_title { margin-bottom: var(--ifm-spacing-md); font-family: var(--ifm-font-family-bebas-neue); @@ -60,11 +49,6 @@ div .project_title { border-radius: 10px; } -.col_schedule { - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl); - margin: 0; - max-width: none; -} .header_text { font-family: var(--ifm-font-family-roboto); @@ -75,28 +59,5 @@ div .project_title { line-height: 28px; /* 142.857% */ text-align: center; margin-bottom: var(--ifm-spacing-6xl); - padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl) -} - - -.schedule_text { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: 800; - line-height: 150%; - text-align: center; - margin-bottom: var(--ifm-spacing-2xl); -} - -div .schedule_text { - color: var(--ifm-color-secondary-s2); -} - -.link_to_button_custom { - margin: var(--ifm-spacing-lg) 0; -} - -.schedule_a_meeting_container { - margin-top: var(--ifm-spacing-7xl); + padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl); } diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx index e8da0bc13..a5da4f7d1 100644 --- a/src/components/services/SpecialProjects.tsx +++ b/src/components/services/SpecialProjects.tsx @@ -7,7 +7,7 @@ import SpecialProjectsIllustration from "@site/static/img/illustrations/special_ export function SpecialProjects() { return (
          -
          +

          Special projects

          diff --git a/src/components/services/Support.tsx b/src/components/services/Support.tsx index 5c9609d36..e897e32ed 100644 --- a/src/components/services/Support.tsx +++ b/src/components/services/Support.tsx @@ -5,7 +5,7 @@ import SupportIllustration from "/img/illustrations/support.svg"; export function Support() { return (
          -
          +
          diff --git a/src/components/services/index.tsx b/src/components/services/index.tsx index d80f64fad..d1fe0c1f2 100644 --- a/src/components/services/index.tsx +++ b/src/components/services/index.tsx @@ -6,16 +6,16 @@ import LinkToContact from "../home/LinkToContact"; export default function Services() { return ( -
          +
          Work with the people behind the technology.
          -
          +
          Sign a support retainer for QuantStack services in our ecosystem.
          diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css index be06f4a4b..ae5caa7b5 100644 --- a/src/components/services/styles.module.css +++ b/src/components/services/styles.module.css @@ -1,30 +1,4 @@ - .service_container { - margin-top: var(--ifm-spacing-6xl); - } - - .sign_a_support_container { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-weight: 800; - - color: var(--ifm-color-secondary-s2); - padding: var(--ifm-spacing-2xl) 0; - margin-top: var(--ifm-spacing-7xl); - } - - div .sign_a_support_container { - background-color: var(--ifm-color-secondary-s1); - } - - .sign_a_support_text { - margin-bottom: var(--ifm-spacing-2xl); - } - - div .sign_a_support_text { - color: var(--ifm-color-secondary-s2); - } - .h2_custom { color: var(--ifm-color-indigo-i1); } diff --git a/src/css/custom.css b/src/css/custom.css index 78020ec6b..065ba40bb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -88,42 +88,6 @@ ul { padding-left: 0; } -.main-container-with-margins { - margin-left: 96px; - margin-right: 96px; - display: flex; - justify-content: center; -} - -h1 { - color: var(--ifm-color-primary-p2); - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-main-title); - font-style: normal; - font-weight: 800; - line-height: 150%; - letter-spacing: 2.112px; - text-align: start; - padding: 8px 36px 8px 20px; -} - -h2 { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: bolder; - line-height: 150%; - text-align: start; -} - -p { - font-family: var(--ifm-font-family-roboto); - font-size: var(--ifm-font-size-normal); - font-style: normal; - letter-spacing: 0.25px; - text-align: justify; -} - .container { max-width: none; padding: 0; @@ -141,11 +105,200 @@ p { } } +/****** Class that are specific for smaller screens*/ @media (max-width: 996px) { .main-container-with-margins { - margin: 0; + margin-left: 42px; + margin-right: 42px; + } + + .upper-container-with-margin-top { + margin-top: var(--ifm-spacing-2xl) + } + + h1 { + color: var(--ifm-text-color-main-title); + font-family: var(--ifm-font-family-bebas-neue); + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 150%; /* 36px */ + letter-spacing: 1.056px; + text-align: center; + padding: 0; + } + + h2 { + font-family: var(--ifm-font-family-bebas-neue); + font-size: 24px; + font-style: normal; + font-weight: bolder; + line-height: 150%; + text-align: center; + } + + p { + font-family: var(--ifm-font-family-roboto); + font-size: 14px; + font-style: normal; + line-height: 150%; + line-height: 20px; + letter-spacing: 0.25px; + text-align: center; + } + + li { + font-size: 14px; + } + + .blue-banner-container { + font-family: var(--ifm-font-family-roboto); + font-size: 16px; + font-weight: 500; + color: var(--ifm-color-secondary-s2); + padding-top: var(--ifm-spacing-2xl); + background-color: var(--ifm-color-secondary-s1); + line-height: 20px; + letter-spacing: 0.1px; + text-align: center; + } + + .blue-banner-header { + text-align: center; + font-family: var(--ifm-font-family-bebas-neue); + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 2.112px; + background-color: var(--ifm-color-secondary-s1); + color: var(--ifm-color-secondary-s2); + } + .link-to-button { + width: 258px; + height: 56px; + font-family: var(--ifm-font-family-roboto); + border-radius: 35px; + background: var(--ifm-color-secondary-s2); + color: white; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: -0.176px; + padding: 16px 36px; + border: none; + text-align: center; + margin-top: var(--ifm-spacing-lg); + margin-bottom: var(--ifm-spacing-lg); + } + + .link-box { + height: 59px; + width: auto; + display: flex; + align-items: center; + justify-content: center; + } +} +/***************************************************/ + +/****** Class that are specific to larger screens*/ +@media (min-width: 996px) { + .main-container-with-margins { + margin-left: 96px; + margin-right: 96px; + display: flex; + justify-content: center; + } + + .upper-container-with-margin-top { + margin-top: var(--ifm-spacing-6xl) + } + + h1 { + color: var(--ifm-color-primary-p2); + font-family: var(--ifm-font-family-bebas-neue); + font-size: var(--ifm-font-size-main-title); + font-style: normal; + font-weight: 800; + line-height: 150%; + letter-spacing: 2.112px; + text-align: start; + padding: 8px 36px 8px 20px; + } + + h2 { + font-family: var(--ifm-font-family-bebas-neue); + font-size: var(--ifm-font-size-secondary-title); + font-style: normal; + font-weight: bolder; + line-height: 150%; + text-align: start; + } + + p { + font-family: var(--ifm-font-family-roboto); + font-size: var(--ifm-font-size-normal); + font-style: normal; + letter-spacing: 0.25px; + text-align: justify; + } + + .blue-banner-container { + text-align: center; + font-family: var(--ifm-font-family-roboto); + font-size: 28px; + font-style: normal; + font-weight: 500; + line-height: 150%; + background-color: var(--ifm-color-secondary-s1); + color: var(--ifm-color-secondary-s2); + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-4xl) 0 var(--ifm-spacing-4xl); } + + .blue-banner-header { + text-align: center; + font-family: var(--ifm-font-family-bebas-neue); + font-size: 48px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 2.112px; + background-color: var(--ifm-color-secondary-s1); + color: var(--ifm-color-secondary-s2); + margin-bottom:var(--ifm-spacing-2xl); + } + + .link-to-button { + width: 258px; + height: 56px; + font-family: var(--ifm-font-family-roboto); + border-radius: 35px; + background: var(--ifm-color-secondary-s2); + color: white; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: -0.176px; + padding: 16px 36px; + border: none; + text-align: center; + margin-top: var(--ifm-spacing-2xl); + margin-bottom: var(--ifm-spacing-2xl); + } + + .link-box { + height: 59px; + width: auto; + display: flex; + align-items: center; + justify-content: center; + } + } +/***********************************************************/ .social-media-links { margin-left: var(--ifm-spacing-3xl); @@ -223,6 +376,8 @@ p { padding: 16px 36px; border: none; text-align: center; + margin-top: var(--ifm-spacing-2xl); + margin-bottom: var(--ifm-spacing-2xl); } .link-box { @@ -231,7 +386,6 @@ p { display: flex; align-items: center; justify-content: center; - margin-top: var(--ifm-spacing-2xl); } .quantstack-address { diff --git a/static/img/icons/AboutUs.svg b/static/img/icons/AboutUs.svg new file mode 100644 index 000000000..c81741b60 --- /dev/null +++ b/static/img/icons/AboutUs.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Blog.svg b/static/img/icons/Blog.svg new file mode 100644 index 000000000..41c23a2e0 --- /dev/null +++ b/static/img/icons/Blog.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Careers.svg b/static/img/icons/Careers.svg new file mode 100644 index 000000000..2ec079ca6 --- /dev/null +++ b/static/img/icons/Careers.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/ContactUs.svg b/static/img/icons/ContactUs.svg new file mode 100644 index 000000000..b209458fe --- /dev/null +++ b/static/img/icons/ContactUs.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Home.svg b/static/img/icons/Home.svg new file mode 100644 index 000000000..336989fb0 --- /dev/null +++ b/static/img/icons/Home.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Projects.svg b/static/img/icons/Projects.svg new file mode 100644 index 000000000..671b6aa56 --- /dev/null +++ b/static/img/icons/Projects.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Services.svg b/static/img/icons/Services.svg new file mode 100644 index 000000000..80a753822 --- /dev/null +++ b/static/img/icons/Services.svg @@ -0,0 +1,5 @@ + + + + +