<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]

加入這段：

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


(效果展示圖 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>` 標籤做文字置中：

em {
    display: block; 
    text-align: center;
}

呈現如下：
*123*

如果拿掉陰影的話，caption 會跟 img 隔一格，這時候要：
*123*

## 筆記模式左欄顏色分層
加入以下這段：

<style>
    .summary #summary {
        background-color: #FFF7E8;
    }
    /* 左側筆記 tags */
    .summary h6 {
        background-color: #FFFAF2;
    }
    /* 左側筆記主標題 */
    .summary h1 {
        background-color: #FFD78C;
    }
    /* 左側筆記二層標題 */
    .summary h2 {
        background-color: #FFECC9;
    }    
</style>

於筆記模式的首頁
結果圖：

113/6 月改版後：(自己把 tag 拿掉了