Theme: Red Lounge

I’ve created a theme for my own site and figured I’d share it with everyone. Completely free to use of course. It’s been a pleasure getting to know Hugo and I’ll update this theme in the future I’m sure. There are still a few things I have questions on, but for the most part this has really taken on a good look and set of features.

It is a highly configurable theme and contains a few convenient features to help speed things along for your needs.

Feedback always welcome, I look to improve where possible. Thanks!

3 Likes

Here’s a few screenshots of what it looks like.

The sidebar is completely customizable, so you can do a lot before you might need to replace the partial with your own. The sidebar is comprised of two menus, a main menu and a social menu, but feel free to stick whatever you want in there. For a complete list of what you can change, see the README.md.

Lots of customization on the list pages… Category labels easy to color with CSS as you add new ones. The avatar picture on the right is optional and can be an author’s headshot or something else. All of the date, author, read time, etc. can be hidden/shown in any configuration.

There’s social sharing icons (Font Awesome) which come from a partial so you can duplicate, re-order, remove, add, etc. Pages can include a banner image too (fully responsive):

The red slashes continue in certain areas as accents. Tags, new/older page navigation, etc. You could of course change all the red accents to another color if you want in your own CSS that then overrides the theme’s. You’d just need to find all the class names and such (LESS isn’t used or anything), but there aren’t many. Comments are optional, you can turn them on with front-matter provided your site config has a Disqus code set.

2 Likes

Thanks for sharing Tom! Is there a sample site somewhere you can link to?

Also, please use {{BaseUrl}} instead of / for the home link, some sites are hosted at a sub url.

1 Like

Cool, fixed that. Thanks.
I also tried adding {{ .Site.BaseUrl }} to areas like /tags/… and /categories/… but it stopped rendering the page, with the following error:

ERROR: 2014/10/10 Rendering error: template: theme/_default/single.html:75:77: executing "theme/_default/single.html" at <.Site.BaseUrl>: can't evaluate field Site in type string

Do I need base url for these types of links as well? I assume so…

Cool, fixed that. Thanks.
I also tried adding {{ .Site.BaseUrl }} to areas like /tags/… and /categories/…
but it stopped rendering the page, with the following error:

ERROR: 2014/10/10 Rendering error: template: theme/_default/single.html:75:77:
executing “theme/_default/single.html” at <.Site.BaseUrl>: can’t evaluate field
Site in type string

Do I need base url for these types of links as well? I assume so…

{{ .Site.BaseUrl }}

I’m guessing that only some of these .Site.Parameters.are.Available.in.Certain.Sections ?

hope to document this stuff soon.

A+
Dave

1 Like

Red Lounge would be great with something like Lanyon’s show/hide with pure-css in mind, optimally with text refitting so that hiding the side panel expands the text.

Pure CSS to make font-size responsive 1

and

Pure CSS to make font-size responsive 2

FlowType.JS

I like FlowType, nice find. I’ll see about implementing it. You are more than welcome to make pull requests to the repo and raise issues for comment (and obviously bugs) as well: https://github.com/tmaiaroto/hugo-redlounge

I am very new to Hugo and SSGs in general. I really like your theme among the ones available but I have a small question related to tweaking it. Personally, I much prefer serif fonts for large bodies of text, e.g. posts, but I am not sure how to use a different font in a theme and how to properly link to something like Google Fonts… Any help is very much appreciated!

You’ll need to override the CSS by creating your own version of the static asset (css). See: http://gohugo.io/themes/customizing/

Specifically, you’re look at this: https://github.com/tmaiaroto/hugo-redlounge/blob/master/static/css/redlounge.css#L10

So you’ll add your own /static/css/redlounge.css file to avoid altering the theme (so you can easily update it for example). Then in there you’ll change the font-family out.

If you only want to change the post body, you’ll probably just need to set a font-family for section.post p …Right now it’s just inheriting from the CSS on line 10.

Then the post summary on the index pages is article.post-summary