Visual improvements#111
Merged
Merged
Conversation
- Enabled wrap in two buttons (Get Started and YouTube) - changed "learn more about notion2anki" text to be shortter, keeping it or changing it is up to you - changed the style of Discord server button to enable proper wrap, cpuldn't figure out how I can make the button bigger, please fix it if you can (Background larger, text is inside the button with white color) - increased the margins on the .column class. Every ddiv element with the class "column" is affected.
5 tasks
aalemayhu
added a commit
that referenced
this pull request
May 20, 2026
…2484) ## Summary Two gallery fixes in the same surface, prompted by user feedback after #2482 + #2483 deployed. ### 1. Cards fill the iframe edge to edge \`notion.css\` ships with \`body { margin: 2em auto; max-width: 900px }\` — that meant every Notion-flavoured starter (Default Basic/Cloze/Type-the-answer, Only Notion variants) rendered with a band of the gallery card background showing through the top and bottom of the iframe. Visible as a \"offset\" between the preview wrap and the card content. Separately, \"Raw Note (no style)\" has \`cssFile: null\` so \`noteType.css\` is empty — the wrapper left both html and body transparent, so the thumbnail showed whatever was behind the iframe. Fix in \`renderNoteTypePreview.ts > buildPreviewDocument\`: - Wrapper sets a default \`background: #fff; color: #111\` on html and body. - Wrapper re-asserts \`margin: 0 / padding: 0 / max-width: none / width: 100% / height: 100%\` on html and body *after* the template CSS, with \`!important\` so notion.css's \`body { margin: 2em auto; max-width: 900px }\` no longer wins. - Templates that set their own \`.card\` background (Quote = #1c1917, Alex Deluxe = blue gradient, Abhiyan = night-mode dark) still win because that selector is more specific than the body reset. ### 2. Section reorder — Starter note types lead the page Visible sections were ordered: 1. Your note types 2. Official 2anki templates 3. Starter note types Reordered to: 1. Your note types 2. **Starter note types** (Clean Basic, Modern Cloze, Vocabulary, Medical, Code, Minimal, Quote, Math & Science — polished designs) 3. Official 2anki templates (Default / Only Notion / Raw / Abhiyan / Alex variants) User's own work still leads. The polished gallery comes next so the first impression is the strong designs, not the historical defaults. ## Test plan - [x] \`pnpm --filter 2anki-web vitest run src/pages/TemplatesPage\` — 44 tests pass - [x] \`pnpm --filter 2anki-web typecheck\` clean - [x] \`pnpm --filter 2anki-web lint\` clean - [ ] After deploy: hard-refresh \`/templates\`, confirm Only Notion thumbnails fill the iframe (no dark band top/bottom), confirm Raw Note (no style) has a white background, confirm Starter section appears above Official 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
August 15 - Responsiveness improvements
August 12 - Minor improvements to the fonts size selector