init
This commit is contained in:
557
src/styles/post.css
Normal file
557
src/styles/post.css
Normal file
@@ -0,0 +1,557 @@
|
||||
/* Base styles for all elements */
|
||||
.prose * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* Main content container */
|
||||
.prose {
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
/* Post title section */
|
||||
.prose .title {
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
.prose .title h1 {
|
||||
margin: 0 0 0.375rem 0;
|
||||
}
|
||||
|
||||
/* Headings (h1-h5)
|
||||
Adjust size or spacing below if needed. */
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5 {
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1.75;
|
||||
margin: 3.75em 0 1.75em 0;
|
||||
}
|
||||
|
||||
/* Bold text */
|
||||
.prose strong,
|
||||
.prose b {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* Italic text */
|
||||
.prose em {
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.prose a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--text-tertiary);
|
||||
transition: text-decoration-color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
color: var(--primary);
|
||||
text-decoration-color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
.prose p {
|
||||
line-height: 1.75;
|
||||
margin: 1.75em 0;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.prose table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin: 1.75em 0;
|
||||
font-size: var(--font-size-m);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Table cells */
|
||||
.prose th,
|
||||
.prose td {
|
||||
border: none;
|
||||
border-right: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0.5em 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose th:last-child,
|
||||
.prose td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.prose tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.prose th {
|
||||
background: var(--astro-code-background);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.img-placeholder {
|
||||
background: var(--code-bg);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Loading state for images */
|
||||
.prose img[loading='lazy'] {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.prose figure {
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prose figure img {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.prose figure figcaption {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-s);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prose p > img {
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.prose p > img::after {
|
||||
content: attr(alt);
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-s);
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.prose .img-caption {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-s);
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
.prose code {
|
||||
padding: 2.5px 3.5px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--code-bg);
|
||||
border: 0.5px solid var(--border);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
font-feature-settings:
|
||||
'liga' 0,
|
||||
'calt' 0;
|
||||
-webkit-font-feature-settings:
|
||||
'liga' 0,
|
||||
'calt' 0;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.prose blockquote {
|
||||
border-left: 1.5px solid var(--border);
|
||||
margin: 0 0 1.75em 0.125em;
|
||||
padding: 0 0 0 1.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.prose blockquote cite {
|
||||
display: inline-block;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Unordered lists */
|
||||
.prose ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 1.75em;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.prose ul ul {
|
||||
margin-left: 0.625rem;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose ul li {
|
||||
position: relative;
|
||||
padding-left: 0.5rem;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose ul li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose ul li > ul {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose ul li::before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
left: -1.25rem;
|
||||
top: -0.05em;
|
||||
width: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Ordered lists */
|
||||
.prose ol {
|
||||
list-style-position: outside;
|
||||
padding-left: 0;
|
||||
margin-left: 1.25rem;
|
||||
margin-bottom: 1.75em;
|
||||
counter-reset: item;
|
||||
}
|
||||
|
||||
.prose ol li {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 0.25rem;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose ol li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose ol li::before {
|
||||
content: counter(item) '.';
|
||||
counter-increment: item;
|
||||
position: absolute;
|
||||
left: -1.15rem;
|
||||
width: 1.5rem;
|
||||
text-align: left;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.75;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings:
|
||||
'tnum' 1,
|
||||
'zero' 0,
|
||||
'cv01' 1,
|
||||
'cv02' 1,
|
||||
'calt' 1,
|
||||
'ss03' 1,
|
||||
'liga' 1,
|
||||
'ordn' 1;
|
||||
}
|
||||
|
||||
/* Task lists */
|
||||
.prose ul.contains-task-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.prose ul.contains-task-list li::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.prose ul.contains-task-list li.task-list-item {
|
||||
padding-left: 0.125em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose ul.contains-task-list li.task-list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Task list checkboxes */
|
||||
.prose ul.contains-task-list li.task-list-item input[type='checkbox'] {
|
||||
margin-right: 0.5em;
|
||||
position: relative;
|
||||
top: 0.175em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 1.35px solid var(--text-tertiary);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked {
|
||||
position: relative;
|
||||
background: var(--code-bg);
|
||||
border: 1.35px solid var(--text-tertiary);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked::before {
|
||||
content: '✓';
|
||||
font-family: var(--sans);
|
||||
color: var(--text-primary);
|
||||
opacity: 0.6;
|
||||
font-weight: var(--font-weight-bold);
|
||||
position: absolute;
|
||||
left: 0.15em;
|
||||
top: 0.05em;
|
||||
font-size: 0.75em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.prose ul.contains-task-list li.task-list-item input[type='checkbox'] + * {
|
||||
display: inline;
|
||||
margin-left: 0;
|
||||
line-height: 1.75;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* .prose ul.contains-task-list li.task-list-item:has(input[type='checkbox']:checked) {
|
||||
text-decoration: line-through;
|
||||
} */
|
||||
|
||||
/* Subscript and superscript */
|
||||
.prose sup,
|
||||
.prose sub,
|
||||
.prose sup a {
|
||||
margin: 0 0.125em;
|
||||
font-size: 0.875em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
.prose hr {
|
||||
margin: 3.75em 0;
|
||||
height: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prose hr::before {
|
||||
content: '***';
|
||||
font-family: var(--mono);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.875em;
|
||||
letter-spacing: 0.25em;
|
||||
}
|
||||
|
||||
/* Keyboard input */
|
||||
.prose kbd {
|
||||
font-family: var(--mono);
|
||||
font-size: var(--font-size-s);
|
||||
border: 1px solid var(--text-tertiary);
|
||||
padding: 1px 4px;
|
||||
border-radius: 5px;
|
||||
min-width: 1.75em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
/* box-shadow: inset 0 -2.5px 0 var(--border); */
|
||||
}
|
||||
|
||||
/* Highlighted text */
|
||||
.prose mark {
|
||||
background-color: var(--mark);
|
||||
color: var(--text-primary);
|
||||
padding: 3px 1px;
|
||||
}
|
||||
|
||||
/* Footnotes */
|
||||
.prose .footnotes {
|
||||
margin-top: 4rem;
|
||||
padding-top: 1.75rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prose .footnotes::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4rem;
|
||||
height: 1px;
|
||||
background-color: var(--border);
|
||||
}
|
||||
|
||||
.prose cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Footnote references */
|
||||
.prose [data-footnote-backref] {
|
||||
position: relative;
|
||||
font-family: var(--mono);
|
||||
font-size: var(--font-size-l);
|
||||
top: -0.05em;
|
||||
}
|
||||
|
||||
.prose [data-footnote-ref] {
|
||||
font-size: 1em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings:
|
||||
'tnum' 1,
|
||||
'zero' 0,
|
||||
'cv01' 1,
|
||||
'cv02' 1,
|
||||
'calt' 1,
|
||||
'ss03' 1,
|
||||
'liga' 1,
|
||||
'ordn' 1;
|
||||
}
|
||||
|
||||
.prose [data-footnote-ref],
|
||||
.prose [data-footnote-backref] {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.875;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease-out;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.prose [data-footnote-ref]:hover,
|
||||
.prose [data-footnote-backref]:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.prose pre {
|
||||
background-color: var(--astro-code-background);
|
||||
border-radius: 8px;
|
||||
padding: 1.25em 1.5em;
|
||||
margin: 2em 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.prose pre {
|
||||
padding: 1em 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.prose pre > code {
|
||||
font-family: var(--mono);
|
||||
font-feature-settings:
|
||||
'liga' 0,
|
||||
'calt' 0;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
line-height: 1.5;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.prose pre > code * {
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
/* KaTeX Math Rendering */
|
||||
|
||||
/* Hide MathML fallback to prevent duplication */
|
||||
.katex-mathml {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Ensure display math is centered */
|
||||
.katex-display {
|
||||
text-align: center;
|
||||
margin: 1.75em 0;
|
||||
}
|
||||
|
||||
/* Reset any conflicting styles that might interfere with KaTeX */
|
||||
.katex * {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* Ensure KaTeX elements inherit color properly */
|
||||
.katex,
|
||||
.katex * {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Specific fixes for common CSS framework conflicts */
|
||||
.katex .base,
|
||||
.katex .strut,
|
||||
.katex .mathit,
|
||||
.katex .mathrm,
|
||||
.katex .mathbf,
|
||||
.katex .mathsf,
|
||||
.katex .mathtt {
|
||||
line-height: initial;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.katex,
|
||||
.katex * {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reading Time */
|
||||
.reading-time {
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.reading-time .separator {
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
|
||||
/* Video */
|
||||
.prose iframe {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
margin: 0.25em 0 0 0;
|
||||
}
|
||||
|
||||
/* Spotify */
|
||||
.prose iframe[src*='spotify.com'] {
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user