We need a "large fonts" and "small fonts" theme to ship with Discourse

[codinghorror (Jeff Atwood)]

As part of the most excellent user-selectable theming work @sam did, we need to ship four themes in Discourse 1.8:

• Light … you’re probably looking at it right now
• Dark … we built this a while ago and tested it a lot
• Big Font
• Small Font

We’d like help with the Big Font and Small Font layouts:

• should everything get bigger fonts? Or just certain areas of the page?
• should the smaller font layout also push the post width out a little bit?
• it must be tested in all the nooks and crannies of Discourse pages.

I can offer two $50 amazon gift certs (or paypal, if you don’t have amazon in your area) to anyone willing to assist with building and testing the small or large font themes, respectively. Pick one and run with it!

[codinghorror (Jeff Atwood)]

Any takers on this? I don’t think it’d be a lot of work.

[Mittineague]

Question
In addition to font-size, should font weight (bold) and contrast (color background-color) be considered too?

[codinghorror (Jeff Atwood)]

No just overall UI font size on these. Though they should probably offer both dark and light variants.

[saquetim (Sérgio Saquetim)]

it needs to be polished but are you thinking in something like this?

[codinghorror (Jeff Atwood)]

It is a good start, I suggest eating your own dog food with large and small font themes – participate in replies and topics, visit all pages on the site and verify nothing is messed up or looks broken / weird, etc.

Actually @Mittineague do you mind if I tap you to do this work? We can negotiate an amount that is fair if $100 doesn’t cut it or it turns out to be a bigger project than anticipated?

[EducatorWaji (Cee Kay)]

So, I am in for assisting the team to build big font and small font themes.

[EducatorWaji (Cee Kay)]

@codinghorror

should everything get bigger fonts? Or just certain areas of the page?

I think we should be making every text larger with large theme. The users who choose the large font size is the ones who has either eye sight problem, or the ones who loves everything in big.

[clapmyhands (stefan)]

would it be too crazy if we apply it in meta/somewhere?

dogfooding it like what meta did with dark theme

Coming soon to Meta DARKNESS

As part of our 1.4 release efforts, we need to make 100% sure dark themes work well out of box in Discourse. The best way to make that happen is to bring the darkness here to meta. Darkness, everybody! Darkness is spreading! We’ll be turning on a dark theme here on meta in the next day or two to help us test. Don’t worry, this is not a permanent change. We’ll switch back to default after we’re sure dark themes work in all places uniformly.

[EducatorWaji (Cee Kay)]

Not a good idea anyway. Because, now meta plays as the front face of our discourse community

[Remah (Just another happy Discourse user)]

These are user-selectable themes so it would be worthwhile encouraging everyone here to try each theme for just one day. This removes the risk of upsetting new users or those who don’t want to participate.

This is the best user group to try it on because of all the UX designers, community managers, plug-in authors and other developers.

I’d respond to a request to help in this sort of way and use a few more features than I usually would. The overhead for each of us would be small but the bug-finding and opinions should be awesome.

[sam (Sam Saffron)]

I just mucked around with this per:

html, .cooked {
    font-size: 18px;
    line-height: 22px;
}

.list-controls .category-breadcrumb a.badge-category.category-dropdown-button {
    
    margin-left: -5px;
}

.topic-list .badge-wrapper {
    font-size: 15px !important;
    line-height: 18px !important;
}

.topic-list .badge-wrapper.bullet .badge-category-bg {
    position: relative;
    top: 5px;
    font-size: 15px;
    line-height: 18px;
}

mobile:

desktop

It seems kind of OK

[codinghorror (Jeff Atwood)]

What do you think @Mittineague?

[Mittineague]

I ran into a road block (a victim of my own device) that looks to have been finally rectified. I am preparing to test my “1.2em” approach as soon as my dev install is finished rebuilding by entering the CSS into Customize

Insufficient space problem

I’ve been wrestling with a Virtual Machine problem for a few days and playing sysadmin without much luck. Set-up Windows 10, VMware Player, Ubuntu 16.04 LTS 64-bit, 5 GB RAM I rebuild the app very frequently and have up to now not had any serious problems, except for needing to run sudo apt-get autoclean sudo apt-get autoremove every once in a while. But the other day rebuild failed with an insufficient space error and running those commands didn’t help. I increased to 8 GB RAM, but still …

For whatever reason, I was thinking there was a way to pull in the CSS similar to how plugins can be added to app.yml so that they will appear in the UI and not need to be entered into Customize. I notice Sam’s files have .json and .scss files, but I’m sure I’m missing a crucial piece to the puzzle here somewhere.

[sam (Sam Saffron)]

@Mittineague

For whatever reason, I was thinking there was a way to pull in the CSS similar to how plugins can be added to app.yml

Themes are way more flexible than plugins, you simply check it in to GitHub and then anyone can import it. For the large font one we will seed an extra theme in the theme file.

[Mittineague]

Thanks, I didn’t think it would be that easy!
I’ll put up a repo now.

EDIT
can be found here
https://github.com/Mittineague/discourse-larger-font-theme

[codinghorror (Jeff Atwood)]

We are deferring this until 1.9 as @sam thinks it will work best as a mixin type of deal. I tend to agree, since having

• dark, large font
• dark, small font
• blue, large font
• blue, small font

… gets excessive pretty quick.

[sam (Sam Saffron)]

The idea here is to allow for “user selectable, theme components”

That way you can add a bunch of user selectable theme components, that are selectable in conjunction with any theme.

That way the user prefs page will show

select your theme
[ dark theme v] 

[ ] large font

[Jimble (Joakim Bang Larsen)]

Any news on this? I could use bigger text for some of my users that have accessibility issues regarding sight…

[downey (Michael Downey)]

Maybe I’m missing something. Why can’t users just take advantage of the zoom feature of their browser? Things seem to scale up fine in my simple test just now.