Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract redundant max-width into utility (#525)

Browse Source 
* refactor: extract redundant max-width into utility

Extract redundant max-width into a universal tailwind
utility class. By doing so, the width of the layout
in different pages can be customized easily.

* docs: update docs for modifying `max-w-app` utility
This commit is contained in:
Sat Naing
2025-06-09 11:42:33 +07:00
committed by GitHub
parent c7702bb715
commit 5f72b93d92
10 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/data/blog/how-to-configure-astropaper-theme.md
+13
View File
@@ -69,6 +69,19 @@ Here are SITE configuration options
| `lang` | Used as HTML ISO Language code in `<html lang"en">`. Default is `en`. |
| `timezone` | This option allows you to specify your timezone using the [IANA format](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). Setting this ensures consistent timestamps across your localhost and deployed site, eliminating time differences. |
## Update layout width
The default `max-width` for the entire blog is `768px` (`max-w-3xl`). If you'd like to change it, you can easily update the `max-w-app` utility in your `src/styles/global.css` file:
```css
@utility max-w-app {
@apply max-w-4xl xl:max-w-5xl;
/* eg: max-w-4xl xl:max-w-5xl */
}
```
You can explore more `max-width` values in the [Tailwind CSS docs](https://tailwindcss.com/docs/max-width).
## Configuring logo or title
Prior to AstroPaper v5, you can update your site name/logo in `LOGO_IMAGE` object inside `src/config.ts` file. However, in AstroPaper v5, this option has been removed in favor of Astro's built-in SVG and Image components.