Last updated: 8Β hours, 7Β minutes ago.
/* Bearming tokens */
:root {
--bg: var(--background-color);
--text: var(--text-color);
--link: var(--link-color);
--visited: var(--visited-color);
--muted: color-mix(in srgb, var(--text-color) 70%, var(--background-color));
--surface: color-mix(in srgb, var(--text-color) 5%, var(--background-color));
--border: color-mix(in srgb, var(--text-color) 12%, var(--background-color));
--space-block: 1.8rem;
--font-small: 0.95rem;
--font-mono: ui-monospace, monospace;
--radius: 4px;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
--width: 720px;
--font-main: 'Roboto Mono', monospace;
--font-secondary: 'Roboto Mono', monospace;
--font-scale: .9em;
/* -- β PALETTE: TOASTED BREAD β -- */
/* -- colors -- */
--background-color: #fffffc;
--text-color: #32373d;
--low-opacity-color: #979A9B;
--bold-color: #578e99;
--background-hover-color: #96ad7a;
--link-color: #839968;
--link-underline-color: #96ad7a;
--visited-color: #232333;
/* -- heading colors -- */
--heading1-color: #232333;
--heading2-color: #bf6a47;
--heading3-color: #bf6a47;
--heading4-color: #bf6a47;
--heading5-color: #232333;
--heading6-color: #232333;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #578e99;
/* -- β PALETTE: TOASTED BREAD β -- */
}
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);
}
h1 {
color: var(--heading1-color);
}
h2 {
color: var(--heading2-color);
}
h3 {
color: var(--heading3-color);
}
h4 {
color: var(--heading4-color);
}
a {
color: var(--link-color);
font-family: var(--font-main);
cursor: pointer;
text-decoration: none;
}
a:hover {
background-color: var(--background-hover-color);
color: white;
text-decoration: none;
}
a:hover,
a:hover strong,
a:hover b {
background-color: var(--background-hover-color);
text-decoration: none;
color: var(--background-color) !important;
}
header {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px dotted #232333;
}
nav a {
margin-right: 8px;
}
strong,
b {
color: var(--bold-color);
}
button {
margin: 0;
cursor: 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: 2px solid var(--blockquote-color);
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
margin-top: 40px;
border-top: 3px dotted #232333;
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;
margin-bottom: 10px;
}
i time {
font-style: normal;
opacity: 0.5;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
table {
border-spacing: 0;
}
th,
td {
padding: 6px 13px;
border: 1px solid #dfe2e5;
font-size: 1em;
}
/* -- toast button; code from 1995 */
/* Reset */
button {
background: unset;
border: unset;
cursor: pointer;
font-family: 'Cordata PPC-400', monospace;
font-size:1.2em;
}
/* toast button modification attempt */
.upvote-button svg, .upvote-count {
display: none;
}
.upvote-button {
font-family: 'Roboto Mono', monospace;
align-items: baseline; /* align text */
flex-direction:row;
}
.upvote-button::before { /* untoasted */
color: #6c7086;
content: 'βοΈ send a love note?';
}
.upvote-button:hover::before { /* hover */
color: var(--link-color);
content: 'π© sending...';
cursor: pointer;
}
.upvote-button[disabled]::before { /* toasted */
content: 'π thanks!';
cursor: default;
color: #6c7086;
}
/* -- posters -- */
.movie-poster {
border: 1px solid var(--text-color);
overflow: hidden;
display: inline-block;
float: left; /* LEFT OR RIGHT */
margin: 0 20px 12px 0; /* GAP BTW IMAGE AND TEXT */
}
.movie-poster img {
display: block;
width: 150px; /* ADJUST IMAGE SIZE */
}
/* -- image captions -- */
p:has(img) + p {
margin-top: -15px;
font-size: 95%;
text-align: center;
font-style: italic;
}
/* -- light box --*/
.bear-gallery {
margin-block: var(--space-block);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.6rem;
}
.bear-gallery > p {
margin: 0;
display: contents;
}
.bear-gallery a {
display: block;
}
/* Thumbnails */
.bear-gallery img {
display: block;
width: 100%;
height: auto;
margin: 0;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius);
cursor: pointer;
user-select: none;
-webkit-user-drag: none;
transition: transform 0.15s ease;
}
@media (hover: hover) {
.bear-gallery img:hover {
transform: scale(1.03);
}
}
.bear-gallery img:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
@media (min-width: 900px) {
.bear-gallery {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* Lightbox overlay */
.bear-gallery-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 1.25rem;
background: rgba(0, 0, 0, 0.86);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.bear-gallery-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
/* The large image */
.bear-gallery-lightbox img {
display: block;
max-width: min(100%, 1100px);
max-height: 88vh;
width: auto;
height: auto;
border-radius: calc(var(--radius) * 2);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
cursor: zoom-out;
image-rendering: auto;
}
/* Close button */
.bear-gallery-close {
position: absolute;
inset-block-start: 0.9rem;
inset-inline-end: 0.9rem;
padding: 0.35em 0.75em;
border-radius: 999px;
font: inherit;
font-size: var(--font-small);
line-height: 1.2;
color: #fff;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.35);
cursor: pointer;
}
@media (hover: hover) {
.bear-gallery-close:hover {
border-color: rgba(255, 255, 255, 0.6);
background: rgba(0, 0, 0, 0.7);
}
}
.bear-gallery-close:focus {
outline: none;
}
.bear-gallery-close:focus-visible {
border-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.bear-gallery-lightbox,
.bear-gallery img {
transition: none;
}
}
/* -- status -- */
/* Box containing post content */
.thoughts ul.embedded.blog-posts > li,
.manga-requiem ul.embedded.blog-posts > li {
border: 1px solid var(--low-opacity-color); /* Change to match your design */
background-color: var(--background-color); /* Change to match your design */
margin-top: 1.25em;
padding: 2em;
display: flex;
flex-direction: column-reverse; /* Reverse content order */
}
/* Hide title & link */
.thoughts ul.embedded.blog-posts > li > a,
.manga-requiem ul.embedded.blog-posts > li > a,
.books ul.embedded.blog-posts > li > a {
display: none;
}
/* Remove extra space above content */
.thoughts ul.embedded.blog-posts > li div p:first-child,
.manga-requiem ul.embedded.blog-posts > li div p:first-child,
.books ul.embedded.blog-posts > li div p:first-child {
margin-top: 0;
}
/* Remove extra space to the left of content */
.thoughts ul.embedded.blog-posts,
.manga-requiem ul.embedded.blog-posts,
.books ul.embedded.blog-posts {
padding: unset;
}
/* Remove extra space below content */
.thoughts ul.blog-posts li span,
.manga-requiem ul.blog-posts li span,
.books ul.blog-posts li span {
flex: none;
}