Moved post css into inline to fix scope issue.

This commit is contained in:
Thomas Cole 2023-01-08 15:43:34 -05:00
parent 5e4b1f422f
commit cff15dffa7
2 changed files with 59 additions and 34 deletions

View File

@ -1,22 +1,74 @@
---
import Divider from "../components/misc/Divider.astro";
import Layout from "./Layout.astro";
import '../styles/Markdown.css';
//import '../styles/Markdown.css';
const { frontmatter } = Astro.props;
---
<Layout>
<main class="w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
<main
class="w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center"
>
<div class="relative mb-4">
<img class="aspect-video object-cover" src={frontmatter.image} alt="">
<a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
<img
class="aspect-video object-cover"
src={frontmatter.image}
alt=""
/>
<a
href={frontmatter.imageattr}
class="absolute bottom-0 right-0 h-[24px]"
>
<span class="material-symbols-outlined opacity-25 mr-[4px]"
>link</span
>
</a>
</div>
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p>{frontmatter.date}</p>
<Divider/>
<Divider />
<!-- Render our markdown with the normal header styling and some extra padding. -->
<style is:inline>
.astro-code {
margin-bottom: 1rem;
padding: 8px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr {
margin-bottom: 1rem;
}
h1 {
font-size: 3rem;
line-height: 1;
}
h2 {
font-size: 2.25rem;
line-height: 2.5rem;
}
h3 {
font-size: 1.875rem;
line-height: 2.25rem;
}
img {
margin: auto;
}
a {
text-decoration: underline;
}
</style>
<slot />
</main>
</Layout>

View File

@ -1,27 +0,0 @@
.astro-code{
margin-bottom: 1rem;
padding: 8px;
}
h1,h2,h3,h4,h5,h6,p,hr{
margin-bottom: 1rem;
}
h1{
font-size: 3rem;
line-height: 1;
}
h2{
font-size: 2.25rem;
line-height: 2.5rem;
}
h3{
font-size: 1.875rem;
line-height: 2.25rem;
}
img{
margin: auto;
}