From df270b7db486e0b7ce2bf45f706c53e1de92e8a9 Mon Sep 17 00:00:00 2001
From: betich <betich365@gmail.com>
Date: Mon, 21 Oct 2024 19:06:58 +0700
Subject: [PATCH] feat(article): add h4 size

---
 src/content/roadmap/uxui-beginner.md | 7 ++++++-
 src/styles/content.css               | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/content/roadmap/uxui-beginner.md b/src/content/roadmap/uxui-beginner.md
index c1aa3e3..aa5b491 100644
--- a/src/content/roadmap/uxui-beginner.md
+++ b/src/content/roadmap/uxui-beginner.md
@@ -47,10 +47,15 @@ Figma เป็นเครื่องมือที่ใช้ในกา
 
 เราสามารถนำหลักการออกแบบกราฟิกมาใช้ในการออกแบบ Product ให้สวยงาม น่าใช้มากขึ้น โดยหลักการเบื้องต้นมีประมาณนี้
 
+#### Design Principles
+
 -   [Design Priciples](https://www.interaction-design.org/literature/topics/design-principles)
 -   [4 Foundational UI Design Principles | C.R.A.P.](https://www.youtube.com/watch?v=uwNClNmekGU)
 -   [Beginning Graphic Design: Fundamentals](https://www.youtube.com/watch?v=YqQx75OPRa0&t=3s)
 -   [Design basics - by Figma](https://www.figma.com/resource-library/design-basics/)
+
+#### Color Theory
+
 -   [60-30-10 Color Rule](https://www.youtube.com/watch?v=UWwNIMHFdW4)
 
 ### Prototyping
@@ -108,7 +113,7 @@ Information Architecture คือ การวางแผนรูปแบบ
 -   [รู้จัก Information Architecture องค์ประกอบสำคัญในการทำ UX/UI Design](https://www.borntodev.com/2022/08/26/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-information-architecture/)
 -   [Information Architecture guide for UX designers](https://www.youtube.com/watch?v=akWDacn5lIA)
 
-### Sitemap
+#### Sitemap
 
 Sitemap เป็น Information Architecture รูปแบบหนึ่ง ที่ใช้ในการแสดงโครงสร้างของเว็บไซต์ หรือแอปพลิเคชันนั้น ๆ โดยส่วนใหญ่จะมีการแสดงโครงสร้างของเว็บไซต์เป็นลูกศรที่เชื่อมต่อกัน ซึ่งจะอธิบายถึงความสัมพันธ์ และวิธีการเข้าถึงข้อมูลในเว็บไซต์นั้น ๆ
 
diff --git a/src/styles/content.css b/src/styles/content.css
index 9f317fe..5b1d8fa 100644
--- a/src/styles/content.css
+++ b/src/styles/content.css
@@ -5,7 +5,8 @@
 }
 .content h1,
 .content h2,
-.content h3 {
+.content h3,
+.content h4 {
     font-weight: 700;
     margin: 3rem 0 1rem 0;
     line-height: 1.2;
@@ -20,6 +21,9 @@
 .content h3 {
     font-size: 1.4em;
 }
+.content h4 {
+    font-size: 1.2em;
+}
 
 .content strong,
 .content b {