mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-25 09:24:54 +10:00
v5.1.0 (#2970)
* chore(release): v5.1.0 * feat: implement resume thumbnails * fix: remove unused mcp tools * docs: fix formatting of docs
This commit is contained in:
Amruth Pillai
GitHub
+1835
-2471
File diff suppressed because it is too large
Load Diff
@@ -1,273 +0,0 @@
|
||||
---
|
||||
title: "Using Custom CSS"
|
||||
description: "Learn how to use the Custom CSS panel in the resume builder, which selectors to target, and copy‑paste examples for common tweaks."
|
||||
---
|
||||
|
||||
## What the Custom CSS section does
|
||||
|
||||
The **Custom CSS** panel lets you write your own CSS rules to change how your resume looks in the live preview (and exports).
|
||||
|
||||
- **Live updates**: your changes are applied immediately as you type.
|
||||
- **Auto-save**: there is no “Save” button—your CSS is saved automatically when it changes.
|
||||
- **Scoped styling (mostly)**: to avoid affecting the rest of the app, your CSS is _usually_ scoped to the resume preview.
|
||||
|
||||
<Frame caption="Screenshot of the Custom CSS section in the right sidebar">
|
||||
<img
|
||||
src="/images/guides/using-custom-css/screenshot-1.webp"
|
||||
alt="Screenshot of the Custom CSS section in the right sidebar"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
## Where to find it
|
||||
|
||||
In the resume builder, open the **right sidebar** and select **Custom CSS** (the `CSS` section).
|
||||
|
||||
## Enable / Disable
|
||||
|
||||
- Turn on the **Enable** switch to apply your CSS.
|
||||
- Turning it off keeps your CSS saved, but stops applying it.
|
||||
|
||||
## How scoping works (important)
|
||||
|
||||
Your CSS is injected into the preview and most **top-level selectors** are automatically prefixed with:
|
||||
|
||||
- `.resume-preview-container`
|
||||
|
||||
That means:
|
||||
|
||||
- Writing `.page { ... }` effectively becomes `.resume-preview-container .page { ... }`
|
||||
- Writing `h2 { ... }` becomes `.resume-preview-container h2 { ... }`
|
||||
- Writing `body { ... }` becomes `.resume-preview-container body { ... }` (which usually matches nothing, because `body` is not inside the preview container)
|
||||
|
||||
### Scoping limitation: `@media` / `@supports` blocks
|
||||
|
||||
Rules that start with **at-rules** (like `@media print { ... }`) are **not automatically scoped**. If you want to keep those rules limited to the resume preview, you should **manually** prefix selectors inside at-rules with `.resume-preview-container`.
|
||||
|
||||
Example:
|
||||
|
||||
```css
|
||||
/* Normal rules: rely on auto-scoping */
|
||||
.page a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* At-rules: manually scope selectors */
|
||||
@media print {
|
||||
.resume-preview-container .page a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Formatting tip (to avoid scoping edge-cases)
|
||||
|
||||
Keep each rule's selector on **one line**, for example:
|
||||
|
||||
```css
|
||||
.page-section-experience .section-item-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
```
|
||||
|
||||
Avoid splitting a selector across multiple lines unless you've confirmed it behaves as expected.
|
||||
|
||||
## Finding the right selectors
|
||||
|
||||
### Use autocomplete in the editor
|
||||
|
||||
In the Custom CSS editor, type a `.` (dot). You'll get suggestions for commonly-used class selectors, including:
|
||||
|
||||
- **Page-level**: `.page`, `.page-content`, `.page-header`, `.page-basics`, `.page-main`, `.page-sidebar`, `.page-picture`
|
||||
- **Section-level**: `.page-section`, `.section-content`
|
||||
- **Section types**: `.page-section-experience`, `.page-section-education`, `.page-section-projects`, etc.
|
||||
- **Generic item building blocks**: `.section-item`, `.section-item-header`, `.section-item-title`, `.section-item-description`, `.section-item-metadata`, `.section-item-website`, etc.
|
||||
- **Per-section item selectors**: `.experience-item`, `.skills-item`, `.profiles-item`, etc.
|
||||
- **Template wrapper**: `.template-azurill`, `.template-onyx`, `.template-gengar`, etc.
|
||||
|
||||
### Stable “starter selectors”
|
||||
|
||||
If you're not sure where to start, these are usually safe:
|
||||
|
||||
- `.page` (the resume page container)
|
||||
- `.page-section` (each resume section)
|
||||
- `.section-item` (each item inside a section)
|
||||
- `.page-picture` (profile picture container)
|
||||
|
||||
### Target a specific template (optional)
|
||||
|
||||
To apply styles only on one template, prefix with the template wrapper:
|
||||
|
||||
```css
|
||||
.template-azurill .page-header {
|
||||
gap: 12pt;
|
||||
}
|
||||
```
|
||||
|
||||
### Target a specific page (optional)
|
||||
|
||||
Each page has a class like `.page-0`, `.page-1`, etc.
|
||||
|
||||
```css
|
||||
.page-0 .page-header {
|
||||
margin-bottom: 6pt;
|
||||
}
|
||||
```
|
||||
|
||||
### Target a custom section (optional)
|
||||
|
||||
Custom sections include a dynamic class: `.page-section-<sectionId>`.
|
||||
|
||||
```css
|
||||
.page-section-custom {
|
||||
border-top: 1pt solid color-mix(in srgb, var(--page-text-color) 15%, transparent);
|
||||
padding-top: 6pt;
|
||||
}
|
||||
```
|
||||
|
||||
If you need the exact `<sectionId>`, use your browser devtools on the resume preview to inspect the section element.
|
||||
|
||||
## Useful built-in CSS variables (you can override them)
|
||||
|
||||
The preview sets a number of CSS variables you can reuse or override:
|
||||
|
||||
- `--page-width`, `--page-height`
|
||||
- `--page-sidebar-width`
|
||||
- `--page-text-color`, `--page-primary-color`, `--page-background-color`
|
||||
- `--page-body-font-family`, `--page-body-font-size`, `--page-body-line-height`, `--page-body-font-weight`, `--page-body-font-weight-bold`
|
||||
- `--page-heading-font-family`, `--page-heading-font-size`, `--page-heading-line-height`, `--page-heading-font-weight`, `--page-heading-font-weight-bold`
|
||||
- `--page-margin-x`, `--page-margin-y`
|
||||
- `--page-gap-x`, `--page-gap-y`
|
||||
|
||||
Example (tighten spacing without changing your layout settings):
|
||||
|
||||
```css
|
||||
.page {
|
||||
--page-margin-x: 10pt;
|
||||
--page-margin-y: 10pt;
|
||||
--page-gap-y: 6pt;
|
||||
}
|
||||
```
|
||||
|
||||
## Common examples (copy/paste)
|
||||
|
||||
### 1) Make section headings bolder and more compact
|
||||
|
||||
```css
|
||||
.page-section > h6 {
|
||||
margin-bottom: 2pt;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
```
|
||||
|
||||
### 2) Add subtle dividers between sections
|
||||
|
||||
```css
|
||||
.page-section {
|
||||
padding-bottom: 8pt;
|
||||
border-bottom: 1pt solid color-mix(in srgb, var(--page-text-color) 12%, transparent);
|
||||
}
|
||||
|
||||
.page-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
```
|
||||
|
||||
### 3) Reduce the size of metadata (dates/locations)
|
||||
|
||||
```css
|
||||
.section-item-metadata {
|
||||
font-size: calc(var(--page-body-font-size) * 0.9pt);
|
||||
opacity: 0.75;
|
||||
}
|
||||
```
|
||||
|
||||
### 4) Improve readability of rich-text descriptions (bullets, spacing)
|
||||
|
||||
```css
|
||||
.section-item-description {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.section-item-description ul {
|
||||
margin-left: 12pt;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.section-item-description li {
|
||||
margin: 2pt 0;
|
||||
}
|
||||
```
|
||||
|
||||
### 5) Style links like a “chip” (useful for project links)
|
||||
|
||||
```css
|
||||
.section-item-website a {
|
||||
display: inline-block;
|
||||
padding: 3pt 9pt;
|
||||
border-radius: 999pt;
|
||||
border: 2pt solid color-mix(in srgb, var(--page-primary-color) 45%, transparent);
|
||||
text-decoration: none;
|
||||
}
|
||||
```
|
||||
|
||||
### 6) Hide the profile picture (CSS-only)
|
||||
|
||||
```css
|
||||
.page-picture {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### 7) Make the header more compact
|
||||
|
||||
```css
|
||||
.page-header {
|
||||
gap: 6pt;
|
||||
padding-bottom: 6pt;
|
||||
}
|
||||
|
||||
.basics-headline {
|
||||
opacity: 0.8;
|
||||
}
|
||||
```
|
||||
|
||||
### 8) Make skills look denser (better use of space)
|
||||
|
||||
```css
|
||||
.skills-item-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.skills-item-proficiency {
|
||||
margin-top: 1pt;
|
||||
}
|
||||
|
||||
.skills-item-keywords {
|
||||
display: block;
|
||||
opacity: 0.85;
|
||||
}
|
||||
```
|
||||
|
||||
### 9) Highlight a specific section (example: Profiles)
|
||||
|
||||
```css
|
||||
.page-section-profiles {
|
||||
background: color-mix(in srgb, var(--page-primary-color) 10%, transparent);
|
||||
border-radius: 8pt;
|
||||
padding: 8pt 12pt;
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### My CSS doesn't do anything
|
||||
|
||||
- Make sure **Enable** is turned on.
|
||||
- Prefer targeting `.page`, `.page-section`, and `.section-item` instead of `body`.
|
||||
- Use your browser devtools to **inspect** the preview and confirm the element/class names.
|
||||
|
||||
### My `@media` rules affect the whole app / don't apply
|
||||
|
||||
At-rules aren't auto-scoped. Prefix selectors inside them with `.resume-preview-container` as shown above.
|
||||
@@ -223,8 +223,6 @@ Tool names use a `reactive_resume_` prefix so they stay distinct when multiple M
|
||||
| `reactive_resume_delete_resume` | Permanently delete a resume and all associated files. **Irreversible** |
|
||||
| `reactive_resume_lock_resume` | Lock a resume to prevent edits, patches, and deletion |
|
||||
| `reactive_resume_unlock_resume` | Unlock a previously locked resume to re-enable editing |
|
||||
| `reactive_resume_export_resume_pdf` | Generate a PDF from the resume and return a download URL |
|
||||
| `reactive_resume_get_resume_screenshot` | Get a visual preview of the resume's first page as a WebP image URL |
|
||||
| `reactive_resume_get_resume_statistics` | Get view and download statistics for a resume |
|
||||
|
||||
### Breaking change (tool names)
|
||||
@@ -300,11 +298,6 @@ Once your MCP client is connected, you can use natural language to interact with
|
||||
- "Set the primary color to blue"
|
||||
- "Hide the interests section"
|
||||
|
||||
### Exporting
|
||||
|
||||
- "Export my resume as a PDF"
|
||||
- "Show me a screenshot of my resume"
|
||||
|
||||
### Using Prompts
|
||||
|
||||
- "Help me build my resume from scratch" (uses `build_resume`)
|
||||
|
||||
Reference in New Issue
Block a user