This post originally appeared on The Fulcrum.
Time to Share CSS from our Bear Blog
In this LESS-focused article we are going to feature the simple CSS used on our Bear site. You can copy and paste the examples as needed to pretty up your site.
It's the second in a series after the initial Markdown post and an upcoming one on HTML.
FYI, we use the "Terminal" theme from Bear and have heavily customized it.
To edit your Bear site's CSS you go to the Themes page and select the Custom CSS link.
You can adjust what your theme provides and add new customizations.
CSS
Cascading Style Sheets aka CSS is a core language of the open web. You use it to add styles like fonts, colors, and spacing to your website.
BTW, if you are brand new to styling your site, fonts are collections of stylized letters, characters, and symbols, etc.
CSS styles your HTML which has been generated by the Markdown you wrote your Bear blog content in.
There is a lot you can do with CSS. Consequently, there are a lot of CSS options. But here, we are going to stick to the bare basics for use in your Bear website. 🐻
When selecting values for your CSS you can:
- choose web-safe colors from hexagonal options
- size your text, margins, paddings, etc. by em units
- and your choose fonts from internet safe fonts
We are sticking with the KISS philosophy with this advice.
You style items (technically HTML elements) with their equivalent CSS selectors, using a declaration where properties are paired with values.
For example your body selector could use a declaration that assigns the font-family property the value Arial or sans-serif. Or the color property the value red. Etc, etc, etc as you will see below.
Along with - hyphens, {} brackets, : colons, and ; semicolons they make up the syntax of CSS.
You combine them into code like this:
body {
font-family: Arial, sans-serif;
color: red;
}
On the page your body text would be rendered in the Arial font and the color red.
We won't explain every selector, property, and value here, but you can always learn as much as you want about CSS online.
Our Copy/Paste-able CSS Code
So, this is the CSS code for what you are seeing on your screen right now. Choose what you like and customize it for your site. ⌨️
Body
This selector covers everything in the body of your page's HTML document. So, just about all the text in it.
body {
font-family: Arial, sans-serif;
font-size: 1em;
margin: auto;
padding: 2em;
max-width: 720px;
text-align: left;
background-color: #000033;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: #ccccff;
}
strong, b {
color: #ccccff;
}
Main
This is everything that is not in the header or the footer. In our case it's what's inside the rectangular box including the heading, paragraphs, and links as seen above. Within Main are all the elements we will cover below like headings, links, images, tables, etc.
main {
margin-top: 40px;
margin-bottom: 20px;
padding: 30px;
border: 2px solid var(--text-color);
}
main {
line-height: 1.6;
}
Headings
Markdown headings equate to HTML headings. And you should use them in descending order. h1 is your page or post title, h2 are equivalent sections within your page, and h3 their subheadings. h4 are h3's subheadings etc, etc.
As seen here, you can separate their selectors with commas to assign shared properties and values in the declaration.
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Georgia', sans-serif;
color: #99ffcc;
}
For unique styling keep them separate.
h1 {
font-size: 2.25em;
}
h2 {
font-size: 1.83em;
}
h3 {
font-size: 1.18em;
}
h4 {
font-size: 1em;
}
You may want to style your title h1 separately because it's in your header. Whereas h2 to h6 heading selectors are in your pages and posts' bodies.
With Bear Blogs this is actually your site title not your page title or post title. Those are separate h1 headings in your body. Which is wrong in my opinion because you should only have one h1 heading, but WTF.
.title:hover {
text-decoration: none;
}
.title h1 {
padding: 5px 10px;
background: #99ffcc;
color: #bc8d6b;
display: inline-block;
font-weight: 400;
}
.title, a {
text-decoration: none;
}
Links
I hope you know what these are, but here is how you can style them.
a {
color: #ffccff;
cursor: pointer;
text-decoration: underline;
text-underline-offset: .4em;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #ffcc66;
}
nav a {
margin-right: 8px;
text-underline-offset: .4em;
}
Like the h1 title you can style your navigation links separately as they are in your header and maybe your footer as well. That way you can visually set them apart from the links in your main section.
Horizontal row / divider
This is the line you can add to break up your sections.
hr {
border: 0;
border-top: 2px solid;
color: #99ffcc;
}
Images
This is self evident and there are many cool options for customizing your image borders.
img {
max-width: 100%;
loading: lazy;
}
Blockquote
If you want to quote someone else or emphasis something short that is a motto or saying of yours, use blockquotes.
blockquote {
border-left: 4px solid #99ffcc;
color: #bc8d6b;
background-color: #fc6;
padding: 20px;
font-style: italic;
font-size: 1.25em;
margin-left: 0px;
margin-right: 0px;
}
Tables
This is old-school and you may not use them often. But, we are exploring tables here as we use them in a unique way on our Bear site. Mostly because you can write them in Markdown. Which is easier than using HTML and CSS to create them.
table {
width: 100%;
}
table, a {
border-spacing: 1em;
text-decoration-inset: 1ex -.5vw;
}
th {
border: 2px solid #99ffcc;
padding: .5em;
border-top-right-radius: 150px 100px;
text-align: center;
}
td {
border: 2px solid #99ffcc;
padding-left: 3em;
padding-right: 3em;
padding-top: 2em;
padding-bottom: 2em;
margin: 2em;
border-radius: 25% .25%;
border-color: #ccccff;
}
Blog post list
This is specific to Bear so that's why it's in this post. 🐻❄️
Of course this also applies to regular lists aka be they ordered (numerical) lists aka ol or unordered lists aka ul.
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
margin-bottom: 20px;
}
ul.blog-posts li time {
font-style: normal;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: #ffcc66;
}
Various
Here and there we have customized a few things that don't fit into the examples above.
.highlight {
border-left: 5px solid #99ffcc;
}
.tags {
font-size: 1.25em;
line-height: 2em;
word-spacing: 1.5em;
padding: 2em;
}
.upvote-button {
color: #ffcc66!important;
}
The upvote button is also unique to Bear sites. 🐨
Footer
Like the header, you can style things differently in your footer than you would your page's body and main. This helps set it apart.
footer {
padding: 25px 0;
text-align: center;
opacity: 0.6;
}
Summing it up
This article is for beginners so we kept it simple like Bear itself. 🐼 We hope you find it useful (and bookmarkable). Please experiment with custom styling via the link on the themes page of your Bear backend user interface. And thanks for having a personal site and contributing to the Open Media Network!
Share on Open Social Media
Copy and paste:
Explore: CSS - Creating Simple Site designs for your Bear Blogs. https://www.thefulcrum.dev/css-bear-blog/ #Bear #BearBlog #CSS
Explore More
To learn more you can take this quick free CSS tutorial.
Then you might take a paid course.
And after you bone up, CSS Tricks is a great resource for exploring the elaborate stuff.
They have:
Good luck becoming a web designer and having a beautiful site. But, don't fucking use AI to get there.
CTAs
- Please share this article.
- Follow us on Surf or at @thefulcrum@thefulcrum.dev on the Fediverse or at @thefulcrum.eurosky.social on the Atmosphere for daily coverage.
- Read, live, and share The Techno Anarchist Manifesto!
- Escape techshit with the LESS Stack.
And please build something for a community! We're promoting the LESS stack via our Manade project.
Top comments (0)