Pride Bars

A little flair for Pride month

Pride month is coming soon, and I’ve decked out my site a little early by adding a narrow pride bar to the top of every page.

I pulled the CSS styles from pride.codes into my stylesheets with a few changes:

Changed to my own color palette.
Added white, light blue, and pink.
Fitted the bars to the width of my main container rather than of the full page.
Stripped out everything but the linear-gradient() function.

Here’s the CSS that I ended up with:

body:before {
  max-width: min(90vw, 800px);
  margin: 0 auto;
  height: 4px;
  background-size: 100% 100%;
  content: '';
  display: block;
  background-image: linear-gradient(to right,
    /*RED   */ #E50000  0%, #E50000 11%,
    /*ORANGE*/ #FF8D00 11%, #FF8D00 22%,
    /*YELLOW*/ #FFEE00 22%, #FFEE00 33%,
    /*GREEN */ #028121 33%, #028121 44%,
    /*BLUE  */ #004CFF 44%, #004CFF 56%,
    /*PURPLE*/ #760088 56%, #760088 67%,
    /*WHITE */ #FFFFFF 67%, #FFFFFF 78%,
    /*PINK  */ #FFAFC7 78%, #FFAFC7 89%,
    /*LTBLUE*/ #73D7EE 89%, #73D7EE 100%);
}

To make the bar stretch to cover the entire width of the page, all that’s needed is to replace the max-width property with width: 100%; and remove the margin property.