Minimalistic one-page theme for Hugo - Demo
An ultra lightweight one-page theme for Hugo. Only the toggleable mouse-tracking animation uses JavaScript, other responsive elements are produced with bare HTML and CSS (as displayed in the demo).
- Interactive design without JavaScript
- SVG icon pack for social links
- Horizontally scrollable card view for displaying project items
- Mobile friendly scaling
- Toggleable mouse-tracking animation (JS only)
- Optimized CSS, JS, and webfonts (Yellow Lab Tools analysis)
- Tiny build size (~40 KB)
The easiest way to install the theme is to use git submodules:
$ git submodule add --depth=1 https://github.com/17ms/yuan.git themes/yuan
# Required when recloning the repository (e.g. during automated deployment)
$ git submodule update --init --recursiveUse the hugo.yaml template below to configure the theme:
# Note that due to performance reasons the custom webfont used in the site's
# titles is stripped to only contain unicode range U 0000-007F
baseURL: https://example.com/
title: Example
author: Example Author
language: en-GB
paginate: 10
theme: yuan
params:
description: Example description
# Mouse tracking animation
enableMouseTracker: false
# Trunaction limit of summaries inside projects display containers
truncationLimit: 150
# Logos, favicons, and theme colors
assets:
favicon: "favicon.ico"
favicon16: "favicon-16x16.png"
favicon32: "favicon-32x32.png"
appleTouchIcon: "apple-touch-icon.png"
safariPinnedTabIcon: "safari-pinned-tab.svg"
safariPinnedTabColor: "#5bbad5"
manifest: "manifest.json"
msTileColor: "#2b5797"
msTileIcon: "mstile-150x150.png"
themeColor: "#040404"
logo: "logo.svg"
# Icons shown below the about text snippet
# List of the available icons can be found in the /layouts/partials/svg.html file
socialIcons:
- name: email
url: "mailto:[email protected]"
display: Optional name shown in tooltips, defaults to capitalized name
# List of displayed items (e.g. software projects)
itemDisplays:
- name: Example project
url: "#"
description: Project description example