ef806f8fbb
Phase 1-3 of decoupling plan: - Shared DB, models, infrastructure, browser, config, utils - Event infrastructure (domain_events outbox, bus, processor) - Structured logging - Generic container concept (container_type/container_id) - Alembic migrations for all schema changes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
166 lines
3.1 KiB
CSS
166 lines
3.1 KiB
CSS
|
||
|
||
|
||
.blog-content {
|
||
margin: 0 auto;
|
||
color: #222;
|
||
font-family: var(--font-sans);
|
||
line-height: 1.6;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.blog-content pre {
|
||
background-color: #f8f9fa; /* very light gray */
|
||
color: #1f2937; /* dark gray */
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
font-size: 1.2rem;
|
||
line-height: 1.5;
|
||
|
||
padding: 1rem 1.25rem;
|
||
border-radius: 0.5rem;
|
||
border: 1px solid #d1d5db; /* gray-300-ish */
|
||
|
||
overflow-x: auto;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.blog-content code {
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
|
||
|
||
.blog-content video,
|
||
.blog-content iframe,
|
||
.blog-content img {
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
|
||
/* Paragraphs */
|
||
.blog-content p {
|
||
text-align: justify;
|
||
overflow-wrap: anywhere; /* modern, nicer than break-word */
|
||
word-break: normal; /* avoid aggressive breaking */
|
||
hyphens: auto;
|
||
-webkit-hyphens: auto;
|
||
-ms-hyphens: auto;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.blog-content .kg-card {
|
||
margin-top:.5rem;
|
||
margin-bottom:1rem;
|
||
}
|
||
|
||
|
||
/* Headings */
|
||
.blog-content h1,
|
||
.blog-content h2,
|
||
.blog-content h3,
|
||
.blog-content h4,
|
||
.blog-content h5,
|
||
.blog-content h6 {
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
color: #000;
|
||
margin-top: 1em;
|
||
margin-bottom: 0.6em;
|
||
}
|
||
|
||
.blog-content h1 { font-size: 4rem; }
|
||
.blog-content h2 { font-size: 3rem; }
|
||
.blog-content h3 { font-size: 2.5rem; }
|
||
.blog-content h4 { font-size: 2rem; }
|
||
.blog-content h5 { font-size: 1.5rem; }
|
||
.blog-content h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
|
||
|
||
/* Lists */
|
||
.blog-content ul,
|
||
.blog-content ol {
|
||
margin: 0 0 1em 1.5em;
|
||
padding: 0;
|
||
}
|
||
|
||
.blog-content li {
|
||
margin: 0.4em 0;
|
||
}
|
||
|
||
/* Blockquotes */
|
||
.blog-content blockquote {
|
||
border-left: 4px solid #ddd;
|
||
padding-left: 1em;
|
||
color: #555;
|
||
font-style: italic;
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
/* Images */
|
||
.blog-content img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
margin: 1.5em auto;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Figures & captions */
|
||
.blog-content figure {
|
||
margin: 1.5em 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.blog-content figcaption {
|
||
color: #666;
|
||
font-size: 0.9rem;
|
||
line-height: 1.4;
|
||
margin-top: 0.5em;
|
||
}
|
||
|
||
/* Links */
|
||
.blog-content a {
|
||
color: #0055cc;
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
.blog-content a:hover,
|
||
.blog-content a:focus {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Horizontal rule */
|
||
.blog-content hr {
|
||
border: 0;
|
||
border-top: 1px solid #ddd;
|
||
margin: 2em 0;
|
||
}
|
||
|
||
|
||
/* Generic YouTube embeds */
|
||
iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"] {
|
||
display: block;
|
||
width: 50% !important;
|
||
max-width: 50%;
|
||
aspect-ratio: 16 / 9;
|
||
height: auto;
|
||
border: 0;
|
||
}
|
||
|
||
/* (Optional) target Ghost’s embed card wrapper specifically */
|
||
.kgg-embed-card iframe {
|
||
display: block;
|
||
width: 100% !important;
|
||
aspect-ratio: 16 / 9;
|
||
height: auto;
|
||
border: 0;
|
||
}
|