refactor(about/coc): Convert PNG to SVG and Adjust CSS

[foxlee2525]

Types of changes

• Bugfix
• Refactoring

Description

1. 新增了 COC 頁面 Icon 所對應的 SVG 檔案。
2. 將舊有的 Icon PNG 替換成 SVG，同時試著修改了一些 CSS，讓它們更符合 Define Style coding convention #396 的規範。
3. 修正了 two-column layout 的 grid 在 1024px - 1194px 時會失效的問題。

Steps to Test This Pull Request

1. 到 "http://localhost:3000/2024/en-us/about/code-of-conduct"
2. 放大網頁至 200%，瀏覽 Icon 會否變形，或非 SVG 檔案
3. 縮放網頁，檢查在 width: 1194px 斷點時，grid 會不會正常更動

Expected behavior

Related Issue

#558

Screenshot

[netlify]

👷 Deploy request for classy-granita-bc2b5a pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	45b1117

[netlify]

✅ Deploy Preview for zesty-gnome-f04144 ready!

Name	Link
🔨 Latest commit	45b1117
🔍 Latest deploy log	https://app.netlify.com/sites/zesty-gnome-f04144/deploys/66b333191668af0008a14ae5
😎 Deploy Preview	https://deploy-preview-563--zesty-gnome-f04144.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SivanYeh]

Awesome work! Here are my suggestions(just being picky, honestly you’ve done a great job :D ):

1. You can move the content related to png/svg icon transformation from the second commit 086d8dc into the first commit 12ff581, so future developers can tell whether it’s the adjustment for inline style or svg icons. (Hint: using git rebase and git reset to organize the commit history)

2. You can add the purpose of the css update in the 086d8dc commit message such as “Replace PNG images with SVG, update CSS to match the inline style suggested in PR#396.