Both color palettes can be found in assets/scss/colors/variables.scss.
By default, there are 2 accent colors plus 10 on the demo site, distributed into pairs.
You can change the default mode and accent colors in the config:
# Dark mode as default# User preferences (site/system settings) will still have priority over it# The default is falseisDark = true# Accent colors for dark and light mode respectivelydarkAccent = "#1dbc91"# Default is "#1dbc91"lightAccent = "#1f676b"# Default is "#1f676b"# More colors, pick as many as you want (not really sure if there's a limit)# Apparently these may not show up on every modern browser (ie.: Firefox)# There's no default value. Used here just as examplepresets = [ "#1f676b", "#f3a530", "#902b37", "#1dbc91", "#754e85", "#7fc121", "#a8314a", "#ff7433", "#3e6728", "#c063bd" ]
By default, this theme uses Oswald and Open Sans fonts. Latin charset only and woff2 format, which is supported by most modern browsers.
If that’s not enough for your use case, you’ll have to generate a new set yourself.
In your project folder, add the font files to a folder named /assets/fonts and the CSS content to a file named /assets/scss/fonts/font-face.scss.
Also make sure to copy the file /assets/scss/fonts/variables.scss into your project folder and change the font names accordingly.
This theme comes with two chroma styles, meant to be used with dark and light mode respectively. These are Monokai for dark mode and Solarized Dark for light mode.
It’s worth noting that I’m not using the original stylesheets, but modified stylesheets based on the pygments-high-contrast-stylesheets (aka “WCAG AA passing Pygments stylesheets”).
In case you want to change it, it can be found in assets/scss/colors/chroma as dark.scss and light.scss.
The lines below are required in your config file to make use of this feature:
noClasses = false
To disable it, you can just remove the noClasses = false (as its default value is true) and add the lines below:
useCustomChroma = false
By default, images are responsive. This is achieved through image processing, where images are resized depending on their width.
For example, images with width equal or greater than 1280 pixels are processed (resized) into 3 sizes: 1280x, 960x and 640x.
If using Hugo v0.83 or above, a set of WEBP files will be generated as well.
Cover images will also be resized (using the Fill method) for Open Graph (1200x630) and Twitter Cards (1280x640).
You can change this behavior via config. Below you can find the default params:
# Enable auto resize# Includes "img" and "figure" shortcodesautoResize = true# Convert "tiff" files to the format below# since the most used browsers don't support itfallbackOptions = "jpeg"# Fill options for Open Graph and Twitter card images# These images are also used in the Schema.org structured dataopenGraphFillOptions = "1200x630"twitterFillOptions = "1280x640"# Extra formats (along JPEG/PNG) [[imageProcessing.extraFormats]]
formatOptions = "webp"mediaType = "image/webp"minVersion = "0.83"# Sizes at which images are resized# Keep the sizes in descending order# The smallest size will be used as the default image [[imageProcessing.sizes]]
resizeOptions = "1280x"descriptor = "1280w"minWidth = 1280 [[imageProcessing.sizes]]
resizeOptions = "960x"descriptor = "960w"minWidth = 960 [[imageProcessing.sizes]]
resizeOptions = "640x q90"descriptor = "640w"minWidth = 640
When using the shortcodes img and figure, image processing can also be disabled by setting the resize param as false.
The most complex shortcodes here are the social and contact-form. They can be used to inject a list of social platform links and a contact form, respectively.
Here I make a distinction between centralized and decentralized platforms.
Since decentralized platforms introduced the concept of “instances”. It’s not uncommon that a single person owns multiple accounts, in multiple instances, in the same platform.
This information will also be used to generate social meta tags (ie.: rel=“me” and Schema.org).
# Contact form shortcode[params.contact]
# formspree.io Form IDformspreeFormId = "example"# Autocomplete [on/off] and min character length for messageautoComplete = false# Default is falsemessageMinLength = 140# Default is 140# Subject# You can set a single value below (and it will cease to be a dropdown),# BUT KEEP IT AS AN ARRAY# It can also be disabled entirely (and it will turn into a text field)subject = [ 'Just saying "hi"', "I know what you did last winter", "... Is that a sloth?", "お前はもう死んでいる。" ]
# Text placeholders. As usual, comment the lines if you don't want use them# The "subject" below will only be used if the "subject" above doesn't exist (ie.: commented/deleted) [params.contact.placeholder]
name = "Jane Doe"email = "firstname.lastname@example.org"subject = 'Just saying "hi"'message = "Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla nullam quis risus."
Minimal effort was put here, since I don’t use this feature. I recommend that you create your own assets/scss/rich-content.scss.
A really basic 404 page can be generated via config file by using:
title = "Page not found"description = "This page was not found."paragraph = "Nothing to see here, buddy."
Custom front matter params
mainTitle (string): Can be used to replace the <title> meta tag, if you wish it to be different from the <h1> (which will still use the title param);
sitemapExclude (true|false): Can be used to exclude a page/section from the sitemap;
noindex (true|false): Similar to the above. Can be used to exclude a page/section from being indexed (by bots or your own site). It will change the meta tag robots to noindex and the page(s) will not be added to the site’s search index.
The site title can be replaced by creating a file named layouts/partials/custom/site-title.html;
Custom favicons can be used by creating a file named layouts/partials/custom/head-append.html;
Custom CSS can be imported into the main CSS file by creating a file named static/css/custom.css or assets/scss/custom.scss;
The footerText param can be replaced by creating a file named layouts/partials/custom/footer-text.html.
More possible params for your config file (or front matter):