CSS I added to the Hello theme: ricky.micro.blog
@ricky Yes, I grabbed bits and pieces here and there, and lots of help from the people on the design Slack channel until i got it to my liking. And thank you!
@ricky you should, it’s a great place. Specially for people like me who doesn’t know what I’m doing 😅
@ricky Kia ora Ricky, I set up the How to Customise Micro.Blog site for exactly this kind of stuff and welcome all contributions. 😀 (Just trying to keep things collected together.) // @smokey @custom
@Miraz Probably several. I noticed it on How to force a refresh and on the index page due to
Add a header image to your blog. Anything using div.pic
on viewports smaller than 600px; or with a lengthy code
snippet.
This CSS will do the trick I think:
line 28
/* pictures uploaded from Mars Edit */ div.pic { /* width:600px; */ height:auto; display:block;margin:1.4em auto; padding: 2em; border: 2px solid silver; }
line 54
code { font-size:inherit; background-color: #ffffff; word-break: break-word; }
the important parts being commenting out or deleting width:600px;
in div.pic
, and adding word-break: break-word;
to code
. There are other ways of dealing with these but those are maybe the simplest.
@Miraz The CSS kept getting mangled when I tried to paste it as a code block so I ended up just making each line a separate backtick-fenced inline code snippet. I will email you the whole thing unadorned in a sec
@ricky Thanks for sharing this CSS! I love these changes. I'm tempted to say they should be incorporated into the default Hello theme... But it's different enough that maybe it should be separate?
@microflow yes! Yes, there is !
@manton I am definitely into the idea of taking it further and into its own forked theme. But I wonder if it is worth a PR for the Powered by Hugo removal? Or you want that to stay in?
@ricky I've kind of defaulted to making as few changes as possible to other people's themes, so I let the "Hugo" stay in for now. It probably makes sense to phase it out, or provide an easier way for people to hide it.