Background Decals

General Information

  • The background decals are provided in a SCSS file, which can be imported through the @use '$lib/decals.scss' as *; statement. On top of that, the lang="scss" property must be included in the style block declaration.
  • The decals themselves are defined as mixins, which essentially are function calls that can be used in CSS to generate a piece of styling. Internally, the decals are implemented as a masking operation on the target element. As such, the decals should always be included as a div element or in an ::after block to avoid masking of content.
  • The following mixins are provided, that can be included using the @include statement. Note that the examples on this page adhere to the listed ordering. Alternatively, consult the static/images/svg/decals folder for a visual reference of the available decals.
    1. string-symbol(...);
    2. string-symbol-2(...);
    3. brain-symbol(...);
    4. outer-brain-symbol(...);
    5. bulb-symbol(...);
  • Each mixin accepts four parameters, namely:
    1. color: Sets the color of the decal (affects background-color).
    2. opacity: Sets the opacity of the decal (default 100%, affects opacity).
    3. size: Defines the size of the decal (default contain, affects mask-size).
    4. position: Defines the position of the decal (default initial, affects mask-position).
  • Note that the parameters included in a mixin can be overwritten by adding the associated css property to the target element. The latter can be used to reconfigure the mixin in dark mode.

Examples

Minimal Configuration

The minimal configuration requires just a color to be passed to the mixin. Colors can be provided as-is, i.e., any color that would be accepted by a color or background-color css properties is a valid color.

@include string-symbol(var(--yellow));

Code example (second-to-last frame)

.background {
  &::after {
    content: '';
    inset: 0;
    @include outer-brain-symbol(var(--yellow));
  }
}

Include Opacity

Opacity can be achieved in two ways:

  1. The first option is to include the opacity as a parameter through the mixin (odd examples).
    @include string-symbol(var(--yellow), 25%);
  2. Alternatively, one may define an opacity property (even examples).
    opacity: 25%;

Code example (last frame)

.background {
  &::after {
    content: '';
    inset: 0;
    @include bulb-symbol(white, 25%);
  }
}

Scale & Position (& Transform)

The size and position of a decal can be configured in the following ways:

  1. The size and position can be defined as parameters in the mixin include.
    @include brain-symbol(red, 100%, var(--full-block), 0%);
  2. Alternatively, one can define mask-size and mask-position properties (even examples).
    mask-size: calc(var(--full-block) * 3); mask-position: -25% 50%;

The mixin doesn't provide a parameter for transforms. Therefore, apply transforms by including a transform statement on the target element.

Code example (leftmost frame)

.background {
  &::after {
    content: '';
    inset: 0;
    left: calc(var(--full-block) * -1);
    right: calc(var(--full-block) * -1);
    @include string-symbol(var(--yellow), 100%, calc(var(--full-block) * 4), 50% 25%);
    transform: rotate(50deg);
  }
}