fix: 避免横向滚动条

This commit is contained in:
KazooTTT
2025-02-06 14:44:45 +08:00
parent 6e1f206bd8
commit 09f1dfde9d
3 changed files with 17 additions and 2 deletions

View File

@ -9,7 +9,7 @@ export interface Props {
const { className = "", dataPagefindBody = true } = Astro.props; const { className = "", dataPagefindBody = true } = Astro.props;
--- ---
<article class={`${className}`} data-pagefind-body={dataPagefindBody}> <article class="mx-auto max-w-3xl overflow-x-hidden px-4">
<slot /> <slot />
<div class="mt-8 border-t pt-4"> <div class="mt-8 border-t pt-4">

View File

@ -121,3 +121,18 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
</script> </script>
<meta content={Astro.generator} name="generator" /> <meta content={Astro.generator} name="generator" />
<style is:global>
html,
body {
overflow-x: hidden;
width: 100%;
position: relative;
}
/* 确保所有图片不会溢出容器 */
img {
max-width: 100%;
height: auto;
}
</style>

View File

@ -15,7 +15,7 @@ const shareButtons = [
]; ];
--- ---
<div class="share-buttons flex gap-2"> <div class="flex flex-wrap items-center gap-2">
{ {
shareButtons.map((button) => ( shareButtons.map((button) => (
<button <button