shardegger/storycove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase 1 and 2 of embedded images

Browse Source
This commit is contained in:
Stefan Hardegger
2025-09-16 14:58:50 +02:00
parent c92308c24a
commit c7b516be31
14 changed files with 686 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/app/globals.css
View File

@@ -134,6 +134,27 @@
@apply italic;
}
/* Image styling for story content */
.reading-content img {
@apply max-w-full h-auto mx-auto my-6 rounded-lg shadow-sm;
max-height: 80vh; /* Prevent images from being too tall */
display: block;
}
.reading-content img[align="left"] {
@apply float-left mr-4 mb-4 ml-0;
max-width: 50%;
}
.reading-content img[align="right"] {
@apply float-right ml-4 mb-4 mr-0;
max-width: 50%;
}
.reading-content img[align="center"] {
@apply block mx-auto;
}
/* Editor content styling - same as reading content but for the rich text editor */
.editor-content h1 {
@apply text-2xl font-bold mt-8 mb-4 theme-header;
@@ -183,4 +204,36 @@
.editor-content em {
@apply italic;
}
/* Image styling for editor content */
.editor-content img {
@apply max-w-full h-auto mx-auto my-4 rounded border;
max-height: 60vh; /* Slightly smaller for editor */
display: block;
}
.editor-content img[align="left"] {
@apply float-left mr-4 mb-4 ml-0;
max-width: 50%;
}
.editor-content img[align="right"] {
@apply float-right ml-4 mb-4 mr-0;
max-width: 50%;
}
.editor-content img[align="center"] {
@apply block mx-auto;
}
/* Loading placeholder for images being processed */
.image-processing-placeholder {
@apply bg-gray-100 dark:bg-gray-800 animate-pulse rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center;
min-height: 200px;
}
.image-processing-placeholder::before {
content: "🖼️ Processing image...";
@apply text-gray-500 dark:text-gray-400 text-sm;
}
}