ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

style: adjust mobile screen width

Browse source
This commit is contained in:
Ayo Ayco 2024-08-14 16:20:39 +02:00
parent 608656664b
commit 25d04c7868
1 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/layouts/BlogPost.astro
View file

@ -1,11 +1,11 @@
---
import BaseHead from '../components/blog/BaseHead.astro';
import Header from '../components/blog/Header.astro';
import Footer from '../components/blog/Footer.astro';
import FormattedDate from '../components/blog/FormattedDate.astro';
import type { CollectionEntry } from 'astro:content';
import BaseHead from "../components/blog/BaseHead.astro";
import Header from "../components/blog/Header.astro";
import Footer from "../components/blog/Footer.astro";
import FormattedDate from "../components/blog/FormattedDate.astro";
import type { CollectionEntry } from "astro:content";
type Props = CollectionEntry<'blog'>['data'];
type Props = CollectionEntry<"blog">["data"];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---
@ -51,6 +51,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
.last-updated-on {
font-style: italic;
}
@media (max-width: 720px) {
main {
width: 100%;
}
}
</style>
</head>
@ -59,7 +64,16 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<main>
<article>
<div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
{
heroImage && (
<img
width={700}
height={510}
src={heroImage}
alt=""
/>
)
}
</div>
<div class="prose">
<div class="title">