and lays the figures out side by side, * each getting an equal share of the width. Images are cropped to the * same aspect ratio so a row lines up regardless of the source shapes. * On narrow screens the row stacks. */ .blog-content figure { margin: 1.5em 0; text-align: center; } .blog-content figure img { margin: 0 auto; } .blog-content figcaption { font-size: 0.9em; color: var(--color-text-muted); margin-top: 0.5em; text-align: left; } .blog-content .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5em; margin: 1.5em 0; } .blog-content .figures figure { margin: 0; } .blog-content .figures img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; } .blog-content blockquote { border-left: 4px solid var(--color-accent); padding-left: 1em; margin: 1em 0; color: var(--color-text-muted); font-style: italic; } .blog-content pre { background: var(--color-code-bg); color: var(--color-code-text); border: 1px solid var(--color-border); border-radius: 4px; padding: 1em; overflow-x: auto; /* Bootstrap 3 sets word-break: break-all on pre, which splits words * mid-syllable on phones ("ag / ent"). Wrap at spaces only; anything * longer than the box scrolls. */ white-space: pre-wrap; word-break: normal; overflow-wrap: normal; } .blog-content code { background: var(--color-code-bg); color: var(--color-code-text); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } .blog-content pre code { background: none; color: inherit; padding: 0; } /* Link previews (hover cards). * * Links whose href is listed in _data/link_previews.yml get .has-preview * from link-preview.js and a floating .link-preview card on hover/focus. * The card is appended to and positioned absolutely by the script. */ .blog-content a.has-preview { text-decoration-style: dotted; } .link-preview { position: absolute; z-index: 1000; width: 320px; max-width: calc(100vw - 16px); background: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); overflow: hidden; font-size: 0.9em; line-height: 1.4; } .link-preview img { display: block; width: 100%; max-height: 160px; object-fit: contain; background: #fff; padding: 0.5em; box-sizing: border-box; border-bottom: 1px solid var(--color-border); } .link-preview-body { padding: 0.75em 0.9em; } .link-preview-site { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-subtle); margin-bottom: 0.2em; } .link-preview-title { font-weight: bold; margin-bottom: 0.3em; } .link-preview-desc { color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Tags */ .blog-tags { margin: 1.5em 0; } .blog-tags .label { margin-right: 0.3em; } .blog-tags-small .label { font-size: 0.85em; } /* Sidebar */ .blog-sidebar { background: var(--color-bg-secondary); color: var(--color-text); padding: 1em; border-radius: 4px; } .blog-sidebar h4 { margin-top: 0; margin-bottom: 0.5em; color: var(--color-text); } .blog-sidebar ul { padding-left: 0; } .blog-sidebar ul li { margin-bottom: 0.5em; } .tag-cloud .label { display: inline-block; margin: 0.2em; } /* Navigation between posts */ .blog-nav { margin: 2em 0; overflow: hidden; } /* Comments section */ .blog-comments { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--color-border); } /* Bibliography/References for academic citations */ .blog-content .references { font-size: 0.95em; margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--color-border); } .blog-content .references h2 { font-size: 1.3em; } .blog-content .csl-entry { margin-bottom: 0.8em; padding-left: 2em; text-indent: -2em; } /* Footnotes */ .blog-content .footnotes { font-size: 0.9em; margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--color-border); } .blog-content .footnotes ol { padding-left: 1.5em; } .blog-content .footnotes li { margin-bottom: 0.5em; } /* Search results */ #search-results .blog-listing h3 { margin-bottom: 0.2em; } /* Tag filter buttons */ .tag-filter-buttons { white-space: nowrap; overflow-x: auto; padding-bottom: 5px; } .tag-filter-buttons .btn { margin-right: 3px; margin-bottom: 3px; } .tag-filter-buttons .btn.active { font-weight: bold; } /* Blog controls bar */ .blog-controls { background: var(--color-bg-secondary); color: var(--color-text); padding: 1em; border-radius: 4px; margin-bottom: 1.5em; } /* Giscus comments */ .giscus { margin-top: 2em; } /* Responsive adjustments */ @media (max-width: 768px) { .blog-sidebar { margin-top: 2em; } .blog-content { font-size: 1em; } .tag-filter-buttons { margin-top: 1em; } }