feat: readable content:
This commit is contained in:
parent
5f150da651
commit
7384b6e585
|
|
@ -15,8 +15,8 @@
|
|||
--color-primary-dark: #0a58ca;
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-secondary: #f8f9fa;
|
||||
--color-text: #212529;
|
||||
--color-text-muted: #6c757d;
|
||||
--color-text: #111111; /* Near black for maximum contrast */
|
||||
--color-text-muted: #444444;
|
||||
--color-border: #dee2e6;
|
||||
--color-success: #198754;
|
||||
--color-danger: #dc3545;
|
||||
|
|
@ -77,10 +77,15 @@
|
|||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: 'Montserrat', 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
font-weight: 500; /* Medium weight */
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -143,6 +148,20 @@ pre code {
|
|||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ── Blockquotes (markdown rendered) ─────────────────────────── */
|
||||
blockquote {
|
||||
border-left: 4px solid var(--color-primary);
|
||||
background: var(--color-bg-secondary);
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
font-style: italic;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
blockquote p {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* ── Responsive images ───────────────────────────────────────── */
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
|
||||
<meta name="theme-color" content="#0d6efd" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,40 @@
|
|||
/* ── Shared rich-text styles (.prose + .tab-content) ──── */
|
||||
.prose,
|
||||
.tab-content {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.75rem 0.5rem;
|
||||
line-height: 1.65;
|
||||
font-size: 1rem; /* 16px */
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
max-width: 70ch; /* Limit line length for readability */
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.tab-heading {
|
||||
color: var(--color-primary);
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.5rem; /* 24px */
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.prose h2, .tab-content h2 {
|
||||
font-size: 1.5rem; /* 24px */
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.prose h3, .tab-content h3 {
|
||||
font-size: 1.25rem; /* 20px */
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.prose p,
|
||||
.tab-content p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.prose pre,
|
||||
.tab-content pre {
|
||||
background: var(--color-bg-secondary);
|
||||
|
|
@ -17,48 +43,6 @@
|
|||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-try {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.prose pre:hover .btn-try,
|
||||
.tab-content pre:hover .btn-try {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.btn-try {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.prose code,
|
||||
.tab-content code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.prose p,
|
||||
.tab-content p {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.prose h2, .prose h3,
|
||||
.tab-content h2, .tab-content h3 {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tab-content ul,
|
||||
.tab-content ol {
|
||||
margin-bottom: 0.75rem;
|
||||
|
|
|
|||
|
|
@ -351,7 +351,7 @@ def _parse_flashcards(text):
|
|||
body = re.sub(r'^\s*image:\s*.*$', '', body, flags=re.MULTILINE).strip()
|
||||
|
||||
# Check for explanation (blockquote starting with >)
|
||||
explanation_match = re.search(r'^\s*>\s*(.*)$', body, re.MULTILINE | re.DOTALL)
|
||||
explanation_match = re.search(r'^\s*(>.*)$', body, re.MULTILINE | re.DOTALL)
|
||||
explanation = explanation_match.group(1).strip() if explanation_match else ""
|
||||
|
||||
# If MCQ options exist, it's an MCQ. We also remove the options from the body to find clean explanation.
|
||||
|
|
|
|||
Loading…
Reference in New Issue