Design overhaul 2#337
Open
MMesch wants to merge 67 commits into
Open
Conversation
This reverts commit 21cfafb.
- Add --ifm-content-width (1200px) token and .page-content / .page-content-narrow global utility classes; replace main-container-with-margins + container nesting across Projects, Services, About, Careers, Fundable, Contact pages - Fix page-start spacing: change upper-container-with-margin-top from margin-top to padding-top (prevents CSS margin collapse through plain div wrappers) - Projects: fix ProjectCard 50/50 split (was col-6-offset-1 + col-4); simplify AllProjects and Header wrappers - Services/Contact: clean up col offsets to 50/50 splits; remove textAlign:justify - About: add values_row modifier so 4 value cards fill one row (flex:1 1 0); remove subteam_container side margins; fix SubTeam to use cards-row - Fundable: change sidebar from position:fixed to position:sticky so it stays aligned within the centered content band - Hero logos: constrain to page-content band so it doesn't overflow the content width - Remove legacy h1 asymmetric padding (8px 36px 8px 20px -> 0 with margin) - global p: text-align justify -> left
- Normalize all page title alignment to left (remove text--center from About, Careers, Contact, and fix spurious full-flex-centered on FourValues) - ProjectCard: col-8/col-4 split (was 6/6), border frame moved from the full column onto an inner wrapper around the logo; logo constrained to max 160x160px via object-fit; implement reverse alternating layout from project data - Project text box: reduce padding from 4xl/3xl to 2xl/2xl; remove text-align:justify - Fundable sidebar: replace Infima col--2/col--10 with plain flexbox (fundable_layout / fundable_sidebar / fundable_main); sidebar is 200px fixed width, sticky top:80px, hidden on mobile via media query — no more overlap
Replace section-based sidebar navigation with tag filter chips (All / Jupyter Ecosystem / Package Management / Scientific Computing / Apache Arrow) and a 3-column responsive card grid. Each card shows category label, title, truncated description, price and funding progress. Filter state is local React state; no routing changes needed. Remove MenuSidebar, fundable_layout flex split, and sidebar CSS. Also remove yarn.lock so Docusaurus uses npm.
…g away from sidebar
…ro li margin, stretch splits
Migrate Hero, News, WhatWeDo, AboutQS, SubTeam, ScheduleAMeeting, VisitWTJProfile to Section/CardGrid/Banner layout components. Remove blue-banner-container, cards-row, cards-list, row-with-margin-*, main-container-with-margins, upper-container-with-margin-top from custom.css.
Remove row-reverse, row-max-width, footer-astronaut, social-media-links, all spacing-* utilities, link-box, contact, fundable_projects, astronaut-footer, custom-progress-bar, page-content-narrow.
One h1 per page (page title only). Section headers become h2, subsections h3. Project taglines demoted from h2 to p. Hero tech list and project subtitles converted to p. Add h1 'About QuantStack' to about page. Rename 'We have worked with' to 'Trusted by'.
Add --ifm-bg-neutral/brand/emphasis to :root. Replace all raw color vars used as backgrounds with semantic vars throughout. Remove bg="light" variant, add bg="yellow". Home: TrustedBy→white, WhatWeDo→white, ProjectsOverview gets yellow header, AboutQS→dark consistently. Page intros (about, projects, services) use bg="yellow". Add card_transparent variant; TopicsCard uses it on white section.
Add navbarScroll client module toggling data-navbar-scrolled and data-navbar-home-top attributes. CSS transitions background/shadow on scroll. White links on home page over dark hero banner.
Use !important to beat Docusaurus CSS. Pull section_page_top and hero_container behind the sticky navbar with margin-top: -navbarHeight so the section background shows through the transparent navbar.
…arent social icons - WhatWeDo background → yellow; TopicsCard → transparent (no white-on-yellow) - ProjectsOverview header → white (breaks yellow→yellow adjacency) - ValueCard → white (lighter feel on About page) - FourValues split into its own white Section separate from yellow intro - All pages now open with yellow pageTop h1 + overview paragraph - Social icon SVGs: remove white circle background and black stroke - Logo grid: mix-blend-mode multiply for transparent PNG logos
…oilà, ipywidgets, JupyterLite, Arrow)
Member
Author
|
@SylvainCorlay the latest has the original font again. |
- static/img/icons/: 10 nav icon SVGs with no references - static/img/quantstack/: stale logo variants, astronaut variants, favicon.png, stray HTML file - static/img/banner/: 5 notebook-link-banner SVGs (not used in redesigned Hero) - static/img/avatars/avatars-jpg/: 33 @2x JPGs (PNG versions are used instead) - src/components/home/Hero/Banner.tsx: unused component
…k spotlight, copy refresh
…lues text - Move About component and getTeamByPageName into pages/about/index.tsx - Inline 4 values .md files into valuesDetails.ts as React components - Remove FourValues.tsx by inlining CardGrid into about page - Delete src/components/about/index.tsx (no longer needed) - Update LargePortraitCardPage to import from pages/about
- Inline all component logic (InterviewCard, JoinTheTeam, Interviews, etc.) - Inline interview data directly in page file - Move styles to pages/careers.module.css - Remove 9 component files
… SocialMediaContacts - Inline Avatar into SmallPortraitCard and LargePortraitCard - Inline SocialMediaContacts into LargePortraitCard - Inline SubTeam and ValueCard into pages/about/index.tsx - Move valuesDetails.ts from Values/ subfolder to about/ root - Delete Avatar.tsx, SubTeam.tsx, ValueCard.tsx, SocialMediaContacts.tsx, Values/
Update all import paths in team.ts, pages/about/index.tsx, and blogs/Fanny.tsx
…e wrapper - Search+grid logic in components/Blog.tsx (BlogGrid) - BlogpostCard shared component in components/BlogpostCard.tsx - Page header stays in pages/blog.tsx - Styles in pages/blog.module.css, data in pages/blogs/blogpostsDetails.js - Author names navy blue, red dot replaces left border accent - Delete components/blog/
…mponent - Move projectsDetails.ts and descriptions/ to pages/fundable/ - MainAreaFundableProjects in components keeps only filter+grid logic - Intro section and CTA live in pages/fundable.tsx (FundableContent) - LargeProjectCardPage imports FundableContent from pages/fundable
- Page layout (SplitSection + illustration + heading) inline in pages/contact.tsx - ContactForm component at components/ContactForm.tsx - Styles at pages/contact.module.css - Delete components/contact/
…nts/notebooklink/
Closed
…reakpoint experiments; notebooklink: manual edits
Member
Author
|
Some points for iteration:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete overhaul: