reuters-graphics / bluprint_graphics-kit

SvelteKit rig for graphics and newsapps
https://reuters-graphics.github.io/docs_graphics-kit/
21 stars 3 forks source link

Embed chart margin fix #77

Closed MinamiFunakoshiTR closed 2 years ago

MinamiFunakoshiTR commented 2 years ago

Problem

The bottom of standalone embed charts get cuts off because <section class='graphic'> has margin-top: 3rem by default

Fix

Wrap embed graphics in <div class="embed-graphic"> and added this style to global.scss: .embed-graphic { section { margin-top: 0; margin-bottom: 0; } }

I wrapped the embed graphic in <div class="embed-graphic"> so that it doesn't affect margins in the overall embed page.

Other notes

Folks in APAC didn't know that we can make embeds in the same project for interactive pages -- they had been spinning a separate project just for repos -- so I added an example map.svelte component in pages/embeds/en. Planning on showing APAC how to make embeds this way.