Visual Style Reference

This site now borrows the warm muted palette and stacked-publication layout from Luigi Maria Briglia. Use this sheet as the single source of truth for future tweaks.

Palette

All palette tokens map back to the Minimal Mistakes CSS variables (--global-*) inside _sass/layout/_luigi_palette.scss, so components that rely on the older tokens automatically inherit the updated colors.

Layout + Components

• Page Layout – _sass/layout/_page.scss now tags each page with page--has-sidebar or page--no-sidebar. Non-sidebar pages are centered with a max width of 1100 px so they look intentional, while the homepage reserves a three-column gutter for the sidebar without overlap.
• Backgrounds – body paints two radial gradients plus a vertical fade to match Luigi’s glow. Content wrappers (.page__content) gain rounded corners, translucent fill, and the shared drop shadow var(--luigi-shadow).
• Buttons & Links – .btn, .button, and form controls are pill-shaped with translucent backgrounds. Hover and focus states use the accent color and a slight translateY(-1px) lift (see _sass/layout/_luigi_palette.scss).
• Publication Cards – _sass/layout/_publication_cards.scss now stacks entries vertically. Each .paper-card uses the card gradient, radial highlight, and rounded corners; cite/abstract panels reuse --luigi-card-strong for contrast.
• Sidebar – The sidebar now shares the same glassmorphism treatment as cards (soft whites, subtle blur) so the only saturated element is the top bar. It only renders on the homepage (permalink /) to keep secondary pages focused; if you ever need it elsewhere, add sidebar_force: true to that page’s front matter.
• Top Navigation – _sass/layout/_masthead.scss now paints the entire header via a pseudo-element so the deep-green gradient spans edge-to-edge, while _sass/layout/_navigation.scss keeps .greedy-nav transparent so no beige bleed-through shows in the menu.
• Portrait – .author__avatar is a compact 3:4 card with rounded corners, a saturated green backdrop, and an inset border so the photo reads like Luigi’s framed headshot without dominating the sidebar.
• Sidebar visibility – _includes/sidebar.html renders the sidebar only on the homepage by default. Add sidebar_force: true to any page’s front matter if you want it back; the layout classes will automatically switch to the sidebar-aware widths.

Assets

• JavaScript – No new behavior was required beyond the existing toggle logic in assets/js/_main.js, so the npm run build:js workflow remains unchanged.
• Docker/Jekyll – Because the palette ships via Sass, rebuild the CSS by rerunning docker compose up --build (or bundle exec jekyll serve) so the compiled assets/css/main.css picks up the new imports.

Restoring the original portrait format

If you need the stock Minimal Mistakes avatar presentation (small inline circle next to the bio):

1. Open _sass/layout/_sidebar.scss and replace the .author__avatar and .author__content blocks with the defaults below.
2. Save the file and rebuild the styles (docker compose up --build or bundle exec jekyll serve inside the Docker container) so the CSS is regenerated.

.author__avatar {
	display: table-cell;
	vertical-align: top;
	width: 36px;

	@include breakpoint($large) {
		display: block;
		width: auto;
		height: auto;
	}

	img {
		max-width: 175px;
		border-radius: 50%;

		@include breakpoint($large) {
			padding: 5px;
			border: 1px solid var(--global-border-color);
		}
	}
}

.author__content {
	display: table-cell;
	vertical-align: top;
	padding-left: 15px;
	padding-right: 25px;
	line-height: 1;

	@include breakpoint($large) {
		display: block;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

That snippet mirrors the pre-Luigi look and can also be restored wholesale via git checkout HEAD~ <file> if you prefer to revert the entire file.

Restoring the Luigi-style circular portrait

Prefer the previous large circular portrait we used earlier in this project? Reapply it by swapping the .author__avatar block with the snippet below (the rest of the sidebar can stay untouched):

.author__avatar {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 1.5rem;
	width: clamp(180px, 38vw, 320px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--luigi-forest) 0%, var(--luigi-forest-soft) 60%, #2c6c53 100%);
	padding: 0.55rem;
	position: relative;
	box-shadow: 0 24px 55px rgba(8, 20, 15, 0.35), 0 0 0 1px rgba(247, 241, 231, 0.15) inset;

	img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		border: 6px solid var(--luigi-card-strong);
		box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.12);
	}
}

Follow it up with a rebuild (docker compose up --build or npm run build:js && bundle exec jekyll serve) to ensure the CSS bundle picks up the reverted style.

Keep this guide close whenever you introduce new sections (e.g., talks, teaching) so the accent, shadow, and background treatments stay consistent with the publications page.

Building a scrollable homepage with inlined pages + publications

You can stack any standalone page (and even a curated list of publications) on the front page so visitors can keep scrolling instead of clicking through the navigation.

1. Tag the source pages – In each page’s front matter, set:

     home_section: true          # opt the page into the home scroll
     section_order: 30           # controls ordering on the homepage
     section_heading: "Teaching" # optional custom heading
   

   If a page also needs the sidebar, add sidebar_force: true; otherwise it will render centered when navigated directly.

2. Loop in index.html (or your home layout) – Add this block where you want the stacked sections to appear:

   Style .home-section however you like (a simple top/bottom margin plus a subtle divider keeps it consistent with Luigi’s site).

3. Embed publications on the homepage – Reuse the existing card include so design stays consistent:

     {% assign featured_pubs = site.publications
                | where: 'status', 'featured'
                | slice: 0, 6 %}
   
     <section class="home-section" id="home-publications">
         <div class="home-section__inner">
             <header>
                 <p class="eyebrow">Selected Work</p>
                 <h2>Recent Publications</h2>
             </header>
             <div class="paper-stack">
                 {% for pub in featured_pubs %}
                     {% assign pub_id = 'home-pub-' | append: forloop.index %}
                     {% include publication-card.html pub=pub id=pub_id %}
                 {% endfor %}
             </div>
             <p class="cta"><a class="btn" href="/publications/">View full list</a></p>
         </div>
     </section>
   

   Mark any publication you want to highlight with status: featured (or use a different front-matter flag) so the homepage pulls only those entries.

4. Rebuild and review – Run docker compose up --build (or your local Jekyll workflow) to compile the Sass/JS, then refresh http://localhost:4000 to verify the new sections and publications appear in the scroll.

This approach keeps content in its original Markdown files while letting the homepage act as a long-form narrative—just like the Luigi reference site.