This is my current theme (Nov 30, 2025). It might change, Idk. You can use it if you want. If you do, you need to attribute the photographers and artists by linking to my attributions or listing the attributions on a post yourself. (Some of the sources I’m using say they require attribution. You do not have to attribute me, but you can.)

WARNING: Back up your theme before using mine. You can do it in a draft blog post or a notepad file on your computer or whatever else.

NOTICE: I might make changes to this, but I don’t know. I will post to #bearblog if I publish any changes, and you can subscribe to see those.

/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');
*/

:root {
/* a color i saved idk why: #847996 */
cursor: url('https://reedybear.com/bearblog/cursor-wh.png'), auto;

/* Standard: Things that are non-creative, such as shades of black/white/grey.*/
--font-main: 'Roboto Mono', monospace;
--font-secondary: 'Roboto Mono', monospace;
--font-scale: .9em;
--heading-color: #232333;
--text-color: #232333;
--link-color: #232333;
--visited-color: #232333;
/*--main-color: #ff0000;*/
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}

/* my main styles */
:root {
/* header */
--header_background: #620062;
--header_background_mobile: #620062;
--header_border_radius:  0px 0px 16px 16px;
--header_link_color: white;
--header_heading_color: #FCEF30;
--header_shadow_color:  #9d009d;
--header_link_underline_color: #FCEF30;
--header_link_hover_background: none;
--na_header_h1_background: none;

/* link hover */
--link_hover_underline_color: orange;
--link_hover_color: white;
--link_hover_border_color: orange;
--link_hover_border_top_color: purple;

/* other */
--underline_color: #a000a0;
--body_box_shadow: inset 0px 0px 3px #d900d93b ,0px 10px 10px #8000808a;
--toc_border_color: #9674cc; /* dark mode: #8439d */
--background_body: #fff;
--background_main: inherit;
--background_main_mobile: inherit;
--upvote_count_bg: #8b398b;
--main_padding: 20px;

}

/* Christmas 2025 styles */
:root {
/* header */
--header_background: #06672F;
--header_background:
url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/2025-christmas-lights-top-lgbear-1.png)
left/contain repeat-x, linear-gradient(352deg,rgba(255, 0, 5, 1) 0%, rgba(6, 103, 47, 1) 29%, rgba(6, 103, 47, 1) 72%, rgba(255, 0, 5, 1) 100%);

--header_background_mobile:
url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/2025-christmas-lights-top-lgbear.png)
left/contain repeat-x,
linear-gradient(344deg,rgba(255, 0, 5, 1) 0%, rgba(6, 103, 47, 1) 29%, rgba(6, 103, 47, 1) 72%, rgba(255, 0, 5, 1) 100%);
--header_border_radius: 0;
--header_link_color: white;
--header_heading_color: white;
--header_shadow_color: #146B3A;
--header_link_underline_color: #FF0005;
--header_link_hover_background: #FF0005;
--na_header_h1_background: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/2025-christmas-lights-1.png) center/contain repeat-x;

/* link hover */
--link_hover_underline_color: #BB2528;
--link_hover_color: white;
--link_hover_border_color: #BB2528;
--link_hover_border_top_color: #06672F;

/* other */
--underline_color: #06672F;
--body_box_shadow: inset 0px 0px 3px #06672F3b ,0px 10px 10px #06672F8a;
--body_box_shadow: inset 0px 0px 7px #FF000576 ,0px 10px 10px #06672F8a;
--toc_border_color: #9674cc; /* dark mode: #8439d */
--background_main: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/xmaslightssides-5.png) top/contain repeat-y, white;
--background_main_mobile: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/xmaslightssides-6.png) top/contain repeat-y, white;
--background_body: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/pexels-est1307-250177.webp) center/cover no-repeat fixed;
--upvote_count_bg: #06672F;
--main_padding: 30px;

}

main > h1:first-child {
background: #06672f;
color: white;
text-shadow: red;
padding: 0px 16px;
border-radius: 16px;
box-shadow: var(--body_box_shadow);
}

/** xmas lights at top of page DONT THINK I NEED THESE
html::before {
background:var(--header_h1_background);
display:block;
content:"‌";
width: 100%;
position: absolute;
height:35px;
}
*/


body > header {
background: var(--header_background);
padding: 4px 12px;
border-radius: var(--header_border_radius);
color: white;
--link-color: var(--header_link_color);
--heading-color: var(--header_heading_color);
--underline_color: var(--header_link_underline_color);
box-shadow: 0px 0px 15px var(--header_shadow_color);
margin: 0;
border: none;
}
body > header > nav a {
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
header h1 {
border-bottom: none;
text-align: left;
}



body > header > nav a:hover {
--underline_color: var(--link_hover_underline_color);
--link-color: var(--link_hover_color);
background: var(--header_link_hover_background);
border: 2px solid var(--link_hover_underline_color);
padding-top:4px;
padding-bottom: 2px;
border-radius: 75% 9px / 30% 8px;
}

body > main {
box-shadow: var(--body_box_shadow);
padding: var(--main_padding);
background: var(--background_main);
}

main > h1:first-child {
margin-bottom:0;
}

main > p:has(> i > time){
margin: 0;
}

/**
footer > span::after {
content: "Cursor icons by G-Cat on flaticon";
}
*/


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

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
border-bottom: 2px solid var(--underline_color);
text-align: center;
}

a {
color: var(--link-color);
font-family: var(--font-main);
cursor: url('https://reedybear.com/bearblog/link-cursor-wh.png'), pointer;
text-decoration: none;
border-bottom: 3px solid var(--underline_color);
padding: 0 4px;
border-top: 1px solid transparent;
}

a:hover {
text-decoration: none;
border-radius:8px;
border-color: var(--link_hover_border_color);
border-top: 1px solid var(--link_hover_border_top_color);
}


nav a, nav a:hover {
margin-right: 8px;
padding: 4px 5px 2px 4px;

/*
border-radius: 25% 8px 12% 10px;
border-radius: 25% 12%;
border-radius: 50% 9px / 60% 6px;
*/
border-radius: 80% 9px / 40% 8px;
text-wrap:nowrap;
}

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

button {
margin: 0;
cursor: url('https://reedybear.com/bearblog/btn-cursor-wh.png'), pointer;

}

main {
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 {
margin-top: 0px;
/*border-top: 3px dotted #232333; */
padding: 25px 0;
text-align: center;
background: #ffffffa0;
}

footer a {
background: #0006;
color: white;
border-radius: 8px;
}
footer a:hover {
background: #000c;
}

a.title {
border:none;
padding:0;
}

.title:hover {
text-decoration: none;
}

.title h1 {
font-size: 1.5em;
}

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



table {
border-spacing: 0;
}

th,
td {
padding: 6px 13px;
border: 1px solid #dfe2e5;
font-size: 1em;
}

/** The only part that needs modification for standard setups */
.upvote-button {
--width: 50px;
--height: 50px;
/* bear water fish happy */
--unclicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear6.webp");
--hover_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear7.webp");
--clicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear9.webp");
--clicked_and_hovering_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear8.webp");
/* bear and penguin */
/*
--unclicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear1.webp");
--hover_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear2.webp");
--clicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear4.webp");
--clicked_and_hovering_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear5.webp");
*/
}


/* hide the default button */
.upvote-button svg {
display:none;
}
.upvote-count {
border: 1px solid lightgrey;
padding: 4px;
/* background: #fdfdfd; */
background: var(--upvote_count_bg);
color:white;


}
/* when your post is untoasted */
.upvote-count::before {
background: var(--unclicked_url);
display:block;
width: var(--width);
height: var(--height);
background-size:cover;
content: "";
}
/* when mouse hovers over the toast button */
.upvote-count:hover::before {
background: var(--hover_url);
display:block;
width: var(--width);
height: var(--height);
background-size: cover;
content: "";
}
/* when your post has been toasted */
.upvote-button[disabled] .upvote-count::before {
background: var(--clicked_url);
display:block;
width: var(--width);
height: var(--height);
background-size: cover;
content: "";
}
/* When mouse is hovering over your toast button AFTER your post is toasted */
.upvote-button[disabled] .upvote-count:hover::before {
background: var(--clicked_and_hovering_url);
display:block;
width: var(--width);
height: var(--height);
background-size: cover;
content: "";
}

/**
* Adding photos to blog list
*/
/* it didn't work well
* I got the image in, but I couldn't get the dang things to style how I wanted
* Plus I'm not sure I liked it with photos... even though it's a bear!

ul.blog-posts > li > a::after {
content: url("https://i.imgur.com/puT0UkBs.jpg");
content: url("https://i.imgur.com/laDt4Yf.png");
height:10px;
max-height:10px;
width:10px;
position:relative;
display:inline-block;
right: 10px;
}

ul.blog-posts > li > a {
position:relative;
margin-left: 10px;
}

ul.blog-posts > li {
display:inline-block;
}
/**/

/* table of contents */

.toc {
display: inline-block;
padding: 0px 24px 8px 24px;
margin: 0;
border: 2px dotted var(--toc_border_color);
border-radius: 4px;
line-height:1.5em;
}
.toc a {
text-decoration: none;
font-size: 1em;
}
.toc ol {
padding-left: 30px;
}
.toc ol > li > ul {
padding-left: 16px;
}

.toc ol > li > ul ul {
padding-left:32px;
}

#rb-jump-to-toc {
border-radius: 50%;
position:fixed;
bottom:30px;
right:30px;
width: 1em;
height: 1em;
}
#rb-jump-to-toc a, #rb-jump-to-toc a:hover {
background: none;
display: block;
padding: 3px;
width: 1em;
height: 1em;
border: solid black;
border-width: 0 3px 3px 0;
border-radius: 0px;
color: black;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
z-index:100;
}
#rb-jump-to-toc a:hover {
border-color: grey;
}

div.reference_links {
border: 1px solid black;
padding: 8px;
}

div.reference_links ul {

}

div.reference_links ul li {
display: inline-block;
margin: 4px;
}





/* blog post list */
i time {
font-style: normal;
opacity: 0.7;
}

ul.blog-posts:not(:has(> li > p)) {
list-style-type: none;
padding: unset;
}

ul.blog-posts:not(:has(> li > p)) li {
display: flex;
margin-bottom: 10px;
}
ul.blog-posts:not(:has(> li > p)) li > a {
min-width: 5em;
}



ul.blog-posts:not(:has(> li > p)) li span {
flex: 0 0 130px;
}

ul.blog-posts:not(:has(> li > p)) li a:hover {
/* color: white !important; */
}

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

/* Make lists into grids */
@media (min-width: 600px) {
ul.blog-posts:has(> li > p) {
display: grid;
grid-template-columns: auto 1fr 2fr;
grid-template-rows: auto;
grid-gap: 8px;
}

ul.blog-posts:has(> li > p) > li {
display:grid;
grid-template-columns: subgrid;
grid-column: 1 / span 3;
align-items: center;
}

ul.blog-posts:has(> li > p) > li > span {
grid-column: 1;
}
ul.blog-posts:has(> li > p) > li > a {
grid-column: 2;
margin: 0 4px;
}
ul.blog-posts:has(> li > p) > li > p {
grid-column: 3;
}
}

@media (max-width: 600px) {
body > header > nav a {
line-height: 2.0;
}
body > header {
background: var(--header_background_mobile);
}
body > main {
/*box-shadow: inset -5px -10px 5px #9015907d; */
background: var(--background_main_mobile);
}
ul.blog-posts:has(> li > p) {
list-style-type: none;
margin: 0;
padding: 0;
}

ul.blog-posts:has(> li > p) > li {
display:flex;
flex-direction: column;
padding: 16px 8px;
margin: 8px 0;
}
ul.blog-posts:has(> li > p) > li:nth-child(2n - 1) {
background: #eaeaea;
border-radius: 8px;
border: 1px dotted black;
}
ul.blog-posts:has(> li > p) > li:nth-child(2n) {
border: 1px solid black;
border-radius: 8px;
}

ul.blog-posts:has(> li > p) > li > span {
order: 2;
text-align: center;
}
ul.blog-posts:has(> li > p) > li > a {
order: 1;
text-align: center;
}
ul.blog-posts:has(> li > p) > li > p {
order: 3;
text-align: center;
padding: 0;
margin: 0;
}
}