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):
- Add the HTML snippet into the header directive. You can also change the link and the message.
- 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.
ππ½, Khoa.
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 ›</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;
transition: opacity 0.2s ease;
}
.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;
}