Styles

Collection of common styles used in this website.

Typography

• EN fonts: Source Serif 4
• TH fonts: IBM Plex Sans Thai Looped

I love serif fonts. Source Serif 4 is my pick, but it doesn’t come with Thai characters. So I choose IBM Plex Sans Thai Looped as a fallback font for the Thai characters. I think they look great together — not too different in x-height, contrast, and overall appearance.

Heading 1

Heading 2

Heading 3

Heading 4

Typography plays a crucial role in web design, serving as both a functional and aesthetic element. Well-chosen fonts and proper text formatting enhance readability and user experience. When designing websites, it’s important to maintain consistent typography across different sections while ensuring adequate contrast between text and background colors.

จักรยานเป็นพาหนะที่เป็นมิตรกับสิ่งแวดล้อมและมีประโยชน์ต่อสุขภาพอย่างมาก การปั่นจักรยานช่วยเสริมสร้างกล้ามเนื้อและระบบหัวใจและหลอดเลือดอีกทั้งยังเป็นกิจกรรมที่สนุกสนานที่สามารถทำได้ทั้งคนเดียวหรือกับครอบครัวและเพื่อนฝูง การปั่นจักรยานยังช่วยลดการปล่อยก๊าซคาร์บอนไดออกไซด์และลดปัญหาการจราจรติดขัดในเมืองใหญ่อีกด้วย

คำกล่าวของ John Howard ที่ว่า “The bicycle is a curious vehicle. Its passenger is its engine.” อาจจะเป็นแรงบันดาลใจให้หลายคน เพียงแต่ฉันใช้มันในย่อหน้านี้เพื่อแสดงผลข้อความภาษาไทยร่วมกับภาษาอังกฤษเท่านั้น

Lists / ลิสต์

Unordered List

• First item
• Second item
  • Nested item one
  • Nested item two
• Third item

Ordered List

1. First step
2. Second step
   1. Sub-step one
   2. Sub-step two
3. Third step

Blockquotes

This is a blockquote. It can be used to highlight important information or quotes from other sources.

Multiple paragraphs can be included in a blockquote by adding a blank line with a ‘>’ character.

Code / โค้ด

Inline code can be written like console.log('Hello, World!').

Code blocks can be written with triple backticks:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Kbd tag can be used to display keyboard keys: Cmd + k or Ctrl + k

Custom Components

<WarningMessage> — I use this component to draw attention to important information.

<Picture> — My attempt to utilize Astro’s <Image> component with sugar on top like caption and full-bleed layout support.

Example: TBD