Skip to content

Commit a49eb10

Browse files
committed
doc: update README.md
1 parent bc21c54 commit a49eb10

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ A theme plugin of Gatsby for those who enjoys building their blog site with mini
3232
- [Adding Site Metadata](#adding-site-metadata)
3333
- [Adding Authors](#adding-authors)
3434
- [Adding Posts](#adding-posts)
35+
- [Adding Styles](#adding-styles)
3536
- [Adding Site Logo & Cover Image](#adding-site-logo--cover-image)
3637
- [Full Fledged Example](#full-fledged-example)
3738
- [Others](#others)
@@ -294,6 +295,25 @@ slug: posts/gatsby-plugin-options
294295

295296
```
296297

298+
## Adding Styles
299+
300+
Sometime you may need to write HTML directly in the post page. Since not all of the HTML tags (e.g. `<div>`) are styled by this theme, there might be some unexpected layout arrangements.
301+
This theme provides some CSS utilities to let you directly adjust those raw HTML tags. It's also viable to approach this via [Tailwindcss](https://tailwindcss.com) style.
302+
303+
Here are the CSS utilities class names. See their definitions in this file: [./packages/gatsby-theme-pitayan/src/assets/css/utilities.css](./packages/gatsby-theme-pitayan/src/assets/css/utilities.css)
304+
305+
- Post Width
306+
- .mark-w-sm
307+
- .mark-w-md
308+
- .mark-w-lg
309+
- .mark-w-2l
310+
- Border
311+
- .border-t-white
312+
- .border-t-black
313+
- .text-inverted
314+
- .bg-inverted
315+
- .border-inverted
316+
297317
## Adding Site Logo & Cover Image
298318

299319
It supports mainstream picture types such as `jpg` / `png` / `svg` etc.

0 commit comments

Comments
 (0)