:::spoiler 目錄
[TOC]
:::
<hr>

:::success
【[題目連結](https://hackmd.io/4JdNVfy0SpmAaS3xs3cm1g)】
<!-- 【檢核】
- [x] 參與人數: 10人
- [x] 參與名單
- [X] 任務內容
- [x] 討論截圖
-->
:::

## 參與人員
- [x] 阿榮#8277
- [x] PayRoom#8328
- [x] WA#9787
- [x] Tina02
- [x] AYA
- [x] I401#7101
- [x] abalun#6727
- [x] jia yu#8896
- [x] 無敵笨笨貓#3628
- [x] 貓咪#6294

## 任務一：請觀看 Vite 影片，並整合眼鏡形象官網
請觀看第第四週透過 Vite 部署網站流程章節後，將眼鏡形象官網透過 Layout+EJS 來整合，並在回報中提供參與討論組員的 Git Repo 與 GitHub Pages 網址

### ✅任務完成
| # | 組員 | 連結 |
|:-:|:----:|:--------:|
| 01 | AYA | [REPO](https://github.com/study-hex/layouting-2023-main-w4/tree/v1.0) / [PAGES](https://study-hex.github.io/layouting-2023-main-w4/store.html) |
| 02 |PayRoom| |
| 03 |jia yu| [Repo](https://github.com/JiaYu0220/vite-practice) / [Pages]( https://jiayu0220.github.io/vite-practice/) | |
| 04 |WA| |
| 05 |abalun| |
| 06 |Tina| [Repo](https://github.com/tg-Tina02/GlassesWebsite) / [Pages](https://tg-tina02.github.io/GlassesWebsite/) |
| 07 |阿榮|[Repo](https://github.com/Peg-L/hex-web-layout-2023) / [Pages](https://peg-l.github.io/hex-web-layout-2023/)|
| 08 |PayRoom| |
| 09 | 無敵笨笨貓#3628 | |
| 10 | 貓咪#6294 | |

### 🗣️討論

#### Q1: RWD 寫法
> 我想問css的結構，大家會怎麼寫RWD?
> 1. 分三大區塊，由上至下寫電腦版、平板版、裝置版
> 2. 一個區塊的RWD寫在一起，會有很多個電腦版、平板版、裝置版

* 我目前是用 1，首頁內容比較多，寫不同RWD時滾輪要滾很久才能到下方的RWD，寫起來滿累的
* 對，我也是想到會這樣，要一直會去看原本的樣式，不過用 2 感覺CSS行數會變多
* 我會選 1 是覺得不用一直重複寫 media
* 我也是寫在一起，寫在 class 裡面，附近的寫在附近
* 助教提供的文章：[如何利用 Sass 的 @mixin 功能，讓撰寫 RWD 網站變的輕而易舉](https://ithelp.ithome.com.tw/articles/10224191)

#### Q2: 設計稿 VS 肉眼
> 首頁→表單→確認按鈕font-weight，設計稿是 Bold，但肉眼看比較像regular，請問這樣是要照稿嗎

* 我會參考設計稿
* 主要是要練習切版，我覺得以設計稿為主就可以了

#### Q3: checkbox 透明背景
> 想問大家那個方框都是怎麼做的?
* 先讓原本的不見，重新畫一個

input[type=checkbox]{
  display:none;
}

* 我照這個網站的方法(剛剛研究了很久😂 在google icon找框框存成圖片當成背景。[CSS 練習 - 美化 Checkbox 清單](https://blog.darkthread.net/blog/css-checkbox-list/)

這是用兩個背景去切換 當input是checked的時候換成有打勾的背景

因為label已經有和input連結，所以點擊label就可以讓input狀態切換

#### Q4: 眼鏡列表 副標題 粗底線
> 一開始使用 border 畫，會超出範圍，最後改用偽元素，有沒有其他方法?
* 使用偽元素畫
* padding 扣掉 8px
* 沒辦法使用 outline 來畫，沒有上下左右

#### Q5: 導覽列跑版
> 想問大家如果RWD在非設計稿尺寸(768、375) 過度擁擠會怎麼處理? 例如下圖 696寬的時候版面會扭曲
> 

* 猜想可能要多下幾個斷點
* 看到有同學也有詢問助教寫法的問題，[給大家參考](https://chalk-freedom-ec6.notion.site/CSS-AWEI-4477a2fbf66b4e2e957ae26599b66275)
* navbar，我一開始照設計稿寫，也是會這樣擠到，後來改成 768 直接變成手機板的樣子

## 任務二：觀看 SCSS 結構，討論組員彼此間該如何逐步規劃 SCSS
* [2014 MOPCON](https://github.com/gonsakon/mopcon2014/blob/master/sass/all.sass)
* [2018 The F2E](https://github.com/gonsakon/theF2EPK/blob/master/source/sass/all.sass)
* [Bootstrap](https://github.com/twbs/bootstrap/tree/master/scss)

### 🗣️分享
* 會以 bootstrap 分類當參考，讓後續轉換 bootstrap 寫也比較快
* 有建立 utilities 資料夾
* 助教的任務回饋: custom 資料夾內的 _variables.scss 為工具類可以放入 utilities，_theme-colors.scss 若有多個主題可以另建一個 themes 資料夾存放，若沒有其他主題也可以放入 utilities 工具類別，詳細的 SCSS 管理方式可以參考 [Sass 7-1 Pattern](https://israynotarray.com/css/20200523/116058774/)

## 語音 & 文字討論截圖

> 【討論時間】： [time=Sun, Jul 30, 2023 20:00 PM]

語音討論全員到齊 (灑花)

文字討論串