Sidebar Alignment Design

Context

The site is a compact Jekyll academic profile using the BDHU/minimalist remote theme with local overrides in assets/css/custom-layout.css and _includes/sidebar-icon-styles.html. Recent visual work tightened the main content and switched the portrait back to a square image. The remaining sidebar issue is inconsistent alignment: the portrait, name, subtitle, links, and footer do not yet read as one precise column.

Goal

Make the left sidebar look accurate and professional by aligning all sidebar elements to one consistent column. The portrait should stretch to the same visual width as the name and subtitle text column. The link menu should be tighter, left-aligned, and visually calm.

Chosen Direction

Use the strict text-column direction selected in the brainstorming companion. On desktop, the sidebar will have one inner content column. The portrait, name, subtitle, social menu, and footer will share the same left edge and width. The portrait remains square with the existing restrained corner radius.

Component Behavior

Desktop Sidebar

• Keep the sidebar fixed behavior from the existing theme.
• Define a single sidebar content width inside the wider sidebar container.
• Make the portrait square and set its width to the content column width.
• Align the name, subtitle, link list, and footer to the same content column.
• Reduce vertical spacing between profile text and menu so the sidebar feels intentional rather than loose.

Menu Links

• Keep links left-aligned.
• Use consistent icon sizing and a fixed icon column so link labels start on the same x-position.
• Tighten row padding and vertical gaps.
• Preserve subtle hover and focus states with background/border changes only; menu items should not translate or shift.

Footer

• Align the footer text to the same sidebar content column.
• Keep it at the lower part of the sidebar on desktop, using the existing flex layout.

Mobile

• Preserve the current compact mobile header pattern: square portrait on the left, name and title on the right.
• Do not apply the wider desktop portrait width to mobile.
• Keep the mobile menu behavior unchanged except for any inherited link spacing improvements that remain readable.

Files To Change

• assets/css/custom-layout.css: sidebar column sizing, portrait dimensions, profile text spacing, footer alignment, responsive rules.
• _includes/sidebar-icon-styles.html: tighter menu row spacing, icon alignment, hover/focus refinements.

Out Of Scope

• Changing sidebar content, social links, icons, or ordering.
• Changing the main content layout.
• Replacing the remote Jekyll theme.
• Adding JavaScript.

Validation

• Run bundle exec jekyll build.
• Confirm the running local site shows one consistent left edge for portrait, name, subtitle, menu, and footer on desktop.
• Confirm the portrait remains square and matches the text column width.
• Confirm menu rows are tighter and do not shift on hover/focus.
• Confirm the mobile header still uses the compact square image layout.
• Run git diff --check.