103 lines
3.5 KiB
Plaintext
103 lines
3.5 KiB
Plaintext
---
|
|
// pages/whatever.astro
|
|
import Layout from "../layouts/Layout.astro";
|
|
import GlobalLogo from "../components/GlobalLogo.astro";
|
|
const { frontmatter } = Astro.props;
|
|
---
|
|
|
|
<Layout>
|
|
<GlobalLogo />
|
|
<div class="mb-32">
|
|
<div
|
|
class="p-4 flex flex-col m-auto max-w-[700px] font-gohu leading-none
|
|
prose-p:mb-4 prose-headings:my-1 prose-headings:text-xl prose-headings:font-bold prose-headings:text-c_mauve prose-ol:list-decimal prose-ol:list-inside
|
|
prose-ol:mb-4 prose-ul:ml-4 prose-ul:list-disc prose-ul:mb-4 prose-ul:flex-col prose-hr:mt-8 prose-hr:mb-6 prose-hr:border-c_surface0
|
|
prose-a:text-c_mauve prose-a:decoration-dotted hover:prose-a:underline prose-pre:my-4 prose-pre:py-4 prose-pre:px-4
|
|
marker:text-c_mauve prose-code:font-gohu prose-img:my-4 prose-img:w-screen"
|
|
>
|
|
<a
|
|
tabindex="0"
|
|
href="../../"
|
|
class="flex w-max text-c_mauve decoration-dotted hover:underline hover:cursor-pointer mb-4"
|
|
>« Back<br /><br /></a
|
|
>
|
|
<h1 class="font-bold text-xl">
|
|
{frontmatter.title}
|
|
</h1>
|
|
<article class="">
|
|
<slot />
|
|
</article>
|
|
<p>~{frontmatter.author}</p>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
|
|
<style is:global>
|
|
/* =========================
|
|
Strong overrides for Tailwind Typography / Shiki / Astro codeblocks
|
|
========================= */
|
|
|
|
/* Target the usual suspects:
|
|
- Tailwind Typography uses .prose pre
|
|
- Shiki / Astro often emit pre.ast-code or pre[class*="language-"]
|
|
We make these global and high-specificity so they win.
|
|
*/
|
|
|
|
html .prose pre,
|
|
html .prose pre code,
|
|
pre[class*="language-"],
|
|
code[class*="language-"],
|
|
pre.ast-code,
|
|
.astro-code,
|
|
.shiki pre,
|
|
pre {
|
|
/* allow wrapping of long lines */
|
|
white-space: pre-wrap !important; /* allow wrapping while preserving whitespace */
|
|
word-break: break-word !important; /* break long words/identifiers if needed */
|
|
overflow-wrap: anywhere !important; /* extra aggressive wrap */
|
|
max-width: 100% !important; /* don't overflow container */
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Keep block semantics for code content */
|
|
html .prose pre code,
|
|
pre[class*="language-"] > code {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Keep a horizontal fallback for extremely long uninterrupted strings
|
|
(URLs/base64/etc.), but wrapping will be used in most cases. */
|
|
html .prose pre {
|
|
overflow-x: auto !important;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Optional: nicer padding and visual treatment */
|
|
html .prose pre {
|
|
padding: 1rem !important;
|
|
border-radius: 0.5rem !important;
|
|
background-color: rgba(
|
|
0,
|
|
0,
|
|
0,
|
|
0.03
|
|
) !important; /* tweak to taste or remove */
|
|
}
|
|
|
|
/* Inline code (inside paragraphs) — keep the normal inline look, don't force wrap */
|
|
html .prose code:not(pre code) {
|
|
white-space: normal !important;
|
|
overflow: visible !important;
|
|
word-break: normal !important;
|
|
}
|
|
|
|
/* If you're using tailwind's 'prose-sm' / modifiers or custom wrappers, increase specificity */
|
|
html body .prose pre,
|
|
html body .prose pre code {
|
|
/* repeat important rules to be extra sure */
|
|
white-space: pre-wrap !important;
|
|
word-break: break-word !important;
|
|
overflow-wrap: anywhere !important;
|
|
}
|
|
</style>
|