Crystal生活誌

記錄生活用的

WriteFreely深色模式CSS分享3（黑夜）v1 #WriteFreely #網站相關 這個主題程式碼區塊有調成深色，所以預覽圖截取這個部分， 技法參考這個主題

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
*{
    font-family: 'Noto Sans TC', sans-serif!important;
}

a,nav,a:visited{
        color:#bfc7d5!important;
}

a:hover{
    text-decoration: underline dotted!important;

}


body#post article code {
    background-color: #1f2330;
    color: #b2add9;
}

#collection #wrapper code {
    background-color: #1f2330;
    color: #b2add9;
}

#collection #wrapper pre {
    background-color: #1f2330;
}
#subpage #wrapper code {
    background-color: #1f2330;
    color: #b2add9;
}

#subpage #wrapper pre {
    background-color: #1f2330;
}
body#post pre {
    background: #1f2330;
}
body:not(code){
    background-color: #292d3e;
    color:#ded5b1!important;
    
}
/* Blog description (underneath title) on index page */
header p.description,h2,h3,h4,blockquote,time{
    color:#ded5b1!important;
}

.post-title a.u-url:link{
    text-decoration: none!important;
}
.post-title a.u-url:hover{
    text-decoration: underline dotted!important;
}

/* "Read more..." links */
body#collection a.read-more {
    text-decoration: none!important;
}

/* Links inside blog posts */
article p a {
    text-decoration: none!important;
    color:#bfc7d5!important;
}
article p a:hover {
    text-decoration: underline dotted!important;
    color:#bfc7d5!important;
}

/*

    RECIPES
    These are common patterns you may want to use on your blog.

*/

/* Center images */
img {
    display: block;
    margin: 0 auto;
}

/* Disable post header fade effect */
body#post header{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Hide post views */
header nav .views {
    display: none;
}

覺得太在意CSS有點干擾寫作心情， 差點還因為對自己寫得主題都不滿意想搬到Wordpress.com 因為變成要錢作罷， 之後應該只會套用官方提供的主題

#murmur

資料夾卡了一堆文章草稿都還沒消化-.-

#WriteFreely #網站相關

  • MD[^1]註釋無法正常顯示於文末
  • 不能使用Font Awesome

#WriteFreely #網站相關

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
*{
    font-family: 'Noto Sans TC', sans-serif!important;
}

a,nav,a:visited{
        color:#dce4f5!important;
}
li a{
    color:#777!important;
}
a:hover{
    text-decoration: underline dotted!important;

}
code{
    color:#e6478e;
}
body:not(code){
    background-color: #3c374a;
    color:#f5f0dc!important;
    
}
/* Blog description (underneath title) on index page */
header p.description,h2,h3,h4,blockquote,time{
    color:#f5f0dc!important;
}

.post-title a.u-url:link{
    text-decoration: none!important;
}
.post-title a.u-url:hover{
    text-decoration: underline dotted!important;
}

/* "Read more..." links */
body#collection a.read-more {
    text-decoration: none!important;
}

/* Links inside blog posts */
article p a {
    text-decoration: none!important;
}
article p a:hover {
    text-decoration: underline dotted!important;
}

/*

    RECIPES
    These are common patterns you may want to use on your blog.

*/

/* Center images */
img {
    display: block;
    margin: 0 auto;
}

/* Disable post header fade effect */
body#post header{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Hide post views */
header nav .views {
    display: none;
}

已知問題：（可能須自行斟酌調整）

  • 部分超連結（元素a）可能要自行改色，不然會顯示深灰色
  • 管理員登入後，左上角管理選單已訪問連結顏色跟全域一樣都是淺藍色，導致在白底的選單不好閱讀，但對讀者似乎沒影響
  • 字的對比似乎跟背景太高，可以視個人需求降低明度

#WriteFreely #網站相關

因為Bloggi不能客製CSS，原生提供的配色方案又不是這麼喜歡，最近幾個月不知道為什麼一直看到WriteFreely的資訊，就想說搬來用用

其實我一直有Write.as的帳號，但它免費版我記得限制頗多，當初用時覺得不上手，也沒有繼續用了

但這次找了一個WriteFreely實例註冊，我覺得挺小而美的，以下說說這幾天的體驗：

優點

1.實例版可以客製CSS 官方版Write.as這是付費功能，但至少在我註冊的實例是免費、開放的，我一拿到就寫了一個深色樣式，開心XD

2.目前為止（體感上）覺得它的自動儲存比較穩定 同樣是Markdown部落格，我被Bloggi的編輯器陰了不下三次Orz，其實有點PTSD了，我後來是用HackMD之類的記事軟體寫完再丟過去ˊ_>ˋ...

3.能在Fedi上的其他實例看到自己的部落格 只要帳號是公開的，就能用Mastodon等Fedi上的平台看到自己的部落格，還有專屬的id，像我這個站是@paper.wf@x200706（用Mastodon查要去掉第一個老鼠）

缺點

1.沒有單篇文章預覽功能，得善用草稿頻道Draft功能 我覺得有點可惜，有時候就想看看文章在網站的呈現，但還不想發半成品rr（而且Fedi上的帳號還會自己推播=_=）

2.不像bloggi可以拖曳上傳圖片 只好用imgur上傳好後，用Markdown![]()或HTML語法<img src="" style="只能用HTML調大小MD我試過不行">嵌入圖片

3.版型相對單調 後台有提供三種文章呈現方式，但比起Bloggi還是少很多

但我覺得還是值得一試，或許寫文功能太多反而失其本心？ 話說我真喜歡換平台

#WriteFreely #網站相關

其實我寫完以後發現配色長得跟網路上有個人的超像啊啊 不過我hover是用了虛線；

Chrome上面字體會比較大，我還沒有設計個別元素的字型大小

以下是寫得超暴力的CSS請笑納QAQ

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
*{
    font-family: 'Noto Sans TC', sans-serif!important;
}

a,nav{
        color:#eee!important;
}
li a{
    color:#777!important;
}
a:hover,a:visited{
    text-decoration: underline dotted!important;

}
code{
    color:#e6478e;
}
body:not(code){
    background-color: #373c4a;
    color:#eee!important;
    
}
/* Blog description (underneath title) on index page */
header p.description,h2,h3,h4,blockquote,time{
    color:#eee!important;
}

.post-title a.u-url:link, .post-title a.u-url:visited {
    text-decoration: underline dotted!important;
}

/* "Read more..." links */
body#collection a.read-more {
    text-decoration: underline dotted!important;
}

/* Links inside blog posts */
article p a {
    text-decoration: underline dotted!important;
}
article p a:hover {
    text-decoration: underline dotted!important;
}

/*

    RECIPES
    These are common patterns you may want to use on your blog.

*/

/* Center images */
img {
    display: block;
    margin: 0 auto;
}

/* Disable post header fade effect */
body#post header{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Hide post views */
header nav .views {
    display: none;
}

基於官方建議修改；

使用了Google Font之思源黑體， 頁面中比較明顯的色彩應該只有#eee跟藍灰色底色#373c4a， 也就是替換掉這兩個顏色，就能變成你喜歡的深色主題配色了~

#網站相關

有效區：

h2

h3

h4

h5
h6

超連結

我是 表格
喔 你好

粗體 斜體 刪除線

raw

System.out.print("哈囉你好嗎\n");
System.out.print("衷心感謝\n");

曾經有隻偉大的狗坐在雲上唱著 哈吧吧

無效區 ==螢光筆==

分隔線語法（上方分隔線是用HTML語法<hr>產生） ***