# FILE: 椤甸潰瀹氬埗CSS浠ｇ爜.html READ: 2026-09-24T14:14:05Z
/* ============================================================================
catlas4blog 路 dominicbreuker.com 椋庢牸
----------------------------------------------------------------------------
鐩爣绔? https://dominicbreuker.com/
Hugo 涓婚 smol + hack.css,椤甸潰鏍硅妭鐐规槸
瀹炵幇鏂瑰紡 鍗氬鍥師鐢?DOM + 鏈枃浠?**涓嶄緷璧栦换浣曠涓夋柟涓婚鎻掍欢**
(SimpleMemory 鎻掍欢宸蹭粠銆屼晶杈规爮鍏憡銆嶉噷绉婚櫎,璇﹁ README.md)
鈹€鈹€ 涓庡師绔欓€愰」瀵归綈鐨勫唴瀹?鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€
閰嶈壊 榛戝簳 #000 / 姝ｆ枃 #ccc / 閾炬帴 #339933(鎮仠搴曡壊 #33cc33)
琛屽唴浠ｇ爜涓庣函鏂囨湰浠ｇ爜鍧?#248f24 / 璇硶楂樹寒鍧?Monokai 搴?#272822
寮曠敤涓庡垪琛ㄧ殑绗﹀彿 #ccc / 鍒嗛殧绾?gray / 澶栭摼绠ご #ff9800
鐗堝績 html 13px,鈮?68px 鍥炲埌 16px;瀹瑰櫒 max-width 70rem,妗岄潰 50rem(=800px)灞呬腑
瀹炴祴 1440px 瑙嗗彛涓嬫鏂囧 780px,涓庡師绔欎竴鑷? 瑁呴グ markdown 婧愮爜椋庢牸:
h1 涓嬫柟 ==== 涓嬪垝绾?鐢ㄧ粷瀵瑰畾浣?+ overflow:hidden 瑁佸埌鏍囬瀹藉害)
h2~h6 鍓嶇疆 ## / ### / #### 鈥? 鏃犲簭鍒楄〃 - 銆佹湁搴忓垪琛?1. 2. 3.
寮曠敤宸︿晶 > 绗﹀彿鏍?姣忚涓€涓?鍚嚜鍔ㄦ崲琛岃)
鍒嗛殧绾夸负涓€琛?----
琛屽唴 code 鍓嶅悗鍚勫姞涓€涓弽寮曞彿
姝ｆ枃澶栭摼杩藉姞姗欒壊绠ご鍥炬爣
闂磋窛 鏍囬涓婁笅鏃犲杈硅窛,涓庡厓淇℃伅闂撮殧 28px;娈佃惤 margin 20px 0;
棣栭〉姣忕瘒涔嬮棿鐢便€岄槄璇诲叏鏂囥€嶇殑 2.2em(35.2px)鎾戝紑
琛ㄦ牸 width:100% + 1px #444 杈规,琛ㄥご 10px,棣栧垪鍔犵矖鐧借壊
浠ｇ爜鍧? 椤堕儴 mac 涓夎壊鍦嗙偣 + 鍙充笂瑙掑鍒舵寜閽?
鈹€鈹€ 鎸変綘鐨勯€夋嫨,涓庡師绔欏埢鎰忎繚鐣欑殑宸紓 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€
1. 瀛椾綋:姝ｆ枃娌跨敤鍘熷崥瀹㈢殑 Merriweather / Open Sans,鏈敼鎴愬師绔欑殑鍏ㄧ珯绛夊銆? 浠呬唬鐮佷笌涓婇潰閭ｄ簺瑁呴グ瀛楃璧扮瓑瀹芥爤 鈥斺€?杩欐槸蹇呴』鐨?鍚﹀垯 ==== 鍜?---- 鍦? 姣斾緥瀛椾綋涓嬩細杩炰笉鎴愮嚎銆佸嚭鐜版柇鍙ｃ€? 2. 浠ｇ爜鍧椾繚鐣欎簡 mac 鍦嗙偣鍜屽鍒舵寜閽?鍘熺珯鐨勪唬鐮佸潡鏄函鑹插潡,娌℃湁杩欎簺)銆? 鍦嗙偣鐢辨湰鏂囦欢鐨?pre::before 缁樺埗,澶嶅埗鎸夐挳鐢便€岄〉鑴氫唬鐮併€嶉噷鐨勮剼鏈敞鍏ャ€? 3. 鏂囩珷椤甸殣钘忎簡绔欏悕,鍙繚鐣欏鑸?+ 鏂囩珷鏍囬 鈥斺€?涓庡師绔欎竴鑷淬€? 鑻ユ兂璁╃珯鍚嶅父椹?鍒犳帀涓嬮潰绗?4 鑺傞噷鐨?`body:has(#topics) #blogTitle` 閭ｄ竴琛屻€? 4. 棣栭〉鍒楄〃闅愯棌浜?闃呰/璇勮/鎺ㄨ崘 璁℃暟,鏂囩珷椤典繚鐣欍€? 5. 娣辫壊婊氬姩鏉?鍘熺珯鐢ㄧ殑鏄郴缁熼粯璁ゆ牱寮?杩欓噷鏄惧紡缁欎簡鏆楄壊銆? 6. 淇濈暀璇勮鍖?鍘熺珯娌℃湁璇勮),鎸夊悓涓€濂楅厤鑹叉敹骞插噣銆?
閫傜敤鐨偆:SimpleMemory
============================================================================ */
/* ==========================================================================
0. 鍩哄噯
========================================================================== */
html {
/* 鍘熺珯:hack.css 閲屾槸 12px,椤甸潰鑷畾涔変负 13px;鈮?68px 鏃跺洖鍒?1em(=16px) */
font-size: 13px;
-webkit-tap-highlight-color: transparent;
background: #000;
}
* { box-sizing: border-box; text-rendering: geometricPrecision; }
fieldset { border: none; padding: 0; margin: 0; }
/* 閿氱偣璺宠浆鐩爣楂樹寒(鍘熺珯 :target{color:#fff}) */
:target { color: #fff; }
body {
margin: 0;
font-size: 1rem;
line-height: 1.5rem;
/* 姝ｆ枃淇濇寔浣犲師鏉ョ殑瀛椾綋,涓嶆敼鎴愮瓑瀹?*/
font-family: Merriweather, "Open Sans", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
color: #ccc;
background: #000 !important;
word-wrap: break-word;
overflow-x: hidden;
}
/* 娣辫壊婊氬姩鏉°€傚師绔欓潬绯荤粺榛樿,杩欓噷鏄惧紡缁欎釜鏆楄壊,鍏嶅緱榛戦〉閰嶇櫧鏉?*/
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background-color: #111; }
::-webkit-scrollbar-thumb { background-color: #444; border-radius: 4px; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: #666; }
/* ==========================================================================
1. 鐗堝績
鍘熺珯 :
.container { max-width: 70rem; margin: 0 auto; } 鈮?68px 鏃?max-width 鏀跺埌 50rem
.main { padding: 20px 10px; }
瀹炴祴 1440px 瑙嗗彛涓嬫鏂囧 780px(= 800 - 2脳10)
========================================================================== */
#home {
max-width: 70rem;
margin: 0 auto;
padding: 20px 10px;
background: transparent !important;
}
@media screen and (min-width: 768px) {
html { font-size: 1em; } /* 16px */
#home { max-width: 50rem; } /* 800px */
}
/* 鍗曟爮:渚ф爮鏁翠綋鍘绘帀 */
#sideBar,
#sideBarMain,
#blog-sidecolumn,
#leftcontentcontainer,
#blog-calendar,
#sidebar_news,
#sidebar_news_container { display: none !important; }
#main { width: 100%; margin: 0; padding: 0; }
#mainContent {
float: none;
width: 100%;
min-height: 0;
padding: 0;
}
#mainContent .forFlow { float: none; width: auto; }
/* ==========================================================================
2. 闅愯棌涓庣洰鏍囩珯鏃犲叧鐨勭珯鐐瑰澹? ========================================================================== */
/* 鍗氬鍥《閮ㄧ珯鐐瑰鑸?浼氬憳/鍛ㄨ竟/鏂伴椈/鎼滅储/鐧诲綍鈥?鈥斺€斿師绔欐病鏈夎繖灞?*/
#top_nav,
#nav_main,
#navbar_login_status,
#zzk_search { display: none !important; }
/* 鍥哄畾/娴姩瑁呴グ涓庡箍鍛婁綅 */
#blog-calendar,
.ad_text_commentbox,
#ad_text_under_commentbox,
#cnblogs_ch,
#opt_under_post,
#c1_impression,
#under_post_card1,
#under_post_card2,
#related_posts_card,
#HistoryToday,
.under-post-card,
.below-post-card,
#green_channel,
#blog_post_info,
#MySignature,
#div_digg,
#blogLogo,
#lnkBlogLogo { display: none !important; }
/* ==========================================================================
3. 椤堕儴:瀵艰埅鍦ㄥ乏涓婃柟,绔欑偣鏍囬鏇村儚涓€涓?h1
鍘熺珯缁撴瀯:
鍗氬鍥粨鏋? #header > #blogTitle(h1) + #navigator(ul#navList)
鈫?鐢?flex 鎶婂鑸彁鍒版爣棰樺墠闈? ========================================================================== */
#header {
/* 鍘熺珯椤哄簭鏄€屽鑸湪涓?绔欑偣鏍囬鍦ㄤ笅銆?鑰屽崥瀹㈠洯 DOM 鏄弽鐨?杩欓噷鐢?flex 璋冩崲 */
display: flex;
flex-direction: column;
border: none;
margin: 0;
padding: 0;
}
#navigator {
order: -1;
display: block;
border: none;
height: auto;
margin: 0;
padding: 0;
font-size: 1rem;
}
#blogTitle { order: 1; }
#navList {
display: flex;
flex-wrap: wrap;
float: none;
list-style: none;
margin: 0;
padding: 0;
min-height: 0;
}
/* 鍘熺珯瀵艰埅椤逛箣闂村彧闅斾竴涓┖鏍?Menlo 涓?9.64px),涓嶈鎷夊紑 */
#navList li { float: none; margin: 0 .6025rem 0 0; padding: 0; }
/* 鐨偆浼氬湪瀵艰埅閲屾彃鍏ヤ笉鍚摼鎺ョ殑鍗犱綅 li,鍘绘帀浠ュ厤宸︿晶澶氬嚭绌洪殭 */
#navList li:not(:has(a)) { display: none !important; }
/* 瀵艰埅閾炬帴 鈥斺€?鍘熺珯 a 鐨勯€氱敤鏍峰紡:缁胯壊 + 缁胯壊涓嬪垝绾?鎮仠鍙嶇櫧 */
#navList a.menu,
#navList a:link,
#navList a:visited,
#navList a:active {
display: inline;
float: none;
width: auto;
height: auto;
padding: 0;
margin: 0;
text-align: left;
background: transparent !important;
color: #339933 !important;
border-bottom: 1px solid #33cc33;
/* 瑕嗙洊 SimpleMemory 鐨偆瀵?.menu 鐨勪綅绉?娣″嚭,淇濊瘉瀵艰埅甯告樉 */
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
#navList a.menu:hover,
#navList a:hover {
background-color: #33cc33 !important;
color: #fff !important;
}
/* 绔欏唴缁熻(鍗氬绉垎/闅忕瑪/璇勮鈥?鈥斺€斿師绔欐病鏈?鍘绘帀 */
.blogStats { display: none !important; }
/* 绔欑偣鏍囬(h1) */
#blogTitle {
display: block;
height: auto;
margin: 0;
text-align: left;
clear: none;
}
#blogTitle h2 { display: none; } /* 鍓爣棰?鍘熺珯娌℃湁 */
/* ==========================================================================
4. 鏍囬 鈥斺€?hack.css 鏁堟灉
h1: 鏀剁缉鍒版爣棰樺搴?+ overflow:hidden,浣?==== 涓嬪垝绾胯瑁佸埌璇ュ搴? ========================================================================== */
#blogTitle h1,
#topics > .post > h1.postTitle {
position: relative;
display: block;
/* 鍘熺珯鐢?display:table-cell 鏀剁缉鍒版枃瀛楀搴?鏂囩珷椤电殑 h1 鏄?flex 瀛愰」浼氳鍧楃骇鍖?
鎵€浠ョ粺涓€鏀圭敤 fit-content 杈惧埌鍚屾牱鏁堟灉 鈥斺€?==== 鎵嶄細琚鍒版爣棰樺搴?*/
width: fit-content;
max-width: 100%;
padding: 20px 0 30px;
margin: 0;
overflow: hidden;
font-size: 1rem;
font-weight: 700;
line-height: 1.3em;
color: #ccc;
}
#blogTitle h1::after,
#topics > .post > h1.postTitle::after {
content: "====================================================================================================";
position: absolute;
bottom: 10px;
left: 0;
/* 蹇呴』绛夊,==== 鎵嶈兘杩炴垚杩炵画鐨勪袱鏉℃í绾?*/
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.3em;
color: inherit;
white-space: nowrap;
}
/* 绔欑偣鏍囬鐨勯摼鎺?鍘熺珯鏍囬涓嶆槸閾炬帴,鎵€浠ュ幓鎺変笅鍒掔嚎 */
#blogTitle h1 a#Header1_HeaderTitle {
color: #ccc !important;
border-bottom: none !important;
font-weight: 700;
}
#blogTitle h1 a#Header1_HeaderTitle:hover {
color: #fff !important;
background: transparent !important;
}
/* 鏂囩珷椤?鍘熺珯涓嶉噸澶嶆樉绀虹珯鍚?鍙暀瀵艰埅 + 鏂囩珷鏍囬 h1 */
body:has(#topics) #blogTitle { display: none; }
/* 鏂囩珷鏍囬(h1 鍐呯殑閾炬帴):鍘熺珯鏄函鏂囨湰,鎶规帀閾炬帴鏍峰紡 */
#topics > .post > h1 a#cb_post_title_url,
#topics > .post > h1 a#cb_post_title_url span {
color: #ccc !important;
border-bottom: none !important;
font-weight: 700;
text-decoration: none;
}
#topics > .post > h1 a#cb_post_title_url:hover {
color: #fff !important;
background: transparent !important;
}
/* ==========================================================================
5. 鍏ㄥ眬閾炬帴
鍘熺珯:a{color:#339933;border-bottom:1px solid #33cc33}
a:hover{background-color:#33cc33;color:#fff}
========================================================================== */
a:link, a:visited, a:active {
color: #339933;
text-decoration: none;
border-bottom: 1px solid #33cc33;
cursor: pointer;
}
a:hover {
background-color: #33cc33 !important;
color: #fff !important;
}
/* 姝ｆ枃澶栭摼:杩藉姞姗欒壊绠ご鍥炬爣(鍘熺珯鍚屽悕鏁堟灉,鍩轰簬 a[href*="://"]::after)
娉ㄦ剰:鍗氬鍥珯鍐呴摼鎺ヤ篃鏄粷瀵瑰湴鍧€,鎵€浠ユ帓闄?cnblogs.com 鍩?*/
#cnblogs_post_body a[href*="://"]:not([href*="cnblogs.com"])::after {
content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%25'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}
figure a[href*="://"]::after { content: none; }
/* ==========================================================================
6. 棣栭〉鏂囩珷鍒楄〃
鍘熺珯姣忕瘒:
鎽樿
姝ｆ枃棣栨
========================================================================== */
.day {
display: block;
margin: 0;
padding: 0;
border: none;
}
/* 鏃ユ湡鍒嗙粍鏍囬:鍘熺珯鍒楄〃閲屾病鏈?鎸夊ぉ鍒嗙粍鐨勬棩鏈?,闅愯棌 */
.dayTitle { display: none !important; }
/* 鍚屼竴澶╁唴澶氱瘒涔嬮棿鐨勫垎闅?鍘熺珯鍙潬闂磋窛,涓嶈妯嚎 */
.postSeparator { display: none !important; }
.clear { display: none !important; }
/* 鍒楄〃椤规爣棰?= 鍘熺珯鐨?h2,甯?## 鍓嶇紑(瑁呴グ瀛楃,鐢ㄧ瓑瀹?
娉ㄦ剰:鏂囩珷椤电殑 涔熷甫 .postTitle 绫?鎵€浠?## 鍙姞鍦ㄩ椤靛垪琛ㄤ笂 */
.postTitle {
float: none;
width: 100%;
margin: 0 0 1.75rem;
padding: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.3em;
text-align: left;
}
.day .postTitle::before {
content: "## ";
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-weight: 700;
color: #ccc;
}
/* 鏂囩珷椤垫爣棰樿蛋 h1 鐨?==== 涓嬪垝绾?涓嶈 ## */
#topics .postTitle::before { content: none; }
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
color: #ccc;
border-bottom: 1px solid #33cc33; /* 鍘熺珯 h2 鍐呯殑閾炬帴淇濈暀缁胯壊涓嬪垝绾?*/
font-family: inherit;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
background: transparent;
}
.postTitle a:hover { color: #fff !important; background-color: #33cc33 !important; }
.postTitle a span { border: none; }
/* 鍏冧俊鎭?鈥斺€?鍘熺珯 .muted{color:rgba(255,255,255,.5)},鎺掑湪鏍囬涔嬪悗銆佹憳瑕佷箣鍓? 棣栭〉鍒楄〃涓殑浣嶇疆鐢遍〉鑴?JS 鎶?.postDesc 绉诲埌 .postCon 涔嬪墠 */
.postDesc {
display: block !important;
float: none;
width: 100%;
margin: 0 0 20px;
padding: 0;
background: none;
color: rgba(255, 255, 255, .5);
font-size: 1rem;
line-height: 1.5rem;
text-align: left;
}
/* 鍏冧俊鎭墠鐨勬椂閽熷浘鏍?鍙栬嚜鍘熺珯鐨?i-clock SVG) */
.postDesc::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin: 0 4px -3px 0;
background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='6.25%25'%3E%3Ccircle%20cx='16'%20cy='16'%20r='14'/%3E%3Cpath%20d='M16%208%20L16%2016%2020%2020'/%3E%3C/svg%3E") center/contain no-repeat;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active { color: #339933; }
.postDesc a:hover { background-color: #33cc33 !important; color: #fff !important; }
/* 鍗氬鍥钩鍙拌嚜甯︾殑鈥滄敹钘?/ 涓炬姤鈥濇寜閽?鈥斺€?鍘熺珯娌℃湁,鍘绘帀 */
#topics .postDesc a[href^="javascript"],
#topics .postDesc a[href*="report.cnblogs.com"],
#topics .postDesc a[onclick*="AddToWz"] { display: none !important; }
/* 鍒楄〃椤电殑闃呰/璇勮/鎺ㄨ崘璁℃暟鍘熺珯娌℃湁,鍘绘帀 */
.day .post-view-count,
.day .post-comment-count,
.day .post-digg-count { display: none !important; }
/* 鎽樿 = 鍘熺珯鐨?itemprop="description",鏅€氭鏂囨牱寮? .c_b_p_desc 鑷甫 overflow:hidden(鏋勬垚 BFC),銆岄槄璇诲叏鏂囥€嶇殑 2.2em 涓嬮棿璺濊鍏冲湪閲岄潰绠楄繘浜? 鏈厓绱犻珮搴?鎵€浠ヨ繖閲屼笉鑳藉啀鍔犱笅闂磋窛,鍚﹀垯鏂囩珷涔嬮棿浼氭瘮鍘熺珯澶氬嚭 20px */
.postCon {
display: block;
margin: 0;
padding: 0;
color: #ccc;
font-size: 1rem;
line-height: 1.5rem;
text-align: left;
word-wrap: break-word;
}
.postCon p { margin: 20px 0; }
.postCon a:link, .postCon a:visited, .postCon a:active { color: #339933; }
/* 鎽樿閲岀殑鎴浘/鍥剧墖鍘熺珯涔熸病鏈?鍘绘帀 */
.c_b_p_desc_img { display: none !important; }
/* 鈥滈槄璇诲叏鏂団€?= 鍘熺珯 nav.readmore > a */
.c_b_p_desc { color: #ccc; margin: 0; padding: 0; }
.c_b_p_desc_readmore {
/* 蹇呴』鏄潡绾?涓嬮棿璺濅笌 .postCon 鐨?20px 鎶樺彔澶栧嚭,寰楀埌鍘熺珯鐨?2.2em(35.2px)闂撮殧銆? 鑻ヤ负 inline-block,琛岀洅浼氭妸闂磋窛绠楄繘 .postCon 鍐呴儴,闂撮殧浼氬鍑?20px */
display: block;
width: fit-content;
margin: 2px 0 2.2rem;
padding: 0;
background: none;
border: none;
border-bottom: 1px solid #33cc33;
color: #339933 !important;
font-size: 1rem;
font-weight: 400;
text-align: left;
}
.c_b_p_desc_readmore:hover { background-color: #33cc33 !important; color: #fff !important; }
/* 缈婚〉 鈥斺€?鍘熺珯 footer 閲岀殑 鈥淧age 1 of 3 | Next 禄鈥?*/
.topicListFooter,
#nav_next_page {
margin: 2rem 0 0;
padding: 0;
color: rgba(255, 255, 255, .5);
font-size: 1rem;
text-align: left;
}
.topicListFooter a, #nav_next_page a { color: #339933; margin: 0 .35rem; }
.topicListFooter a:hover, #nav_next_page a:hover { background-color: #33cc33 !important; color: #fff !important; }
/* ==========================================================================
7. 鏂囩珷椤? ========================================================================== */
#topics { width: 100%; }
#topics .post {
display: flex;
flex-direction: column;
width: 100%;
}
/* 鏍囬涓嬩笉鐣欓澶栭棿璺?涓庡厓淇℃伅涔嬮棿鍙殧鏍囬鑷韩鐨?padding-bottom(鍘熺珯 h1+*{margin-top:0}) */
#topics > .post > h1.postTitle { margin: 0; }
/* 鍏冧俊鎭Щ鍒版爣棰樹笅鏂?鍘熺珯椤哄簭:鏍囬 鈫?鍏冧俊鎭?鈫?鎽樿 鈫?姝ｆ枃) */
#topics > .post > .postDesc { order: 2; margin: 0 0 20px; }
#topics > .post > .postBody { order: 3; }
/* 姝ｆ枃 */
.postBody {
width: 100%;
color: #ccc;
font-size: 1rem;
line-height: 1.5rem;
}
#cnblogs_post_body { font-size: 1rem; line-height: 1.5rem; }
#cnblogs_post_body p { margin: 20px 0; }
/* 姝ｆ枃閲岀殑鍥?琛?浠ｇ爜绛夌敱涓嬮潰鍚勮妭鎺ョ */
#cnblogs_post_body img { max-width: 100%; height: auto; }
/* ==========================================================================
8. 姝ｆ枃 markdown 婧愮爜椋庤楗? ========================================================================== */
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
font-size: 1rem;
font-weight: 700;
line-height: 1.3em;
color: #ccc;
}
/* 姝ｆ枃鍐?h1 鈥斺€?涓庨〉闈?h1 鍚屾牱澶勭悊:涓嬫柟 ==== 涓旇鍒版爣棰樺搴?*/
#cnblogs_post_body h1 {
position: relative;
display: block;
width: fit-content; /* 鍚岄〉闈?h1:鏀剁缉鍒版爣棰樺搴?浣?==== 琚鍒拌瀹藉害 */
max-width: 100%;
padding: 20px 0 30px;
margin: 0 0 1.75rem;
overflow: hidden;
}
#cnblogs_post_body h1::after {
content: "====================================================================================================";
position: absolute;
bottom: 10px;
left: 0;
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.3em;
color: inherit;
white-space: nowrap;
}
#cnblogs_post_body h1 + * { margin-top: 0; }
/* h2~h6 鈥斺€?鍓嶇疆 ## / ### 鈥?棰滆壊涓庢爣棰樺悓鑹?鍘熺珯瀹炴祴 #ccc,涓嶆槸褰╄壊) */
#cnblogs_post_body h2, #cnblogs_post_body h3,
#cnblogs_post_body h4, #cnblogs_post_body h5,
#cnblogs_post_body h6 {
position: relative;
margin: 0 0 1.75rem;
padding: 0;
}
#cnblogs_post_body h2::before,
#cnblogs_post_body h3::before,
#cnblogs_post_body h4::before,
#cnblogs_post_body h5::before,
#cnblogs_post_body h6::before {
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-weight: 700;
color: inherit;
}
#cnblogs_post_body h2::before { content: "## "; }
#cnblogs_post_body h3::before { content: "### "; }
#cnblogs_post_body h4::before { content: "#### "; }
#cnblogs_post_body h5::before { content: "##### "; }
#cnblogs_post_body h6::before { content: "###### "; }
/* 鏃犲簭鍒楄〃 鈥斺€?鐢?- 浠ｆ浛鍦嗙偣(鍘熺珯 li::after) */
#cnblogs_post_body ul {
list-style: none !important;
margin: 20px 0;
padding: 0;
}
#cnblogs_post_body ul ul { margin: 0; }
#cnblogs_post_body ul > li {
position: relative;
display: block;
margin: 0;
padding: 0 0 0 20px;
}
#cnblogs_post_body ul > li::before {
content: "-";
position: absolute;
top: 0;
left: 0;
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
color: #ccc;
}
/* 鏈夊簭鍒楄〃 鈥斺€?1. 2. 3.(鍘熺珯 li::after + counter) */
#cnblogs_post_body ol {
counter-reset: cnblogs-ol;
list-style: none !important;
margin: 20px 0;
padding: 0;
}
#cnblogs_post_body ol > li {
position: relative;
display: block;
margin: 0;
padding: 0 0 0 20px;
counter-increment: cnblogs-ol;
}
#cnblogs_post_body ol > li::before {
content: counter(cnblogs-ol) ".";
position: absolute;
top: 0;
left: 0;
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
color: #ccc;
}
/* 寮曠敤 鈥斺€?宸︿晶 > 绗﹀彿鏍?鍘熺珯 blockquote::after,white-space:pre 閾烘弧宸︿晶) */
#cnblogs_post_body blockquote {
position: relative;
margin: 20px 0;
padding: 0 0 0 2ch;
overflow: hidden;
background: transparent !important;
border: none !important;
color: #ccc;
font-size: 1rem;
line-height: 20px;
}
#cnblogs_post_body blockquote::after {
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
position: absolute;
top: 0;
left: 0;
white-space: pre;
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
line-height: 20px;
color: inherit;
}
#cnblogs_post_body blockquote p { margin: 0; padding: 0; }
#cnblogs_post_body blockquote cite { display: block; }
#cnblogs_post_body blockquote cite::before { content: "\2014"; }
/* 鍒嗛殧绾?鈥斺€?浠?---- 鍛堢幇(鍘熺珯 hr::after) */
#cnblogs_post_body hr {
position: relative;
height: 20px;
margin: 20px 0;
border: 0;
overflow: hidden;
/* 鍘熺珯杩欓噷鐢ㄧ殑鏄祻瑙堝櫒 UA 缁?hr 鐨勯粯璁よ壊 gray,瀹炴祴 rgb(128,128,128) */
color: gray;
}
#cnblogs_post_body hr::after {
content: "----------------------------------------------------------------------------------------------------";
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
line-height: 20px;
color: inherit;
/* 鍘熺珯鏄?word-wrap:break-word 鈥斺€?璁?---- 鎶樿閾烘弧瀹瑰櫒瀹藉害,閰嶅悎 hr 鐨?height:20px
鍙湶鍑虹涓€琛?鑻ョ敤 nowrap 鍒欎細瓒呭嚭瀹瑰櫒鍙宠竟鐣?*/
word-wrap: break-word;
overflow-wrap: break-word;
}
/* 寮鸿皟 鈥斺€?鍘熺珯 em 鐢?* 鍖呰９,.dark strong 涓虹櫧鑹?*/
#cnblogs_post_body em::before,
#cnblogs_post_body em::after { content: "*"; }
#cnblogs_post_body strong { color: #fff; font-weight: 700; line-height: 20px; }
/* ==========================================================================
9. 琛屽唴浠ｇ爜 鈥斺€?缁胯壊 + 鍙嶅紩鍙峰寘瑁? 鍘熺珯瀹炴祴:color #248f24, font-weight 100, ::before/::after content "`"
========================================================================== */
#cnblogs_post_body code:not([class]),
#cnblogs_post_body p code,
#cnblogs_post_body li code,
#cnblogs_post_body td code,
#cnblogs_post_body h1 code,
#cnblogs_post_body h2 code,
#cnblogs_post_body h3 code,
#cnblogs_post_body blockquote code {
background: none !important;
border: 0 !important;
padding: 0 !important;
color: #248f24 !important;
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 1rem;
font-weight: 100;
line-height: 20px;
}
#cnblogs_post_body p code::before,
#cnblogs_post_body p code::after,
#cnblogs_post_body li code::before,
#cnblogs_post_body li code::after,
#cnblogs_post_body td code::before,
#cnblogs_post_body td code::after,
#cnblogs_post_body blockquote code::before,
#cnblogs_post_body blockquote code::after { content: "`"; color: #248f24; }
/* hljs 琛屽唴鐨勯珮浜?token 涔熶繚鎸佺豢鑹?鍘熺珯琛屽唴 code 涓嶅弬涓庤娉曠潃鑹? */
#cnblogs_post_body p code [class*="hljs-"],
#cnblogs_post_body li code [class*="hljs-"] { color: #248f24 !important; }
/* ==========================================================================
10. 浠ｇ爜鍧? 鍘熺珯涓ょ:
路 璇硶楂樹寒鍧? Monokai,搴曡壊 #272822,姝ｆ枃 #f8f8f2
路 绾?pre 榛戝簳銆佺豢瀛?#248f24銆侀浂鍐呰竟璺? 浣犻€夋嫨淇濈暀 mac 鍦嗙偣 + 澶嶅埗鎸夐挳 鈫?鍦ㄩ潰鏉块《閮ㄥ姞涓€鏉℃瀬绠€宸ュ叿鏉? ========================================================================== */
#cnblogs_post_body pre {
position: relative;
margin: 1.75rem 0;
padding: 2.6rem 1rem 1rem; /* 椤堕儴鐣欑粰鍦嗙偣/澶嶅埗鎸夐挳 */
background-color: #272822 !important;
border: 0 !important;
border-radius: 4px;
color: #f8f8f2;
font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 1rem;
line-height: 1.5;
overflow: auto;
tab-size: 4;
}
/* 涓変釜 mac 鍦嗙偣 */
#cnblogs_post_body pre::before {
content: " ";
position: absolute;
top: 14px;
left: 14px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fc625d;
box-shadow: 18px 0 #fdbc40, 36px 0 #35cd4b;
}
#cnblogs_post_body pre > code {
display: block;
background: none !important;
border: 0 !important;
padding: 0 !important;
color: #f8f8f2;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
white-space: pre;
text-shadow: none;
}
/* 鍧楀唴 code 涓嶅姞鍙嶅紩鍙?*/
#cnblogs_post_body pre > code::before,
#cnblogs_post_body pre > code::after { content: none; }
#cnblogs_post_body pre code [class*="hljs-"] { color: inherit; }
/* 澶嶅埗鎸夐挳(鐢遍〉鑴?JS 娉ㄥ叆