網站修復 — 文章時效性警告塊不會自適應

問題描述

正在瀏覽器的開發者模式下模擬手機裝置來改善以前寫的懸浮提示，意外發現在小尺寸裝置下文章時效性的警告塊只會隨著裝置寬度自適應縮短，但高度卻不會變化，導致警告塊裡的字跑了出來。

​
​

問題解決

1. 之前寫的筆記 網站魔改 — 為網站添加文章時效/過期提醒 中有紀錄到自己寫了 outdate.js，可以從其中找到文章時效性警告塊的 class 類別。

​
2. 全局搜尋 class 類別 — post-outdate-notice，就能找到這警告塊的 CSS 前處理樣式了。

可以看到其中的 height、line-height (高度) 是被寫死的，不知為何主題預設給了高度固定的值。直接把這兩個註解掉，警告塊的高度就能自適應了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 .post-outdate-notice
   position: relative
   margin: 0 0 20px
   padding: .5em 1.2em
// height: 65px
// line-height: 47px
   border-radius: 7px
   background-color: $noticeOutdate-bg
   color: $noticeOutdate-color
   border: 1px solid #ddd;

   if hexo-config('noticeOutdate.style') == 'flat'
     padding: .5em 1em .5em 2.6em
     border-left: 5px solid $noticeOutdate-border

     &:before
       if hexo-config('icons.fontawesome')
         @extend .fontawesomeIcon
         content: '\f071'
       else
         @extend .anzhiyufont
         content: '\e66f'
       position: absolute
       top: 50%
       left: .9em
       color: $noticeOutdate-border
       transform: translateY(-50%)