CSS Organization

The website styles are split into several CSS files.

How it works

The main entry point is:

assets/css/main.scss

This file imports all other CSS modules that can be found in “_sass”

@import "base";
@import "layout";
@import "banners";
@import "team";
@import "publications";
@import "projects";
@import "news";
@import "mobile";

When modifying the website, always check whether the style belongs to:

• A global style used everywhere
• A shared component
• A specific page

Global CSS Files

These files affect multiple pages across the website.

base.css

Contains global styling rules:

• Main website font (Montserrat)
• Generic section titles
• Avatar styling
• Global link/button focus behavior
• Hidden default page titles from Minimal Mistakes

Modify this file for changes that should apply everywhere.

layout.css

Controls the global page layout:

• Full-width page content
• Sidebar visibility
• Content spacing and margins
• Sticky sidebars on desktop

Modify this file when changing the overall page structure.

banners.css

Controls the page banners displayed at the top of pages.

Currently used by:

• News
• Team
• Publications
• Projects

Example:

<div class="team-banner">
  <h2>ICPS TEAM</h2>
</div>

Modify this file to change:

• Banner height
• Banner spacing
• Banner title size
• Banner colors

Changes affect all page banners.

mobile.css

Contains responsive rules for screens smaller than 900px.

This file adapts:

• Team page
• Member cards
• Publications filters
• News layout
• Various mobile-specific components

Always check this file when a modification looks correct on desktop but not on mobile.

Page-Specific CSS Files

These files only affect a particular page or feature.

team.css

Used by the Team page.

Main components:

• Team layout
• Member cards
• Member photos
• Member information
• Search bar
• Category filters

Modify this file when changing:

• Member card design
• Team page spacing
• Team page filters
• Member grid layout

publications.css

Used by the Publications page.

Main components:

• Publication filters
• Search bar
• Category buttons
• Publication list
• Year sections

Modify this file when changing:

• Publication display
• Filter layout
• Publication search interface

news.css

Used by the News page.

Main components:

• News layout
• News sidebar
• Search bar
• News cards

Modify this file when changing:

• News page organization
• News card appearance
• Sidebar behavior

projects.css

Used by the Projects page.

Main components:

• Project titles
• Project section titles

Modify this file when changing the appearance of projects.

Important

Before modifying CSS:

1. Identify which page is affected.
2. Check whether the style belongs to a global file or a page-specific file.
3. If the change should affect multiple pages, modify a global CSS file.
4. If the change only concerns one page, modify the corresponding page CSS file.
5. After any CSS modification, always verify both desktop and mobile display.