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