Hugo Themes

Prev/Next: All Themes

Yuan

Minimalistic one-page theme for Hugo

Download
Yuan

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).

Features

  • 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)

Hugo Themes Website GitHub code size in bytes GitHub

Usage

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 --recursive

Use 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:example@example.com"
      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

See also