Clear typography and disturbance-free reading


A Hugo theme with clear typograhy for easy, disturbance-free reading.

Table of Contents


From the root of your Hugo site, clone the theme into themes/cocoa by running:

$ mkdir themes
$ cd themes
$ git clone cocoa

Then, generate static files by running:

$ hugo -t cocoa


Creating Content

$ hugo new posts/
$ hugo new fixed/

Fonts and Colors

The primary font face is Proxima Nova in 400 and 700 weights. If you own the font, create a font face declarations like in the example below, and place it in the path specified in .Site.Params.WebfontsFile:

@font-face {
	font-family: 'ProximaNova';
	font-weight: normal;
	font-style: normal;
	src: url('webfonts/2F00B2_0_0.eot');
	src: url('webfonts/2F00B2_0_0.eot?#iefix') format('embedded-opentype'),
	     url('webfonts/2F00B2_0_0.woff2') format('woff2'),
	     url('webfonts/2F00B2_0_0.woff') format('woff'),
	     url('webfonts/2F00B2_0_0.ttf') format('truetype');
@font-face {
	font-family: 'ProximaNova';
	font-weight: bold;
	font-style: normal;
	src: url('webfonts/2F00B2_1_0.eot');
	src: url('webfonts/2F00B2_1_0.eot?#iefix') format('embedded-opentype'),
		  url('webfonts/2F00B2_1_0.woff2') format('woff2'),
		  url('webfonts/2F00B2_1_0.woff') format('woff'),
		  url('webfonts/2F00B2_1_0.ttf') format('truetype');

If you do not provide Proxima Nova files, the fallback font face—Source Sans Pro—will be automatically used from Google Fonts. The primary monospace font face is Ubuntu Mono from Google Fonts.

The main colors are:

For syntax highlighting, set pygmentsuseclasses = true in your config.toml. Syntax highlighting classes in css/pygments.css are from default.css.

Site Variables

Author = "Firstname Lastname"
DateForm = "Jan 2, 2006" # required
Description = "eat, sleep, rave, repeat"
Email = ""
Facebook = "//"
FaviconFile = "img/myicon.ico" # relative to static/ directory, defaults to the icon at themes/cocoa/img/favicon.ico
GATracker = "<Google-Analytics-ID>"
GitHub = "//"
Lang = "en" # <body lang="en">
LinkedIn = "//"
Twitter = "//"
WebfontsFile = "css/mywebfontsfile.css" # relative to static/ directory, defaults to empty string 


Less files

The .less files used to generate main.css are available at the root of the repository. Running:

$ lessc main.less static/css/main.css

should do the trick.


single post

Example Sites


Pull requests are welcome!


Licensed under the MIT License. See the LICENSE file for more details.