showArticle.css

2026-05-29 12:02:21 +02:00
parent d5e177654f
commit 938cca55fe
4 changed files with 175 additions and 2 deletions
@@ -98,6 +98,7 @@
    background-color: #006ba1;
 }

+/* Responsive Anpassungen unter 760px (für z.B. Smartphones) */
@media (max-width: 760px) {
    .article-editor-scope.editor-container {
        /* Sidebar nach unten */
@@ -0,0 +1,118 @@
+/* Container für den gesamten Artikel */
+.art-view-container {
+    box-sizing: border-box;
+    max-width: 900px; /* Angenehme Lesebreite für längere Texte */
+    margin: 3rem auto;
+    padding: 0 2rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    color: #212529;
+    line-height: 1.6;
+}
+
+.art-view-container * {
+    box-sizing: border-box;
+}
+
+/* --- KOPFDATEN-BEREICH --- */
+.art-view-top-section {
+    margin-bottom: 2.5rem;
+    border-bottom: 1px solid #e2e8f0;
+    padding-bottom: 1.5rem;
+}
+
+/* Kategorie-Badge */
+.art-view-category {
+    display: inline-block;
+    background-color: #ebf8ff;
+    color: #2b6cb0;
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 0.75rem;
+}
+
+/* Hauptüberschrift */
+.art-view-title {
+    font-size: 2.5rem;
+    color: #1a202c;
+    line-height: 1.2;
+    margin: 0 0 0.75rem 0;
+    font-weight: 800;
+}
+
+/* Autoren-Zeile */
+.art-view-meta {
+    font-size: 0.95rem;
+    color: #4a5568;
+}
+
+.art-view-author strong {
+    color: #2d3748;
+}
+
+/* --- INHALT --- */
+.art-view-content {
+    margin-bottom: 3rem;
+}
+
+.art-view-body {
+    font-size: 1.125rem;
+    color: #2d3748;
+    white-space: pre-line;
+}
+
+/* --- TAG-BEREICH --- */
+.art-view-bottom-section {
+    border-top: 1px solid #e2e8f0;
+    padding-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.art-view-tags-label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #718096;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.art-view-tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+/* Einzelner Tag */
+.art-view-tag-item {
+    background-color: #f1f5f9;
+    color: #475569;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0.35rem 0.75rem;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.art-view-tag-item:hover {
+    background-color: #e2e8f0;
+    color: #1e293b;
+    cursor: default;
+}
+
+/* Responsive Anpassungen unter 760px (für z.B. Smartphones) */
+@media (max-width: 760px) {
+    .art-view-container {
+        margin: 1.5rem auto;
+        padding: 0 1rem;
+    }
+
+    .art-view-title {
+        font-size: 1.85rem;
+    }
+}