编辑文件 style.css

/* ------------------------------------
 * Less
 *
 * @author  极限运维
 * @link  http://www.32mb.win/
 * @update  2016-08-28
 * --------------------------------- */

/* ------------------
 * Global style
 * --------------- */
* {
	padding: 0;
	margin : 0;
	border : none;
	outline: none;
}

body {
	background-color: #FFF;
	color           : #444;
	/*font-family   :"Helvetica Neue",Helvetica,Arial,sans-serif;
	*/
	font-family     : "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", "Noto Sans CJK SC", "Source Han Sans CN", SimSun, sans-serif;
	font-size       : 81.25%;
}

a {
	color          : #dd0000;
	text-decoration: none;
}

a:hover {
	color          : #333333;
	text-decoration: underline;
	transition     : .2s esae-in-out
}

pre,
code {
	background : #F3F3F3;
	font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace;
	font-size  : .92857em;
	white-space: break-spaces;
}

div.md_content {
	padding: 5px !important;
}

p {
	padding    : .7em 0;
	line-height: 200%;
}

::-webkit-input-placeholder {
	color  : inherit;
	opacity: .5
}

::-moz-placeholder {
	color  : inherit;
	opacity: .5
}

:-ms-input-placeholder {
	color  : inherit;
	opacity: .5
}

::placeholder {
	color  : inherit;
	opacity: .5
}

::-ms-clear {
	display: none
}

code,
kbd,
pre,
samp {
	font-family: Consolas, "Ubuntu Mono", Monaco, Menlo, "Andale Mono", "Liberation Mono", Courier, monospace
}

code,
kbd,
pre {
	padding      : .2em .7em;
	font-size    : 87.5%;
	background   : #F7F7F7;
	border-radius: .2em
}

pre {
	padding: 1em 1.5em
}

pre code {
	padding   : 0;
	font-size : 114.2857%;
	background: 0 0
}

pre>:first-child {
	margin-top: 0
}

pre>:last-child {
	margin-bottom: 0
}

blockquote {
	margin      : 1em 0;
	padding-left: 1.5em;
	border-left : 4px solid #eee;
	color       : #666;
}

table {
	border: 1px solid #ddd;
	width : 100%;
}

table th,
table td {
	padding: 5px 10px;
	border : 1px solid #eee;
}

table th {
	background: #f3f3f3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.3;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
	padding           : 5px;
	border            : 1px solid #E9E9E9;
	width             : 100%;
	border-radius     : 2px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing   : border-box;
	box-sizing        : border-box;
}

textarea {
	resize: vertical;
}

.submit {
	padding         : 5px 10px;
	cursor          : pointer;
	color           : #fff;
	background-color: #dd0000;
}

/* Special link style */
.browsehappy {
	padding   : 8px 0;
	background: #FBE3E4;
	color     : #8A1F11;
	text-align: center;
}

.browsehappy a {
	color          : #8A1F11;
	text-decoration: underline;
	font-weight    : bold;
}

/* Navigation menu */
#mobnav {
	display   : block;
	font-size : 2em;
	height    : 40px;
	overflow  : hidden;
	position  : fixed;
	top       : 0;
	right     : 0;
	left      : 0;
	transition: all .2s linear;
	background: rgba(248, 80, 50, 1);
	background: -moz-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(31%, rgba(246, 41, 12, 1)), color-stop(52%, rgba(240, 47, 23, 1)), color-stop(64%, rgba(231, 56, 39, 1)), color-stop(73%, rgba(231, 56, 39, 1)), color-stop(86%, rgba(241, 111, 92, 1)), color-stop(97%, rgba(241, 111, 92, 1)), color-stop(100%, rgba(241, 111, 92, 1)));
	background: -webkit-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%);
	background: -o-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%);
	background: -ms-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%);
	background: linear-gradient(to bottom, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 31%, rgba(240, 47, 23, 1) 52%, rgba(231, 56, 39, 1) 64%, rgba(231, 56, 39, 1) 73%, rgba(241, 111, 92, 1) 86%, rgba(241, 111, 92, 1) 97%, rgba(241, 111, 92, 1) 100%);
	filter    : progid:DXImageTransform.Microsoft.gradient(startColorstr='#f85032', endColorstr='#f16f5c', GradientType=0);
}

#mobnav.show {
	margin-left: 250px;
}

#mobnav a {
	color          : #fff;
	text-decoration: none;
	cursor         : pointer;
	padding        : 5px;
}

#nav {
	overflow: hidden;
}

#site-menu {
	list-style: none;
	text-align: right;
	float     : right;
	margin-top: 6em;
}

#site-menu li {
	display: block;
}

#site-menu li a {
	display  : block;
	padding  : .7em 1em;
	color    : #000;
	font-size: 1.4em;
}

#site-menu li a.current {
	background-color: #dd0000;
	color           : #fff;
	text-decoration : none;
}

#site-menu li a.current:hover {
	transition: background-color .2s ease-in-out;
}

#site-menu li a:hover {
	background-color: #ff0000;
	text-decoration : none;
	color           : #f9f9f9;
	transition      : color .2s ease-in-out;
}

/* Search */
#search {
	position  : relative;
	margin-top: 15px;
	display   : flex;
}

#search input {
	padding-right: 30px;
}

#search button {
	position   : absolute;
	right      : 4px;
	top        : 2px;
	border     : none;
	padding    : 0;
	width      : 24px;
	height     : 24px;
	background : transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABNUlEQVRIid2VW42FMBCGPwlIQAISkICEIwEJdYCEIwEJSOCddloJSOg+7HTTvVAo2ZNNtkkTHmbm++fSAf71sdALjB4WgV0gCMwWTID2duAAjcCkQWPhTtXBN+hUaVTA5GDYoAvQOhgsmAyyb9BdVu5hFYgelpLjBp2WLgqESwAtS/SwBGiu+CSIh6VoqKWpS5mPfkWBWGy8wHi3cVlPxhJgFogOhlqAgyFlXwKE0zQPTl6mVwOOpylNg4NHLUBffPSwHhqlEbVgbgBSk+dDowBtalRNmdRvV3F90VjgeenRfPaZT9VnapqkxsNaykRtU/DyG8jPl2UXLRgLfYAmQGOh15p/27SnJSqo+/F6WBw8bkHgffwsGN2wu0DQ7znfV2lMb0FqxOT/iF8HJIhm+HwJ4E/OG7uFArUW86SLAAAAAElFTkSuQmCC) no-repeat center center;
	direction  : ltr;
	/* fix RTL language */
	text-indent: -9999em;
}

/* ------------------
 * Main
 * --------------- */
/* ------------------
 * Header
 * --------------- */
#header {
	padding   : 30px 20px;
	margin-top: 35px;
}

#header[role="post"] {
	margin-bottom: -15px;
	font-size    : 1.4em;
}

#header,
#main {
	transition: all .2s linear;
}

#main {
	margin : 0;
	padding: 0;
}

#main.show {
	margin-left: 250px !important;
}

.posts-list article {
	display    : flex;
	align-items: center;
}

.posts-list {
	display  : flex;
	flex-wrap: wrap;
}

.post {
	padding: 15px;
}

.post-container {
	width: 100%;
}

#main[role="home"] .post-container:nth-child(2n+1) .post {
	background-color: rgba(0, 0, 0, 0.033);
}

.post-time {
	margin : 7px 5px;
	display: none;
	color  : #999999;
}

.post-title {
	font-size  : 1.4em;
	display    : inline-block;
	overflow   : hidden;
	height     : 1.4em;
	line-height: 1.4em;
	width      : auto;
	margin-left: 10px;
}

.post-meta li {
	display     : inline-block;
	margin-right: 10px;
}

.post-meta {
	list-style   : none;
	text-align   : center;
	margin-bottom: 15px;
	padding      : 15px 0;
	border-color : #ccc;
	border-style : dashed;
	border-width : 1px 0;
	color        : #999999;
}

.post-content {
	font-size  : 16px;
	line-height: 240%;
}

.post-content>* {
	margin-bottom: 10px;
}

.post-content>*:last-child {
	margin-bottom: 0;
}

.post-content img {
	margin-right: 50px !important;
	max-width   : 90%;
	height      : auto;
}

.post .tags {
	clear: both;
}

.post-near {
	list-style: none;
	margin    : 30px 0;
	padding   : 0;
	color     : #999;
}

.post-near li {
	margin  : 10px 0;
	height  : 20px;
	overflow: hidden;
}

.archive-title {
	margin     : 1em 0 -1em;
	padding-top: 20px;
	color      : #999;
	font-size  : 1em;
}

.more {
	text-align: center;
}

.more a {
	border: none;
}

.protected .text {
	width: 50%;
}

/* Page nav */

.page-navigator {
	list-style: none;
	margin    : 25px 0;
	padding   : 0;
	text-align: center;
}

.page-navigator li {
	display: inline-block;
	margin : 0 4px;
}

.page-navigator a {
	display    : inline-block;
	padding    : 0 10px;
	height     : 30px;
	line-height: 30px;
}

.page-navigator a:hover {
	background     : #EEE;
	text-decoration: none;
}

.page-navigator .current a {
	color     : #444;
	background: #EEE;
}

/* ------------------
 * Comment list
 * --------------- */
.comments-title {
	margin      : 10px 0;
	padding     : 5px 0;
	font-size   : 32px;
	font-weight : 400;
	border-color: #ccc;
	border-style: dashed;
	border-width: 1px 0;
	color       : #222;
	text-align  : center;
}

.comment-list {
	list-style: none;
}

.comment-body {
	position  : relative;
	min-height: 60px;
}

.comment-main {
	margin-left: 60px;
	padding    : 10px 10px 10px 0;
}

.comment-main>p {
	display: inline;
}

.comment-list .avatar {
	float        : left;
	height       : 48px;
	width        : 48px;
	border-radius: 50%;
	margin-top   : 10px;
}

#author,
#url,
#mail {
	width        : 150px;
	height       : 38px;
	padding      : 0px 10px;
	border       : 0px none;
	box-shadow   : 0px 2px 6px rgba(0, 0, 0, 0.2);
	margin-bottom: 5px;
}

#comment-form {
	margin: 10px;
}

#textarea {
	width     : 90%;
	width     : calc(100% - 20px);
	height    : 80px;
	border    : 1px dashed #ccc;
	background: #FFF none repeat scroll 0% 0%;
	padding   : 10px;
	resize    : none;
}

.cancel-comment-reply {
	float : right;
	margin: 10px;
}

#misubmit {
	width        : 56px;
	box-shadow   : 0px 2px 6px rgba(0, 0, 0, 0.2);
	border       : 0px none;
	color        : #FFF;
	padding      : 0px;
	margin-top   : -30px;
	height       : 56px;
	float        : right;
	transition   : all 0.3s ease 0s;
	overflow     : hidden;
	background   : #dd0000 none repeat scroll 0% 0%;
	border-radius: 50%;
	position     : relative;
}

#misubmit::after {
	content  : "✚";
	font-size: 2em;
	position : relative;
}

/* ------------------
 * secondary
 * --------------- */
#secondary {
	width           : 200px;
	height          : 100%;
	float           : left;
	top             : 0;
	left            : -200px;
	position        : fixed;
	transition      : all .2s linear;
	background-color: #ccc;
	border          : 10px solid transparent;
	box-sizing      : border-box;
	overflow-x      : hidden;
}

#secondary.show {
	left : 0px;
	width: 250px;
}

/* ------------------
 * Footer 
 * --------------- */
#footer {
	line-height: 1.5;
	text-align : right;
	color      : #999;
	position   : absolute;
	bottom     : 0;
	right      : 0;
	width      : 100%;
}

#footer ul {
	list-style: none;
	padding   : 10px;
}

/* -----------------
 * Error page
 * -------------- */
.error-page {
	margin-top   : 30px;
	margin-bottom: 100px;
}

.error-search {
	float: left;
	width: 300px;
}

/* -----------------
 * Content format
 *--------------- */
.post-content,
.comment-content {
	line-height: 1.5;
	word-wrap  : break-word;
}

.post-content h2,
.comment-content h2 {
	font-size: 1.28571em;
}

.post-content img,
.comment-content img,
.post-content video,
.comment-content video {
	max-width: 100%;
}

.post-content a img,
.comment-content a img {
	background: #FFF;
	position  : relative;
	bottom    : -4px;
	/* hidden img parent link border  */
}

.post-content hr,
.comment-content hr {
	margin      : 2em auto;
	width       : 100px;
	border      : 1px solid #E9E9E9;
	border-width: 2px 0 0 0;
}

/* -----------------
 * Misc
 *--------------- */
.aligncenter,
div.aligncenter {
	display     : block;
	margin-left : auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

img.alignleft {
	margin: 0 15px 0 0;
}

img.alignright {
	margin: 0 0 0 15px;
}

/* -----------------
 * Responsive
 *--------------- */
@media (min-width: 768px) {
	#header {
		margin-top: 0;
	}

#header,
	#main {
		margin-left: 220px;
	}

#main[role="home"] .post-time {
		display: inline-block;
	}

#secondary {
		float     : none;
		left      : 0;
		background: transparent;
		box-shadow: unset;
	}

.site-search {
		margin-left: 20px;
	}

#mobnav {
		display: none;
	}
}

@media (min-width:1200px) {

#header,
	#main {
		width      : auto;
		margin-left: 250px;
	}

#main {
		margin-right: 250px;
	}

.post-container {
		width: 50%;
	}
}

@media (min-width:1920px) {
	.post-container {
		width: 33.3%;
	}
}

/*
* Hide from both screenreaders and browsers:h5bp.com/u
*/
.hidden {
	display   : none !important;
	visibility: hidden;
}

/*
* Hide only visually,but have it available for screenreaders:h5bp.com/v
*/
.sr-only {
	border  : 0;
	height  : 1px;
	margin  : -1px;
	overflow: hidden;
	padding : 0;
	position: absolute;
	width   : 1px;
}

/*
* Extends the .sr-only class to allow the element to be focusable
* when navigated to via the keyboard:h5bp.com/p
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
	clip    : auto;
	height  : auto;
	margin  : 0;
	overflow: visible;
	position: static;
	width   : auto;
}

/*
* Hide visually and from screenreaders,but maintain layout
*/
.invisible {
	visibility: hidden;
}