Extra mobile viewport improvements, screen sizing/max widths

This commit is contained in:
2024-05-26 15:12:17 -05:00
parent d844b05f1c
commit b8f2a415c9
2 changed files with 6 additions and 5 deletions

View File

@@ -29,10 +29,10 @@ const { url, date, title, tags, description } = Astro.props;
</a> </a>
</div> </div>
<div class="mt-3 leading-4 mb-2"> <div class="mt-3 leading-4 mb-2">
<h2 class="font-medium inline mr-1 leading-5"> <h2 class="font-medium inline mr-1 leading-7 md:leading-5 text-pretty text-lg sm:text-xl md:text-2xl">
<a href={url} class="underline decoration-white/30 decoration-1 underline-offset-3" data-astro-prefetch>{title}</a> <a href={url} class="underline decoration-white/30 decoration-1 underline-offset-3" data-astro-prefetch>{title}</a>
</h2> </h2>
<span class="tags space-x-2 font-mono"> <span class="tags lg:space-x-2 font-mono text-sm">
{ {
tags.map((tag) => ( tags.map((tag) => (
<a data-astro-prefetch href={`/tags/${tag}`}> <a data-astro-prefetch href={`/tags/${tag}`}>
@@ -42,5 +42,7 @@ const { url, date, title, tags, description } = Astro.props;
} }
</span> </span>
</div> </div>
{description} <p class="max-md:text-sm">
{description}
</p>
</div> </div>

View File

@@ -3,7 +3,6 @@ import "@styles/global.scss";
import "@styles/fonts.scss"; import "@styles/fonts.scss";
import { ViewTransitions } from "astro:transitions"; import { ViewTransitions } from "astro:transitions";
import { SEO, type Props as SEOProps } from "astro-seo"; import { SEO, type Props as SEOProps } from "astro-seo";
import OpenGraphArticleTags from "node_modules/astro-seo/src/components/OpenGraphArticleTags.astro";
interface Props { interface Props {
title?: string; title?: string;
@@ -107,7 +106,7 @@ const linkedDataTag = "<script type='application/ld+json'>" + JSON.stringify(lin
<link rel="alternate" type="application/xml" href="/feed.xml" /> <link rel="alternate" type="application/xml" href="/feed.xml" />
<ViewTransitions /> <ViewTransitions />
</head> </head>
<body class="flex flex-col w-full max-w-full min-h-screen"> <body class="flex flex-col min-h-screen w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg mx-auto px-3 md:px-4">
<slot /> <slot />
</body> </body>
</html> </html>