Use balancer, add centering & border for post titles on ultra low width viewports

This commit is contained in:
2024-05-27 02:35:39 -05:00
parent bbbaf8e348
commit e5ac7ddb2b
2 changed files with 26 additions and 24 deletions

45
pnpm-lock.yaml generated
View File

@@ -13,10 +13,10 @@ importers:
version: 0.3.1(prettier-plugin-astro@0.12.2)(prettier@3.1.0)(typescript@5.3.2)
'@astrojs/mdx':
specifier: ^1.1.5
version: 1.1.5(astro@3.6.3(sass@1.69.5)(typescript@5.3.2))
version: 1.1.5(astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2))
'@astrojs/react':
specifier: ^3.0.6
version: 3.0.6(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(vite@4.5.0(sass@1.69.5))
version: 3.0.6(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(vite@4.5.0(@types/node@17.0.45)(sass@1.69.5))
'@astrojs/rss':
specifier: ^3.0.0
version: 3.0.0
@@ -25,7 +25,7 @@ importers:
version: 3.0.3
'@astrojs/tailwind':
specifier: ^5.0.2
version: 5.0.2(astro@3.6.3(sass@1.69.5)(typescript@5.3.2))(tailwindcss@3.4.3)
version: 5.0.2(astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2))(tailwindcss@3.4.3)
'@types/react':
specifier: ^18.0.21
version: 18.2.39
@@ -34,7 +34,7 @@ importers:
version: 18.2.17
astro:
specifier: ^3.6.3
version: 3.6.3(sass@1.69.5)(typescript@5.3.2)
version: 3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2)
astro-robots-txt:
specifier: ^1.0.0
version: 1.0.0
@@ -2720,10 +2720,10 @@ snapshots:
transitivePeerDependencies:
- typescript
'@astrojs/markdown-remark@3.5.0(astro@3.6.3(sass@1.69.5)(typescript@5.3.2))':
'@astrojs/markdown-remark@3.5.0(astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2))':
dependencies:
'@astrojs/prism': 3.0.0
astro: 3.6.3(sass@1.69.5)(typescript@5.3.2)
astro: 3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2)
github-slugger: 2.0.0
import-meta-resolve: 3.1.1
mdast-util-definitions: 6.0.0
@@ -2740,12 +2740,12 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@astrojs/mdx@1.1.5(astro@3.6.3(sass@1.69.5)(typescript@5.3.2))':
'@astrojs/mdx@1.1.5(astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2))':
dependencies:
'@astrojs/markdown-remark': 3.5.0(astro@3.6.3(sass@1.69.5)(typescript@5.3.2))
'@astrojs/markdown-remark': 3.5.0(astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2))
'@mdx-js/mdx': 2.3.0
acorn: 8.11.2
astro: 3.6.3(sass@1.69.5)(typescript@5.3.2)
astro: 3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2)
es-module-lexer: 1.4.1
estree-util-visit: 1.2.1
github-slugger: 2.0.0
@@ -2765,11 +2765,11 @@ snapshots:
dependencies:
prismjs: 1.29.0
'@astrojs/react@3.0.6(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(vite@4.5.0(sass@1.69.5))':
'@astrojs/react@3.0.6(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(vite@4.5.0(@types/node@17.0.45)(sass@1.69.5))':
dependencies:
'@types/react': 18.2.39
'@types/react-dom': 18.2.17
'@vitejs/plugin-react': 4.2.0(vite@4.5.0(sass@1.69.5))
'@vitejs/plugin-react': 4.2.0(vite@4.5.0(@types/node@17.0.45)(sass@1.69.5))
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
ultrahtml: 1.5.2
@@ -2787,9 +2787,9 @@ snapshots:
sitemap: 7.1.1
zod: 3.22.4
'@astrojs/tailwind@5.0.2(astro@3.6.3(sass@1.69.5)(typescript@5.3.2))(tailwindcss@3.4.3)':
'@astrojs/tailwind@5.0.2(astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2))(tailwindcss@3.4.3)':
dependencies:
astro: 3.6.3(sass@1.69.5)(typescript@5.3.2)
astro: 3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2)
autoprefixer: 10.4.16(postcss@8.4.31)
postcss: 8.4.31
postcss-load-config: 4.0.2(postcss@8.4.31)
@@ -3253,14 +3253,14 @@ snapshots:
'@ungap/structured-clone@1.2.0': {}
'@vitejs/plugin-react@4.2.0(vite@4.5.0(sass@1.69.5))':
'@vitejs/plugin-react@4.2.0(vite@4.5.0(@types/node@17.0.45)(sass@1.69.5))':
dependencies:
'@babel/core': 7.23.3
'@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.3)
'@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3)
'@types/babel__core': 7.20.5
react-refresh: 0.14.0
vite: 4.5.0(sass@1.69.5)
vite: 4.5.0(@types/node@17.0.45)(sass@1.69.5)
transitivePeerDependencies:
- supports-color
@@ -3368,11 +3368,11 @@ snapshots:
astro-seo@0.8.0: {}
astro@3.6.3(sass@1.69.5)(typescript@5.3.2):
astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2):
dependencies:
'@astrojs/compiler': 2.3.2
'@astrojs/internal-helpers': 0.2.1
'@astrojs/markdown-remark': 3.5.0(astro@3.6.3(sass@1.69.5)(typescript@5.3.2))
'@astrojs/markdown-remark': 3.5.0(astro@3.6.3(@types/node@17.0.45)(sass@1.69.5)(typescript@5.3.2))
'@astrojs/telemetry': 3.0.4
'@babel/core': 7.23.3
'@babel/generator': 7.23.4
@@ -3423,8 +3423,8 @@ snapshots:
tsconfck: 3.0.0(typescript@5.3.2)
unist-util-visit: 4.1.2
vfile: 5.3.7
vite: 4.5.0(sass@1.69.5)
vitefu: 0.2.5(vite@4.5.0(sass@1.69.5))
vite: 4.5.0(@types/node@17.0.45)(sass@1.69.5)
vitefu: 0.2.5(vite@4.5.0(@types/node@17.0.45)(sass@1.69.5))
which-pm: 2.1.1
yargs-parser: 21.1.1
zod: 3.22.4
@@ -5585,18 +5585,19 @@ snapshots:
unist-util-stringify-position: 4.0.0
vfile-message: 4.0.2
vite@4.5.0(sass@1.69.5):
vite@4.5.0(@types/node@17.0.45)(sass@1.69.5):
dependencies:
esbuild: 0.18.20
postcss: 8.4.31
rollup: 3.29.4
optionalDependencies:
'@types/node': 17.0.45
fsevents: 2.3.3
sass: 1.69.5
vitefu@0.2.5(vite@4.5.0(sass@1.69.5)):
vitefu@0.2.5(vite@4.5.0(@types/node@17.0.45)(sass@1.69.5)):
optionalDependencies:
vite: 4.5.0(sass@1.69.5)
vite: 4.5.0(@types/node@17.0.45)(sass@1.69.5)
volar-service-css@0.0.16(@volar/language-service@1.10.10):
dependencies:

View File

@@ -3,6 +3,7 @@ import General from "@layouts/General.astro";
import Time from "@components/Time.tsx";
import { type CollectionEntry } from "astro:content";
import type { Props as SEOProps } from "astro-seo";
import Balancer from "react-wrap-balancer";
interface Props {
post: CollectionEntry<"blog">;
@@ -80,9 +81,9 @@ const ogp: SEOProps = {
<General title={title} ogp={ogp}>
<div>
<h1 class="max-md:text-lg">
<h1 class="max-md:text-lg max-sm:text-center max-sm:border-b border-zinc-700">
<a href={post.slug}>
{title}
<Balancer>{title}</Balancer>
</a>
</h1>
<p class="mt-0 text-sm ml-5">