Footer styles
The default Bear Blog theme keeps the footer simple, just a line or two of text. That leaves a lot of room to experiment, and it's the one spot every page shares.
This page collects small CSS tweaks and variations for the layout and structure of the footer. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.
Last updated 1 week, 2 days ago.
Tighter spacing
/* Footer: tighter spacing | robertbirming.com */
footer {
margin-block-start: 2rem;
}
footer p {
margin-block: 0.3em;
}
Split
/* Footer: split | robertbirming.com */
footer {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 16px;
}
footer p {
margin-block: 0;
}
Top border
/* Footer: top border | robertbirming.com */
footer {
margin-block-start: 2rem;
padding-block-start: 1rem;
border-block-start: 1px solid;
}
Uppercase
/* Footer: uppercase | robertbirming.com */
footer {
font-size: 0.85em;
}
footer p {
letter-spacing: 0.06em;
text-transform: uppercase;
}
Card
/* Footer: card | robertbirming.com */
footer {
margin-block-start: 2rem;
padding-block: 1rem 1.7rem;
padding-inline: 1.2rem;
background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
border-radius: 8px;
}
footer p {
margin-block: 0.7em;
}
Muted
/* Footer: muted | robertbirming.com */
footer {
padding-block-start: 1rem;
font-size: 0.9em;
color: color-mix(in srgb, var(--text-color), var(--background-color) 60%);
}
footer p {
margin-block: 0.3em;
}
Bordered
/* Footer: bordered | robertbirming.com */
footer {
margin-block-start: 2rem;
padding-block: 1rem 1.7rem;
padding-inline: 1.2rem;
border: 1px solid;
border-radius: 8px;
}
footer p {
margin-block: 0.7em;
}
Have fun giving every page a nice ending.
Want more? Check out the full Bear Blog library.