Redesign MLCGE Pages as a simulation workbench - #2
Merged
Conversation
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Pull request overview
This PR redesigns the static lab landing page into a “simulation workbench” layout, updating the content hierarchy and visual identity while keeping the page responsive and interactive (project filtering).
Changes:
- Rebuilt
index.htmlstructure (topbar, hero/workbench layout, updated copy/links) and refreshed project-card rendering + filtering UI behavior. - Replaced the legacy stylesheet with a new workbench-themed responsive design and motion preferences handling.
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| index.html | New page structure + updated project data and client-side filtering/rendering logic. |
| assets/styles.css | New visual theme, layout, and responsive styling for the redesigned workbench page. |
Files not reviewed (1)
- assets/styles.css: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </section> | ||
| <section id="projects" class="section" aria-labelledby="projects-heading"> | ||
| <div class="section-heading"><p class="badge">Project notebook</p><h2 id="projects-heading">Selected work</h2><p>Repositories and experiments presented with clear status, scope, and technical context.</p><div class="filters" role="group" aria-label="Filter projects"><button class="filter-btn active" data-filter="all" aria-pressed="true">All</button><button class="filter-btn" data-filter="active" aria-pressed="false">Active</button><button class="filter-btn" data-filter="research" aria-pressed="false">Research</button><button class="filter-btn" data-filter="teaching" aria-pressed="false">Teaching</button><button class="filter-btn" data-filter="archive" aria-pressed="false">Archive</button></div></div> | ||
| <div class="projects-ledger"><div class="projects-grid" id="projects-container"></div></div> |
| </script> | ||
| const container = document.getElementById('projects-container'); | ||
| const buttons = [...document.querySelectorAll('.filter-btn')]; | ||
| const escapeHtml = value => String(value).replace(/[&<>'"]/g, char => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[char])); |
| .footer-container { display: block; } | ||
| .footer-container p + p { margin-top: .7rem; } | ||
| } | ||
| :root{--wood-a:#c7a676;--wood-b:#b98e5b;--paper:#f7f0df;--paper-2:#e9dcc1;--ink:#183649;--muted:#596769;--accent:#378c80;--accent-deep:#27665e;--accent-soft:#cfe2d8;--gold:#d4a53a;--shadow:0 18px 38px rgba(64,42,20,.22),0 4px 10px rgba(64,42,20,.13);--sans:"Inter",system-ui,sans-serif;--serif:"Source Serif 4",Georgia,serif;--hand:"Caveat",cursive;}*{box-sizing:border-box;}html{scroll-behavior:smooth;}body{margin:0;min-width:320px;color:var(--ink);font:400 16px/1.62 var(--sans);background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.2),transparent 24rem),repeating-linear-gradient(90deg,rgba(70,38,14,.06) 0 1px,transparent 1px 126px),linear-gradient(105deg,var(--wood-a),var(--wood-b) 52%,#cfb184);}a{color:inherit;}:focus-visible{outline:3px solid var(--gold);outline-offset:4px;}.skip-link{position:fixed;top:.8rem;left:.8rem;z-index:100;transform:translateY(-160%);padding:.65rem .85rem;background:var(--paper);border-radius:.35rem;}.skip-link:focus{transform:none;}.topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(58,36,18,.14);background:rgba(247,240,223,.9);backdrop-filter:blur(18px);}.topbar-inner{width:min(100% - 2rem,1160px);min-height:4.2rem;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;}.back-link,.nav a{text-decoration:none;font-size:.77rem;font-weight:700;}.back-link{color:var(--accent-deep);}.site-name{max-width:28rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .8rem/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;}.nav{display:flex;justify-content:flex-end;gap:1rem;}.nav a:hover,.back-link:hover{color:var(--accent);}.nav .github-link{padding:.48rem .68rem;border:1px solid rgba(24,54,73,.25);border-radius:.4rem;background:rgba(255,255,255,.35);}.workspace{width:min(100% - 2rem,1160px);margin:auto;padding:clamp(2rem,5vw,5rem) 0 5rem;}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;}.hero-paper,.hero-visual,.connection-card,.facts-card,.projects-ledger,.docs-note{position:relative;box-shadow:var(--shadow);}.hero-paper{padding:clamp(2rem,5vw,4.5rem);background:var(--paper);transform:rotate(-.5deg);}.hero-paper::before{content:"";position:absolute;top:-.7rem;right:12%;width:7rem;height:1.55rem;background:rgba(218,194,144,.67);transform:rotate(1deg);}.badge{margin:0 0 .45rem;color:var(--accent-deep);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}.hero h1{max-width:13ch;margin:0;font:650 clamp(3rem,7vw,5.8rem)/.9 var(--serif);letter-spacing:-.055em;}.hero h1 span{color:var(--accent);}.hero-summary{max-width:43rem;margin:1.4rem 0 0;color:var(--muted);font:500 clamp(1rem,1.7vw,1.2rem)/1.7 var(--serif);}.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem;}.button{padding:.68rem .9rem;border-radius:.42rem;text-decoration:none;font-size:.76rem;font-weight:800;}.button-primary{background:var(--ink);color:var(--paper);}.button-primary:hover{background:var(--accent-deep);}.button-secondary{border:1px solid rgba(24,54,73,.2);background:rgba(255,255,255,.35);}.hero-note{width:fit-content;margin:2rem 0 -.4rem;padding:.55rem .85rem;color:var(--accent-deep);background:var(--accent-soft);box-shadow:0 5px 11px rgba(64,42,20,.13);font:700 1.25rem/1.15 var(--hand);transform:rotate(-1deg);}.hero-visual{min-height:29rem;padding:1.2rem;border:.8rem solid #d6d0c1;border-radius:1rem;background:#17313e;color:#f4eddd;transform:rotate(.7deg);}.hero-visual::after{content:"";position:absolute;left:50%;bottom:-2.65rem;width:80%;height:2.7rem;transform:translateX(-50%);border-radius:0 0 1rem 1rem;background:linear-gradient(145deg,#aaa79d,#74766f);box-shadow:var(--shadow);}.visual-top{display:flex;justify-content:space-between;color:#a7b9ba;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;}.visual-content{height:23rem;display:grid;place-items:center;padding:1.2rem;}.visual-label{position:absolute;left:2rem;bottom:2rem;right:2rem;}.visual-label strong{display:block;color:var(--accent-soft);font-size:1.35rem;}.visual-label span{color:#b7c7c7;font-size:.75rem;}.illustration{position:relative;width:min(90%,22rem);aspect-ratio:1;}.graph-node{position:absolute;width:1.15rem;aspect-ratio:1;border:3px solid var(--accent-soft);border-radius:50%;background:#17313e;z-index:2;}.graph-edge{position:absolute;height:2px;background:color-mix(in srgb,var(--accent-soft) 65%,transparent);transform-origin:left center;}.gn1{left:8%;top:48%}.gn2{left:38%;top:15%}.gn3{left:70%;top:25%}.gn4{left:48%;top:50%}.gn5{left:20%;top:78%}.gn6{left:75%;top:76%}.ge1{left:12%;top:50%;width:43%;transform:rotate(-42deg)}.ge2{left:42%;top:19%;width:36%;transform:rotate(14deg)}.ge3{left:12%;top:53%;width:44%;transform:rotate(2deg)}.ge4{left:26%;top:78%;width:32%;transform:rotate(-50deg)}.ge5{left:53%;top:53%;width:37%;transform:rotate(40deg)}.terminal-window{width:100%;padding:1.2rem;border:1px solid rgba(255,255,255,.16);border-radius:.65rem;background:#0f252e;color:#cbd8d5;font:.82rem/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;}.terminal-window .prompt{color:var(--accent-soft);}.terminal-window .comment{color:#82999d;}.terminal-window .keyword{color:#e8c878;}.math-plot svg{overflow:visible;}.math-plot .axis{fill:none;stroke:#a8bab9;stroke-width:2}.math-plot .curve{fill:none;stroke:var(--accent-soft);stroke-width:4;stroke-linecap:round}.math-plot circle{fill:#e8c878}.math-formula{margin-top:.8rem;color:#d7e2df;font:700 1.1rem/1 var(--hand);text-align:right;}.cube-scene{perspective:650px;display:grid;place-items:center;}.cube{position:relative;width:9rem;height:9rem;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(36deg);}.cube span{position:absolute;inset:0;border:2px solid var(--accent-soft);background:color-mix(in srgb,var(--accent) 16%,transparent);}.cube .front{transform:translateZ(4.5rem);}.cube .back{transform:rotateY(180deg) translateZ(4.5rem);}.cube .right{transform:rotateY(90deg) translateZ(4.5rem);}.cube .left{transform:rotateY(-90deg) translateZ(4.5rem);}.cube .top{transform:rotateX(90deg) translateZ(4.5rem);}.cube .bottom{transform:rotateX(-90deg) translateZ(4.5rem);}.axis-lines{position:absolute;inset:0;border-left:2px solid #e8c878;border-bottom:2px solid #e8c878;transform:translate(15%,-10%);opacity:.7;}.workbench{margin-top:clamp(5rem,9vw,8rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:start;}.connection-card,.facts-card{padding:clamp(1.7rem,3vw,2.8rem);background:var(--paper);}.connection-card{transform:rotate(-.35deg);}.facts-card{transform:rotate(.45deg);background:var(--paper-2);}.object-heading{margin:0 0 .8rem;font:700 clamp(2rem,4vw,3.1rem)/1 var(--hand);}.connection-card>p,.facts-card>p{color:var(--muted);}.related-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;}.related-links a{padding:.5rem .65rem;border:1px solid rgba(24,54,73,.17);border-radius:.38rem;background:rgba(255,255,255,.35);color:var(--accent-deep);text-decoration:none;font-size:.68rem;font-weight:800;}.related-links a:hover{color:var(--paper);background:var(--accent-deep);}.facts{margin:0;}.facts div{display:grid;grid-template-columns:6.5rem 1fr;gap:.8rem;padding:.8rem 0;border-top:1px solid rgba(24,54,73,.15);}.facts dt{color:var(--accent-deep);font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}.facts dd{margin:0;font-size:.82rem;}.section{margin-top:clamp(5rem,10vw,9rem);}.section-heading{max-width:52rem;margin-bottom:2rem;padding:0 .7rem;}.section-heading h2{margin:.2rem 0 .5rem;font:650 clamp(2.4rem,5vw,4.2rem)/1 var(--serif);letter-spacing:-.04em;}.section-heading>p:last-of-type{color:var(--muted);}.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;}.filter-btn{appearance:none;padding:.48rem .62rem;border:1px solid rgba(24,54,73,.2);border-radius:.36rem;color:var(--ink);background:rgba(247,240,223,.62);font:700 .67rem/1 var(--sans);cursor:pointer;}.filter-btn:hover,.filter-btn.active{color:var(--paper);border-color:var(--accent-deep);background:var(--accent-deep);}.projects-ledger{padding:clamp(1rem,2vw,1.6rem);border-radius:1rem;background:rgba(82,52,28,.15);}.projects-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,2vw,1.4rem);}.project-card{grid-column:span 6;position:relative;min-height:18rem;padding:clamp(1.4rem,3vw,2.3rem);background:var(--paper);box-shadow:0 10px 24px rgba(64,42,20,.18),0 2px 7px rgba(64,42,20,.12);transform:rotate(var(--tilt,0));}.project-card:nth-child(2n){--tilt:.35deg;}.project-card:nth-child(3n){--tilt:-.35deg;}.project-status{color:var(--accent-deep);font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;}.project-card h3{margin:.7rem 0 .65rem;font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.2;}.project-card>p{color:var(--muted);font-size:.86rem;}.project-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}.tag{padding:.3rem .46rem;border:1px solid rgba(24,54,73,.17);border-radius:.3rem;background:rgba(255,255,255,.38);font-size:.62rem;font-weight:700}.project-related-orgs{display:none;}.project-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}.link-btn{color:var(--accent-deep);font-size:.72rem;font-weight:800;text-decoration:none}.link-btn:hover{text-decoration:underline}.link-btn.primary{color:var(--ink)}.docs-note{padding:clamp(1.7rem,3vw,2.7rem);background-color:var(--paper);background-image:linear-gradient(rgba(65,115,143,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(65,115,143,.12) 1px,transparent 1px);background-size:24px 24px;}.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}.doc-card{min-height:8rem;padding:1.15rem;border:1px solid rgba(24,54,73,.16);background:rgba(247,240,223,.82);text-decoration:none}.doc-card:hover{border-color:var(--accent);transform:translateY(-2px)}.doc-card h3{margin:0;font-size:.9rem}.doc-card p{margin:.45rem 0 0;color:var(--muted);font-size:.74rem}.footer{width:min(100% - 2rem,1160px);margin:0 auto 2rem;padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;color:rgba(48,34,21,.72);font-size:.7rem;font-weight:600}.footer a{text-decoration:none}@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-paper{max-width:46rem}.hero-visual{max-width:42rem;width:100%;margin:auto}.workbench{grid-template-columns:1fr}.facts-card{max-width:42rem}.project-card{grid-column:1/-1}}@media(max-width:650px){.topbar-inner{grid-template-columns:1fr auto}.site-name{display:none}.nav a:not(.github-link){display:none}.workspace{width:min(100% - 1rem,1160px);padding-top:1.3rem}.hero-paper,.connection-card,.facts-card,.project-card{transform:none}.hero-paper::before{display:none}.hero-visual{min-height:23rem}.visual-content{height:17rem}.projects-ledger{padding:.6rem}.projects-grid{display:block}.project-card{margin-bottom:.8rem;min-height:0}.docs-grid{grid-template-columns:1fr}.footer{display:block}}@media(prefers-reduced-motion:no-preference){.project-card,.doc-card,.button,.related-links a{transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}.project-card:hover{transform:translateY(-4px) rotate(0);box-shadow:0 17px 31px rgba(64,42,20,.22),0 4px 9px rgba(64,42,20,.13)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} No newline at end of file |
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
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
Validation