add: блоги (3) стили и шаблоны
This commit is contained in:
@@ -87,4 +87,385 @@
|
||||
hover:text-emerald-500 dark:hover:text-lime-300 delay-300 duration-100
|
||||
hover:border-solid transition-colors transition duration-100;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ТИПОГРАФИКА И СТИЛИ ДЛЯ СТАТЕЙ БЛОГА (CodeMirror / Rich HTML Content)
|
||||
========================================================================== */
|
||||
|
||||
.prose {
|
||||
color: #292524;
|
||||
line-height: 1.75;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.dark .prose {
|
||||
color: #e7e5e4;
|
||||
}
|
||||
|
||||
/* Заголовки */
|
||||
.prose h1 {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.03em;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #1c1917;
|
||||
}
|
||||
|
||||
.dark .prose h1 {
|
||||
color: #f5f5f4;
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
font-size: 1.625rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.02em;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0.85rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid rgba(168, 85, 247, 0.25);
|
||||
color: #1c1917;
|
||||
}
|
||||
|
||||
.dark .prose h2 {
|
||||
color: #f5f5f4;
|
||||
border-bottom-color: rgba(168, 85, 247, 0.35);
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 1.75rem;
|
||||
margin-bottom: 0.65rem;
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.dark .prose h3 {
|
||||
color: #e7e5e4;
|
||||
}
|
||||
|
||||
.prose h4 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.dark .prose h4 {
|
||||
color: #e7e5e4;
|
||||
}
|
||||
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.4rem;
|
||||
color: #57534e;
|
||||
}
|
||||
|
||||
.dark .prose h5,
|
||||
.dark .prose h6 {
|
||||
color: #a8a29e;
|
||||
}
|
||||
|
||||
/* Параграфы и текстовые элементы */
|
||||
.prose p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.prose strong,
|
||||
.prose b {
|
||||
font-weight: 700;
|
||||
color: #1c1917;
|
||||
}
|
||||
|
||||
.dark .prose strong,
|
||||
.dark .prose b {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.prose em,
|
||||
.prose i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.prose mark {
|
||||
background-color: rgba(168, 85, 247, 0.2);
|
||||
color: #6b21a8;
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.dark .prose mark {
|
||||
background-color: rgba(168, 85, 247, 0.35);
|
||||
color: #e9d5ff;
|
||||
}
|
||||
|
||||
/* Разделители */
|
||||
.prose hr {
|
||||
margin: 2.25rem 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent);
|
||||
}
|
||||
|
||||
.dark .prose hr {
|
||||
background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent);
|
||||
}
|
||||
|
||||
/* Списки */
|
||||
.prose ul {
|
||||
list-style-type: disc;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-left: 1.65rem;
|
||||
}
|
||||
|
||||
.prose ol {
|
||||
list-style-type: decimal;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-left: 1.65rem;
|
||||
}
|
||||
|
||||
.prose li {
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.prose li::marker {
|
||||
color: #9333ea;
|
||||
}
|
||||
|
||||
.dark .prose li::marker {
|
||||
color: #c084fc;
|
||||
}
|
||||
|
||||
.prose ul ul,
|
||||
.prose ol ol,
|
||||
.prose ul ol,
|
||||
.prose ol ul {
|
||||
margin-top: 0.35rem;
|
||||
margin-bottom: 0.35rem;
|
||||
padding-left: 1.35rem;
|
||||
}
|
||||
|
||||
.prose ul ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.prose ul ul ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
/* Цитаты */
|
||||
.prose blockquote {
|
||||
margin: 1.5rem 0;
|
||||
padding: 0.85rem 1.25rem;
|
||||
border-left: 4px solid #a855f7;
|
||||
background-color: rgba(245, 245, 244, 0.6);
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
font-style: italic;
|
||||
color: #57534e;
|
||||
}
|
||||
|
||||
.dark .prose blockquote {
|
||||
background-color: rgba(24, 24, 27, 0.6);
|
||||
color: #d6d3d1;
|
||||
}
|
||||
|
||||
.prose blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Таблицы */
|
||||
.prose table {
|
||||
width: 100%;
|
||||
margin: 1.75rem 0;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: 0.9375rem;
|
||||
border: 1px solid rgba(228, 228, 231, 0.9);
|
||||
border-radius: 0.875rem;
|
||||
overflow: hidden;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.dark .prose table {
|
||||
border-color: rgba(63, 63, 70, 0.7);
|
||||
}
|
||||
|
||||
.prose thead {
|
||||
background-color: rgba(244, 244, 245, 0.95);
|
||||
border-bottom: 2px solid rgba(212, 212, 216, 0.9);
|
||||
}
|
||||
|
||||
.dark .prose thead {
|
||||
background-color: rgba(39, 39, 42, 0.95);
|
||||
border-bottom-color: rgba(63, 63, 70, 0.9);
|
||||
}
|
||||
|
||||
.prose th {
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: #18181b;
|
||||
}
|
||||
|
||||
.dark .prose th {
|
||||
color: #f4f4f5;
|
||||
}
|
||||
|
||||
.prose td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid rgba(244, 244, 245, 0.9);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dark .prose td {
|
||||
border-bottom-color: rgba(39, 39, 42, 0.8);
|
||||
}
|
||||
|
||||
.prose tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.prose tbody tr:nth-child(even) {
|
||||
background-color: rgba(250, 250, 250, 0.5);
|
||||
}
|
||||
|
||||
.dark .prose tbody tr:nth-child(even) {
|
||||
background-color: rgba(24, 24, 27, 0.3);
|
||||
}
|
||||
|
||||
.prose tbody tr:hover {
|
||||
background-color: rgba(168, 85, 247, 0.05);
|
||||
}
|
||||
|
||||
.dark .prose tbody tr:hover {
|
||||
background-color: rgba(168, 85, 247, 0.1);
|
||||
}
|
||||
|
||||
.prose caption {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
color: #78716c;
|
||||
}
|
||||
|
||||
/* Код и блоки кода */
|
||||
.prose code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.875em;
|
||||
background-color: rgba(243, 244, 246, 0.9);
|
||||
color: #7e22ce;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid rgba(229, 231, 235, 0.8);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .prose code {
|
||||
background-color: rgba(39, 39, 42, 0.8);
|
||||
color: #d8b4fe;
|
||||
border-color: rgba(63, 63, 70, 0.8);
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
border-radius: 1rem;
|
||||
background-color: #18181b;
|
||||
color: #f4f4f5;
|
||||
overflow-x: auto;
|
||||
border: 1px solid rgba(63, 63, 70, 0.6);
|
||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.prose pre code {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 0.9em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Изображения и медиа */
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 1rem;
|
||||
margin: 1.5rem auto;
|
||||
display: block;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.prose figure {
|
||||
margin: 1.75rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prose figcaption {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: #78716c;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Спойлеры и клавиши */
|
||||
.prose details {
|
||||
margin: 1.25rem 0;
|
||||
padding: 0.85rem 1.15rem;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(245, 245, 244, 0.6);
|
||||
border: 1px solid rgba(228, 228, 231, 0.8);
|
||||
}
|
||||
|
||||
.dark .prose details {
|
||||
background-color: rgba(24, 24, 27, 0.6);
|
||||
border-color: rgba(63, 63, 70, 0.6);
|
||||
}
|
||||
|
||||
.prose summary {
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
color: #18181b;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dark .prose summary {
|
||||
color: #f4f4f5;
|
||||
}
|
||||
|
||||
.prose kbd {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.8em;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #e4e4e7;
|
||||
color: #18181b;
|
||||
border: 1px solid #d4d4d8;
|
||||
box-shadow: 0 1px 0 1px #a1a1aa;
|
||||
}
|
||||
|
||||
.dark .prose kbd {
|
||||
background-color: #27272a;
|
||||
color: #f4f4f5;
|
||||
border-color: #3f3f46;
|
||||
box-shadow: 0 1px 0 1px #18181b;
|
||||
}
|
||||
Reference in New Issue
Block a user