I have been using fastpages, and I would like the blog posts that are generated from the Jupyter Notebooks to be wider. When viewing in a Jupyter Notebook things look ok, but things get moved to the next row due to width during the conversion. I have been looking for a way to modify this.
I have been digging into the fastpages and nbdev code to try to see where this happens and I think there is a built-in template that can be changed - though I can’t seem to information on how these work. I am not sure that this will solve my problem, but it’s my current best guess. I’ve been looking through the nbdev library to try to figure this out and I am a bit stuck.
I am struggling with the same problem. I would like to make all website pages including the blogposts wider. I tried adding options in custom-variables.scss and custom-styles.scss but have not succeeded so far.
I think I found one working solution. You can set with the following variables in the /sass/minima/custom-variables.scss and play with the values to achieve a desired layout:
// width of the content area
$content-width: 1000px;
$on-palm: 800px;
$on-laptop: 1000px;
$on-medium: 1000px;
$on-large: 1200px;
This allows controlling the content width across all blog pages including the notebooks. Note that you can simply set $content-width: 100%; and delete the rest, but this allows less flexibility for devices with different screen sizes.
That is exactly what I want. Unfortunately, I cannot find that file. Is this from an older version of fastpages? I tried to look at commits on the last few months and didn’t see the custom-variables.scss filles.
A useful trick: on GitHub.com press T when looking at a repo, this pulls up file search. Once you start typing in custom... you would have found the file
I was able to find that file previously, exactly where @kozodoi described. Didn’t even need to use search as I could just double click to open the folder I assumed it was not the correct file as when I tried to set the variables as he described in that file with a different name it did not make an impact. I also read the readme and had tried modifying it from that previously, but was unable to figure it out.
Did you try setting those values it in the custom-styless.scss file? Did it work on your blog?
It appears to me that setting these variables in _/sass/minima/custom-styles.scss does not work for me. I actually created the _/sass/minima/custom-variables.scss file myself at some point of my experiments but forgot about this You can try creating the file only containing the snippet from my answer above and it should do the job.
In Summary the way to modify this is:
1.) _/sass/minima/custom-variables.scss
2.) Put the below in the file
3.). Modify lines in the new file as desired with px or % measurements
Oh I see you want to override those variables that get loaded into css files, which means you both are sufficiently advanced (way beyond anything I was aware of). My apologies for directing you to the wrong file as I had a misunderstanding of what you were trying to do.
@kozodoi@Ezno if you find settings that are more sensible perhaps you would like to submit a pull request for your changes to the repository? I would be happy to take them.
My blog is mostly for myself so I am setting it so it looks good on my monitors - but I dont really think what I am doing is a good default for most pages. I don’t really know how to figure out what’s sensible defaults. I dont have the devices or the know how to test different monitor sizes, monitor shapes, or device types (laptops, desktop monitors, phones, tablets, chromebooks, Etc.).
@hamelsmu well, I believe the values I set for my blog after some trial and error are sensible for a general use, at least looking at how the content displays on my phone, laptop and a wide display. I will submit a pull request, but feel free to adjust the values if you think others make more sense After all, it’s a matter of taste.
You can even create a section in the README so people can have instructions on how to customize. I’m happy to do this as well if you don’t have time. Thanks again for sharing ( I am a complete noob at front end web development )
Any other suggestions you have are welcome too thanks
I assumed it was not the correct file as when I tried to set the variables as he described in that file with a different name it did not make an impact. I also read the readme and had tried modifying it from that previously, but was unable to figure it out.
After all, it’s a matter of taste.