@charset "UTF-8"; /* ==================================================
 * Snapic Plus for Comments Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

#comment { padding: 0 2em; width: calc(100% - 4em); } .snapic-comment { margin: 5em 0; } .comments-wrap { position: relative; margin: 1em auto; padding: 0; max-width: 960px; } .comments-wrap h3 { margin: 0; padding: 0; font-size: var(--font-size-xxl); font-weight: normal; color: var(--color-comments-tips); } .comments-wrap .counting { text-align: right; } .comment-list { margin: 0; padding-left: 0; } .comment-list>.comment-body { position: relative; list-style: none; margin-top: 3em; padding-left: 48px; } .comment-author { height: 32px; } .comment-author span { position: absolute; left: 0; width: 32px; height: 32px; opacity: .7; } .comment-author span:hover { opacity: 1; } .comment-children .comment-author .avatar { display: none; } .comment-author span img { border-radius: 50%; -webkit-transform: scale(.98); -moz-transform: scale(.98); -ms-transform: scale(.98); -o-transform: scale(.98); transform: scale(.98); } .comment-author .fn { font-size: var(--font-size-l); line-height: 32px; font-style: normal; color: var(--color-comments-author); } .comment-author .fn a { color: var(--color-comments-author); } .comment-author .fn a:hover { color: var(--color-comments-author-hover); line-height: 32px; } .comment-meta { margin-top: 0.5em; font-size: var(--font-size-s); } .comment-meta, .comment-meta a { color: var(--color-comments-meta); } .comment-meta a:hover { color: var(--color-comments-meta-hover); margin-top: 0.5em; } .comment-awaiting-moderation { margin-left: 1em; color: var(--color-comments-awaiting); } .comment-content { display: inline-block; margin-top: 1em; padding: 1em 2em; font-size: var(--font-size-xl); line-height: 1.4; color: var(--color-comments-content); text-align: justify; word-break: break-all; word-wrap: break-word; background-color: var(--color-comments-content-background); border-radius: 0.25em 2em 2em 2em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .comment-content:hover { color: var(--color-comments-content-hover); line-height: 1.4; background-color: var(--color-comments-content-background-hover); } .comment-body .comment-children { margin: 0; padding: 0; } .comment-body .comment-children li { padding-left: 10px; border-left: 0.01em solid var(--color-comments-content-boder); } .comments-wrap .cancelreply, .comments-wrap .logout { margin: 1em auto; padding-left: 2em; } .comments-wrap .cancelreply a, .comments-wrap .logout a { font-size: var(--font-size-l); color: var(--color-comments-tips); } .comments-wrap .cancelreply a:hover, .comments-wrap .logout a:hover { margin: 1em auto; color: var(--color-comments-tips-hover); } .comment-body .comment-reply { margin: 0.5em 0; } .comment-body .comment-reply a { font-size: var(--font-size-m); color: var(--color-comments-tips); } .comment-body .comment-reply a:hover { color: var(--color-comments-tips-hover); } .comments-wrap .respond { margin-top: 3em; } .respond form { padding: 1em 0; } .comments-wrap .closing { margin: 5em auto 3em auto; text-align: center; } input[type="password"], input[type="submit"], input[type="email"], input[type="text"], input[type="url"], button[type="submit"], textarea { padding: 1em; width: calc(100% - 2em); height: 2em; font-family: sans-serif; font-size: var(--font-size-xl); line-height: 1.4; color: var(--color-comments-input); background-color: var(--color-comments-input-background); border-radius: 5px; border: 0; outline: none !important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } input[type="password"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="text"]:focus, input[type="url"]:focus, button[type="submit"]:focus, textarea:focus { color: var(--color-comments-input-focus); border: none; background-color: var(--color-comments-input-background-focus); } .protected p { display: flex; justify-content: center; } input[type="password"] { margin: 0 5px; padding: 15px; height: 30px; width: calc(50% - 40px); } input[type="submit"] { margin: 0 5px; padding: 15px; height: 60px; width: calc(50% - 10px); font-size: 16px; } #response button { width: 100%; height: 4em; color: var(--color-comments-button); } #response button:hover, input[type="submit"]:hover { color: var(--color-comments-button-hover); background-color: var(--color-comments-button-background-hover); cursor: pointer; } #response textarea { height: 5em; } fieldset { border: 0; margin: 1em 0; padding: 0; } .grid-url, .grid-text { float: left; margin: 1em 0.5em 0 0.5em; width: calc(100% - 1em); } .grid-author, .grid-mail { float: left; margin: 1em 0.5em 0 0.5em; width: calc(50% - 1em); } .grid-submit { float: left; margin: 1em 0.5em 0 0.5em; width: calc(100% - 1em); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 960px) { #comment { padding: 0 1.75em; width: calc(100% - 3.5em); } } @media screen and (max-width: 768px) { .snapic-comment { margin: 3em 0; } #comment { padding: 0 1.5em; width: calc(100% - 3em); } .comments-wrap h3 { font-size: var(--font-size-xl); } } @media screen and (max-width: 640px) { #comment { padding: 0 1.25em; width: calc(100% - 2.5em); } } @media screen and (max-width: 480px) { .protected p { display: flex; flex-direction: column; align-items: center; } input[type="password"] { width: calc(100% - 40px); } input[type="submit"] { margin-top: 10px; width: calc(100% - 10px); } .snapic-comment { margin: 2em 0; } #comment { padding: 0 1em; width: calc(100% - 2em); } .comments-wrap h3 { font-size: var(--font-size-l); } .comment-body .comment-children ol { padding-left: 8px; } .comment-body .comment-children li { padding-left: 8px; } .grid-author, .grid-mail { width: calc(100% - 1em); } } @media screen and (max-width: 400px) { #comment { padding: 0 0.75em; width: calc(100% - 1.5em); } .comment-body .comment-children ol { padding-left: 4px; } .comment-body .comment-children li { padding-left: 4px; } }

/* ----------------------------------------------------------- comment */

#comments > .comment-list {
	margin-top: calc(1em * 5);
}

#comments .respond {
	margin-bottom: calc(5em * 5 - 2em);
}

/* comment-wrap */

.comment-list > .comment-wrap {
	margin-bottom: calc(5em * 2); /* 把不同父级 comment-parent 间隔开 */
}

.comment-children .comment-wrap {
	margin-bottom: 0; /* 清除子级下 comment-parent 的间隔 */
}

.comment-body {
	position: relative;
	padding: 1em 0 1em 48px;
	list-style: none;
}

.comment-body .comment-children {
	margin: 0;
	padding: 0;
}

.comment-body .comment-children li {
	padding-left: 10px;
	border-left: 1px solid var(--border-gery);
}

/* comment-author */

.comment-author span img,
.comment-author .noAvater {
	position: absolute;
	object-fit: contain;
	border-radius: 50%;
	vertical-align: bottom;
}

.comment-author span img {
	left: calc((48px - (24px + 0.5em * 2)) / 2);
	margin: 0.5em;
	width: 24px;
	height: 24px;
}

.comment-author .noAvater {
	display: flex;
	justify-content: center;
	align-items: center;
	left: 8px;
	width: 32px;
	height: 32px;
	font-size: var(--size-150);
	color: var(--color-9);
	background-color: var(--wrap-grey);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	cursor: default;
}

.comment-author .noAvater:hover {
	background-color: var(--wrap-grey-hover);
}

.comment-author .fn {
	font-size: var(--size-150);
	font-style: normal;
	line-height: 32px;
	color: var(--color-9);
}

.comment-author .fn a {
	font-weight: bold;
	color: var(--color-3);
}

.comment-author .fn a:hover {
	color: var(--color-cyan);
}

.comment-author .comment-info,
.comment-author .comment-meta {
	font-size: var(--size-100);
	color: var(--color-9);
	cursor: default;
}

.comment-author .comment-info .friend {
	color: var(--color-orange);
}

.comment-author .comment-awaiting-moderation {
	margin-left: 0.5em;
	font-size: var(--size-125);
	color: var(--color-black);
}

/* comment-pinchat */

.comment-content .pinchat {
	position: absolute;
	top: -1em;
	left: -1em;
}

.comment-content .pinchat .pin-icon {
	display: block;
	width: 3em;
	height: 3em;
	background-size: 1.5em;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url('../img/icon/pinchat.svg');
}

/* comment-content */

.comment-content {
	display: inline-block;
	position: relative;
	padding: 1em 2em;
	margin-top: 0.5em;
	margin-right: 2em;
	font-size: var(--size-150);
	color: var(--color-6);
	word-break: break-all;
	border-radius: 0.5em 3em 3em 3em;
	background-color: var(--wrap-grey);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.comment-content:hover {
	background-color: var(--wrap-grey-hover);
}

.comment-content p {
	margin: 1em 0;
	line-height: 1.2;
}

.comment-content .at a {
	display: inline-block;
	margin: 1em 0;
	font-size: var(--size-875);
	color: var(--color-c);
	text-align: justify;
}

.comment-content .at a:hover {
	color: var(--color-9);
}

.comment-content .at::after {
	width: auto;
	max-width: 50vw;
}

/* comment-navigator */

#comments .comment-pagenav {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 1em;
	position: relative;
	margin-left: auto;
	max-width: 15em;
}

#comments .comment-pagenav .page-navigator {
	flex-shrink: 0;
	gap: 5em;
	width: 100%;
}

#comments .comment-pagenav .page-navigator li.prev {
	margin-right: auto;
}

#comments .comment-pagenav .page-navigator li.next {
	margin-left: auto;
}

#comments .comment-pagenav .pageNavOf {
	position: absolute;
}

/* comment-form */

#comments .respond {
	margin-top: 3em;
}

.comment-list .comment-reply {
	display: inline-block;
	position: absolute;
	margin-top: 0.5em;
	margin-left: -3.5em;
}

.comment-list .reply-icon {
	display: block;
	width: 3em;
	height: 3em;
	background-size: 1.5em;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url('../img/icon/reply.svg');
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	opacity: .3;
}

.comment-list .reply-icon:hover {
	opacity: 1;
}

#comment-form .cancelreply a,
#comment-form .comment-logout * {
	font-size: var(--size-125);
	color: var(--color-cyan);
}

#comment-form .comment-logout span {
	color: var(--color-9);
}

#comment-form .cancelreply a:hover,
#comment-form .comment-logout a:hover {
	color: var(--color-3);
}

#comment-form fieldset {
	border: 0;
}

#comment-form .comment-submit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 1em;
}

#comment-form .form-full {
	width: 100%;
}

#comment-form .form-item {
	width: calc(25% - 0.5em);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="submit"],
button[type="submit"],
textarea {
	font-family: var(--font-family);
	margin: 0.5em 0;
	padding: 1em;
	height: 4em;
	font-size: var(--size-150);
	color: var(--color-6);
	border: 0;
	border-radius: 0.5em;
	background-color: var(--button-grey);
	outline: none !important;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="submit"]:focus,
button[type="submit"]:focus,
textarea:focus {
	color: var(--color-3);
	border: 1px dashed var(--border-color);
	background-color: var(--button-grey-hover);
}

#comment-form .textarea {
	height: 7.5em;
}

#comment-form .submit {
	margin-left: auto;
	color: var(--color-3);
	cursor: pointer;
}

#comment-form .submit:hover {
	color: var(--color-white);
	background-color: var(--button-black);
}

/* comment-other */

/* #comments .closing {
	margin-top: 3em;
	font-size: var(--size-125);
	font-weight: normal;
	color: var(--color-9);
	text-align: center;
	clear: both;
} */



/* ------------------------------------------------------------ mobile */

@media (max-width: 1920px) {

	nav {
		max-width: 25vw;
	}

	#target-article #guide,
	#post .music,
	#gotop {
		right: calc(2em * 2 - 5em / 2);
	}

}

@media (max-width: 1440px) {

	#header .leadstory .title {
		font-size: var(--size-125);
	}

	article #target-article {
		padding: 0 1.75em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #related,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1.75em;
	}

	#target-article #extend .child > * {
		width: calc(25% - 0.255em * 2);
	}

	nav {
		max-width: 20vw;
	}

	#nav {
		padding: 0 1.75em;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1.75em;
		width: calc(100% / 3 - 1.75em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1.75em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 5.25em;
	}

	img.lazy.grid-img,
	.grid-thumb,
	.grid-mark > span,
	.masonry .grid-item:not(.pagenav) a::before,
	.album .grid-item a::before,
	.grid-soundstory,
	[id^="gallery-"] [id^="grid-"] .escaped	{
		border-radius: 1em;
	}

	.pagenav {
		margin: calc(5em * 3.75) 1.75em 0 1.75em !important;
	}


	#comments {
		margin-bottom: calc(5em * 5 - 1.75em);
	}

	.album {
		margin-top: calc(5em * 5 - 1.75em);
	}

	#seek .close {
		right: 3.5em;
	}

	#seek > div:not(.control) {
		padding: 0 1.75em;
	}

	#target-article #guide,
	#post .music,
	#gotop {
		right: calc(1.75em * 2 - 5em / 2);
	}

}

@media (max-width: 960px) {

	#header .leadstory .title {
		font-size: var(--size-125);
	}

	#header .leadstory sup {
		font-size: var(--size-125);
	}

	article #target-article {
		padding: 0 1.5em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #related,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1.5em;
	}

	#target-article #post .head {
		margin-top: 5em;
	}

	#target-article #post .content {
		margin: 3em 0;
	}

	#post .music {
		bottom: calc(3em + (5em + 1em) * 2);
	}

	#target-article #passage {
		margin-bottom: 1em;
	}

	#target-article #filing {
		pointer-events: none;
	}

	#logo {
		display: flex;
	}

	nav {
		width: 0;
		max-width: calc(33.33333vw - 1.5em / 3);
		-webkit-transition: transform 0.3s ease;
		transition: transform 0.3s ease;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		visibility: hidden;
		overflow-x: hidden;
	}

	#nav {
		padding: 0 1.5em;
		text-align: center;
	}

	#nav > div {
		width: 100%;
	}

	#nav .blog {
		margin-bottom: 5em;
	}

	#nav .menu ul {
		gap: 2em;
	}

	#nav .menu ul li a:not(.history a) {
		font-size: var(--size-175);
	}

	#so .search-icon {
		margin: 0 auto;
		background-position: 50% 50%;
	}

	#nav .menu {
		margin-top: 0;
		margin-bottom: auto;
		visibility: visible;
		opacity: 1;
	}

	#nav .info {
		align-items: center;
		margin-bottom: calc(3em + var(--mobile-bottom));
	}

	#menu {
		display: flex;
	}

	.masonry {
		margin: 3.75em auto 3em auto;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1.5em;
		width: calc(100% / 3 - 1.5em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1.5em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 2em;
	}

	img.lazy.grid-img,
	.grid-thumb,
	.grid-mark > span,
	.masonry .grid-item:not(.pagenav) a::before,
	.album .grid-item a::before,
	.grid-soundstory,
	[id^="gallery-"] [id^="grid-"] .escaped	{
		border-radius: 0.75em;
		width: 100%;
	}

	.thumb-icon,
	.music-icon,
	.video-icon {
		width: 1.5em;
		height: 1.5em;
	}

	.pagenav {
		margin: calc(5em * 2) 1.5em 0 1.5em !important;
	}

	#comments {
		margin-top: calc(5em * 2.5);
		margin-bottom: calc(5em * 2.5 - 1.5em);
	}

	.album {
		margin-top: calc(5em * 2.5 - 1.5em);
	}

	#seek > div:not(.control) {
		padding: 0 1.5em;
	}

	#target-article #guide,
	#post .music,
	#gotop {
		right: calc(1.5em * 2 - 5em / 2);
	}

}

@media (max-width: 768px) {

	#header .leadstory .title {
		font-size: var(--size-100);
	}

	article #target-article {
		padding: 0 1.25em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #related,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1.25em;
	}

	#target-article #extend .place > span {
		width: calc(100% / 3 - 0.5em * 2);
	}

	#target-article #extend .child > * {
		width: calc(33.33333% - 0.255em * 2);
	}

	nav {
		max-width: calc(50vw - 1.25em);
	}

	#nav {
		padding: 0 1.25em;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1.25em;
		width: calc(100% / 2 - 1.25em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1.25em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 2.75em;
	}

	.pagenav {
		margin: calc(5em * 2) 1.25em 0 1.25em !important;
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 1.25em);
	}

	#comment-form .form-item {
		width: calc(50% - 0.5em);
	}

	.album {
		margin-top: calc(5em * 2.5 - 1.25em);
	}

	#logo {
		left: calc(1.25em * 3 - 4em / 2);
	}

	#seek > div:not(.control) {
		padding: 0 1.25em;
	}

	#menu,
	#target-article #guide,
	#post .music,
	#gotop {
		right: calc(1.25em * 2);
	}

}

@media (max-width: 640px) {

	[id*="header-"] {
		height: calc(100vh - var(--mobile-bottom));
		min-height: 480px;
		max-height: 1200px;
	}

	#header .leadstory .title {
		font-size: var(--size-875);
	}

	article #target-article {
		padding: 0 1em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #related,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1em;
	}

	#target-article #extend .donate,
	#target-article #extend .friend,
	#target-article #extend .exchange {
		flex-direction: column;
		gap: 0;
	}

	#target-article #extend .parent {
		flex-direction: row;
	}

	nav {
		max-width: calc(50vw - 1em);
	}

	#nav {
		padding: 0 1em;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1em;
		width: calc(100% / 2 - 1em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 3.25em;
	}

	.pagenav {
		margin: calc(5em * 2) 1em 0 1em !important;
	}

	#target-article #post .donate {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	#target-article #post .donate .glightbox {
		margin-left: 0.75em;
	}

	.gslide-inline #coffee {
		max-height: 300px;
	}
	
	.gslide-inline #coffee .pay {
		max-width: 20em;
	}	

	#related .grid-item {
		width: calc(50% - 1em);
	}

	#related .grid-more {
		font-size: var(--size-625);
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 1em);
	}

	.album {
		margin-top: calc(5em * 2.5 - 1em);
	}

	#logo {
		left: calc(1em * 3 - 4em / 2);
	}

	#seek .parent {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	#seek > div:not(.control) {
		padding: 0 1em;
	}

	#menu,
	#target-article #guide,
	#post .music,
	#gotop {
		right: calc(1em * 2);
	}

	[id^="gallery-"] [id^="grid-"] {
		border-radius: 1em;
	}

}

@media (max-width: 480px) {

	#header .leadstory .title {
		font-size: var(--size-625);
	}

	article #target-article {
		padding: 0 0.75em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #related,
	#target-article #passage,
	#target-article #filing {
		padding: 0 0.75em;
	}

	#target-article #extend .child > * {
		width: calc(50% - 0.255em * 2);
	}

	nav {
		max-width: calc(50vw - 0.75em);
	}

	#nav {
		padding: 0 0.75em;
	}

	.masonry {
		margin: 4em auto 3em auto;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 0.75em;
		width: calc(100% / 2 - 0.75em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 0.75em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 3.75em;
	}

	.pagenav {
		margin: calc(5em * 2) 0.75em 0 0.75em !important;
	}

	.gslide-inline #coffee {
		max-height: 250px;
	}
	
	.gslide-inline #coffee .pay {
		max-width: 15em;
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 0.75em);
	}

	#comment-form .form-item {
		width: 100%;
	}

	.album {
		margin-top: calc(5em * 2.5 - 0.75em);
	}

	#logo {
		left: calc(0.75em * 3);
	}

	#seek > div:not(.control) {
		padding: 0 0.75em;
	}

	#menu,
	#target-article #guide,
	#post .music,
	#gotop {
		right: calc(0.75em * 2);
	}

}

@media (max-width: 400px) {

	#header .leadstory .title {
		font-size: var(--size-625);
	}

	article #target-article {
		padding: 0 0.5em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #related,
	#target-article #passage,
	#target-article #filing {
		padding: 0 0.5em;
	}

	nav {
		max-width: calc(50vw - 0.5em);
	}

	#nav {
		padding: 0 0.5em;
	}

	.masonry {
		margin: 0.5em auto 3em auto;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 0.5em;
		width: calc(100% / 2 - 0.5em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 0.5em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 4em;
	}

	.pagenav {
		margin: calc(5em * 2) 0.5em 0 0.5em !important;
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 0.5em);
	}

	.album {
		margin-top: calc(5em * 2.5 - 0.5em);
	}

	#logo {
		left: calc(0.5em * 3);
	}

	#seek > div:not(.control) {
		padding: 0 0.5em;
	}

	[id^="gallery-"] [id^="grid-"]:not(:first-child) {
		flex: 1 1 calc((100% - 1em) / 2); /* 在小屏幕上每行最多两个元素 */
		padding-top: calc((100% - 1em) / 2); /* 创建 1:1 的宽高比 */
	}

	#menu,
	#target-article #guide,
	#post .music,
	#gotop {
		right: calc(0.5em * 2);
	}

}