Badge

The badge is an optional small link to halloween.js: "🎃 Halloween effects by halloween.js". It is off by default. Use it if you want to credit the project.

<body class="halloween halloween-badge">

The badge shows only when both gates are open: the halloween class is on <body> and today is inside the season window. Outside the season it is removed with everything else.

Classes#

Where it is placed#

By default the badge is a normal block at the very end of <body>, after your content. It is not part of the fixed effects layer, so it can never sit on top of a chat widget, a cookie banner, a toast or a modal.

To put it somewhere else, for instance inside your own footer, add this attribute to the element that should hold it. The first matching element on the page is used.

<footer data-halloween-badge-slot></footer>

The alignment classes apply to a badge in a slot as well.

Short pages#

When the page content is shorter than the window, a badge at the end of <body> would float up directly under the content. The library adds the missing height above it as a margin, so the badge sits at the bottom edge of the screen. It does not change <body>'s own layout. A tall page gets no extra space. This applies only when the badge is in <body>. A badge in a slot stays where your markup puts it.

Styling#

All variables are optional and can be set on :root or body.

The badge does not follow --halloween-color. It has the variables above.

:root {
  --halloween-badge-color: #ff6b00;
  --halloween-badge-bg: #1a1a1a;
}

The link#

It points to https://halloween.js.org/, opens in a new tab and uses rel="noopener nofollow". The element has the class halloween-badge-link. It is a pill with a 1px border, a 999px radius and a 6px by 14px padding, shown as a block no wider than the screen.