🎄 Santa Hat | FixIt

Features

• 🎅 Automatically adds Santa hat decoration to site logos during Christmas season (December 20-26)
• 🎯 Automatic date detection, no manual toggling required
• 💫 Lightweight implementation with no performance impact

Requirements

• FixIt v1.0.0 or later.

Install Component

The installation method is the same as installing a theme. There are several ways to install, choose one, Here are two mainstream ways.

Install as Hugo Module

First make sure that your project itself is a Hugo module.

Then add this theme component to your hugo.toml configuration file:

1
2
3
4
5
6
7

[module]

[[module.imports]]
path = "github.com/hugo-fixit/FixIt"

[[module.imports]]
path = "github.com/hugo-fixit/cmpt-santa-hat"

On the first start of Hugo it will download the required files.

To update to the latest version of the module run:

1
2

hugo mod get -u
hugo mod tidy

Install as Git Submodule

Clone FixIt and this git repository into your theme folder and add it as submodules of your website directory.

1
2

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git submodule add https://github.com/hugo-fixit/cmpt-santa-hat.git themes/cmpt-santa-hat

Next edit hugo.toml of your project and add this theme component to your themes:

1

theme = ["FixIt", "cmpt-santa-hat"]

Configuration

In order to Inject the partial santa-hat.fixit.html into the custom-assets through the custom block opened by the FixIt theme in the layouts/_partials/custom.html file, you need to fill in the following necessary configurations:

1
2
3
4
5
6
7
8

[params]

[params.custom_partials]
# ... other partials
assets = [
  "inject/santa-hat.fixit.html",
]
# ... other partials

Styling

• Recommended logo size: 32x32 pixels.
• CSS variables:
  • --fi-santa-hat-offset: Controls hat translation relative to the logo, default 8px 2px.
  • --fi-santa-hat-shadow: Controls hat shadow color, default light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6)); automatically adapts to light/dark mode.