Shibui (渋い)

A minimalist Hugo theme emphasizing simplicity and refinement

Table of contents:

• Features
• Installation
  • As a Git Submodule
  • Configuration
  • Page Configuration
• Color Scheme
• Customization
  • CSS Variables
• Contributing
• License
• Demo
• Theme Structure
  • Template Organization
  • Assets
  • ExampleSite
• Updating
• Version Requirements
• Credits

Shibui (渋い) (adjective), shibumi (渋み) (subjective noun), or shibusa (渋さ) (objective noun) are Japanese words that refer to a particular aesthetic of simple, subtle, and unobtrusive beauty. Like other Japanese aesthetics terms, such as iki and wabi-sabi, shibui can apply to a wide variety of subjects, not just art or fashion.

Features

• Minimalist design following Shibui (渋い) aesthetics
• Terminal-inspired navigation
• Clean typography with monospace font
• Semantic HTML with proper text styling (bold, italic, blockquotes)
• Paper-like color scheme
• Automatic dark/light theme support
• Nested heading counters
• Zero JavaScript (pure CSS solutions)
• Highly customizable through CSS variables
• Mobile-responsive layout
• Table of Contents support
• Tags support

Installation

As a Git Submodule

git submodule add https://github.com/ntk148v/shibui.git themes/shibui
git submodule update --init --recursive

Configuration

Add the following to your config.toml:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'Your Site Title'
theme = "shibui"

[params]
  author = "Your Name"
  email = "your.email@example.com"

[menu]
  [[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 1
  [[menu.main]]
    name = "About"
    url = "/about/"
    weight = 2

Page Configuration

In the front matter of your content files:

---
title: "Your Post Title"
date: 2023-06-13
tags: ["hugo", "theme"]
---

Color Scheme

The theme uses a paper-like color palette:

/* Colors */
--color-bg-primary: hsl(0, 0%, 99%);
--color-bg-secondary: hsl(0, 0%, 97.3%);
--color-border: hsl(0, 0%, 93%);
--color-text-primary: hsl(0, 0%, 9%);
--color-text-muted: hsl(0, 0%, 43.5%);
--color-text-code: hsl(0, 0%, 20%);
--color-selection-bg: hsl(0, 0%, 85.8%);

Customization

CSS Variables

You can customize the theme by overriding CSS variables in your assets/css/custom.css:

:root {
  /* Typography */
  --spacing-base: 1.5em;          /* Base line height and spacing unit */
  --font-family-mono: monospace;  /* Base monospace font */
  --font-size-base: 1em;         /* Base font size */
  --font-size-small: 0.9em;      /* Small text size */

  /* Colors */
  --color-bg-primary: hsl(0, 0%, 99%);
  --color-bg-secondary: hsl(0, 0%, 97.3%);
  --color-border: hsl(0, 0%, 93%);
  --color-text-primary: hsl(0, 0%, 9%);
  --color-text-muted: hsl(0, 0%, 43.5%);
  --color-text-code: hsl(0, 0%, 20%);
  --color-selection-bg: hsl(0, 0%, 85.8%);
}

Contributing

Contributions are welcome! Primary goals are:

• Maintain minimalist design principles
• Keep it simple and efficient
• Avoid JavaScript when CSS can solve the problem
• Follow Shibui (渋い) aesthetics

License

MIT

Demo

Visit the demo site to see the theme in action.

Theme Structure

shibui/
├── archetypes/          # Content template files
├── assets/
│   ├── css/            # Theme CSS files
│   └── js/             # Theme JavaScript files
├── layouts/            # Template files
│   ├── _default/       # Default templates
│   ├── _partials/      # Reusable template parts
│   └── index.html      # Homepage template
├── static/             # Static assets
└── exampleSite/        # Example site for reference

Template Organization

• layouts/_default/baseof.html: Base template with common layout
• layouts/_default/single.html: Template for individual pages
• layouts/_default/list.html: Template for section pages
• layouts/_partials/: Contains reusable components like header, footer
• layouts/index.html: Homepage template

Assets

The theme uses a minimal set of assets:

• CSS: Single stylesheet with CSS variables for customization
• JS: Optional JavaScript for enhanced functionality
• Static: Basic favicon and other static assets

ExampleSite

The exampleSite directory contains a complete example of a site using the theme. Use it as a reference for:

• Configuration setup
• Content organization
• Front matter examples
• Menu structure

Updating

Since the theme is installed as a Git submodule, you can update it to the latest version with:

cd themes/shibui
git pull origin main

Version Requirements

• Hugo Extended v0.93.0 or higher
• Go 1.18 or higher (for Hugo modules)

Credits

This theme was inspired by various minimalist designs and the Japanese concept of Shibui (渋い). Special thanks to:

• William Jansson
• The Hugo community
• Minimalist design principles
• Japanese aesthetics, particularly Shibui