Bear blog styles

28 Mar, 2023

Updating the styles

I like Bearblog so far, it is nice, it is simple, it is built with Django. What is not to like?

There are a couple of things about the default style that I have changed though.

What is my problem with the footer? Well, normally I struggle to write too much and I don't always fill the page¹. A good example would be my bear blog homepage. That means the footer is hanging out in the middle of the page. I am not a fan of that. I need my footer to be at the bottom always. This has been a problem for me on pretty much every site I have made, I normally have at least one page that doesn't have enough content to push my footer to the bottom. Because it happens to me a lot, I know how to sort it. There are a few ways to get around this (I think) but I always use flex box and then flex-grow for the content section/container.

The nav

There isn't anything wrong with the nav, I just ~~needed~~ added a variable used to set some values based around that. Mainly, it is used to calculate the minimum height of the page. There are some other bits that use it but I'm not writing about that. Changing the following variable should adjust everything accordingly:

:root {
    --nav-height: 50px;
}

The rest

The only other thing that I changed was the link hover CSS. I don't like link decoration so underline on hover is a no thank you from me. So, I took it out.

That is it.

The code

Added or edited

These are the pieces of code that were either added or edited

:root {
    --nav-height: 50px;
}

body {
    display: flex;
    flex-direction: column;
    margin : var(--nav-height) auto 0 auto;
    padding: 0px 20px;
    min-height: calc(100vh - var(--nav-height));
}

main {
    flex-grow: 1;
}

a:hover {
     color: var(--visited-color);
}

nav {
    height: var(--nav-height);
}

footer {
    padding: 20px 0;
    text-align: center;
}

Everything

:root {
    --width: 50rem;
    --nav-height: 50px; //***THIS IS NEW***
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-secondary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-scale: 1.2em;
    --background-color: #0d1117;
    --heading-color: #e3e9f0;
    --text-color: #c9d1d9;
    --link-color: #e3bc5e;
    --visited-color: #dfcc9e;
    --code-background-color: #000;
    --code-color: #c9d1d9;
    --blockquote-color: #c9d1d9;
}

body {
    display: flex; //***THIS IS NEW***
    flex-direction: column; //***THIS IS NEW***
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin : var(--nav-height) auto 0 auto;  //***THIS IS DIFFERENT***
    padding: 0px 20px;
    max-width: var(--width);
    min-height: calc(100vh - var(--nav-height)); //***THIS IS DIFFERENT***
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
}

main {
    flex-grow: 1; //***THIS BLOCK IS NEW***
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
}

strong, b {
    color: var(--heading-color);
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
}

a:hover {
     color: var(--visited-color); //***THIS IS DIFFERENT***
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--nav-height); //***THIS IS DIFFERENT***
    z-index: 999;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

nav p {
    width: 50rem;
    padding: 0 20px;
    margin: 0 auto;
}

nav a {
    margin-right: 15px;
    font-size: 0.9em;
}

button {
    margin: 0;
}

content {
    line-height: 1.6;
}

table {
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px dashed;
}

img {
    max-width: 100%;
}

code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
}

blockquote {
    border-left: 1px solid #999;
    color: var(--code-color);
    padding-left: 20px;
    font-style: italic;
}

footer {
    padding: 20px 0;
    text-align: center;
}

button {
    border: 0;
    background-color: inherit;
    text-decoration: underline;
    color: var(--heading-color);
}

.title {
    text-decoration: none;
}

.title h1 {
    color: var(--link-color);
}

.inline {
    width: auto !important;
}

.highlight,
.code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    overflow-x: auto;
}

/* blog post list */
ul.blog-posts {
    list-style-type: none;
    padding: unset;
}

ul.blog-posts li {
    display: flex;
}

ul.blog-posts li span {
    flex: 0 0 130px;
}

ul.blog-posts li a:visited {
    color: var(--visited-color);
}

The irony is not lost on me. This turned out to be quite a lengthy post in the end.↩

#bearblog #how-to

Joe Robinson