Line spacing using nbText

[nixfreak]

Is there a way to decrease line spacing of an image and nbText? For instance the picture

I would like to start ENVIRONMENT up more by the picture.

here is my code:

slide:
  align("left"):
          nbText: hlMd"""<font size=5px>
KPS is a multi purpose system that allows SKC personnel to generate cryptographic assets, code signing (platform and application), Load smart cards (Blackbox), User provisioning, and much more.  KPS uses a web GUI frontend and a  Python web framework called Django for the backend.</font>"""
          nbImage("./images/kps_login_small.png")
slide:
  fragmentEnd(@[fadeOut,shrinks]):
    nbText: hlMd """<font size=6px>Task menu on KPS</font>"""
    nbText: hlMd """<font size=5px>The KPS Menu Bar provides access to the following</font>"""
    nbImage("./images/kps_menu_1241x60.png")
    #fragmentEnd(@[fadeIn, shrinks]):
    fragmentList(@[
      "<font size=3px>ENVIROMENT - Customer Enviroment</font>",
      "<font size=3px>START TASK - Start of operational tasks</font>",
      "<font size=3px>MONITOR - View progress of tasks</font>",
      "<font size=3px>HISTORY - View task history</font>",
      "<font size=3px>REPORTS - Generate reports</font>",
      "<font size=3px>CONFIGURE - Configure models, profiles, and SoC plants, manage keys and certificates</font>"
      ], fadeIn)

[HugoGranstrom]

You have two options, you can shrink the margin between blocks by setting the --r-block-margin to a smaller value, the same way as I explained here: https://github.com/HugoGranstrom/nimiSlides/issues/26#issuecomment-1595294648 This will reduce the spacing between different things in general in your slides.

The second thing is that the nbImage puts the image inside a figure which has a big margin, so we want to reduce it as well by adding it to the CSS as well:

nb.addStyle: """

:root {
  --r-block-margin: 10px;
}

figure {
  margin: 20px;
}
"""

You will have to play around with the right values for these styles yourself.

For the future its a good idea to look at the CSS variables you can change here and see if any of them can help you. And then play around with them to see what they do. If you go to the DevTools in your browser you can find the current values of all of these variables and change them and see how it affects your slides.

[nixfreak]

Ok , great.. by the way I am not able to get Iframes to work at all. I have tried various websites and I just get "refused to connect", is that the site blocking that or is it my browser?

[HugoGranstrom]

I'm also getting these kinds of problems with Iframes:

From this error message it seems like it is the website (Github in my case) that prevents itself from being embedded, but it might be the browser that could do it sometimes as well I guess. If I try to create an iframe for the nimiSlides docs (https://hugogranstrom.com/nimiSlides/tutorials/getting_started.html) it works for me though, so I guess it is the website that is the culprit here. Not sure what we can do about it tbh. Something else that has worked for me is Youtube videos, but you have to use the embed-link (Share -> Embed) and not the ordinary link.

[nixfreak]

Awesome this worked really good thanks.

[nixfreak]

I'm also getting these kinds of problems with Iframes:

From this error message it seems like it is the website (Github in my case) that prevents itself from being embedded, but it might be the browser that could do it sometimes as well I guess. If I try to create an iframe for the nimiSlides docs (https://hugogranstrom.com/nimiSlides/tutorials/getting_started.html) it works for me though, so I guess it is the website that is the culprit here. Not sure what we can do about it tbh. Something else that has worked for me is Youtube videos, but you have to use the embed-link (Share -> Embed) and not the ordinary link.

Yeah I a bunch of confluence wiki entries I have written up and wanted to iframe the page instead of having to write all of it out in slides lol. Ok thanks.

[nixfreak]

I wonder for teaching others this awesome nim project is too actual slides then have an iframe with a link to the actual code. Just my 2 cents.

[HugoGranstrom]

Yeah I a bunch of confluence wiki entries I have written up and wanted to iframe the page instead of having to write all of it out in slides lol. Ok thanks.

Ah okay, that's a shame then :/ I did some more digging and it seems like there's not much to do if the site prevents you from creating Iframes sadly.

I wonder for teaching others this awesome nim project is too actual slides then have an iframe with a link to the actual code. Just my 2 cents.

I have been experimenting with a few different approaches for how to best teach nimiSlides and this is what I ended up with:

Here everything is on the same page which is a plus. If I would use a Iframe (which I can't because Github blocks me :P), it would not provide much more than simply linking to the source code. It is hard to find exactly which parts of the code correspond to which parts of the slideshow though so we might need something even better for actual slides.

[nixfreak]

Well , whatever you choose. I appreciate all your work. I keep spamming this library to others so at least I can do something.

[HugoGranstrom]

Well , whatever you choose. I appreciate all your work. I keep spamming this library to others so at least I can do something.

That's very much appreciated :smile: