Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wonyoung-jang/hugo-polyrhythmic
A (mostly) CSS implementation of Material Design 3, as a Hugo theme. Read more at https://wonyoungjang.org/hugo-polyrhythmic/
https://github.com/wonyoung-jang/hugo-polyrhythmic
css hugo hugo-theme logseq material material-design-3 material-you
Last synced: about 12 hours ago
JSON representation
A (mostly) CSS implementation of Material Design 3, as a Hugo theme. Read more at https://wonyoungjang.org/hugo-polyrhythmic/
- Host: GitHub
- URL: https://github.com/wonyoung-jang/hugo-polyrhythmic
- Owner: wonyoung-jang
- License: mit
- Created: 2024-08-15T21:13:12.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-09-22T20:08:33.000Z (6 days ago)
- Last Synced: 2024-09-25T06:32:59.544Z (3 days ago)
- Topics: css, hugo, hugo-theme, logseq, material, material-design-3, material-you
- Language: CSS
- Homepage: https://polyrhythmic.xyz
- Size: 10.7 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Hugo PolyRhythmic | Live Demo
Fast | Responsive | Material Design 3
❗This theme is still very much in development. Please use with caution.
PolyRhythmic is on:
Hugo Themes |
GitHub
[](https://github.com/gohugoio/hugo/releases/tag/v0.132.2)
[](https://github.com/wonyoung-jang/hugo-PolyRhythmic/blob/main/LICENSE)
## Key Features
- Active menu location indicator
- Archive support
- **Asset management**: pipeline, fingerprint, bundle, and minify Hugo assets
- Back-to-top button
- Backlinks and related page suggestions
- Code copy button
- **Contact template**: quick contact form
- Cover images for individual pages
- Custom tabbed navigation
- Debug mode for development
- GitHub repository buttons for pages
- Home page navigation buttons
- Keyboard shortcuts and access keys
- Light/dark theme toggle
- Logseq graphs as a Single Page Application (SPA)
- Multiple author support
- **"Now" page table**: list of recently updated pages
- Page navigation cards
- Random page button
- Responsive sticky table of contents
- Search functionality with Fuse.js
- SEO optimization
- **Sitemap template**: table with Hugo-specific columns
- Social media share buttons
- Taxonomies and sections organization
- **Theme customization**: control color, contrast, shape, typography, and more
## Key Differences from Material 3
- Adjustable content text width, font size, and line height
- Control over brand, plain, and mono typefaces
- Direction control for tertiary color
- Mono typeface addition
- No use of scripting for state layers
- Option to dim images in dark mode
- Shape scale control
---
## Install
1. Install Hugo: [Hugo Docs's - Quick Start](https://gohugo.io/getting-started/quick-start/)
2. Create a new Hugo site
```bash
# replace YourSite with your website's name
hugo new site YourSite --format yaml
```
3. Add PolyRhythmic to your `YourSite/themes/` directory
- **Option 1: Clone git repository:**
```bash
git clone https://github.com/wonyoung-jang/hugo-PolyRhythmic themes/PolyRhythmic --depth=1
```
- **Option 2: Download and unzip:**
- Download the PolyRhythmic source and extract the zip in your `YourSite/themes/PolyRhythmic` directory
- **Option 3: Use Hugo Modules**
- Install [Go](https://go.dev/doc/install)
- Intialize your own hugo module:
```bash
hugo mod init YOUR_GIT_REPO
```
- Add PolyRhythmic in your `config.yaml` or `module.yaml`
```yaml
# config.yaml
module:
imports:
- path: github.com/wonyoung-jang/hugo-PolyRhythmic
# module.yaml
imports:
- path: github.com/wonyoung-jang/hugo-PolyRhythmic
```
4. In your `config.yaml` add:
```yaml
theme: ["PolyRhythmic"]
```
---
## Support
- Star, share, and use this repository on [GitHub](https://github.com/wonyoung-jang/hugo-PolyRhythmic)
- If you would like to sponsor me, you can through [Github Sponsors](https://github.com/sponsors/wonyoung-jang)
- You may also donate on [Ko-Fi](https://ko-fi.com/wonyoung_jang)
---
## Thanks
- [**Fuse.js**](https://github.com/krisk/fuse)
- [**Material Symbols**](https://github.com/google/material-design-icons)
- [**Material Design 3**](https://m3.material.io/)
- [**Google Fonts**](https://fonts.google.com/)