holiday theme

From IndieWeb
(Redirected from holiday)
Jump to: navigation, search

Holiday theme is a temporary custom CSS or other change in a website typically meant to visually indicate the celebration of a holiday or special occasion.

Why

A holiday theme is a way of celebrating the holidays that you care about. Like how one would hang up a Christmas tree to celebrate Christmas, one may decide to decorate their digital house appropriately when a special occasion is coming up or has arrived.

IndieWeb Gift Calendar

Looking for the latest seasonal end of year IndieWeb Gift Calendar? See:

How

A holiday theme may include:

  • Changes to the styles of a website (such as a colored background)
  • An announcement banner informing people of a special occasion

IndieWeb Examples

Chris Aldrich

  • Chris Aldrich has previously made small changes to background elements to indicate the celebration of particular holidays
    • Christmas 2016 - added an "Ugly Sweater" background to the typically black frame around his page as well as a snow-effect (via JetPack) for the month of December to celebrate the end of year holidays.
    • Ugly Sweater Holiday Border

Eddie Hinkle

capjamesg

James has made a few holiday updates to his site:

  • Added a banner to his website that displays his birthday on his website. The countdown was manually updated three days in advance of his birthday.
    • Birthday announcement
  • Celebrated Halloween 2021 by adding a spooky banner and changing the emoji in his blog's name to a pumpkin.
  • On November 27th, 2021, in anticipation of December, capjamesg updated his website to use a Christmas theme, pictured below:
    • James' website with banner and border colours changed to red and green in some places

Aaron Parecki

  • The home page shows animated balloons on his birthday since 2016
  • The pixel grid turns orange and black during the month of Halloween
  • The background map changes to orange theme during the month of halloween

Silo Examples

WordPress

Github

  • For Halloween 2017, 2020, (and possibly others?), GitHub changed the colors of their standard contributions calendar visualization from the traditional shades of green to shades of yellow, oranges, and black to celebrate Halloween

Github-Halloween.png

Facebook

  • Customization for birthday celebrations
    • need examples

Google

  • Has previously done custom overlays on pages in celebration of their birthdays
    • need examples

Twitter

Letterboxd

  • For Halloween, Letterboxd changed their three circle logo to give each circle a scary, ghostish face and animate it to appear as if it was slowly dripping blood.
Letterboxd Halloween logo screencapture

Brainstorming

Highlighting colors

Inspired by the CSS-based counter display at https://www.pinknews.co.uk/ one could implement highlighting colors for either personal branding or for holiday decoration. It has a clever little hack such that when you highlight across multiple paragraphs it gives each paragraph a different color for a rainbow effect.

Screencapture from article showing multiple paragraphs which are highlighted in a rainbow of different colors.

It's done with a set of styles like: p:nth-child(6n+5)::selection { background-color: blue }

Basically, for every <p> element in the main body of text it just cycles through 5 or 6 possible background colours, using the ::selection pseudo selector (?) to only appear when highlighted and nth-child to target each paragraph differently.

Ideas:

  • Pastel colors for Spring/Easter
  • Red, white and blue for Fourth of July?
  • Orange/black for Halloween?
  • red/white for candy canes or Red/Green in December

This could also be used to spice up one's fragmentioner as well.


See Also