Skip to content

Commit 3addf7f

Browse files
Overhaul website design, dark mode, and team page (#17)
* Overhaul website design, fix bugs, and clean up content Homepage: add feature cards, highlights section with Earth simulation plot, and get-started call-to-action with documentation/GitHub buttons. Modules page: replace plain HTML table with grouped card layout organized by domain, with color-coded accents and hover effects. Footer: restructure into 4-column layout with navigation, docs links, contact info, and visible black-on-white logo. Demos page: emphasise that results depend on initial conditions (oxidation state, volatile inventory, initial entropy, tidal forcing). Bug fixes: remove duplicate </body></html> in default layout, fix three broken script src attributes with stray quotes in footer, remove duplicate nucleo-svg.css import, fix duplicate rel="stylesheet". Content cleanup: replace placeholder descriptions in all paper posts, replace generic demo-post template content, redirect broken contact page to /people and empty policy page to GitHub licence, simplify index.html. Custom CSS: add card hover effects, link underline styling, gradient utilities, footer styling, and mobile breakpoint improvements. * Expand module descriptions, fix content details, clean up footer Modules page: add background on the modular architecture strategy, expand each module description with its purpose and approach. Reorder SPIDER before Aragog (primary vs alternative). Note that SPIDER works in S-P space, Aragog in T-P space. Mark Atmodeller as superseding CALLIOPE. State that all modules are fully open source. Render molecular names with proper subscripts. Demos page: render CO2, H2S with subscripts. Clarify that ZEPHYRUS models atmospheric (not just lighter) species escape. Footer: remove "Built with Jekyll and the Argon Design System" line. * Unify colour scheme and redesign people cards Replace the multi-colour Argon defaults with a single brand accent (#c0571b) derived from the PROTEUS logo. All buttons, links, badges, icons, and dropdown menu icons now use this colour. Headings use dark navy, body text uses medium slate, backgrounds use neutral light grey. People cards: remove research topic lists entirely, redesign as full-bleed photo cards with name and role overlaid in white over a bottom gradient. Photos anchor to top so faces are visible. Hero section: darken background overlay for readability, reduce logo size, switch text to white with softer shadows. * Improve mobile responsiveness across all pages Add responsive breakpoints (991px, 768px, 576px) for homepage hero, feature cards, people cards, module cards, and footer. Prevent horizontal overflow from fullWidth 100vw elements. * Improve page load speed across the site - Remove 8 unused JS plugins (~400KB): glide, moment, choices, datetimepicker, nouislider, bootstrap-switch, perfect-scrollbar, jasny-bootstrap. Add defer to remaining scripts. - Remove duplicate Font Awesome (local FA4 + CDN FA5), keep CDN only. Remove unused nucleo-svg.css. - Switch Google Fonts to v2 API with display=swap and add preconnect hints for font CDNs. - Resize hero image from 8000x4507 (943KB) to 2000px wide (349KB). Resize oversized people photos to 600px wide. - Add loading="lazy" to all below-fold images and people card photos. Add preload="none" to demo video. - Delete 25MB of unused Argon theme demo images (presentation-page/). * Fix demo video loading and clean up footer text Remove preload attribute from demo video (restore browser default). Remove tagline and licence text from footer. * Fix copyright start year to 2023 * Fix video play button not working on page navigation * Replace custom video play button with native controls * Fix video: hide until play, use inline onclick handler * Use muted autoplay for demo video instead of custom play button * Remove features, highlights, and CTA sections from homepage * Overhaul site: add homepage content, publications page, drop banners, remove dead files What changed: - Add module overview section below the homepage hero so visitors immediately see what PROTEUS does - Replace blog-style papers system with a proper publications page listing all 7 PROTEUS papers (4 published, 3 preprints) with DOI/arXiv/ADS links, pulled from the SciX library - Drop full-bleed image banners on interior pages (modules, demos, people, publications) in favour of clean typographic headers - Remove ~90 unused Argon theme files: JS plugins, CSS, component templates (pricing, testimonials, features, headers, carousels), decorative SVGs, FontAwesome 4 fonts, blog infrastructure - Update nav to point Publications to the new internal page - Add redirects from /papers/ and /blog/ to /publications * Add dark/light mode with toggle, improve publications and team pages Dark theme is the default. A sun/moon toggle in the navbar lets users switch themes; the choice persists via localStorage. CSS custom properties handle all theme-dependent colours so the switch is instant with no flash. Other changes: - Replace ADS links with SciX on publications page - All external links (publications, team profiles) open in new tabs - Team card photos zoom on hover to signal interactivity - Footer logo switches between light and dark variants * Add Patrick Bos as developer on the team page * Fix Patrick Bos role to Kapteyn Senior Research Software Engineer * Replace team photos with higher-quality AVIF versions Source higher-res images from formingworlds-website where available, sharpen and upscale remaining small originals with two-stage pipeline, convert all remaining JPGs to AVIF, and update template references. * Replace Emma Postolec photo with new image * Update Karen Stuitje and Marijn van Dijk roles to Kapteyn MSc Student * Rewrite README with site structure, editing guide, and setup instructions * Add no-op stub for perfectScrollbar to prevent error on Windows Argon's minified JS calls jQuery.perfectScrollbar() on Windows. The plugin was removed during cleanup, which would throw a TypeError and break navbar/dropdown initialization for Windows users. * Add Google Analytics tracking (G-ZCDRX6PC62) * Improve SEO, social sharing, and crawler findability Configure jekyll-seo-tag properly: add site description, language, logo, social links, and Twitter card settings in _config.yml. Remove manual OG/Twitter meta tags from default.html that conflicted with the seo tag output. Add unique descriptions to each page's front matter. Create a 1200x630 OG default image for social media previews. * Redesign demos page with 4 PROTEUS simulation scenarios Replace the single-scenario demos page with a tabbed layout showing four planetary evolution scenarios: Early Earth, Super-Earth (L 98-59 d), Lava World, and Sub-Neptune. Each scenario includes an animation video, thermal evolution plot, volatile inventory plot, and emission spectrum. Simulations ran on Habrok HPC using PROTEUS with SPIDER + AGNI + CALLIOPE. Dark-themed plots generated with custom matplotlib script matching the site's color scheme. Old Earth demo assets replaced with new versions. * Replace demo videos with custom 16:9 planet visualizations and add dual-theme plots New custom videos for all 4 scenarios (Earth, L 98-59 d, Lava World, Sub-Neptune) generated with make_demo_video.py on Habrok. Each video shows a physically-accurate planet visualization (CIE 1931 color-mapped from emission spectra) alongside time-series panels for temperature, melt fraction, and volatile pressures. Plot images now come in dark and light variants that switch with the site theme. Old single-theme plots removed. Hero video max-width increased from 640px to 960px for the widescreen format. Lava world description updated to match simulation results (rapid solidification, not permanent magma ocean). * Update Earth demo assets from completed simulation (2.05 Myr, 125 timesteps) Earth baseline simulation finished with full magma ocean solidification (phi < 1%). Regenerated video and dual-theme plots from the complete dataset. Updated solidification timescale and atmosphere composition in the detailed interpretation text. * Simplify demos page to Earth-only scenario Remove the super-Earth, lava world, and sub-Neptune scenarios (will be added back later with improved plots). Strip the tab navigation since only one scenario remains. Update Earth plots with smoothed versions and remove placeholder spectrum images. * Address reviewer feedback on fonts, publications, and demos - Bump font-weight from 300 to 400 for body text readability - Darken light-mode body text (#2d3748) and brighten dark-mode body text (#c8cdd5) - Add layman summaries and collapsible arXiv abstracts to all publications - Reorder publications: preprints first (newest at top), then published - Update venue info (L 98-59 d in press at Nature Astronomy 2026, van Dijk under review PSJ, Calder under review MNRAS) - Simplify demos page to single Earth scenario with Beyond Earth section - Update Earth demo video
1 parent 58c40bb commit 3addf7f

223 files changed

Lines changed: 1641 additions & 21743 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

README.md

Lines changed: 67 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,80 @@
1-
# Website [proteus-framework.org](https://proteus-framework.org)
1+
# PROTEUS Framework Website
22

3-
## How to edit the page
3+
Source for [proteus-framework.org](https://proteus-framework.org), the website of the PROTEUS coupled planet evolution framework.
44

5-
Explanations for deployment and local testing are here:
6-
https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll
5+
Built with [Jekyll](https://jekyllrb.com/) and hosted on GitHub Pages.
76

8-
Also useful for jekyll itself: https://jekyllrb.com/
7+
## Site structure
98

10-
The order of making changes to the website is as follows:
11-
- Create a new branch
12-
- Add the feature or fix
13-
- Create a pull request
14-
- Upon merge into `main` the website will be updated automatically
9+
| Path | What it does |
10+
|------|-------------|
11+
| `_pages/` | Markdown pages: modules, demos, publications, people, etc. |
12+
| `_includes/home.html` | Homepage content (hero + module overview) |
13+
| `_includes/components/teams/team-carousel-2.html` | People cards and team listing |
14+
| `_includes/header.html` | Navbar |
15+
| `_includes/footer.html` | Footer |
16+
| `_layouts/default.html` | Base HTML layout (head, scripts, theme detection) |
17+
| `_data/settings.yml` | Central config: menu items, footer links, social links, SEO |
18+
| `assets/styles/custom/_styles.scss` | All custom CSS (colours, dark/light mode, layout) |
19+
| `assets/img/faces/` | Team photos (AVIF format, 600x600) |
20+
| `assets/img/` | Other images (hero, logos, icons) |
1521

16-
There are more tips and tricks specifically related to the used template in `_README.md`.
22+
## How to edit the website
1723

18-
## How to test the page locally
24+
### Workflow
1925

20-
### Install jekyll
21-
```
22-
gem install bundler jekyll
26+
1. Create a new branch from `main`
27+
2. Make your changes
28+
3. Test locally (see below)
29+
4. Open a pull request
30+
5. Once merged into `main`, the website updates automatically via GitHub Pages
31+
32+
### Common tasks
33+
34+
**Edit page text**: Open the relevant file in `_pages/` (e.g. `publications.md`, `modules.md`) and edit the markdown/HTML content.
35+
36+
**Add or update a team member**: Edit `_includes/components/teams/team-carousel-2.html`. Copy an existing card block and update the name, role, photo path, links, and research topics. Photos go in `assets/img/faces/` as AVIF, ideally 600x600.
37+
38+
**Change navigation or footer links**: Edit `_data/settings.yml`.
39+
40+
**Change colours or styling**: Edit `assets/styles/custom/_styles.scss`. The site uses CSS custom properties (e.g. `var(--accent)`) defined at the top of that file for both dark and light themes.
41+
42+
## Local development
43+
44+
### Prerequisites
45+
46+
You need Ruby and Bundler. On macOS, the system Ruby is outdated, so install a current version first:
47+
48+
```sh
49+
brew install ruby
2350
```
2451

25-
On Macs there is already an outdated ruby version installed, which interferes with this. To solve this, reinstall ruby through `brew` and symlink it in your `.zshrc` (it will print out the required commands for this at the end of the installation). Once that is done and you have `ruby` and `gem` up-to-date on your system (+ `gem install github-pages`), the command above will function as expected.
52+
After installation, follow the instructions Homebrew prints to add the new Ruby to your `PATH` (typically adding a line to `~/.zshrc`). Then restart your terminal and install Bundler:
2653

27-
### Display the local version of the page
54+
```sh
55+
gem install bundler
2856
```
57+
58+
### Running the site locally
59+
60+
```sh
2961
cd FormingWorlds.github.io
30-
bundle install
62+
bundle install # install dependencies (first time only)
3163
bundle exec jekyll serve
32-
````
33-
=> Now browse to `http://localhost:4000`
64+
```
65+
66+
Open [http://localhost:4000](http://localhost:4000) in your browser. The site rebuilds automatically when you save changes to most files (except `_config.yml`, which requires restarting the server).
67+
68+
### Troubleshooting
69+
70+
- **`bundle install` fails**: Make sure you are using the Homebrew Ruby, not the macOS system Ruby. Run `which ruby` to check.
71+
- **Styles not updating**: SCSS changes require Jekyll to recompile. If live reload is not picking them up, restart the server.
72+
- **`_config.yml` changes not showing**: This file is only read at startup. Stop the server (Ctrl+C) and run `bundle exec jekyll serve` again.
73+
74+
## Technical notes
75+
76+
- **Theme**: Based on Argon Design System (Bootstrap 4, Creative Tim). Heavily customised.
77+
- **Dark/light mode**: Dark is the default. Toggle via the sun/moon button in the navbar. Preference is stored in `localStorage` and respects `prefers-color-scheme` when no preference is set.
78+
- **Images**: Team photos are in AVIF format for smaller file sizes. If adding new photos, convert to AVIF at 600x600 and use `object-position: top` in the card CSS so faces are not cropped.
79+
- **Publications**: Maintained as a static list in `_pages/publications.md`. No build-time data fetching.
80+
- **Redirects**: Some legacy paths (`/papers/`, `/blog/`, `/contact/`) redirect to current pages via front matter redirects in `_pages/`.

_config.yml

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,22 @@ site: PROTEUS Framework
55
domain: formingworlds.github.io
66

77
title: PROTEUS Framework
8+
description: "Open-source framework for simulating the coupled interior-atmosphere evolution of rocky planets, from magma oceans to habitable worlds."
9+
lang: en
810

911
author: Tim Lichtenberg
1012

1113
url: https://proteus-framework.org
12-
baseurl:
14+
baseurl:
15+
16+
# Social / SEO (used by jekyll-seo-tag)
17+
logo: /assets/img/brand/PROTEUS_white_on_black.png
18+
social:
19+
name: PROTEUS Framework
20+
links:
21+
- https://github.com/FormingWorlds/PROTEUS
22+
twitter:
23+
card: summary_large_image
1324

1425
collections:
1526
pages:
@@ -26,6 +37,7 @@ defaults:
2637
path: ""
2738
values:
2839
layout: "default"
40+
image: /assets/img/og-default.jpg
2941
-
3042
scope:
3143
path: ""
@@ -37,7 +49,7 @@ defaults:
3749
path: ""
3850
type: "posts"
3951
values:
40-
layout: "post"
52+
layout: "post"
4153

4254
sass:
4355
sass_dir: assets/styles
@@ -52,7 +64,7 @@ plugins:
5264
- jekyll-github-metadata
5365

5466
paginate: 6
55-
paginate_path: "/papers/page:num/"
67+
paginate_path: "/page:num/"
5668

5769
github: [metadata]
5870

_data/settings.yml

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,78 +13,42 @@ header_settings:
1313

1414
home_settings:
1515
# Choose a layout for your home page:
16-
# landing an example landing page made using the Argon design system
17-
# papers use your papers as the home page
16+
# landing - an example landing page made using the Argon design system
17+
# papers - use your papers as the home page
1818
theme: landing
1919

2020
blog_settings:
21-
# Choose a format for your papers listings:
22-
# basic – a simple list of papers
23-
# narrow – a masonary grid of papers
24-
# grid – a full-width square grid of papers
2521
theme: basic
26-
# Should we display a narrow grid of other papers at the bottom of each paper?
27-
read_more: "yes"
22+
read_more: "no"
2823

29-
# Setup your navigation below – how to use the icons:
30-
# 1. See all the icons available here https://demos.creative-tim.com/argon-design-system-pro/docs/1.0/foundation/icons.html
31-
# 2. Get the name of the icon e.g basket, then prefix with ni to make ni-basket.
32-
# 3. Add a color of the icon - text-primary, text-success, text-info, text-danger, text-warning and text-default all work!
3324
menu_settings:
3425
menu_items:
3526
- title: 'Home'
3627
url: '/'
3728

38-
# submenu_items:
3929
- title: 'Documentation'
4030
submenu_items:
4131
- title: PROTEUS
4232
url: https://proteus-framework.org/PROTEUS/
43-
icon: ni-books text-primary
33+
icon: ni-books text-primary
4434
- title: Modules
4535
url: /modules
4636
icon: ni-bold-right text-primary
4737

4838
- title: 'Demos'
4939
url: '/demos'
5040

51-
# - title: Modules
52-
# url: /modules
53-
# icon: ni-laptop text-danger
54-
55-
# - title: 'Policy'
56-
# url: '/policy'
57-
# icon: ni-settings-gear-65 text-default
58-
5941
- title: 'Publications'
60-
url: 'https://scixplorer.org/public-libraries/EVAJ1UgWTCy2Z7TRoSmjtQ'
61-
icon: ni-book-bookmark text-primary
42+
url: '/publications'
6243

6344
- title: 'People & Contact'
6445
url: '/people'
6546

6647
footer_settings:
6748
footer_tagline: PROTEUS framework for planetary evolution
6849

69-
contact_settings:
70-
form_action: 'https://formspree.io/hello@jekyllthemes.io'
71-
confirmation_url: '/thanks'
72-
email_subject: 'Contact form submission'
73-
send_button_text: 'Send Message'
74-
7550
social_settings:
76-
facebook_url: ''
77-
twitter_url: ''
78-
instagram_url: ''
79-
youtube_url: ''
80-
vimeo_url: ''
81-
pinterest_url: ''
82-
tumblr_url: ''
83-
dribbble_url: ''
84-
behance_url: ''
8551
github_url: 'https://github.com/FormingWorlds/PROTEUS'
86-
reddit_url: ''
87-
linkedin_url: ''
8852

8953
authors:
9054
nicholls:
@@ -93,6 +57,6 @@ authors:
9357
name: Tim Lichtenberg
9458

9559
advanced_settings:
96-
analytics_code:
97-
header_js:
98-
footer_js:
60+
analytics_code: '<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZCDRX6PC62"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag("js",new Date());gtag("config","G-ZCDRX6PC62");</script>'
61+
header_js:
62+
footer_js:

0 commit comments

Comments
 (0)