吾不禁英俊地笑了起来

License

您可以随意使用、修改、传播以下代码，如果愿意注明出处则更好 ٩(｡・ω・｡)و

Update

V2021.12.01: 更换题图为随机图片；更换色调。

Code

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-style: normal;
}

html {
	font-size: 16px;
}
body {
	font-size-adjust: none;
	text-align: justify;
	color: #333;
	cursor: crosshair;
}

code {
    tab-size: 4;
}
cite {
	display: inline-block;
	margin: 0 0 0 2em;
}
a {
	color: #777;
	cursor: pointer;
	transition: .2s ease-in-out;
	transition-property: color, background, opacity;
}
a:hover {
	text-decoration: none !important;
	opacity: .75;
}
h1 {
	font-size: 2rem;
	font-weight: 300;
}
h2 {
	font-size: 1.5rem;
	font-weight: 400;
	text-align: left;
}
h3 {
	font-size: 1rem;
	font-weight: 500;
}
blockquote {
	color: #333 !important;
}
ul {
    padding: 0 0 0 2rem;
}

body, body#collection nav#manage li a.write, .font.norm, body#collection article.norm, body#post article.norm, body#subpage article.norm, pre.norm, span.norm, textarea.norm, .dropdown-nav, nav#manage, .action {
	font-family: 'Roboto', 'Source Han CJK SC', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
}

body#post article {
	font-size: 1rem;
}

body#post header nav .xtra-feature {
    display: inline !important;
}

nav#manage {
	z-index: 9;
}
nav#manage a:hover {
    opacity: 1;
}
nav#manage .has-submenu {
    width: 1rem;
}
nav#manage .has-submenu a {
    padding: 0 0 .25rem;
}
nav#manage li {
	transition: .2s ease-in-out;
    background: transparent !important;
}
nav#manage li ul {
	display: block;
	width: 7.5rem;
	font-size: .875rem;
    background: rgba(255,255,255,.5);
    border: 0;
    border-radius: .125rem;
	opacity: 0;
	transition: opacity .2s ease-in-out;
	pointer-events: none;
}
nav#manage li:hover ul {
	opacity: 1;
	pointer-events: all;
}
nav#manage li ul a {
    padding: .25rem .5rem .5rem !important;
    color: transparent;
    line-height: 1;
}
nav#manage li ul a:hover {
    background: rgba(255,255,255,.5);
    opacity: 1;
}
nav#manage li ul a::before {
    color: #333;
}
nav#manage li li:nth-child(1) a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 -4 24 24'%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6.75024 19.2502H17.2502C18.3548 19.2502 19.2502 18.3548 19.2502 17.2502V9.75025L12.0002 4.75024L4.75024 9.75025V17.2502C4.75024 18.3548 5.64568 19.2502 6.75024 19.2502Z'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.74963 15.7493C9.74963 14.6447 10.6451 13.7493 11.7496 13.7493H12.2496C13.3542 13.7493 14.2496 14.6447 14.2496 15.7493V19.2493H9.74963V15.7493Z'%3E%3C/path%3E%3C/svg%3E%0A") " Home";
}
nav#manage li li:nth-child(2) a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 -4 24 24'%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 8H7.25'/%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12.75 8H19.25'/%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 16H12.25'/%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17.75 16H19.25'/%3E%3Ccircle cx='10' cy='8' r='2.25' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='16' r='2.25' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E%0A") " Customize";
}
nav#manage li li:nth-child(3) a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 -4 24 24'%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.75 15.25V9.75'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.25 15.25V9.75'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 15.25V12.75'%3E%3C/path%3E%3C/svg%3E%0A") " Statistics";
}
nav#manage li li:nth-child(5) a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 -4 24 24'%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 9.25H13.75V5'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 15.25H14.25'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 12.25H14.25'%3E%3C/path%3E%3C/svg%3E") " Blogs";
}
nav#manage li li:nth-child(6) a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 -4 24 24'%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 11.75L17.6644 6.20056C17.4191 5.34195 16.6344 4.75 15.7414 4.75H8.2586C7.36564 4.75 6.58087 5.34196 6.33555 6.20056L4.75 11.75'%3E%3C/path%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.2142 12.3689C9.95611 12.0327 9.59467 11.75 9.17085 11.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V11.75H14.8291C14.4053 11.75 14.0439 12.0327 13.7858 12.3689C13.3745 12.9046 12.7276 13.25 12 13.25C11.2724 13.25 10.6255 12.9046 10.2142 12.3689Z'%3E%3C/path%3E%3C/svg%3E%0A") " Drafts";
}
.ic-18dp, .separator {
    display: none !important;
}

body#collection header {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 0 5rem;
	padding: 5rem 0;
	max-width: 100%;
	height: 100vh;
	background: url(https://source.unsplash.com/featured/?white) #ddd no-repeat center/cover fixed;
}
body#collection header::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 40rem;
	background: linear-gradient(0deg, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 100%);
	z-index: 0;
}
body#collection header h1 {
	padding: 5rem 0 0;
	background: url(https://fiammanda.github.io/favicon.svg) no-repeat top center/4rem 4rem;
	opacity: .6;
}
body#collection header p {
	margin: 1rem 0 4rem;
	font-size: 1rem !important;
	color: hsla(0, 0%, 0%, 75%);
	z-index: 1;
}
body#collection header nav {
	z-index: 1;
}
body#collection pre, body#post pre, body#subpage pre {
    padding: 1em;
    font-size: .875rem;
	background: #333;
    border: none;
    border-radius: 2px !important;
}

body#post header, body#subpage header {
	position: sticky;
	top: 0;
	padding: 0 1rem;
	height: 3rem;
	background: hsla(0, 0%, 100%, 80%);
	border-bottom: 1px solid hsla(0, 0%, 0%, 10%);
	opacity: 1 !important;
	z-index: 9;
	backdrop-filter: blur(2px);
}
body#post header h1, body#subpage header h1 {
	display: block;
	margin: 0 auto;
	padding: 1rem 0 1rem 2rem;
	max-width: 42rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	background: url(https://fiammanda.github.io/favicon.svg) no-repeat 0 .75rem/1.5rem 1.5rem;
	opacity: .75;
}
body#post header nav {
	position: absolute;
	top: 1px;
	right: calc(50% - 21rem);
	padding: 1rem 0;
	font-size: .875rem;
	line-height: 1;
	color: #777;
}
@media all and (max-width:42rem) {
    body#post header nav {
         right: 0;
    }
}
body#post header nav a {
	color: #777;
}
body#post header nav .pinned, body#subpage header nav {
	display: none;
}

#wrapper, body#post article, body footer {
	margin: 5rem auto;
	padding: 1rem;
	max-width: 42rem;
}
#post .alert, #subpage .alert, body#collection article, body#subpage #wrapper h1, body#subpage article, pre {
	padding: 0;
	max-width: 100%;
}

body#subpage #wrapper h1 {
	margin: 0 0 5rem;
	font-family: 'Roboto', 'Source Han CJK SC', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
	font-size: 2rem;
}
body#subpage #wrapper h1:before {
	content: 'TAG: ';
	color: #777;
}

body#collection #wrapper article, body#subpage #wrapper article {
	margin: 5rem 0;
}

body#post article h2#title {
	font-family: 'Roboto', 'Source Han CJK SC', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
	font-size: 2rem;
}

h2 .u-url {
	position: relative;
	font-family: 'Roboto', 'Source Han CJK SC', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
	color: #333 !important;
}
h2 .u-url:hover {
	opacity: 1;
}
h2 .u-url::before {
	content: '';
	position: absolute;
	bottom: .5rem;
	left: 0;
	width: 0;
	height: 0;
	border-bottom: .5rem solid hsl(0, 0%, 90%);
	z-index: -1;
	transition: .2s width ease-in-out;
}
h2 .u-url:hover::before {
	width: 100%;
}
h2 .u-url + .action {
	margin: 0 0 0 1rem;
}
.action {
	font-size: .875rem;
	color: #777 !important;
}
.action img {
	opacity: .75;
}
.action:hover {
	color: #333 !important;
}
.action:hover label {
	text-decoration: none !important;
}
.hidden {
	transition: .2s ease-in-out;
	transition-property: color, opacity;
}

body#collection #wrapper time, body#subpage #wrapper time, body#post article time.dt-published {
	margin: 1.5rem 0 .25rem !important;
	font-size: .875rem;
	color: #777;
}

.p-summary, .e-content {
	text-align: justify;
}
time + div > blockquote:first-child {
	margin: 0 !important;
	padding: 0 !important;
	border-left: 0 !important;
}
time + div > blockquote:first-child p {
	margin: 1rem 0;
}
time + div > blockquote:first-child blockquote {
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: .875rem;
	font-family: 'Roboto', 'Roboto Symbol', 'Source Han CJK SC', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
	color: #777 !important;
}
time + div > blockquote:first-child blockquote p {
	margin: .25rem 0 !important;
}
#post time + div > blockquote:first-child {
	padding: 0 0 4rem !important;
	width: 100%;
	color: #555 !important;
	border-bottom: 1px solid #ccc;
}
#post time + div > blockquote:first-child blockquote {
	margin: .125rem 0 0 !important;
}
#post time + div > blockquote:first-child blockquote p:not(:first-child) {
	margin: -2.525rem 0 .25rem !important;
}

.hashtag {
	display: inline-block;
	margin: 0 1px 0 -1px;
	padding: 0 4px 1px 2px;
}
.hashtag span {
	font-size: .875rem !important;
	text-decoration: none !important;
	color: #777 !important;
	transition: .2s color ease-in-out;
}
.hashtag:hover {
	background: hsl(0, 0%, 90%);
	opacity: 1;
}
.hashtag:hover span {
	color: #333 !important;
}

.read-more {
	display: none;
}

body#post article hr {
	height: 1rem;
	background: transparent;
}
body#post article h3 {
	font-weight: 400;
}

body#collection article blockquote p + p {
	margin-top: 1em;
}

body#collection #paging, body#subpage #paging {
	margin: 0 !important;
	padding: 1rem 0 !important;
	font-size: 1rem;
}

body footer {
	margin: 4rem auto;
	font-size: .875rem;
}
body footer::after {
	content: '© 2008-2022 fiammanda';
	color: #777;
}
body footer hr {
	margin: 1rem 0;
	max-width: 100%;
	background: #eee;
}
body footer nav {
	display: none;
}

.e-content h2 {
	display: block !important;
	margin: 2em 0 0 !important;
	padding: 0 0 4px;
	border-bottom: 1px solid #ccc;
}
.e-content ul {
	list-style-type: square;
}
.e-content ul > li {
	line-height: 1;
}
.e-content ul > li::marker {
	color: #999;
}
.e-content blockquote ul {
	margin-top: 0 !important;
}
.e-content > ol:last-child {
	counter-reset: ol;
	font-size: .9em;
}
.e-content > ol:last-child:before {
	content: '';
	display: block;
	margin: 4em 0 2em -2em;
	width: 8em;
	height: 2px;
	background: #ccc;
}
.e-content > ol:last-child > li {
	position: relative;
}
.e-content > ol:last-child > li::marker {
	color: transparent;
}
.e-content > ol:last-child > li:before {
	content:"[" counter(ol) "]";
	counter-increment: ol;
	position: absolute;
	left: -2em;
}

::selection {
	color: #eee;
	background: #333;
}
::-moz-selection {
	color: #eee;
	background: #333;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(Roboto), local(Roboto-Regular), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-0080;
}
@font-face {
	font-family: 'Roboto Symbol';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local(Roboto), local(Roboto-Regular), url(https://fonts.gstatic.com/s/playfairdisplay/v20/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format("woff2");
	unicode-range: U+2019;
}


.hljs ::selection, .hljs::selection {
	background-color: #666;
}
.hljs, .hljs-subst {
	color: #ebdbb2 !important;
}
.hljs-deletion, .hljs-formula, .hljs-keyword, .hljs-link, .hljs-selector-tag {
	color: #fb4934 !important;
}
.hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable {
	color: #83a598 !important;
}
.hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type {
	color: #fabd2f !important;
}
.hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number {
	color: #8f3f71 !important;
}
.hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable {
	color: #fe8019 !important;
}
.hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol {
	color: #b8bb26 !important;
}
.hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag {
	color: #8ec07c !important;
}
.hljs-comment {
	color: #928374 !important;
}
.hljs-link_label, .hljs-literal, .hljs-number {
	color: #d3869b !important;
}