Bearming Theme for Bear Blog

Bearming Theme

Bearming is a theme for the Bear blogging platform, and you're seeing it in action right now.

It offers a clean and crisp reading experience, using high contrast and clear fonts to enhance readability and the overall user experience. See what others are saying about the theme.

Beyond the basic styles, Bearming offers a continually expanding selection of optional add-ons and color palettes (coming soon). These provide additional customization and design options to match your personal style.

The Bearming theme, which is free to use and customize as desired, was last updated 1 day, 10 hours ago (see the changelog).

Theme Add-ons Palettes

/*
  Name: Bearming
  Version: 1.2.7
  About: birming.com/bearming
*/

/* Import fonts from fonts.google.com */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Fonts */
:root {
  --font-main: "Atkinson Hyperlegible", sans-serif;
  --font-secondary: "Inter", sans-serif;
}

/* Colors: Light mode */
:root {
  --background-color: #ffffff;
  --accent-color: #e3e3e3;
  --text-color: #333333;
  --link-color: #005599;
}

/* Colors: Dark mode */
@media (prefers-color-scheme: dark) {
:root {
  --background-color: #002233;
  --accent-color: #224455;
  --text-color: #f2f2f2;
  --link-color: #99ccee;
  }
}

/* Global resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

/* Basic styles */
body {
  margin: 10px auto;
  padding: 20px;
  max-width: 680px;
  font-family: var(--font-main);
  font-size: 1.15em;
  line-height: 1.5;
  text-align: left;
  color: var(--text-color);
  background-color: var(--background-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
}
main h1 {
  font-size: 2em;
  line-height: 1.2;
}
.title h1 {
  display: inline-block;
  margin: 0 0 5px;
  font-size: 1.9em;
  font-weight: 900;
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: underline;
}
main a {
  text-decoration: underline;
}
a.title,
.title:hover {
  color: var(--text-color);
  text-decoration: none;
}

/* Form elements */
input, button, textarea, select {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}
legend {
  margin: 20px 0;
  font-weight: bold;
}
label {
  display: block;
  font-weight: bold;
}
input,
textarea {
  margin: 0 0 10px;
  padding: 5px 10px;
  color: var(--text-color);
  background: var(--accent-color);
  border: 2px solid var(--link-color);
  border-radius: 5px;
}
input {
  width: 55%;
}
textarea {
  width: 95%;
}
input[type=button], input[type=submit], input[type=reset] {
  margin: 0 0 20px;
  padding: 7px;
  font-family: var(--font-secondary);
  font-weight: bold;
  color: var(--background-color);
  background: var(--link-color);
  border-radius: 5px;
  cursor: pointer;
}
::placeholder {
  color: var(--text-color);
  opacity: 0.7;
}

/* Misc elements */
time {
  font-family: var(--font-secondary);
  font-style: normal;
  font-size: .8em;
  opacity: 0.8;
}
p time {
  display: block;
  margin: -20px 0 25px;
}
table {
    width: 100%;
}
hr {
  border: 0;
  border: 1px dashed var(--accent-color);
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  margin: 0 0 25px;
}
blockquote {
  margin: 25px 0;
  padding: 2px 25px;
  font-style: italic;
  background: var(--accent-color);
  border-radius: 10px;
}

/* Navigation */
nav {
  margin: 0 0 30px;
  font-family: var(--font-secondary);
}
nav p {
  display: inline;
  line-height: 45px;
}
nav a {
  margin-right: 6px;
  padding: 6px 12px;
  font-size: .8em;
  color: var(--link-color);
  border: 1px solid;
  border-color: var(--link-color);
  border-radius: 15px;
  text-decoration: none;
}
nav a:hover {
  background: var(--accent-color);
}

/* Footer */
footer {
  padding: 25px 0;
  font-family: var(--font-secondary);
  text-align: center;
  font-size: .8em;
}
footer a {
  text-decoration: none;
}
footer strong {
  font-size: 1.1em;
}
.home footer hr,
.blog footer hr {
  display: none;
}

/* Blog list */
ul.blog-posts {
  margin: 50px 0 20px;
  padding: 0;
}
ul.blog-posts li {
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid var(--accent-color);
}
ul.blog-posts li:last-child {
  border-bottom: 1px solid var(--accent-color);
}
ul.blog-posts li a {
  float: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 110px);
}
ul.blog-posts li time {
  float: right;
  margin: 3px 0 0;
}

/* Misc styles */
.inline {
  width: auto !important;
}
.code,
.highlight {
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding: 1px 15px;
  overflow-x: auto;
  background-color: var(--accent-color);
  border-radius: 3px;
}
.tags a {
  display: inline-block;
  margin: 15px 5px 0 0;
  padding: 4px 9px;
  font-size: .8em;
  background: var(--accent-color);
  border-radius: 5px;
  text-decoration: none;
}
.footnote,
.footnote-ref a {
  text-decoration: none;
}

/* ADD-ONS */

/* Print styles */
@media print {
body {
  background: #fff;
  color: #000;
  font-family: Georgia, serif;
}
nav {
  display: none;
}
h1, h2, h3 {
  line-height: 1.3;
  font-family: Helvetica, sans-serif;
}
a,
main a {
  color: #000;
  text-decoration: none;
}
blockquote,
code {
  background: #fff;
  margin: 0;
  padding: 0 1.5em;
  border: none;
}
nav,
footer,
.tags,
.upvote-button {
  display: none !important;
}
}