The Grizzly Gazette

Update: Robert Birming has republished the Bearly theme, making this archived version obsolete. You can check it out here.

Made by Robert Birming, archive from archive.org's raw html of the archived theme page.

/*
 * Theme: Bearly
 * A lovely theme for Bear Blog.
 * Version 1.0.0 | 25.11.11
 * License: Lovesense β€” feel free, be happy, use however.
 * Author: Robert Birming | robertbirming.com
 */


/* ============================================================
   🧸 Bearly palette: Standard
   ------------------------------------------------------------
   A relaxed, timeless palette inspired by Bear’s blue heart.
   Fonts: system-ui (headings) + system-ui (body)
   More lovely palettes: robertbirming.com/bearly/palettes/
   ============================================================ */

:root {
	--width: 640px;
	--font-main: system-ui, sans-serif;
	--font-secondary: system-ui, sans-serif;
	--font-scale: 1.0625rem;
	--background-color: #fafbfc;
	--heading-color: #232526;
	--text-color: #373a3c;
	--link-color: #3a73c8;
	--visited-color: #8b6fcb;
	--blockquote-color: #5d6468;
	--code-background-color: #f2f4f6;
	--code-color: #2a2d2f;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #1c2126;
		--heading-color: #e9e9e8;
		--text-color: #d9d9d8;
		--link-color: #82aee3;
		--visited-color: #b39add;
		--blockquote-color: #7a8085;
		--code-background-color: #101112;
		--code-color: #e3e3e1;
	}
}

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

nav a {
    margin-right: 8px;
}

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

button {
    margin: 0;
    cursor: pointer;
}

time {
 	font-family: monospace;
  	font-style: normal;
  	font-size: 15px;
}

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 {
    padding: 25px 0;
    text-align: center;
}

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

/* 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);
}


/* ============================================================
   πŸ”Ž Bearly foundations
   ------------------------------------------------------------
   Quiet technical and accessibility improvements that keep
   Bear’s original look completely intact.
   Useful design resources: robertbirming.com/links/
   ============================================================ */

:root {
	color-scheme: light dark;
}

html {
	box-sizing: border-box;
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* ============================================================
   🧩 Bearly add-ons
   ------------------------------------------------------------
   Optional details that sit lightly on top of Bear’s base,
   adding character without clutter.
   More handy add-ons: robertbirming.com/bearly/add-ons/
   ============================================================ */


/* --------------------------------
   πŸ”  Bearly add-ons: Typography (v. 1.0.0 | 25.11.11)
   Comfortable rhythm and spacing for easier reading.
-----------------------------------*/

main p {
	margin-block: 1.4em;
}
main ul,
main ol {
	margin-block: 1em;
}
main :where(strong, b) {
	color: inherit;
}


/* --------------------------------
   βœ’οΈ Bearly add-ons: Headings (v. 1.0.0 | 25.11.11)
   Clear hierarchy and steady spacing for headings.
-----------------------------------*/

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
	font-weight: 600;
	line-height: 1.3;
	margin-block: 1.6em 0;
}
main h1 { font-size: 1.8rem; }
main h2 { font-size: 1.45rem; }
main h3 { font-size: 1.2rem; }
main h4 { font-size: 1.05rem; }
main h5 { font-size: 1rem; }
main h6 { font-size: 0.95rem; }


/* --------------------------------
   πŸ”— Bearly add-ons: Links (v. 1.0.0 | 25.11.11)
   Softer underlines and smoother hover transitions.
-----------------------------------*/

a {
	text-decoration-thickness: var(--underline-thickness, 1.5px);
	text-underline-offset: var(--underline-offset, 0.14em);
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
a:hover,
a:focus-visible {
	text-decoration-color: currentColor;
}


/* --------------------------------
   〰️ Bearly add-ons: Horizontal rules (v. 1.0.0 | 25.11.11)
   Soft dividers for thoughtful pauses between sections.
-----------------------------------*/

main hr {
	margin-block: 2em;
	border: none;
	border-top: 1px solid color-mix(in srgb, var(--text-color) 22%, var(--background-color));
}


/* --------------------------------
   πŸŒ€ Bearly add-ons: Radius (v. 1.0.0 | 25.11.11)
   A shared corner radius for Bearly components.
-----------------------------------*/

:root {
	--bearly-radius: 3px;
}


/* --------------------------------
   πŸ’¬ Bearly add-ons: Blockquotes (v. 1.0.0 | 25.11.11)
   Framed quotes for small reflections and asides.
-----------------------------------*/

blockquote {
	margin-block: 1.4em;
	padding: 0.2em 1.2em;
	border-left: 3px solid color-mix(in srgb, var(--link-color) 45%, var(--blockquote-color));
	background-color: color-mix(in srgb, var(--blockquote-color) 6%, var(--background-color));
	border-radius: var(--bearly-radius, 0);
	font-style: italic;
	color: color-mix(in srgb, var(--text-color) 80%, var(--background-color));
}
@media (max-width: 600px) {
	main blockquote {
		margin-inline: 0;
	}
}


/* --------------------------------
   πŸ–ΌοΈ Bearly add-ons: Images (v. 1.0.0 | 25.11.11)
   Margins, corners, and a simple frame for images.
-----------------------------------*/

main img {
	display: block;
	height: auto;
	max-width: 100%;
	margin-block: 1.4em;
	border-radius: var(--bearly-radius, 0);
}
main > p:first-child > img,
main > img:first-child {
	margin-top: 1.8em;
}
main figure {
	margin: 0;
	width: 100%;
	margin-block: 1.6em;
	padding: 0 1.2em 1.2em;
	border: 1px solid color-mix(in srgb, var(--text-color) 20%, var(--background-color));
	background-color: color-mix(in srgb, var(--background-color) 95%, var(--text-color));
	border-radius: var(--bearly-radius, 0);
	text-align: center;
	box-sizing: border-box;
}
main figure img {
	display: block;
	max-width: 100%;
	margin-inline: auto;
}
main figcaption {
	margin-top: 0;
	color: color-mix(in srgb, var(--text-color) 55%, var(--background-color));
	font-size: 0.9em;
	line-height: 1.3;
}


/* --------------------------------
   πŸ’» Bearly add-ons: Code (v. 1.0.1 | 25.11.11)
   Calm, readable code blocks and inline code.
-----------------------------------*/

pre,
.highlight,
.code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	padding: 0.6em 0.9em;
	margin-block: 1.2em;
	background-color: color-mix(in srgb, var(--code-background-color) 50%, var(--background-color));
	color: color-mix(in srgb, var(--code-color) 90%, var(--text-color));
	border-radius: var(--bearly-radius, 0);
	overflow-x: auto;
	line-height: 1.45;
	box-sizing: border-box;
}
pre code {
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	white-space: pre;
}
code:not(pre code) {
	display: inline-block;
	padding: 0.1em 0.3em;
	background-color: color-mix(in srgb, var(--code-background-color) 55%, var(--background-color));
	color: color-mix(in srgb, var(--code-color) 88%, var(--text-color));
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	font-weight: 500;
	border: 1px solid color-mix(in srgb, var(--text-color) 15%, var(--background-color));
	border-radius: var(--bearly-radius, 0);
}
pre code a,
pre code a:visited {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}
mark {
	background-color: color-mix(in srgb, var(--link-color) 35%, var(--background-color));
	color: inherit;
	padding: 0.05em 0.25em;
	border-radius: var(--bearly-radius, 0);
}


/* --------------------------------
   πŸ“Š Bearly add-ons: Tables (v. 1.0.0 | 25.11.11)
   Structured tables with subtle zebra striping.
-----------------------------------*/

table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.4em;
	font-size: 0.97em;
}
th,
td {
	padding: 0.5em 0.8em;
	text-align: left;
	border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, var(--background-color));
}
th {
	font-weight: 600;
	color: var(--heading-color);
	background-color: color-mix(in srgb, var(--link-color) 14%, var(--background-color));
}
tbody tr:nth-child(even) {
	background-color: color-mix(in srgb, var(--text-color) 6%, var(--background-color));
}
tbody tr:last-child td {
	border-bottom: none;
}


/* --------------------------------
   πŸ’Œ Bearly add-ons: Forms (v. 1.0.1 | 25.11.11)
   Simple, friendly form styles that stay in rhythm.
-----------------------------------*/

input:not([type="hidden"]),
textarea,
select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: var(--text-color);
	background-color: var(--background-color);
	border: 1px solid color-mix(in srgb, var(--text-color) 28%, var(--background-color));
	border-radius: var(--bearly-radius, 0);
	padding: 0.55em 0.8em;
	line-height: 1.45;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
button:not([class]),
input[type="submit"],
input[type="button"] {
	font: inherit;
	color: var(--background-color);
	background-color: var(--link-color);
	border: none;
	border-radius: var(--bearly-radius, 0);
	padding: 0.5em 1em;
	cursor: pointer;
	transition: background-color 0.25s ease, filter 0.25s ease;
}
button:not([class]):hover,
button:not([class]):focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible {
	filter: brightness(1.1);
}
label {
	display: block;
	margin-block-end: 0.35em;
}


/* --------------------------------
   πŸ‘€ Bearly add-ons: Header (v. 1.0.0 | 25.11.11)
   A balanced header with a quiet divider.
-----------------------------------*/

header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6em 1em;
	margin-block: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, var(--background-color) 90%);
}
header a.title {
	color: var(--heading-color);
}
header a.title:hover,
header a.title:focus-visible {
	color: var(--link-color);
}
header a.title h1 {
	margin: 0;
	font-size: 1.15em !important;
	line-height: 1.3;
	font-weight: 600;
}
header nav {
	margin-left: auto;
}
header nav p {
	margin: 0;
	display: flex;
	gap: 1em;
	font-size: 0.95em;
}
header nav a {
	color: var(--link-color);
}
header nav a:hover,
header nav a:focus-visible {
	color: color-mix(in srgb, var(--link-color) 80%, var(--text-color) 20%);
	text-decoration: underline;
}
@media (max-width: 600px) {
	header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.5em;
	}
	header nav {
		margin-left: 0;
	}
	header nav p {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5em;
	}
}


/* --------------------------------
   🐾 Bearly add-ons: Footer (v. 1.0.0 | 25.11.11)
   A light closing section that echoes the header.
-----------------------------------*/

footer {
	border-top: 1px solid color-mix(in srgb, var(--text-color) 12%, var(--background-color) 88%);
	margin-block-start: 2em;
    padding-block: 2em;
	text-align: center;
	font-size: 0.95em;
	line-height: 1.3;
	color: color-mix(in srgb, var(--text-color) 70%, var(--background-color) 30%);
}
footer p {
	margin: 0.5em 0 0;
}
footer span + span {
	display: block;
	margin-top: 0.5em;
}
footer a:hover,
footer a:focus-visible {
	text-decoration: underline;
}
footer span#footer-directive a {
	color: var(--link-color);
}
footer span:not(#footer-directive) a {
	color: inherit;
}
footer .bear {
	color: inherit;
}


/* --------------------------------
   πŸ“œ Bearly add-ons: Blog list (v. 1.0.0 | 25.11.11)
   Softer spacing, clear rhythm, and subtle separators.
-----------------------------------*/

ul.blog-posts {
	margin-block-start: 0;
	list-style: none;
	padding: 0;
}
ul.blog-posts li {
	display: flex;
	align-items: baseline;
	gap: 1.5em;
	padding-block: 0.5em;
}
ul.blog-posts li span {
	flex: 0 0 auto;
	margin-right: -0.2em;
}
ul.blog-posts li + li {
	border-top: 1px solid color-mix(in srgb, var(--text-color) 10%, var(--background-color) 90%);
}
ul.blog-posts li span time {
	font-family: var(--font-secondary);
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--text-color) 55%, var(--background-color) 45%);
}
ul.blog-posts li a:hover,
ul.blog-posts li a:focus-visible {
	text-decoration: underline;
}


/* --------------------------------
   πŸ“„ Bearly add-ons: Blog posts (v. 1.0.0 | 25.11.11)
   Tightens titles, dates, and first lines for better flow.
-----------------------------------*/

body.page main > h1:first-of-type,
body.post main > h1:first-of-type {
	margin-block-start: 0;
}

body.post main > h1:first-of-type {
	margin-block-end: 0;
}

body.post main > h1 + p {
	margin-block-start: 0.5em;
	margin-block-end: 1.5em;
}

body.post main > h1 + p i {
	font-style: normal;
}

body.post main > h1 + p time {
	display: block;
	line-height: 1.3;
	font-family: var(--font-secondary);
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--text-color) 55%, var(--background-color) 45%);
}



/* --------------------------------
   🏷️ Bearly add-ons: Tags (v. 1.0.0 | 25.11.11)
   Simple styling for post tags in link color.
-----------------------------------*/

.tags {
	margin-block-start: 1.4em;
	font-size: 0.95em;
	color: var(--link-color);
}
.tags a {
	margin-inline-end: 0.2em;
	color: var(--link-color);
}


/* --------------------------------
   πŸ’™ Bearly add-ons: Upvote button (v. 1.0.0 | 25.11.11)
   A tiny heart for showing lots of love.
-----------------------------------*/

.post .upvote-button svg,
.page .upvote-button svg {
	display: none;
}
.post .upvote-button,
.page .upvote-button {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	gap: 0.1875rem;
	padding: 0.1875rem 0.375rem;
	border: 0;
	background-color: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	line-height: 1;
	font-size: 1rem;
}
.post .upvote-button:hover,
.page .upvote-button:hover {
	background-color: transparent !important;
}
.post .upvote-button::before,
.page .upvote-button::before {
	content: "β™‘";
	display: inline-block;
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-feature-settings: "kern";
	font-size: 1.4rem;
	line-height: 1;
	color: var(--link-color);
	transform: translateY(2.5px);
	transition: transform 0.15s ease, color 0.2s ease;
}
.post .upvote-button:hover:not(:is(.upvoted, [aria-pressed="true"], [disabled]))::before,
.page .upvote-button:hover:not(:is(.upvoted, [aria-pressed="true"], [disabled]))::before {
	transform: translateY(2px) scale(1.1);
}
.post .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled])::before,
.page .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled])::before {
	content: "β™₯";
	color: var(--link-color);
	animation: toast-pop 0.18s ease-out;
}
.post .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled]) + .upvote-count,
.page .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled]) + .upvote-count {
	color: var(--link-color);
	opacity: 1;
}
.post .upvote-button[disabled],
.page .upvote-button[disabled] {
	cursor: default;
}
.post .upvote-count,
.page .upvote-count {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--text-color);
	opacity: 0.7;
	transform: translateY(0.5px);
	transition: color 0.25s ease, opacity 0.25s ease;
}
@media (prefers-reduced-motion: no-preference) {
	@keyframes toast-pop {
		0% { transform: translateY(2px) scale(1); }
		40% { transform: translateY(2px) scale(1.3); }
		100% { transform: translateY(2px) scale(1); }
	}
}


/* --------------------------------
   ✍️ Bearly add-ons: Guestbook (v. 1.0.0 | 25.11.11)
   Get your guestbook at: guestbooks.meadow.cafe
-----------------------------------*/

#guestbooks___guestbook-form-container form {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	margin-block-end: 1.4em;
}
#guestbooks___guestbook-messages-header {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-block: 3em 1em;
}
#guestbooks___guestbook-messages-header::before {
	content: "πŸ’¬";
	translate: 0 1px;
}
#guestbooks___guestbook-messages-container {
	margin-block-start: 0.8em;
}
#guestbooks___guestbook-messages-container > div {
	border: 1px solid color-mix(in srgb, var(--text-color) 14%, var(--background-color) 86%);
	border-radius: var(--bearly-radius, 0);
	padding: 1em 1.5em;
	margin-block: 1.5em;
	background: color-mix(in srgb, var(--background-color) 94%, var(--text-color) 6%);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent);
	transition: background-color 0.3s ease;
	font-size: 0.95em;
}
#guestbooks___guestbook-messages-container > div:nth-child(even) {
	background: color-mix(in srgb, var(--background-color) 88%, var(--text-color) 12%);
}
#guestbooks___guestbook-messages-container blockquote {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.8em 1em;
	margin: 1em 0 0;
	margin-block-end: 0.5em;
	padding: 0;
	border: none;
	background: none;
	font-style: normal;
	color: var(--text-color);
}
#guestbooks___guestbook-messages-container p {
	margin-block: 0.3em 0;
	overflow-wrap: anywhere;
}
#guestbooks___guestbook-messages-container time {
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--text-color) 65%, var(--background-color) 35%);
	white-space: nowrap;
}
#guestbooks___guestbook-made-with {
	text-align: right;
	margin-block-start: 1.2em;
	font-size: 0.85em;
	color: color-mix(in srgb, var(--text-color) 55%, var(--background-color) 45%);
}
#guestbooks___guestbook-made-with a {
	color: var(--link-color);
}
#guestbooks___guestbook-made-with a:hover,
#guestbooks___guestbook-made-with a:focus-visible {
	text-decoration: underline;
}


/* ------------------------------------------------------------
   🧩 Bearly add-ons: Utilities (v. 1.0.0 | 25.11.11)
   Small helper spans for subtle text tweaks and accents.
------------------------------------------------------------ */

/* Right align */
span.bearly-right {
	display: block;
	text-align: right;
}

/* Centered */
span.bearly-center {
    display: block;
	text-align: center;
}

/* Muted text */
span.bearly-muted {
	color: color-mix(in srgb, var(--text-color) 60%, var(--background-color));
}

/* Small text */
span.bearly-small {
	font-size: 0.9em;
}


/* --------------------------------
   🧭 Bearly add-ons: Menu (v. 1.0.0 | 25.11.11)
   A small inline menu framed with soft borders.
-----------------------------------*/

.bearly-menu {
	margin-block: 1.2em 1.6em;
	padding-block: 0.6em 0.7em;
	font-size: 0.95em;
	color: var(--text-color);
	border-block: 1px solid color-mix(in srgb, var(--text-color) 14%, var(--background-color));
}
.bearly-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}
.bearly-menu li {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: 1.4;
}
.bearly-menu a,
.bearly-menu li span {
	display: inline-block;
	font-size: inherit;
	line-height: inherit;
	padding-block: 0.12em;
	padding-inline: 0.3em;
	border-radius: var(--bearly-radius, 3px);
}
.bearly-menu a {
	color: var(--link-color);
}
.bearly-menu li span {
	color: color-mix(in srgb, var(--text-color) 55%, var(--background-color));
}
@media (max-width: 600px) {
	.bearly-menu ul {
		justify-content: center;
		gap: 0.5em;
	}
}


/* --------------------------------
   πŸ–¨οΈ Bearly add-ons: Print styles (v. 1.0.0 | 25.11.11)
   A clearer layout for printing posts or saving as PDF.
-----------------------------------*/

@media print {
	header,
	nav,
	footer,
	.tags,
	.upvote-button,
	.bearly-menu {
		display: none !important;
	}
	body {
		max-width: none;
		background: #ffffff;
		color: #000000;
		font-size: 12pt;
	}
	a {
		color: #000000;
		text-decoration: underline;
	}
	a[href]:not([href^="#"])::after {
		content: " (" attr(href) ")";
		word-break: break-all;
	}
	img,
	pre,
	blockquote {
		break-inside: avoid;
	}
}


/* --------------------------------
   πŸ—‚οΈ Bearly add-ons: Archive months (v. 1.0.0 | 25.11.11)
   Get the script to group posts by month at: mighil.com
-----------------------------------*/

.archive {
	margin-block-end: 3rem;
	font-family: var(--font-secondary);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
	color: color-mix(in srgb, var(--text-color) 75%, var(--background-color));
	text-align: center;
	background-color: color-mix(in srgb, var(--background-color) 94%, var(--text-color));
	padding: 0.9em 1em 0.8em;
	border-radius: var(--bearly-radius, 0.4em);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--text-color) 10%, transparent);
}
.archive #last-updated {
	display: inline-block;
	margin-inline-start: 0.25em;
	color: inherit;
}
.archive-h3 {
	margin-block-start: 2rem;
	margin-block-end: 0.5rem;
	font-size: 1em;
	color: color-mix(in srgb, var(--text-color) 90%, var(--background-color));
	text-transform: capitalize;
}


/* ============================================================
   πŸ‘¨β€πŸ’» Bearly personal: My own additions
   ------------------------------------------------------------
   Bits and pieces mainly for showcasing the Bearly theme.
   Some might become official add-ons one day.
   Stay updated: robertbirming.com/bearly/changelog/
   ============================================================ */


/* --------------------------------
   πŸ‘‡ Bearly personal: Active nav (v. 1.0.0 | 25.11.10)
   Highlights the current page link in the header navigation.
-----------------------------------*/

header nav a:hover,
header nav a:focus-visible,
body.home header nav a[href="/"],
body.about header nav a[href="/about/"],
body.blog header nav a[href="/blog/"],
body.contact header nav a[href="/contact/"] {
	color: color-mix(in srgb, var(--link-color) 85%, var(--text-color));
	text-decoration: underline;
	text-decoration-color: var(--link-color);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.22em;
}


/* --------------------------------
   🎨 Bearly personal: Palette preview (v. 1.0.0 | 25.11.11)
   Small color dots used to showcase palette tokens.
-----------------------------------*/

.palette-preview {
	display: flex;
	gap: 0.4em;
	margin-block: 1em 1.7em;
}
.palette-preview span {
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background-color: var(--color);
	border: 1px solid color-mix(in srgb, var(--text-color) 20%, var(--background-color));
}


/* --------------------------------
   πŸ“‹ Bearly personal: Copy button (v. 1.0.0 | 25.11.11)
   A tiny copy button for code blocks on docs pages.
-----------------------------------*/

.bearly-copy-block {
	display: flex;
	justify-content: flex-start;
	margin-block-end: -0.6em;
}
.bearly-copy {
	padding: 0.3em 0.6em;
	font-size: 0.8em;
	font-family: inherit;
	color: var(--background-color);
	background-color: var(--link-color);
	border: none;
	border-radius: var(--bearly-radius, 3px);
	cursor: pointer;
	line-height: 1.2;
	user-select: none;
	transition: background-color 0.25s ease, filter 0.25s ease, transform 0.12s ease;
}
.bearly-copy:hover,
.bearly-copy:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
}
.bearly-copy.copied {
	background-color: color-mix(in srgb, var(--link-color) 80%, var(--text-color) 20%);
}


/* --------------------------------
   🧸 Bearly personal: Notes & Callouts (v. 1.0.0 | 25.11.11)
   Helpful tips, reminders, and extra instructions in Bearly style.
-----------------------------------*/

/* Muted inline note */
.bearly-note {
	display: block;
	margin-block: 1em;
	color: color-mix(in srgb, var(--text-color) 70%, var(--background-color));
	font-size: 0.9375rem;
	font-style: italic;
}

/* Callout box (for bigger notes or warnings) */
.bearly-callout {
	padding: 0.8em 1em;
	margin-block: 1.4em;
	border: 1px solid color-mix(in srgb, var(--text-color) 25%, var(--background-color));
	background-color: color-mix(in srgb, var(--background-color) 95%, var(--text-color));
	border-radius: var(--bearly-radius, 0);
	font-size: 0.9375rem;
	line-height: 1.5;
}
.bearly-callout strong {
	color: var(--heading-color);
}
/* Expandable β€œdetails” block for longer instructions */
.bearly-details {
	margin-block: 1.4em;
	padding: 0.6em 1em;
	border: 1px solid color-mix(in srgb, var(--text-color) 20%, var(--background-color));
	border-radius: var(--bearly-radius, 0);
	background-color: color-mix(in srgb, var(--background-color) 97%, var(--text-color));
	font-size: 0.95rem;
}
.bearly-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--heading-color);
	margin-block-end: 0.4em;
}
.bearly-details[open] summary {
	margin-block-end: 0.6em;
}
/* Slightly more contrast when expanded */
.bearly-details[open] {
	background-color: color-mix(in srgb, var(--background-color) 93%, var(--text-color));
	border-color: color-mix(in srgb, var(--text-color) 35%, var(--background-color));
}


/* --------------------------------
   πŸ“œ Bearly personal: Changelog (v. 1.0.2 | 25.11.11)
   A clean, readable layout for theme or site changelogs.
-----------------------------------*/

.bearly-menu {
	margin-block-end: 2em;
}

.changelog {
	margin-block-end: 3rem;
	font-family: var(--font-secondary);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
	color: color-mix(in srgb, var(--text-color) 75%, var(--background-color));
	background-color: color-mix(in srgb, var(--background-color) 94%, var(--text-color));
	padding: 0.9em 1em 0.8em;
	border-radius: var(--bearly-radius, 0.4em);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--text-color) 10%, transparent);
}

.changelog-entry {
	margin-block-start: 2rem;
	margin-block-end: 0.8rem;
}

.changelog-entry h3 {
	margin: 0 0 0.4em;
	font-size: 1em;
	color: color-mix(in srgb, var(--text-color) 90%, var(--background-color));
	text-transform: capitalize;
}

.changelog-entry ul {
	list-style: disc;
	margin-block: 0.4em 1em;
	padding-left: 1.4em;
}

.changelog-entry li {
	margin-block: 0.3em;
}


/* --------------------------------
   🧸 Bearly personal: Last item (v. 1.0.0 | 25.11.11)
   Gives the last nav link a gentle Bearly touch.
-----------------------------------

header nav a:last-of-type {
	padding: 0.15em 0.55em;
	border: 1px solid color-mix(in srgb, var(--text-color) 14%, var(--background-color));
	border-radius: var(--bearly-radius, 3px);
	background-color: color-mix(in srgb, var(--background-color) 96%, var(--link-color) 4%);
	color: color-mix(in srgb, var(--link-color) 90%, var(--text-color) 10%);
	font-weight: normal;
	display: inline-flex;
	align-items: center;
	line-height: 1.3;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
header nav a:last-of-type:hover,
header nav a:last-of-type:focus-visible {
	background-color: color-mix(in srgb, var(--link-color) 10%, var(--background-color));
	border-color: color-mix(in srgb, var(--link-color) 35%, var(--background-color));
	color: color-mix(in srgb, var(--link-color) 85%, var(--text-color) 15%);
	text-decoration: none;
}
@media (max-width: 600px) {
	header nav a:last-of-type {
		padding: 0.2em 0.6em;
	}
}
*/