Let's support our LGBTQ+ friends and family ›

Khoa's Space

A little pride for your corner of the web

Hi fellow bloggers,

I want to dedicate the banner position of my blog to Pride Month. If you want to do the same, here is how (for BearBlog users):

  1. Add the HTML snippet into the header directive. You can also change the link and the message.
  2. Add the custom CSS to your BearBlog theme. Here, I used the font Fraunces, make sure that you have changed it accordingly.

If you are not on BearBlog or have any questions, please don't hesitate to reach out. Also, please let me know if you implemented it (no pressure tho)!

πŸ––πŸ‘½, Khoa.

Community echoes:

How to use

<a class="pride-strip" href="https://www.thetrevorproject.org/pride/" target="_blank" rel="noopener noreferrer">
  <div class="pride-strip__inner">I support Pride Month &rsaquo;</div>
</a>

/* ========== Pride Month Banner. Whoop! ========== */
.pride-strip {
  display: block;
  border-radius: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    #ffb3ba,
    #ffcba4,
    #fff3a3,
    #b5ead7,
    #a8d8f0,
    #c9b8f5,
    #f5b8d8
  );
  text-decoration: none;
}
.pride-strip::after { content: none !important; }

.pride-strip__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.25em 1.125rem;
  font-family: 'Fraunces', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2e1a47;
  letter-spacing: -0.02em;
}
Reply to this post

#pride2026 #resource