I have been thourougly enjoying my pelican blog. It's pretty simple to use and I love the plan text files for posts. The one downside is my limited experience with HTML/CSS. I know a little but not much so It became a little difficult when I wanted to customize my blog. Pelican uses Python to process these text files and turn them into HTML files that can then be hosted with a standard web server.
I noticed some behavior in the way that my posts would render in the web browser and it took me a little while to figure out how to get it to display the way I want.
CSS is the problem and the solution
I needed to figure out what in my themes (atilla) style.css
was causing
the issues. The first problem was images getting stretched to fill the width of
the blog post. This was causing a 64x64 icon to be streched to a horrible size.
You can see this is not a very attractive image. The problem can be fixed with a little css.
.no-stretch img {
max-width: max-content;
margin: 0.5em auto;
}
So I can add the following span with a custom class defined.
<span class="no-stretch">
[![feed-icon]({static}/images/rss-atom/feed-icon64.png)](https://eternaltinkering.com/feeds/all.atom.xml)
</span>
Now all we have to do is figure out how and where to put our custom css that defines the attributes for the no-stretch class. The theme I am using allows a setting that will take priority over the themes built in style sheets.
CSS_OVERRIDE = ['css/custom.css']
We need to get pelican to create output/css/custom.css
each time it does a
build on our site. Pelican has a setting that will help us with this.
In the pelicanconf.py
file we add STATIC_PATHS = ['images','css']
.
This allows us to create a css directory to store our custom style sheet in our
content folder that will then be created in the root of the output directory.
We can create content/css/custom.css
and each time we do a build that will
get copied to output/css/custom.css
.
Now we can wrap our image we don't want strched in our span and we get the image
in original size.