+
@@ -322,18 +361,23 @@ function copyToClipboard() {
// Preview Mode Toggle (Desktop/Mobile)
function setPreviewMode(mode) {
- const preview = document.querySelector('.linkedin-preview');
+ const preview = document.getElementById('linkedinPreview');
+ const container = document.getElementById('linkedinPreviewContainer');
const desktopBtn = document.getElementById('desktopPreviewBtn');
const mobileBtn = document.getElementById('mobilePreviewBtn');
if (mode === 'desktop') {
preview.classList.remove('mobile-view');
preview.classList.add('desktop-view');
+ container.classList.add('desktop-view-container');
+ container.classList.remove('mobile-view-container');
desktopBtn.classList.add('active');
mobileBtn.classList.remove('active');
} else if (mode === 'mobile') {
preview.classList.remove('desktop-view');
preview.classList.add('mobile-view');
+ container.classList.remove('desktop-view-container');
+ container.classList.add('mobile-view-container');
mobileBtn.classList.add('active');
desktopBtn.classList.remove('active');
}
@@ -538,18 +582,38 @@ function refreshLinkedInPreview() {
}
linkedinMediaSection.classList.remove('hidden');
- const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' :
- currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3';
- linkedinMediaSection.innerHTML = `
-
- ${currentMediaItems.map(item =>
- item.type === 'image'
- ? `

`
- : `
`
- ).join('')}
-
- `;
+ // LinkedIn 3-Image Layout: 1 oben groß, 2+3 unten nebeneinander
+ if (currentMediaItems.length === 3) {
+ linkedinMediaSection.innerHTML = `
+
+ ${currentMediaItems[0].type === 'image'
+ ? `

`
+ : `
`
+ }
+ ${currentMediaItems[1].type === 'image'
+ ? `

`
+ : `
`
+ }
+ ${currentMediaItems[2].type === 'image'
+ ? `

`
+ : `
`
+ }
+
+ `;
+ } else {
+ // Standard Grid für 1 oder 2 Bilder
+ const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' : 'grid-cols-2';
+ linkedinMediaSection.innerHTML = `
+
+ ${currentMediaItems.map(item =>
+ item.type === 'image'
+ ? `

`
+ : `
`
+ ).join('')}
+
+ `;
+ }
}
// Drag-and-Drop Reorder (Ultra Smooth with Ghost)
diff --git a/src/web/templates/user/post_detail.html b/src/web/templates/user/post_detail.html
index 1a55392..79c1d14 100644
--- a/src/web/templates/user/post_detail.html
+++ b/src/web/templates/user/post_detail.html
@@ -56,7 +56,11 @@
.linkedin-preview {
background: #ffffff;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+ font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Ubuntu, Oxygen, 'Oxygen Sans', Cantarell, 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lucida Grande', Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
color: rgba(0, 0, 0, 0.9);
overflow: hidden;
}
@@ -114,9 +118,9 @@
margin-top: 2px;
}
.linkedin-content {
- padding: 0 16px 12px;
+ padding: 0 16px 8px;
font-size: 14px;
- line-height: 1.5;
+ line-height: 1.4;
color: rgba(0, 0, 0, 0.9);
white-space: pre-wrap;
word-wrap: break-word;
@@ -164,25 +168,33 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 6px;
- padding: 12px 8px;
+ gap: 4px;
+ padding: 0 16px;
+ height: 40px;
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.6);
background: transparent;
border: none;
cursor: default;
- transition: background 0.15s;
+ transition: all 0.15s;
+ }
+ .linkedin-action-btn:hover {
+ background: rgba(0, 0, 0, 0.04);
+ color: rgba(0, 0, 0, 0.9);
}
.linkedin-action-btn svg {
- width: 20px;
- height: 20px;
+ width: 16px;
+ height: 16px;
}
.linkedin-more-btn {
padding: 4px;
color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
cursor: default;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.view-toggle {
display: inline-flex;
@@ -229,28 +241,80 @@
max-width: 100%;
margin: 0;
}
+ /* Desktop Background (LinkedIn beige) */
+ .desktop-view-container {
+ background: #f3f2ef;
+ padding: 16px;
+ border-radius: 8px;
+ }
+ .mobile-view-container {
+ background: transparent;
+ padding: 0;
+ }
/* Mobile View - smartphone mockup */
.linkedin-preview.mobile-view {
max-width: 375px;
+ height: 750px; /* iPhone-Höhe */
margin: 0 auto;
- border: 12px solid #1f1f1f;
- border-radius: 36px;
+ border: 14px solid #1f1f1f;
+ border-radius: 42px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
position: relative;
+ overflow-y: auto; /* Scrollbar aktiviert */
+ overflow-x: hidden;
+ display: block;
}
+ /* iPhone Notch - bleibt fix beim Scrollen */
.linkedin-preview.mobile-view::before {
content: '';
- position: absolute;
- top: -8px;
+ position: sticky;
+ top: 0;
left: 50%;
transform: translateX(-50%);
- width: 60px;
- height: 4px;
- background: #2a2a2a;
+ width: 170px;
+ height: 28px;
+ background: #1f1f1f;
+ border-radius: 0 0 20px 20px;
+ z-index: 100;
+ display: block;
+ margin: 0 auto;
+ pointer-events: none;
+ }
+ /* Notch Camera Circle - bleibt fix beim Scrollen */
+ .linkedin-preview.mobile-view::after {
+ content: '';
+ position: sticky;
+ top: 8px;
+ left: 50%;
+ transform: translateX(35px);
+ width: 12px;
+ height: 12px;
+ background: #0a0a0a;
+ border-radius: 50%;
+ border: 1px solid #2a2a2a;
+ z-index: 101;
+ display: block;
+ margin-top: -22px;
+ pointer-events: none;
+ }
+ /* Verhindert, dass Content unter die Notch scrollt */
+ .linkedin-preview.mobile-view .linkedin-actions {
+ margin-bottom: 0;
+ }
+ /* Custom scrollbar */
+ .linkedin-preview.mobile-view::-webkit-scrollbar {
+ width: 4px;
+ }
+ .linkedin-preview.mobile-view::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.05);
+ }
+ .linkedin-preview.mobile-view::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
.linkedin-preview.mobile-view .linkedin-header {
- padding: 16px;
+ padding: 8px 12px;
+ padding-top: 33px; /* Space for notch (28px) + 5px margin */
}
.linkedin-preview.mobile-view .linkedin-avatar {
width: 40px;
@@ -267,8 +331,8 @@
font-size: 11px;
}
.linkedin-preview.mobile-view .linkedin-content {
- padding: 0 16px 16px;
- font-size: 13px;
+ padding: 0 12px 12px;
+ font-size: 14px;
line-height: 1.4;
}
.linkedin-preview.mobile-view .linkedin-see-more {
@@ -280,13 +344,14 @@
font-size: 11px;
}
.linkedin-preview.mobile-view .linkedin-action-btn {
- font-size: 13px;
+ font-size: 0; /* Hide text labels on mobile */
padding: 14px 8px;
- gap: 4px;
+ gap: 0;
}
.linkedin-preview.mobile-view .linkedin-action-btn svg {
- width: 18px;
- height: 18px;
+ width: 22px;
+ height: 22px;
+ margin: 0;
}
.view-toggle-btn:hover:not(.active) {
color: #e5e7eb;
@@ -505,12 +570,12 @@
Unsere Wirtschaft steht weiterhin vor erheblichen Herausforderungen, die nicht allein durch positive Stimmungslagen gelöst werden können. Die Gefahr einer Rezession bleibt weiterhin bestehen. Ein trügerischer Optimismus kann dazu verleiten, notwendige strukturelle Reformen zu vernachlässigen.
Ich bin überzeugt: Wir müssen über den Tellerrand hinausblicken und die wirtschaftlichen Fundamentaldaten kritisch hinterfragen. Nur so können wir langfristige Stabilität sichern und die wirtschaftlichen Unsicherheiten unserer Zeit bewältigen.
Es ist entscheidend, diese Dynamik zu hinterfragen und die richtigen Schlüsse zu ziehen. Ich frage mich oft, wie wir diese Dynamik gezielt für positive Veränderungen einsetzen können. Diese Herausforderungen müssen wir aktiv angehen. + +