diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx index 947af9200..d9f6d5a45 100644 --- a/src/components/about/SmallPortraitCard.tsx +++ b/src/components/about/SmallPortraitCard.tsx @@ -4,6 +4,7 @@ import SocialMediaContacts from "./SocialMediaContacts"; import { useRef, useState } from "react"; import LargePortraitCard from "./LargePortraitCard"; import Avatar from "./Avatar"; +import Link from "@docusaurus/Link"; const contentStyle = { background: "white", diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css index 8347937ad..0856e6024 100644 --- a/src/components/about/styles.module.css +++ b/src/components/about/styles.module.css @@ -36,22 +36,22 @@ div .row { } .small_card_complete_name { - font-size: 16px; + font-size: 24px; font-family: var(--ifm-font-family-roboto); color: var(--ifm-color-primary-p2); font-style: normal; - font-weight: 500; + font-weight: 400; line-height: 24px; letter-spacing: 0.15px; margin: var(--ifm-spacing-xs) 0; } .small_card_position { - font-size: var(--ifm--font-size-normal); + font-size: 16px; font-family: var(--ifm-font-family-roboto); color: var(---ifm-text-color); font-style: normal; - font-weight: 600; + font-weight: 400; line-height: 24px; letter-spacing: 0.5px; color: var(--ifm-color-primary-p2); @@ -96,7 +96,7 @@ div .large_card_position { } .githubname { - font-size: var(--ifm-font-size-normal); + font-size: 16px; font-family: var(--ifm-font-family-roboto); font-style: normal; font-weight: 400; diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css index 98a797c84..70b0576ef 100644 --- a/src/components/careers/styles.module.css +++ b/src/components/careers/styles.module.css @@ -56,20 +56,21 @@ color: var(--ifm-text-color); text-align: center; font-family: var(--ifm-font-family-roboto); - font-size: 28px; + font-size: 22px; font-style: normal; font-weight: 400; - line-height: 36px; /* 128.571% */ + line-height: 128.571%; + margin-top: var(--ifm-spacing-lg); } .interview_position { color: var(--ifm-text-color); text-align: center; font-family: var(--ifm-font-family-roboto); - font-size: var(--ifm-font-size-normal); + font-size: 16px; font-style: normal; font-weight: 400; - line-height: 24px; /* 133.333% */ + line-height: 133.333%; letter-spacing: 0.5px; } diff --git a/src/components/projects/AllProjects.tsx b/src/components/projects/AllProjects.tsx index 7d8e5ab73..b27a382c1 100644 --- a/src/components/projects/AllProjects.tsx +++ b/src/components/projects/AllProjects.tsx @@ -6,14 +6,16 @@ export default function AllProjects() { return (
- ); + ) } diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx index 3a191ab14..93797fd92 100644 --- a/src/components/projects/ProjectCard.tsx +++ b/src/components/projects/ProjectCard.tsx @@ -1,12 +1,13 @@ import styles from "./styles.module.css"; export default function ProjectCard({ project }): JSX.Element { - /*if (project.reverse === "false") {*/ + const prefix = "project_picture_"; + const base = `${prefix}${project.name}` return (
{project.title}
@@ -17,9 +18,8 @@ export default function ProjectCard({ project }): JSX.Element { className={ "col col--4 flex-full-centered padding-none" + " " + - styles.col_project_picture_right + styles[base] } - style={{ border: project.pictureBorder }} >
); - /* } else if (project.reverse === "true") { - return ( -
-
-
-
- {project.pictureAltText} -
-
- -
-
{project.title}
-
- -
-
-
-
- ); - }*/ } diff --git a/src/components/projects/descriptions/projectsDetails.ts b/src/components/projects/descriptions/projectsDetails.ts index cb0681bc2..f04ccffa2 100644 --- a/src/components/projects/descriptions/projectsDetails.ts +++ b/src/components/projects/descriptions/projectsDetails.ts @@ -15,7 +15,6 @@ export const projectsDetails = [ pictureRoute: jupyterLogoUrl, pictureWidth: "198px", pictureHeight: "234px", - pictureBorder: "solid 1px var(--ifm-color-orange-jupyter)", pictureAltText: "Picture for Jupyter project showing its logo.", ProjectMD: JupyterMD, reverse: "false" @@ -26,7 +25,6 @@ export const projectsDetails = [ pictureRoute: xtensorLogoUrl, pictureWidth: "257px", pictureHeight: "257px", - pictureBorder: "solid 1px var(--ifm-color-green-xtensor)", pictureAltText: "Picture for Xtensor and Xsimd showing their respective logo.", ProjectMD: XTensorXSIMDMD, reverse: "true", @@ -37,7 +35,6 @@ export const projectsDetails = [ pictureRoute: condaforgeLogoUrl, pictureWidth: "196px", pictureHeight: "180px", - pictureBorder: "solid 1px var(--ifm-color-grey-condaforge)", pictureAltText: "Picture for Condaforge project showing its forge logo.", ProjectMD: CondaForgeMD, reverse:"false" @@ -48,7 +45,6 @@ export const projectsDetails = [ pictureRoute: robostackPictureUrl, pictureWidth: "189px", pictureHeight: "210px", - pictureBorder: "solid 1px rgb(146, 95, 218)", pictureAltText: "Picture for robotics project showing an illustration with a robotics device.", ProjectMD: RoboticsMD, reverse:"true" diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css index 4bf1e5ae6..3355a49bb 100644 --- a/src/components/projects/styles.module.css +++ b/src/components/projects/styles.module.css @@ -4,6 +4,7 @@ div .schedule_container { .project_title { margin-bottom: var(--ifm-spacing-md); + margin-top: var(--ifm-spacing-xl); font-family: var(--ifm-font-family-bebas-neue); font-size: var(--ifm-font-size-secondary-title); font-style: normal; @@ -29,10 +30,11 @@ div .project_title { @media only screen and (max-width: 996px) { /*Mobile*/ - .header_container{ + .header_container { padding-top: var(--ifm-spacing-2xl); background-color: var(--ifm-color-primary-p1); } + .header_title { padding-left: none; } @@ -46,20 +48,39 @@ div .project_title { line-height: 20px; letter-spacing: 0.25px; text-align: center; - margin-bottom: var(--ifm-spacing-2xl); + margin-bottom: var(--ifm-spacing-lg); 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; + .col_project_text p { + background-color: white; + text-align: justify; + } + + .project_picture_jupyter { + border: none; + margin-bottom: var(--ifm-spacing-xl); + } + + .project_picture_xtensorxsimd { + border: none; + margin-bottom: var(--ifm-spacing-xl); + } + + .project_picture_condaforge { + border: none; + margin-bottom: var(--ifm-spacing-xl); + } + + .project_picture_robotics { + border: none; + margin-bottom: var(--ifm-spacing-xl); } } @media only screen and (min-width: 996px) { /*Desktop*/ - .header_container{ + .header_container { margin-top: var(--ifm-spacing-6xl); } .header_title { @@ -72,7 +93,7 @@ div .project_title { font-size: 22px; font-style: normal; font-weight: 400; - line-height: 28px; + line-height: 28px; margin-bottom: var(--ifm-spacing-3xl); padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl); } @@ -81,22 +102,34 @@ div .project_title { text-align: center; } - .col_project_text { + .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;*/ } - .col_project_picture_left { - margin: none; + .project_picture_jupyter { + border: solid 1px var(--ifm-color-orange-jupyter); + margin-bottom: var(--ifm-spacing-lg); border-radius: 10px; + } + + .project_picture_xtensorxsimd { + border: solid 1px var(--ifm-color-green-xtensor); margin-bottom: var(--ifm-spacing-lg); + border-radius: 10px; } - .col_project_picture_right { + .project_picture_condaforge { + border: solid 1px var(--ifm-color-grey-condaforge); + margin-bottom: var(--ifm-spacing-lg); border-radius: 10px; + } + + .project_picture_robotics { + border: solid 1px rgb(146, 95, 218); margin-bottom: var(--ifm-spacing-lg); + border-radius: 10px; } } diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx index 2715653d7..f6cbac94b 100644 --- a/src/components/services/SpecialProjects.tsx +++ b/src/components/services/SpecialProjects.tsx @@ -3,23 +3,26 @@ import SpecialProjectsIllustration from "@site/static/img/illustrations/special_ export default function SpecialProjects() { return ( -
-
-
-
-

Special projects

- -
-
- + <> +
+
+
+
+

Special projects

+ +
+
+ +
-
+
+ ); } diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css index 33b070250..260286fd7 100644 --- a/src/components/services/styles.module.css +++ b/src/components/services/styles.module.css @@ -6,7 +6,7 @@ /*Mobile*/ .transition { font-family: var(--ifm-font-family-bebas-neue); - font-size: 40px; + font-size: 24px; font-style: normal; font-weight: 600; line-height: 150%; @@ -20,7 +20,7 @@ /*Desktop*/ .transition { font-family: var(--ifm-font-family-bebas-neue); - font-size: 40px; + font-size: 32px; font-style: normal; font-weight: 600; line-height: 150%; diff --git a/src/css/custom.css b/src/css/custom.css index 4511bef46..e6c6d9a98 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -193,7 +193,7 @@ ul { h1 { color: var(--ifm-text-color-main-title); font-family: var(--ifm-font-family-bebas-neue); - font-size: 24px; + font-size: 32px; font-style: normal; font-weight: 600; line-height: 150%; /* 36px */ @@ -223,6 +223,7 @@ ul { li { font-size: 14px; + margin-left: 24px; } .blue-banner-container {