462 lines
10 KiB
CSS
462 lines
10 KiB
CSS
/*
|
|
* article.css
|
|
* Styles for CKEditor 5 rendered content inside .content-card
|
|
* and for the article detail page layout.
|
|
*
|
|
* Scope: all rules are under .content-card .card-content
|
|
* so they never leak into the rest of the site.
|
|
*/
|
|
|
|
/* ===== ARTICLE PAGE LAYOUT ===== */
|
|
|
|
.article-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
font-size: 0.9rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.article-meta span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.article-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.article-tag {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.article-tag:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
/* ===== CKEDITOR 5 CONTENT ===== */
|
|
|
|
.content-card .card-content {
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
color: var(--text-primary);
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* --- Headings --- */
|
|
|
|
.content-card .card-content h2,
|
|
.content-card .card-content h3,
|
|
.content-card .card-content h4,
|
|
.content-card .card-content h5,
|
|
.content-card .card-content h6 {
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.content-card .card-content h2 {
|
|
font-size: 1.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid var(--border-light);
|
|
}
|
|
|
|
.content-card .card-content h3 {
|
|
font-size: 1.375rem;
|
|
padding-left: 0.75rem;
|
|
border-left: 4px solid var(--primary);
|
|
}
|
|
|
|
.content-card .card-content h4 {
|
|
font-size: 1.125rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* --- Paragraphs --- */
|
|
|
|
.content-card .card-content p {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.content-card .card-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Links --- */
|
|
|
|
.content-card .card-content a {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
text-decoration-color: rgba(255, 107, 0, 0.4);
|
|
text-underline-offset: 3px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.content-card .card-content a:hover {
|
|
color: var(--primary-dark);
|
|
text-decoration-color: var(--primary-dark);
|
|
}
|
|
|
|
/* --- Lists --- */
|
|
|
|
.content-card .card-content ul,
|
|
.content-card .card-content ol {
|
|
margin: 0 0 1.25rem 0;
|
|
padding-left: 1.75rem;
|
|
}
|
|
|
|
.content-card .card-content ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.content-card .card-content ul li {
|
|
position: relative;
|
|
padding-left: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.content-card .card-content ul li::before {
|
|
content: '▸';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--primary);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content-card .card-content ol li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.content-card .card-content ul ul,
|
|
.content-card .card-content ol ol,
|
|
.content-card .card-content ul ol,
|
|
.content-card .card-content ol ul {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Blockquote --- */
|
|
|
|
.content-card .card-content blockquote {
|
|
margin: 1.5rem 0;
|
|
padding: 1.25rem 1.5rem;
|
|
border-left: 4px solid var(--primary);
|
|
background: var(--bg-secondary);
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.content-card .card-content blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Inline code (not inside pre) --- */
|
|
/*
|
|
* High specificity is fine here because this selector explicitly
|
|
* excludes pre > code, so it never touches hljs blocks.
|
|
*/
|
|
|
|
.content-card .card-content :not(pre) > code {
|
|
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
font-size: 0.875em;
|
|
background: var(--bg-tertiary);
|
|
color: var(--primary-dark);
|
|
padding: 0.15em 0.4em;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-light);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* --- Code blocks (CKEditor generates <pre><code class="hljs">) --- */
|
|
/*
|
|
* ALL pre and pre code rules use :where() — zero specificity.
|
|
* This guarantees hljs always wins on colors, background, and padding.
|
|
*
|
|
* Responsibility split:
|
|
* article.css → layout only: margin, border-radius, overflow, shadow
|
|
* hljs CSS → everything visual: background, color, padding, font-size
|
|
*
|
|
* font-size:0 on pre prevents inherited line-height:1.8 from inflating
|
|
* the spacing between lines (line-height is computed from font-size,
|
|
* so zeroing it on the wrapper element neutralises the inheritance).
|
|
* font-size is restored on pre code.
|
|
*/
|
|
|
|
:where(.content-card .card-content) pre {
|
|
margin: 1.5rem 0;
|
|
padding: 0; /* hljs sets padding:1em on code.hljs — don't double it */
|
|
border-radius: var(--radius-md);
|
|
overflow-x: auto;
|
|
box-shadow: var(--shadow-md);
|
|
font-size: 0; /* neutralise inherited line-height */
|
|
line-height: 1;
|
|
background: none; /* hljs controls background (#fff or #282c34) */
|
|
}
|
|
|
|
:where(.content-card .card-content) pre code {
|
|
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
font-size: 0.9rem; /* restore font-size for hljs to work from */
|
|
line-height: 1.5;
|
|
word-break: normal;
|
|
white-space: pre;
|
|
/* NO color, NO background, NO padding — hljs owns these */
|
|
}
|
|
|
|
/* --- Tables --- */
|
|
|
|
.content-card .card-content .table-wrapper,
|
|
.content-card .card-content figure.table {
|
|
overflow-x: auto;
|
|
margin: 1.5rem 0;
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.content-card .card-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.content-card .card-content th {
|
|
background: var(--bg-secondary);
|
|
font-weight: 700;
|
|
text-align: left;
|
|
padding: 0.875rem 1rem;
|
|
border-bottom: 2px solid var(--border-medium);
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.content-card .card-content td {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-light);
|
|
color: var(--text-secondary);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.content-card .card-content tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.content-card .card-content tbody tr:hover td {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* CKEditor 5 table with header row class */
|
|
.content-card .card-content table.ck-table-resized th,
|
|
.content-card .card-content table.ck-table-resized td {
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
/* --- Images (CKEditor wraps in <figure class="image">) --- */
|
|
|
|
.content-card .card-content figure.image {
|
|
margin: 1.5rem auto;
|
|
text-align: center;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.content-card .card-content figure.image img,
|
|
.content-card .card-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 0 auto;
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
cursor: pointer; /* triggers the click-to-enlarge modal */
|
|
}
|
|
|
|
.content-card .card-content figure.image figcaption {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-light);
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
/* CKEditor alignment classes */
|
|
.content-card .card-content figure.image.image-style-align-left {
|
|
float: left;
|
|
margin: 0.5rem 1.5rem 1rem 0;
|
|
max-width: 45%;
|
|
}
|
|
|
|
.content-card .card-content figure.image.image-style-align-right {
|
|
float: right;
|
|
margin: 0.5rem 0 1rem 1.5rem;
|
|
max-width: 45%;
|
|
}
|
|
|
|
/* Clearfix after floated images */
|
|
.content-card .card-content::after {
|
|
content: '';
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* --- Horizontal rule --- */
|
|
|
|
.content-card .card-content hr {
|
|
border: none;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* --- Alert/info boxes (CKEditor custom classes if used) --- */
|
|
|
|
.content-card .card-content .info-box {
|
|
padding: 1rem 1.25rem;
|
|
border-radius: var(--radius-md);
|
|
margin: 1.5rem 0;
|
|
border-left: 4px solid var(--accent);
|
|
background: rgba(0, 168, 255, 0.08);
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* ===== COMMENTS SECTION ===== */
|
|
|
|
.comments-section {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.comments-section h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.comment-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.25rem 1.5rem;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid var(--border-light);
|
|
border-left: 3px solid var(--secondary);
|
|
}
|
|
|
|
.comment-author {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.comment-date {
|
|
font-size: 0.8rem;
|
|
color: var(--text-light);
|
|
margin-left: 0.75rem;
|
|
}
|
|
|
|
.comment-body {
|
|
margin-top: 0.75rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.comment-form-card {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-xl);
|
|
padding: 2rem;
|
|
box-shadow: var(--shadow-md);
|
|
border: 1px solid var(--border-light);
|
|
margin-top: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.comment-form-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--gradient-secondary);
|
|
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
}
|
|
|
|
.comment-form-card h4 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
|
|
@media (max-width: 768px) {
|
|
.content-card .card-content h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.content-card .card-content h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.content-card .card-content figure.image.image-style-align-left,
|
|
.content-card .card-content figure.image.image-style-align-right {
|
|
float: none;
|
|
max-width: 100%;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
/* :where() keeps specificity at zero so hljs still wins on mobile */
|
|
:where(.content-card .card-content) pre {
|
|
box-shadow: none;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.content-card .card-content th,
|
|
.content-card .card-content td {
|
|
padding: 0.6rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.article-meta {
|
|
gap: 1rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.content-card .card-content {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.content-card .card-content h2 {
|
|
font-size: 1.375rem;
|
|
}
|
|
|
|
.content-card .card-content h3 {
|
|
font-size: 1.125rem;
|
|
}
|
|
} |