Instruction file imported from rohan-uiuc/llm-serving-presentation (.cursor/rules/styling-fonts.mdc). Copyright stays with the author.

Styling & Font Configuration

Montserrat Font Configuration

• style.css imports Montserrat font from Google Fonts
• CSS custom properties: --font-montserratHeading, --font-montserratParagraph
• Automatic application to headings (700 weight) and body text (500 weight)
• Manual classes: .montserrat-heading, .montserrat-paragraph

Font Usage

/* Automatic application */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-montserratHeading);
  font-weight: 700;
}

p, body, .slidev-layout {
  font-family: var(--font-montserratParagraph);
  font-weight: 500;
}

Styling Best Practices

• Use UnoCSS/Tailwind classes for utility styling
• Scoped styles with <style> tags in individual slides
• Global styles in style.css
• Override Slidev defaults with .slidev-page, .slidev-layout

Slide-Specific Styling

<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
</style>

Font Classes Available

• .montserrat-heading - Montserrat 700 weight for headings
• .montserrat-paragraph - Montserrat 500 weight for body text
• Applied automatically to standard HTML elements
• Custom CSS properties for consistent theming