CSS I added to the Hello theme: ricky.micro.blog

@ricky nice! Thank you for sharing 🙏🏼

@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 I’ve added your post to the wiki.

There’s a huge backlog of customization tips to work through, but I’m trying to keep up with new ones as they appear…

@Gabz Awesome 👏 It looks great, I will have to investigate the Slack sometime.

@smokey Fantastic! I am very interested in expanding and documenting the theming options, will take a look at the wiki. @manton and I talked a little about custom themes at the WWDC meetup.

@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 @custom’s a great resource! seems images need a max-width:100% so they are not wider than their container on mobile/skinny viewports. Want me to send you a screenshot or the CSS to add?

@ricky That’d be great thanks! Which tutorial?

  miraz@firstbite.co.nz

@Miraz @ricky I think ultimately we’ll cede the theme customization links to @custom in order to keep that wiki page sane, but for now I’ll add whatever I see and work through the backlog; it can’t hurt too much to have multiple copies :-)

@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

@smokey 👍

@ricky Thanks so much Ricky. I’ll study it tomorrow.

@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?

@Gabz heyho! which slack do you mean? is there micro.blog slack team? 😊

@ricky very nice. I love the switch icon too

@microflow yes! Yes, there is !

@microflow Here

@smokey Wonderful! Thank you.

@adamprocter Thanks Adam!

@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.

@manton cool that is about what I figured. Let me play around with themes a little more and then I will open an issue/PR to discuss possibilities.