showArticle.css

content/showArticle.php

@@ -6,7 +6,7 @@
 <?php
 include_once 'php/controller/showArticle-controller.php';
 ?>
-<main>
+<!--<main>
 
     <h1><?php if (isset($title)) {echo $title;} ?></h1>
 
@@ -14,5 +14,58 @@ include_once 'php/controller/showArticle-controller.php';
         <?php if (isset($content)) {echo $content;} ?>
     </p>
 
+</main>-->
+
+<!-- Hauptcontainer für die Beitragsansicht (Ausschließlich der Content-Bereich) -->
+<main class="art-view-container">
+
+    <!-- Artikel-Kopfdaten (Metadaten & Titel) -->
+    <div class="art-view-top-section">
+
+        <?php if (isset($category) && !empty($category)): ?>
+            <span class="art-view-category"><?php echo htmlspecialchars($category); ?></span>
+        <?php endif; ?>
+
+        <h1 class="art-view-title">
+            <?php if (isset($title)) { echo htmlspecialchars($title); } ?>
+        </h1>
+
+        <div class="art-view-meta">
+            <?php if (isset($author) && !empty($author)): ?>
+                <span class="art-view-author">Von: <strong><?php echo htmlspecialchars($author); ?></strong></span>
+            <?php endif; ?>
+        </div>
+
+    </div>
+
+    <!-- Artikel-Inhalt -->
+    <div class="art-view-content">
+        <?php if (isset($content)): ?>
+            <!-- nl2br für Zeilenumbrüche -->
+            <div class="art-view-body"><?php echo nl2br(htmlspecialchars($content)); ?></div>
+        <?php endif; ?>
+    </div>
+
+    <!-- Artikel-Endbereich (Tags) -->
+    <?php if (isset($tags) && !empty($tags)): ?>
+        <div class="art-view-bottom-section">
+            <div class="art-view-tags-label">Tags:</div>
+            <div class="art-view-tags-list">
+                <?php
+                // Falls $tags ein String ist (z.B. "Web, CSS"), in ein Array umwandeln
+                $tagArray = is_array($tags) ? $tags : explode(',', $tags);
+                foreach ($tagArray as $tag):
+                    $trimmedTag = trim($tag);
+                    if (!empty($trimmedTag)):
+                        ?>
+                        <span class="art-view-tag-item"><?php echo htmlspecialchars($trimmedTag); ?></span>
+                    <?php
+                    endif;
+                endforeach;
+                ?>
+            </div>
+        </div>
+    <?php endif; ?>
+
 </main>
 

css/createArticle.css

@@ -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 */

css/showArticle.css

@@ -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;
+    }
+}

index.php

@@ -23,7 +23,8 @@ require_once $abs_path . "/php/controller/index-controller.php";
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/navbar.css">
     <link rel="stylesheet" href="css/footer.css">
-    <link rel="stylesheet" href="css/article.css">
+    <link rel="stylesheet" href="css/createArticle.css">
+    <link rel="stylesheet" href="css/showArticle.css">
     <link rel="stylesheet" href="css/message.css">
     <title>EduForge</title>
 </head>