Typography Demo: Code & Technical Content

This is a test project to demonstrate how technical content and code blocks appear on the site. The monospace font stack ensures code is readable and visually distinct from body text.

Inline Code Examples

When discussing technical concepts, we often reference variables like fontSize or functions like calculateTotal(). These inline code snippets use the monospace font to stand out from regular text.

You might mention configuration values like --font-mono or file paths like /src/styles/flexoki.css when explaining technical details.

Code Block Example

Here's how a typical code block appears:

const projects = [
  {
    id: 'demo-project',
    title: 'Demo Project',
    year: 2024,
    visible: true
  }
];

function filterProjects(projects) {
  return projects.filter(p => p.visible);
}

CSS Example

:root {
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code";
  --border-radius: 4px;
}

code {
  font-family: var(--font-mono);
  background: var(--color-bg-secondary);
  padding: 0.1em 0.2em;
}

Command Line Examples

Typical terminal commands:

npm install
npm run dev
git commit -m "Update typography"

The monospace font makes these technical elements immediately recognizable and maintains proper character alignment for code readability.