FormidableLabs / spectacle

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.
https://commerce.nearform.com/open-source/spectacle/
MIT License
9.7k stars 690 forks source link

Issues with padding/margins #1336

Open marceljar opened 1 month ago

marceljar commented 1 month ago

Question

Is it possible to add some margins or padding to the slides? In other words, can Flexbox margin or padding be applied to the slides themselves? Whenever I use margins or padding, I can only see them applied to the FullScreen and AnimatedProgress components. But, not to the Slides.

Background Info/Attempts

// SPECTACLE_CLI_TEMPLATE_START
const template = () => (
  <FlexBox
    alignContent="start"
    justifyContent="space-between"
    position="absolute"
    bottom={10}
    width={1}
    top={5} //this only affects FullScreen and AnimatedProgress. The text in my slides is not changed.
  >
    <Box padding="10px 1em">
      <FullScreen />
    </Box>

    <Box padding="1em">
      <AnimatedProgress />
    </Box>
  </FlexBox>
);

function NewSlides() {
  return (
    <Deck theme={theme} template={template}>
      <MarkdownSlideSet>{mdContent}</MarkdownSlideSet>
    </Deck>
  );
}