Post last modified on 3 days, 12 hours ago.

This is one of the things that I did.

WARNING: This code is coded based off of Mozilla Firefox usage. It may look slightly off in non-Firefox-based browsers. Mobile viewing is not guaranteed if you have long navigation bar (more than 5 links) or longer than 30-word count¹ combined (if less than 5 links in Nav Bar). 4 Links (30-word count or less) in nav bar is recommended if you still want to use this theme.

Past Update:

18 July 2026
Release.

Blog View with the theme.

Turbilism Basic Theme

This is the basic version, the full version is here.

This is my version of minimalism style. It bears the bear colour. This theme is built for Bear Blog, easy on the eyes, easy readability on PC.

If you have class_name on your current theme, please read the class_name section.

Both Turbilism versions are using default bear base codes. So you might recognise some of them as I have left it there by default.

Click/Tap to view CSS:

CSS Code:

/* CSS made by turbiegaming.bearblog.dev. */
/* Layout Version 0.3.1 Updated on 20 Jul 2026. */

:root {
    --max-width: 875px;
    --line-height: 1.5;
    --font-main: Consolas, sans-serif;
    --font-secondary: Verdana, sans-serif;
    --font-scale: 19px;
    --background-color: #01242e;
    --background-secondary-color: #145266;
    --heading-color: #FFFFFF;
    --text-color: #D6D6D6;
    --text-secondary-color: #11D41E;
    --time-text-color: #57B848;
    --link-color: #37AFF0;
    --visited-color:  #AD00FF;
    --border-color: #0040FF;
    --border-secondary-color: #32A1AB;
    --hover-color: #052E3B;
    --hover-secondary-color: #006EA6;
    --nav-color: #06171C;
    --code-background-color: #000;
    --code-color: #BABABA;
    --blockquote-color: #ccc;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--max-width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: var(--line-height);
    color: var(--text-color);
}

header {
    background-color: var(--background-secondary-color);
    border-style: solid;
    border-width: 2.5px;
    border-color: var(--border-secondary-color);
}

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

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

a:hover {
    text-decoration: underline; 
    background-color: var(--hover-color);
}

nav {
    background-color: var(--nav-color);
    border-top: 2px solid;
    border-color: var(--border-secondary-color);
    height: 26px;
    margin: 1px;
    padding-top: 1.7px;
    padding-bottom: 5.1px;
}

nav p {
    margin: auto;
    padding: 1px;
    text-align: center;
}

nav a {
    margin-left: 1px;
    margin-right: 1px;
    padding: 5.5px;
}

nav a:hover {
    background-color: var(--hover-secondary-color);
}

strong, b {
    color: var(--text-color);
    font-weight: 1000;
}

button {
    margin: 0;
    cursor: pointer;
}

time {
 	font-family: Lucida Console, monospace;
    font-style: normal;
    font-size: 15px;
    color: var(--time-text-color);
    padding: 5px;
    border-bottom: 2px solid;
    border-color: var(--border-color);
}

table {
    width: 90%;
}

hr {
    border: 1;
    border-top: 1px solid;
    border-color: var(--border-color);
}

img {
    max-width: 90%;
}

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

blockquote {
    margin-left: 15px;
    border-left: 3px solid;
    border-color: var(--blockquote-color);
    color: var(--text-secondary-color);
    padding-left: 22px;
    font-style: italic;
}

footer {
    padding: 14px 0;
    margin: auto;
    text-align: center;
    font-size: 15px;
    line-height: 1.2;
    color: var(--text-secondary-color);
    max-width: var(--max-width);
}

.title:hover {
    text-decoration: underline 3.5px;
    text-decoration-color: var(--heading-color);
}

.title h1 {
    font-size: 45px;
    border-color: var(--border-color);
}

.title {
    margin: auto;
    text-align: center;
}

.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;
}

/* main body */
main {
    position: relative;
    padding: 10px;
    line-height: 1.3;
}

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

ul.blog-posts li {
    display: flex;
    font-size: 18px;
    padding-top: 1.5px;
    line-height: 1.8;
    margin: 3px;
}

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

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

ul.blog-posts a {
    border: 2px solid;
    border-radius: 7px;
    border-color: var(--border-secondary-color);
    background-color: var(--background-secondary-color);
    padding-left: 4px;
    padding-right: 4px;
    width: var(--max-width);    
    text-align: center;
    margin: auto;
}
ul.blog-posts a:hover {
    background-color: var(--hover-color);
}

Most of the codes are available on the base default bear theme. So in theory, I didn't change much to the code except for adding a couple of things here and there to make it my style.

How to Use

Copy the code above and replace everything in Theme.

P.S: In order to make the theme fully workable, make sure you copy WITH the :root that I included in the code above. I will be making individual palettes (like the Bear Blue colour that I used for both Turbilism theme) soon.

Home page view with the theme.

Class_Name

If you currently using any individual class_name and still want to retain/use it after using this theme, the easiest way is:

save all the class_name into a notepad (or notes app) and replace everything in there with this code. If you're editing directly on a smartphone (or mobile phone, depend on how you call it), or an Apple Tablet (or Galaxy Tab), make sure you "publish" (to save) first. This is to prevent accidental page reload².
Then go into your notepad (or notes app) and copy the class_name you have available and paste it back in.
Publish it to confirm.

P.S: I am not responsible for external class_name that isn't made by me. This is because their call tag (in :root) for colours like text, background etc may be different from mine.

I hope you enjoy and happy blogging!

By 30-word count, I meant more like what was shown when viewing the blog, you can have your links as long as you want while in Nav -> dashboard/nav/.↩
Sometimes for some unknown reason, it refreshes the page when you're switching between apps.↩

18 July 2026

Blog View with the theme.

CSS Code:

How to Use

Home page view with the theme.

Class_Name