---
# System prepended metadata

title: HackMD 內玩 CSS
tags: [css, public]

---

<style>
    img:not(.emoji,.ui-avatar, .fa, [alt="arweave logo"
]) {
        box-shadow:3px 3px 12px gray;
        max-width: -webkit-fill-available;
    }
    em {
        display: block; 
        text-align: center;
    }
</style>

# HackMD 內玩 CSS

## img

### 圖片外顯示陰影

> update2: 加上圖片 with 說明文字的替代方案。不過好像跟 css 沒關係，所以再加一點 css
> [time=Tue, July 1, 113 10:34 AM]
> 
> update: 沒想到還有兩個圖示的意外陰影沒去掉... 
> [time=Mon, April 1, 113 5:06 PM]

加入這段：
```css
<style>
    img:not(.emoji, .ui-avatar, .fa, [alt="arweave logo"
]) {
        box-shadow:3px 3px 12px gray;
    }
</style>
```

![image](https://hackmd.io/_uploads/Hy-7yspI6.png)

(效果展示圖 ref: https://learn.microsoft.com/zh-tw/dotnet/framework/migration-guide/media/net-4-and-earlier.png)

另外，最近 (6 月底的事情) 改版後圖片開始多出水平卷軸的處理：
加上 `max-width: -webkit-fill-available;`

### img + caption
markdown 沒有內建，不過可以參考：
[github - Using an image caption in Markdown Jekyll - Stack Overflow](https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll)
stackoverflow 的大師們想出的各種方式
最喜歡表格版了ww

又或者是可以對 `<em>` 標籤做文字置中：
```css
em {
    display: block; 
    text-align: center;
}
```
呈現如下：
![image](https://hackmd.io/_uploads/Hy-7yspI6.png)
*123*

如果拿掉陰影的話，caption 會跟 img 隔一格，這時候要：
![image](https://hackmd.io/_uploads/Hy-7yspI6.png)*123*
    
## 筆記模式左欄顏色分層
加入以下這段：
```css
<style>
    .summary #summary {
        background-color: #FFF7E8;
    }
    /* 左側筆記 tags */
    .summary h6 {
        background-color: #FFFAF2;
    }
    /* 左側筆記主標題 */
    .summary h1 {
        background-color: #FFD78C;
    }
    /* 左側筆記二層標題 */
    .summary h2 {
        background-color: #FFECC9;
    }    
</style>
```

於筆記模式的首頁
結果圖：
![image](https://hackmd.io/_uploads/SJmtAvbPa.png)

113/6 月改版後：(自己把 tag 拿掉了
![image](https://hackmd.io/_uploads/S1oy4ybPA.png)


