From 2922d29c0343865e418283dc33c6511b7e58d5f6 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. Fix portrait pop up for mobile screen sizes. --- src/components/about/Avatar.tsx | 2 +- src/components/about/FourValues.tsx | 14 +- src/components/about/LargePortraitCard.tsx | 4 +- src/components/about/SmallPortraitCard.tsx | 2 +- src/components/about/SubTeam.tsx | 23 +- src/components/about/Team/QScollaborators.ts | 4 +- src/components/about/Team/coreTeam.ts | 40 ++- src/components/about/Team/leadershipTeam.ts | 12 +- src/components/about/index.tsx | 31 +-- src/components/about/styles.module.css | 144 ++++++----- src/components/blog/index.tsx | 2 +- src/components/blog/styles.module.css | 4 +- src/components/careers/Header.tsx | 14 -- src/components/careers/InterviewPicture.tsx | 2 +- src/components/careers/Interviews.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 | 23 +- .../home/WhatWeDo/styles.module.css | 73 ++++-- src/components/home/styles.module.css | 52 +++- src/components/projects/Header.tsx | 6 +- src/components/projects/ProjectCard.tsx | 18 +- src/components/projects/ScheduleAMeeting.tsx | 12 +- .../projects/styles.module copy.css | 199 --------------- src/components/projects/styles.module.css | 134 +++++----- 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 + 65 files changed, 723 insertions(+), 755 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..1e126ad94 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 ( -
+

@@ -14,21 +14,13 @@ export default function FourValues() {

    {valuesDetails.map((value, index) => (
  • -
    - -
    +
    • ))} diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx index d014e068f..c8f349622 100644 --- a/src/components/about/LargePortraitCard.tsx +++ b/src/components/about/LargePortraitCard.tsx @@ -29,7 +29,7 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
    @@ -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..19f72cc4d 100644 --- a/src/components/about/SubTeam.tsx +++ b/src/components/about/SubTeam.tsx @@ -1,26 +1,31 @@ import styles from "./styles.module.css"; -import Link from "@docusaurus/Link"; import PopupPortrait from "./SmallPortraitCard"; -export default function SubTeam ({ - description, +export default function SubTeam({ + subTeamName, subTeam, subTeamAvatarsUrls, subTeamBioComponents, }) { return ( -
    -

    {description}

    -
    +
    +

    {subTeamName}

    +
      {subTeam.map((person, index) => (
    • - +
      • ))} @@ -29,5 +34,3 @@ export default function SubTeam ({
    ); } - - diff --git a/src/components/about/Team/QScollaborators.ts b/src/components/about/Team/QScollaborators.ts index e1ce831bd..60231596e 100644 --- a/src/components/about/Team/QScollaborators.ts +++ b/src/components/about/Team/QScollaborators.ts @@ -21,7 +21,7 @@ export const QSCollaboratorsTeam = [ avatarRoute: "@site/static/img/avatars/Serge@2x.jpg", distinctionTitle: [], distinctionLink: [], - subTeam: "QSCollaboratorsTeam", + subTeamName: "QSCollaboratorsTeam", }, { completeName: "Romain Menegaux", @@ -37,7 +37,7 @@ export const QSCollaboratorsTeam = [ avatarRoute: "@site/static/img/avatars/Romain@2x.jpg", distinctionTitle: [], distinctionLink: [], - subTeam: "QSCollaboratorsTeam", + subTeamName: "QSCollaboratorsTeam", }, ]; export default QSCollaboratorsTeam; diff --git a/src/components/about/Team/coreTeam.ts b/src/components/about/Team/coreTeam.ts index ac48aa46c..9ed9c4180 100644 --- a/src/components/about/Team/coreTeam.ts +++ b/src/components/about/Team/coreTeam.ts @@ -96,8 +96,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Thorsten@2x.jpg", distinctionTitle:[], distinctionLink: [], - distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Le Duc Trung", @@ -113,8 +112,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Trung@2x.jpg", distinctionTitle:[], distinctionLink: [], - distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: " Andreas Trawöger", @@ -130,7 +128,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Andreas@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Denisa Checiu", @@ -146,7 +144,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Denisa@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Joël Lamotte", @@ -162,7 +160,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Joel@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Florence Haudin", @@ -178,7 +176,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Florence@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Nicolas Brichet", @@ -194,7 +192,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Nicolas@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Isabel Paredes", @@ -210,7 +208,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Isabel@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Gabriela Vives", @@ -226,7 +224,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Gabriela@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Hind Montassif", @@ -242,7 +240,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Hind@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Julien Jerphanion", @@ -258,7 +256,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Julien@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Anutosh Bhat", @@ -274,7 +272,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Anutosh@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Greg Mooney", @@ -290,7 +288,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Greg@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Ian Thomas", @@ -306,7 +304,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Ian@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Nour Cheour", @@ -322,7 +320,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Nour@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Meriem Ben Ismail", @@ -338,7 +336,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Meriem@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Alexis Placet", @@ -354,7 +352,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Alexis@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Anastasiia Sliusar", @@ -370,7 +368,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Anastasiia@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Kerim Birgi", @@ -387,7 +385,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Kerim@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, ]; diff --git a/src/components/about/Team/leadershipTeam.ts b/src/components/about/Team/leadershipTeam.ts index 90845f40e..fa2528693 100644 --- a/src/components/about/Team/leadershipTeam.ts +++ b/src/components/about/Team/leadershipTeam.ts @@ -44,7 +44,7 @@ export const leadershipTeam = [ avatarRoute: "@site/static/img/avatars/Sylvain@2x.png", distinctionTitle: ["ACM Software System Award"], distinctionLink: ["https://awards.acm.org/award_winners/corlay_8324973"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "Johan Mabille", @@ -61,7 +61,7 @@ export const leadershipTeam = [ distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "Martin Renou", @@ -78,7 +78,7 @@ export const leadershipTeam = [ distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "Jeremy Tuloup", @@ -95,7 +95,7 @@ export const leadershipTeam = [ distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { @@ -112,7 +112,7 @@ export const leadershipTeam = [ avatarRoute: "@site/static/img/avatars/Darian@2x.png", distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink:[ "https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "David Brochart", @@ -128,7 +128,7 @@ export const leadershipTeam = [ avatarRoute: "@site/static/img/avatars/David@2x.png", distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, ]; export default leadershipTeam; diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx index 7a5af1460..e223e9094 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 (
    -
    +
    @@ -38,19 +37,19 @@ 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..c27c91f83 100644 --- a/src/components/about/styles.module.css +++ b/src/components/about/styles.module.css @@ -1,14 +1,14 @@ .small_portrait_card { width: 279px; - height: 388px; - background-color: white; - color: var(--ifm-color-primary-p2); - border-radius: 8px; - box-shadow: 0px 0px 8px 1px #c8c8c7; - padding: var(--ifm-spacing-lg) var(--ifm-spacing-md); - text-align: center; - margin-bottom: var(--ifm-spacing-xl); -} + height: 388px; + background-color: white; + color: var(--ifm-color-primary-p2); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + padding: var(--ifm-spacing-lg) var(--ifm-spacing-md); + text-align: center; + margin-bottom: var(--ifm-spacing-xl); + } .avatar { filter: grayscale(1); @@ -18,9 +18,7 @@ width: 160px; } -.subteam_component { - margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl); -} + .team_description { font-family: var(--ifm-font-family-roboto); font-size: 22px; @@ -51,37 +49,12 @@ color: var(--ifm-text-color-on-primary-p1); } -.row_with_margins { - margin-top: var(--ifm-spacing-4xl) 0; -} div .row { margin-left: 0; margin-right: 0; } -.about_container { - margin-top: var(--ifm-spacing-6xl); -} - -.value_card { - height: 540px; - width: 264px; - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); - border-radius: 8px; - box-shadow: 0px 0px 8px 1px #c8c8c7; - background-color: var(--ifm-color-primary-p1); - margin-bottom: var(--ifm-spacing-xl); -} - -.large_portrait_card { - width: 1000px; - /*background-color: white;*/ - border-radius: 10px; - box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17); - padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl); -} - .bio_container { font-family: var(--ifm-font-family-roboto); font-size: 16px; @@ -89,9 +62,6 @@ div .row { font-weight: 400; line-height: 24px; /* 133.333% */ letter-spacing: 0.5px; -} - -.bio_container p { color: var(--ifm-color-primary-p2); } @@ -164,27 +134,6 @@ div .large_card_position { color: var(--ifm-color-primary-p2); } -.subteam_container { - margin-top: var(--ifm-spacing-2xl); -} - -.four_values_container { - margin-bottom: var(--ifm-spacing-5xl); -} - -.join_the_team_container { - font-family: var(--ifm-font-family-roboto); - font-size: 28px; - font-style: normal; - text-align: center; - font-weight: 400; - line-height: 36px; /* 128.571% */ - color: var(--ifm-color-secondary-s2); - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl); - max-width: none; - background-color: var(--ifm-color-secondary-s1); -} - div .join_the_team_title { color: var(--ifm-color-secondary-s2); } @@ -196,4 +145,75 @@ div .join_the_team_title { div .join_the_team_text { color: var(--ifm-color-secondary-s2); } -/*}*/ + +@media only screen and (max-width: 996px) { + /*Mobile*/ + .value_card { + height: 400px; + /*width: 264px;*/ + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + background-color: var(--ifm-color-primary-p1); + margin-bottom: var(--ifm-spacing-xl); + } + + .large_portrait_card { + /*width: 100%;*/ + height: 80%; + /*background-color: white;*/ + border-radius: 10px; + box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17); + padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl); + } + + .row_with_margin_top { + margin-top: var(--ifm-spacing-xl); + } + + .row_with_margins { + margin: var(--ifm-spacing-xl) 0; + } + + .subteam_container { + margin: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl); + } + +} + +@media only screen and (min-width: 996px) { + /*Desktop*/ + .value_card { + height: 540px; + width: 264px; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + background-color: var(--ifm-color-primary-p1); + margin-bottom: var(--ifm-spacing-xl); + } + + + + .large_portrait_card { + width: 1000px; + /*background-color: white;*/ + border-radius: 10px; + box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17); + padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl); + } + + .row_with_margin_top { + margin-top: var(--ifm-spacing-4xl); + } + + .row_with_margins { + margin: var(--ifm-spacing-4xl) 0; + } + + .subteam_container { + margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl); + } + + +} \ No newline at end of file diff --git a/src/components/blog/index.tsx b/src/components/blog/index.tsx index 62b56d018..470541d11 100644 --- a/src/components/blog/index.tsx +++ b/src/components/blog/index.tsx @@ -23,7 +23,7 @@ export default function BlogsComponent({ blogpostsDetails }) { 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/Interviews.tsx b/src/components/careers/Interviews.tsx index 85ff5692e..6b3c33734 100644 --- a/src/components/careers/Interviews.tsx +++ b/src/components/careers/Interviews.tsx @@ -3,7 +3,7 @@ import InterviewCard from "./InterviewCard"; export default function Interviews({ details, description }) { return ( -
    +

    {description}

      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..264bdd39a 100644 --- a/src/components/home/WhatWeDo/index.tsx +++ b/src/components/home/WhatWeDo/index.tsx @@ -1,25 +1,36 @@ 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..f5cbeed1a 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,57 @@ 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); + } + + .services_link_container_desktop { + display: none; + } } -.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-color-orange-jupyter); + } + + .projects_link_container { + display: none; + } + + .services_link_container_mobile { + 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..a52e6418a 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..09e9b34aa 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}
              @@ -23,7 +23,7 @@ export default function ProjectCard({ project }): JSX.Element { } style={{ border: project.pictureBorder }} > -
              +
              -
              +
              +
              -
              +
              +
              -
              -
              - 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..6a8b116ae 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); @@ -37,66 +26,73 @@ div .project_title { color: var(--ifm-color-primary-p2); } -/*.row_project { +@media only screen and (max-width: 996px) { + /*Mobile*/ + + .header_container { + background-color: var(--ifm-color-primary-p1); + } + + .header_title { + padding-left: none; + } + + .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; + margin-bottom: var(--ifm-spacing-2xl); + padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl); + } + + .col_project_text { background-color: var(--ifm-color-orange-light); + padding: var(--ifm-spacing-2xl) 0 var(--ifm-spacing-md) 0; 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: none; - border-radius: 10px; -} - -.col_project_picture_right { - 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); - 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); -} + /*box-shadow: 0px 0px 8px 1px #d0cb54;*/ + } +} + +@media only screen and (min-width: 996px) { + /*Desktop*/ + .header_title { + padding-left: var(--ifm-spacing-4xl); + } + + .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); + padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl); + } + + .col_project_text { + background-color: var(--ifm-color-orange-light); + padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl); + margin-bottom: var(--ifm-spacing-lg); + border-radius: 10px; + /*box-shadow: 0px 0px 8px 1px #d0cb54;*/ + } -.link_to_button_custom { - margin: var(--ifm-spacing-lg) 0; -} + .col_project_picture_left { + margin: none; + border-radius: 10px; + margin-bottom: var(--ifm-spacing-lg); + } -.schedule_a_meeting_container { - margin-top: var(--ifm-spacing-7xl); + .col_project_picture_right { + border-radius: 10px; + margin-bottom: var(--ifm-spacing-lg); + } } 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 @@ + + + + +