Phil Skentelbery
27501f6381
## Added - Feed Media Enhancement with Media RSS namespace support - RSS enclosure, media:content, media:thumbnail elements - JSON Feed image field for first image - ADR-059: Full feed media standardization roadmap ## Fixed - Media display on homepage (was only showing on note pages) - Responsive image sizing with CSS constraints - Caption display (now alt text only, not visible) - Logging correlation ID crash in non-request contexts ## Documentation - Feed media design documents and implementation reports - Media display fixes design and validation reports - Updated ROADMAP with v1.3.0/v1.4.0 media plans 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
194 lines
9.5 KiB
CSS
194 lines
9.5 KiB
CSS
/* StarPunk CSS - Minimal responsive stylesheet */
|
|
|
|
:root {
|
|
--color-text: #333; --color-text-light: #666; --color-bg: #fff; --color-bg-alt: #f5f5f5;
|
|
--color-link: #0066cc; --color-link-hover: #004499; --color-border: #ddd;
|
|
--color-success: #28a745; --color-error: #dc3545; --color-warning: #ffc107; --color-info: #17a2b8;
|
|
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
--font-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
|
|
--spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; --spacing-xl: 4rem;
|
|
--max-width: 42rem; --border-radius: 4px;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); padding: var(--spacing-md); }
|
|
|
|
h1, h2, h3 { margin-bottom: var(--spacing-md); line-height: 1.2; font-weight: 600; }
|
|
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; }
|
|
p { margin-bottom: var(--spacing-md); }
|
|
a { color: var(--color-link); text-decoration: none; }
|
|
a:hover { color: var(--color-link-hover); text-decoration: underline; }
|
|
|
|
code, pre { font-family: var(--font-mono); background: var(--color-bg-alt); padding: 0.125rem 0.25rem; border-radius: var(--border-radius); font-size: 0.875rem; }
|
|
pre { padding: var(--spacing-md); overflow-x: auto; margin-bottom: var(--spacing-md); }
|
|
|
|
header, main, footer { max-width: var(--max-width); margin: 0 auto; }
|
|
header { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-border); }
|
|
header h1 { margin-bottom: var(--spacing-sm); }
|
|
header h1 a { color: var(--color-text); text-decoration: none; }
|
|
nav { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
|
|
nav a { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius); transition: background 0.2s; }
|
|
nav a:hover { background: var(--color-bg-alt); text-decoration: none; }
|
|
main { min-height: 60vh; margin-bottom: var(--spacing-lg); }
|
|
footer { padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); text-align: center; color: var(--color-text-light); font-size: 0.875rem; }
|
|
|
|
.dev-mode-warning { background: var(--color-error); color: white; padding: var(--spacing-md); text-align: center; font-weight: bold; margin: calc(-1 * var(--spacing-md)); margin-bottom: var(--spacing-lg); }
|
|
|
|
.flash { padding: var(--spacing-md); border-radius: var(--border-radius); margin-bottom: var(--spacing-md); border-left: 4px solid; }
|
|
.flash-success { background: #d4edda; border-color: var(--color-success); color: #155724; }
|
|
.flash-error { background: #f8d7da; border-color: var(--color-error); color: #721c24; }
|
|
.flash-warning { background: #fff3cd; border-color: var(--color-warning); color: #856404; }
|
|
.flash-info { background: #d1ecf1; border-color: var(--color-info); color: #0c5460; }
|
|
|
|
.h-entry { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
|
|
.h-entry:last-child { border-bottom: none; }
|
|
.note-preview .e-content { margin-bottom: var(--spacing-md); }
|
|
.note-meta { color: var(--color-text-light); font-size: 0.875rem; }
|
|
.note-meta a { color: var(--color-text-light); }
|
|
.note-nav { margin-top: var(--spacing-md); }
|
|
.empty-state { text-align: center; padding: var(--spacing-xl); color: var(--color-text-light); }
|
|
|
|
.form-group { margin-bottom: var(--spacing-md); }
|
|
label { display: block; margin-bottom: var(--spacing-sm); font-weight: 600; }
|
|
input[type="text"], input[type="url"], input[type="email"], textarea { width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; }
|
|
textarea { font-family: var(--font-mono); resize: vertical; min-height: 10rem; }
|
|
small { display: block; margin-top: var(--spacing-xs); color: var(--color-text-light); font-size: 0.875rem; }
|
|
.form-checkbox { display: flex; align-items: center; gap: var(--spacing-sm); }
|
|
.form-checkbox input[type="checkbox"] { width: auto; margin: 0; }
|
|
.form-checkbox label { margin: 0; font-weight: normal; }
|
|
.form-actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
|
|
|
|
.button { display: inline-block; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg); color: var(--color-text); font-family: inherit; font-size: 1rem; cursor: pointer; text-decoration: none; transition: all 0.2s; }
|
|
.button:hover { background: var(--color-bg-alt); text-decoration: none; }
|
|
.button-primary { background: var(--color-link); color: white; border-color: var(--color-link); }
|
|
.button-primary:hover { background: var(--color-link-hover); border-color: var(--color-link-hover); }
|
|
.button-secondary { background: var(--color-bg-alt); }
|
|
.button-danger { background: var(--color-error); color: white; border-color: var(--color-error); }
|
|
.button-danger:hover { background: #c82333; border-color: #c82333; }
|
|
.button-warning { background: var(--color-warning); color: #333; border-color: var(--color-warning); }
|
|
.button-small { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
|
|
|
|
.admin-container { max-width: 60rem; }
|
|
.admin-nav { display: flex; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--color-bg-alt); border-radius: var(--border-radius); margin-bottom: var(--spacing-lg); flex-wrap: wrap; align-items: center; }
|
|
.admin-nav .logout-form { margin-left: auto; }
|
|
.admin-nav .logout-form button { margin: 0; }
|
|
.admin-content { margin-bottom: var(--spacing-lg); }
|
|
.user-identity { color: var(--color-text-light); font-size: 0.875rem; margin-bottom: var(--spacing-md); }
|
|
|
|
.dashboard-actions { margin-bottom: var(--spacing-md); }
|
|
.note-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-md); }
|
|
.note-table th, .note-table td { padding: var(--spacing-md); text-align: left; border-bottom: 1px solid var(--color-border); }
|
|
.note-table th { background: var(--color-bg-alt); font-weight: 600; }
|
|
.note-content-preview { max-width: 30rem; }
|
|
.note-excerpt { margin-bottom: var(--spacing-xs); }
|
|
.note-slug { color: var(--color-text-light); font-family: var(--font-mono); font-size: 0.75rem; }
|
|
.note-date { white-space: nowrap; color: var(--color-text-light); }
|
|
.note-actions { white-space: nowrap; }
|
|
.note-actions .button { margin-right: var(--spacing-sm); }
|
|
.note-actions .delete-form { display: inline; }
|
|
.status-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: var(--border-radius); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
|
|
.status-published { background: #d4edda; color: var(--color-success); }
|
|
.status-draft { background: #f8d7da; color: var(--color-error); }
|
|
|
|
.login-container { max-width: 30rem; margin: 0 auto; padding: var(--spacing-lg); }
|
|
.login-form { margin: var(--spacing-lg) 0; }
|
|
.dev-login-option { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }
|
|
.dev-warning { color: var(--color-error); font-weight: 600; text-align: center; }
|
|
.login-help { margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }
|
|
.login-help h3 { font-size: 1rem; margin-bottom: var(--spacing-sm); }
|
|
|
|
.note-editor { max-width: 50rem; }
|
|
.note-editor .note-meta { margin-bottom: var(--spacing-md); }
|
|
|
|
/* Media Display Styles - v1.2.0 Media Display Fixes */
|
|
.note-media {
|
|
margin-bottom: var(--spacing-md);
|
|
width: 100%;
|
|
}
|
|
|
|
/* Single image - full width */
|
|
.note-media:has(.media-item:only-child) {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.note-media:has(.media-item:only-child) .media-item {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Two images - side by side */
|
|
.note-media:has(.media-item:nth-child(2):last-child) {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
/* Three or four images - grid */
|
|
.note-media:has(.media-item:nth-child(3)),
|
|
.note-media:has(.media-item:nth-child(4)) {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
/* Media item wrapper */
|
|
.media-item {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--color-bg-alt);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
aspect-ratio: 1 / 1; /* Instagram-style square crop */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Image constraints */
|
|
.media-item img,
|
|
.u-photo {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* Crop to fill container */
|
|
display: block;
|
|
}
|
|
|
|
/* For single images, allow natural aspect ratio */
|
|
.note-media:has(.media-item:only-child) .media-item {
|
|
aspect-ratio: auto;
|
|
max-height: 500px; /* Prevent extremely tall images */
|
|
}
|
|
|
|
.note-media:has(.media-item:only-child) .media-item img {
|
|
object-fit: contain; /* Show full image for singles */
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 500px;
|
|
}
|
|
|
|
/* Remove figcaption from display */
|
|
.media-item figcaption {
|
|
display: none; /* Captions are for alt text only */
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
body { padding: var(--spacing-lg); }
|
|
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; }
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.note-table { font-size: 0.875rem; }
|
|
.note-table th, .note-table td { padding: var(--spacing-sm); }
|
|
.note-actions .button { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
|
|
.admin-nav { flex-direction: column; align-items: stretch; }
|
|
.admin-nav .logout-form { margin-left: 0; }
|
|
|
|
/* Stack images vertically on small screens */
|
|
.note-media:has(.media-item:nth-child(2):last-child) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.media-item {
|
|
aspect-ratio: 16 / 9; /* Wider aspect on mobile */
|
|
}
|
|
}
|