Skip to content

Commit a5b524a

Browse files
dhuzarddhuzard
committed
feat: restructure credits section layout and enhance responsiveness across components
1 parent 869a935 commit a5b524a

10 files changed

Lines changed: 219 additions & 45 deletions

File tree

‎site/content/home.md‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -330,53 +330,55 @@ sections:
330330
331331
Centre de Recherche en Neurosciences de Lyon (CRNL), Located in: Centre Hospitalier Le Vinatier
332332
Address: CRNL - CH Le Vinatier - Bâtiment 462 - Neurocampus, 95 Bd Pinel, 69500 Bron
333-
- type: "text"
333+
- type: "columns"
334334
title: "Credits"
335-
body: |
336-
**The Dream Team Behind It\***
337-
338-
**Project Lead and Vision**
339-
- Eric Burguiere
340-
341-
**Software & Firmware**
342-
- Zenneddine Ajili
343-
- Guillaume Penderia
344-
- Charlie Rousseau
345-
346-
**Documentation & Open Repository**
347-
- [Damien Huzard](https://www.neuronautix.com)
335+
columns:
336+
- heading: "Leadership & science"
337+
body: |
338+
**Project Lead and Vision**
339+
- Eric Burguiere
348340
349-
**Scientific Conception and Contributions**
350-
- Eric Burguiere
351-
- Marine Euvrard
352-
- Daniela Domingues
353-
- Nabil Benzina
341+
**Scientific Conception and Contributions**
342+
- Eric Burguiere
343+
- Marine Euvrard
344+
- Daniela Domingues
345+
- Nabil Benzina
346+
- heading: "Engineering & platform"
347+
body: |
348+
**Software & Firmware**
349+
- Zenneddine Ajili
350+
- Guillaume Penderia
351+
- Charlie Rousseau
354352
355-
**Web Platform**
356-
- Damien Huzard
357-
- S. Lizbeth Mondragon-Gonzalez
353+
**Electronics**
354+
- Pierre Tissier
355+
- Pierre Pavlov
358356
359-
**Electronics**
360-
- Pierre Tissier
361-
- Pierre Pavlov
357+
**Mechanical Design**
358+
- Pierre Tissier
359+
- Lucile Lebegue
360+
- heading: "Documentation, web & validation"
361+
body: |
362+
**Documentation & Open Repository**
363+
- [Damien Huzard](https://www.neuronautix.com)
362364
363-
**Validation & Beta Testing**
364-
- Marine Euvrard
365-
- Daniela Domingues
366-
- Eliana Lousada
367-
- Oriana Lavielle
368-
- Anne Lorenz
369-
- Youenn Travert
370-
- Christianne Schreiweiss
365+
**Web Platform**
366+
- Damien Huzard
367+
- S. Lizbeth Mondragon-Gonzalez
371368
372-
**Mechanical Design**
373-
- Pierre Tissier
374-
- Lucile Lebegue
369+
**Graphic Design**
370+
- S. Lizbeth Mondragon-Gonzalez
375371
376-
**Graphic Design**
377-
- S. Lizbeth Mondragon-Gonzalez
372+
**Validation & Beta Testing**
373+
- Marine Euvrard
374+
- Daniela Domingues
375+
- Eliana Lousada
376+
- Oriana Lavielle
377+
- Anne Lorenz
378+
- Youenn Travert
379+
- Christianne Schreiweiss
378380
379-
\*All versions included
381+
\*All versions included
380382
---
381383

382384
BEATBox lets you move beyond short, stressful sessions toward continuous, ecological monitoring inside the home cage.

‎site/src/app/globals.css‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,15 @@
5858

5959
html {
6060
scroll-behavior: smooth;
61+
overflow-x: hidden;
6162
}
6263

6364
body {
6465
@apply min-h-screen antialiased;
6566
position: relative;
6667
background: var(--page-bg);
6768
color: var(--text-main);
69+
overflow-x: hidden;
6870
}
6971

7072
body::before {
@@ -90,9 +92,11 @@ a {
9092
}
9193

9294
main {
93-
@apply mx-auto max-w-6xl px-4 py-6 md:py-10;
95+
@apply mx-auto max-w-6xl py-6 md:py-10;
9496
position: relative;
9597
z-index: 1;
98+
width: 100%;
99+
min-width: 0;
96100
}
97101

98102
.prose strong {
@@ -125,3 +129,15 @@ main {
125129
.nav-link:hover {
126130
color: var(--text-strong);
127131
}
132+
133+
@media (max-width: 640px) {
134+
.site-shell {
135+
gap: 1rem;
136+
padding: 0.75rem 0.75rem 2rem;
137+
}
138+
139+
main {
140+
padding-top: 0.75rem;
141+
padding-bottom: 1.5rem;
142+
}
143+
}

‎site/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default async function RootLayout({
7171
return (
7272
<html lang="en">
7373
<body>
74-
<div className="mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 pb-10 pt-6">
74+
<div className="site-shell mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 pb-10 pt-6">
7575
<Header items={navItems} logo={site.logo} title={site.title} />
7676
<main className="flex-1">{children}</main>
7777
<Footer title={site.title} description={site.description} />

‎site/src/components/ContentSections.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,3 +467,97 @@
467467
transition: none;
468468
}
469469
}
470+
471+
@media (max-width: 640px) {
472+
.content-sections {
473+
row-gap: 1rem;
474+
}
475+
476+
.section {
477+
border-radius: 1.125rem;
478+
padding: 1rem;
479+
}
480+
481+
.section-tight {
482+
padding: 1rem;
483+
}
484+
485+
.section-title {
486+
margin-bottom: 0.875rem;
487+
font-size: 1.45rem;
488+
line-height: 1.16;
489+
}
490+
491+
.section-subtitle {
492+
margin-bottom: 1rem;
493+
font-size: 0.95rem;
494+
}
495+
496+
.glass-card,
497+
.stat-card,
498+
.pipeline-step,
499+
.resource-card,
500+
.icon-card {
501+
border-radius: 0.875rem;
502+
padding: 0.875rem;
503+
}
504+
505+
.resource-card {
506+
min-height: auto;
507+
padding-right: 2.5rem;
508+
}
509+
510+
.card-grid,
511+
.stats-strip,
512+
.pipeline,
513+
.media-grid,
514+
.icon-grid,
515+
.resource-grid,
516+
.workflow-steps {
517+
grid-template-columns: 1fr;
518+
}
519+
520+
.split-grid {
521+
grid-template-columns: 1fr;
522+
gap: 1rem;
523+
}
524+
525+
.viewer-frame,
526+
.video-frame {
527+
border-radius: 1rem;
528+
}
529+
530+
.media-image {
531+
height: 13rem;
532+
}
533+
534+
.tech-card .media-image,
535+
.media-grid-single .media-image {
536+
height: 13rem;
537+
}
538+
539+
.gallery-shell {
540+
display: block;
541+
}
542+
543+
.gallery-control {
544+
display: none;
545+
}
546+
547+
.gallery-track {
548+
margin-inline: -0.25rem;
549+
padding-bottom: 0.25rem;
550+
}
551+
552+
.gallery-card {
553+
width: min(82vw, 20rem);
554+
}
555+
556+
.section-button {
557+
width: 100%;
558+
}
559+
560+
.footer-links {
561+
flex-wrap: wrap;
562+
}
563+
}

‎site/src/components/ContentSections.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,7 @@ const ContentSections: React.FC<Props> = ({ sections }) => {
512512
return (
513513
<section key={key} className="section">
514514
<SectionIntro title={section.title} />
515-
<div className="grid gap-6 md:grid-cols-2">
515+
<div className={`grid gap-6 md:grid-cols-2 ${section.columns.length >= 3 ? "lg:grid-cols-3" : ""}`}>
516516
{section.columns.map((col) => (
517517
<div key={col.heading} className="glass-card">
518518
<h3 className="card-title">{col.heading}</h3>

‎site/src/components/Footer.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,9 @@
1919
.footer-links a:hover {
2020
color: var(--text-strong);
2121
}
22+
23+
@media (max-width: 640px) {
24+
.site-footer {
25+
border-radius: 1rem;
26+
}
27+
}

‎site/src/components/Header.css‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,19 @@
55
border: 1px solid var(--border-soft);
66
background: var(--header-bg);
77
color: var(--text-strong);
8+
gap: 0.75rem;
89
}
910

1011
.brand-link {
1112
@apply flex items-center gap-2;
1213
color: var(--text-strong);
14+
min-width: 0;
15+
}
16+
17+
.brand-title {
18+
overflow: hidden;
19+
text-overflow: ellipsis;
20+
white-space: nowrap;
1321
}
1422

1523
.header-actions {
@@ -24,7 +32,28 @@
2432
}
2533

2634
.mobile-nav {
27-
@apply absolute left-0 top-16 w-full rounded-2xl p-4 backdrop-blur md:hidden;
35+
@apply absolute left-0 right-0 top-[calc(100%+0.5rem)] w-full rounded-2xl p-4 backdrop-blur md:hidden;
2836
border: 1px solid var(--border-soft);
2937
background: var(--panel-bg-strong);
3038
}
39+
40+
@media (max-width: 640px) {
41+
.site-header {
42+
border-radius: 1rem;
43+
padding: 0.625rem 0.75rem;
44+
}
45+
46+
.brand-link img {
47+
width: 2rem;
48+
height: 2rem;
49+
}
50+
51+
.brand-title {
52+
max-width: min(52vw, 15rem);
53+
font-size: 0.95rem;
54+
}
55+
56+
.header-actions {
57+
gap: 0.5rem;
58+
}
59+
}

‎site/src/components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Header: React.FC<Props> = ({ items, logo, title }) => {
2727
) : (
2828
<div className="h-9 w-9 rounded-full bg-blue-500" />
2929
)}
30-
<span className="text-lg font-semibold">{title || "Beatbox"}</span>
30+
<span className="brand-title text-lg font-semibold">{title || "Beatbox"}</span>
3131
</Link>
3232
</div>
3333
<div className="header-actions">

‎site/src/components/HeroSection.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,34 @@
102102

103103
@media (max-width: 640px) {
104104
.hero {
105-
min-height: 500px;
105+
min-height: auto;
106106
padding: 1.25rem;
107+
border-radius: 1.25rem;
107108
}
108109

109110
.hero-actions {
110111
@apply flex-col;
112+
margin-top: 1.25rem;
111113
}
112114

113115
.btn {
114116
@apply w-full;
115117
}
118+
119+
.hero-title {
120+
font-size: 2rem;
121+
line-height: 1.08;
122+
}
123+
124+
.hero-subtitle {
125+
margin-top: 1rem;
126+
font-size: 1rem;
127+
line-height: 1.55;
128+
}
129+
130+
.hero-eyebrow {
131+
margin-bottom: 0.875rem;
132+
max-width: 100%;
133+
white-space: normal;
134+
}
116135
}

‎site/src/components/ThemeToggle.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,11 @@
1717
outline: 2px solid var(--focus-ring);
1818
outline-offset: 2px;
1919
}
20+
21+
@media (max-width: 640px) {
22+
.theme-toggle {
23+
width: 2.25rem;
24+
height: 2.25rem;
25+
font-size: 1rem;
26+
}
27+
}

0 commit comments

Comments
 (0)