LKW75（Blot.im）版型更新

To-Dos

TOC 設定為右方小區塊
電子報訂閱表單樣式統一由 CSS 制定
文章下方增加電子報訂閱區塊

頁面

主文章寬度

從原先設定的 66.666% 增加為 86%, 預留右邊一點空間可以放置 TOC｡

.main {width: 86%;margin: 0;}

Image Caption 文字與間距調整

先於設定頁面之中把 Create a caption from the image’s alt text 點選開啟｡

.container > .main > .entry .caption { /* Inline Code Blocks */
  margin-top: 0 !important;
  padding-left: .4em !important;
  opacity: .8 !important;
  font-family: 'Figtree',  'xingothic-tc',  sans-serif;
  line-height: 1.5em; 
}

修改文章註腳 (Footnotes)

提示的英文”Footnotes”為中文, 最後直接修改取消顯示 Footnotes 的字樣, 留空｡

.container > .main > .entry .footnotes > ol { 
  padding-left: 1em;
  font-size: .75em;
  font-family: 'Figtree',  'xingothic-tc',  sans-serif;
  opacity: 1;
}
.container > .main > .entry .footnotes > ol:before {
     content: none !important;
}
.container > .main > .entry .footnotes > ol li {
    margin-left: 20px;
    padding-left: 10px
}
.container > .main > .entry .footnote-ref {
  text-decoration: none;
  text-underline-offset: unset !important;
  font-family: 'Figtree',  sans-serif;
  font-size: 0.9em;
}

引用區塊格式修改

我自己非常喜歡竹白電子報的排版, 所以在引用區塊的方面, 嘗試了同樣的概念｡

我發現 Blot 原始的 Blog 版型很喜歡用透明度去控制顏色, 我猜測是因為他顏色只能設定三種 (前景､背景跟強調色), 用透明度就可以創造比較多種變化｡

我個人不喜歡這樣的控制方式, 因為色調明亮會因此改變, 比較難控制版面的流暢跟整體性｡

.container > .main > .entry blockquote { /* 引用區塊 */
  border-color: #005CAF !important;
  border-left: 0.25em solid;
  color: inherit;
  margin-left: 0;
  padding-left: 1.25em;
  opacity: 1.0;
}
.container > .main > .entry > blockquote > p { /* 引用區塊內段落 */
  font-family: 'creamfont',  sans-serif !important;
  padding: 0.5em 0;
}

內文斜體強調區塊

參考過電腦玩物的文章, 內文會把自己想要強調的事情字體放大並置中, 很喜歡這樣的觀念｡

我主要是透過 Markdown 寫作, 為了維持簡單的概念, 配合上斜體 (Italic) 對於中文的不適用, 我順勢將 <em>...</em> 直接轉換成強調區塊｡

這樣的好處是在用 Markdown 編輯時, 直接套入斜體的功能, 但顯示的時候能夠透過 CSS 去設定強調的文字｡

.container > .main > .entry i,  .container > .main > .entry em { /* 內文斜體強料區塊 */
  font-family: 'chungtf',  'creamfont',  serif !important;
  font-size: 1.6em;
  text-emphasis: none !important;
  padding: 1em 0.5em;
  display: block;
  text-align: center;
  font-style: normal;
}
.container > .main > .entry i,  .container > .main > .entry em:before { /* 內文斜體強料區塊新增引用符號 */
  content: "「";
  font-family: 'creamfont',  serif !important;
  position: relative;
  display: block;
  top: -2px;
  text-align: left;
}
.container > .main > .entry i,  .container > .main > .entry em:after { /* 內文斜體強料區塊新增引用符號 */
  content: "」";
  font-family: 'creamfont',  serif !important;
  position: relative;
  display: block;
  top: -2px;
  text-align: right;
}

電子報訂閱表單

雖然 Buttondown 支援更好的 iframe 嵌入, 但考量到需求, 最後還是選擇使用 HTML 碼｡

因應要在不同的地方放入表單, 統一由 CSS 設定風格, 比較能夠一體掌握｡

為了讓訂閱表單能比較凸顯, 所以押上一個色塊在後面, 因為自己已經有了色卡, Hex 也能直接設定透明度｡

/* Buttondown Form */
.embeddable-buttondown-form {
  border-radius: 6px;
  background-color: #B4A58230;
  padding: 0.5em; 
}
.embeddable-buttondown-form label {
  font-family: 'Figtree', 'xingothic-tc', sans-serif;
  font-size: .9em;
}
.embeddable-buttondown-form input[type=text] {
    padding:5px; 
    border:2px solid #373c38; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 25%;
    height: 18px;
    font-size: 0.9em;
}
.embeddable-buttondown-form input[type=email] {
    padding:5px; 
    border:2px solid #373c38; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 40%;
    height: 18px;
    font-size: 0.9em;
}
.embeddable-buttondown-form input[type=text]:focus {
    border-color:#333;
}
.embeddable-buttondown-form input[type=submit] {
    padding:5px 15px; 
    background:#373c38; 
    border:1px solid #373c38;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff; 
    font-family: 'Figtree', 'xingothic-tc', sans-serif;
    font-size: 0.8em;
    display: inline-block;
}

留言顯示

留言區手動新增在文章末, 顯示作者､時間與內容, 依照時間先後排序並顯示序號, 回應使用 code 區塊顯示｡

.container > .main > .entry > #comment { /* 留言區塊 */
  padding-top: 0em;
  padding-bottom: 1em;
}

.container > .main > .entry > #comment::before {
  font-family: 'Crimson Pro', 'jf-jinxuan', sans-serif !important;
  content: '讀者留言';
  font-size: 1.35em;
  margin-left: -6px;
}

.container > .main > .entry > #comment li { /* 留言區塊序號/姓名/日期 */
  line-height: 1.75em !important;
  font-size: 1em !important;
  opacity: 0.75;
}

.container > .main > .entry > #comment > p {
  line-height: 1.5em !important;
  font-size: 0.9em !important;
}

.container > .main > .entry > #comment li > br { 
  display: block;
  margin-top: 15px;
  border-top: 100px solid transparent;
  content: " ";
}

.container > .main > .entry > #comment code { 
  color: #b4a582;
  font-size: .825em;
  overflow: auto;
  white-space: pre-wrap !important;
  word-wrap: normal !important;/*if you want to prevent horizontal scrolling and wrap text instead*/
  word-break: break-word !impotant;
}

標籤（Tags）

Blot.im 是可以直接透過程式在每一篇文章列出使用的標籤 (Tags), 但我後來想想, 因為我會轉文章到不同地方, 每次都要設定標籤很麻煩｡

不如, 就把標籤變成內文最後一行｡

這需要一個使用品牌短網址, 才會有一定的方便性, 支援中文網址設置則更方便, 我自己是使用的 OpenMyLink｡

我自己的建議是, 如果能夠設定中文, 就設定中文, 比較好記, 自己也不會忘記｡如果只限於英文的話, 則以自己認識的英文單字為主｡

例如我設定的標籤#電影, 就是用中文為網址後綴, 每一篇相關的文章我就自己打上#電影｡

未來六米