showArticle.css
This commit is contained in:
+54
-1
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user