style.css

/*
Theme Name: NexT by InsertSweat
Theme URI: http://blog.insertsweat.cn/2017/02/next-for-wordpress-3-0/
Author: InsertSweat
Author URI: http://insertsweat.cn
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*样式重置*/
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  position: relative;
  font-family:  'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 2;
  color: #555;
  background: #F5F7F9;
}
h1,h2,h3,ul,li,a,i{
	padding: 0;
	margin:0;
	font-weight: normal;
	text-decoration: none;
	color: #555
}
ul li{
	list-style: none;
}
::selection{
	color: #fff;
	background: #555;
}
/*样式组件*/
.block-center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.clearfix:before,
.clearfix:after{
	content: "";
	display: table;

}
.clearfix:after{
	clear: both;
}
hr{
	margin: 40px 0;
    height: 3px;
    border: none;
    background-color: #ddd;
    background-image: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 4px, transparent 8px);
}
/*头部*/

header{
	height: 3px;
	background: #222
}

/* animate*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInDownS {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -3em, 0);
    transform: translate3d(0, -3em, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownS {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -3em, 0);
    transform: translate3d(0, -3em, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}.fadeInDownS {
  -webkit-animation-name: fadeInDownS;
  animation-name: fadeInDownS;
	-webkit-animation-delay: .8s;
  -o-animation-delay: .8s;
  animation-delay: .8s;
}

/*main*/

.main{
	position: relative;
	width: 100%;
	max-width:960px;
}

.container img{
	width:95% ;
	height: auto
}
.sidebar{
	float: left;
	width: 240px;
	display: inline-block;
}
.sidebar .title{
	position: relative;
	background: #222;
	text-align: center;
	padding: 1em 0;
}
.sidebar .title h1{
	display: inline-block;
	color: #fff;
	font-size: 1.5em
}
.toggle-nav {
	position: absolute;
	top: 0;
	left: 2em;
	padding: 23px 0;
	display: none;
}
.toggle-nav button{
	left: 2em;
	background: transparent;
	border:none;
	outline: none;
}
.toggle-nav .btn-bar{
	display:block;
	height: 2px;
	width:1.7em;
	background: #fff;
	margin:4px 0;
	border-radius: 2px;
}
.sidebar nav{
	padding: 14px 0;
	background: #fff;
}
.sidebar .title{
	height: 70px;
	box-sizing: border-box;
}
.sidebar nav li a{
	display: block;
	position: relative;
	padding:.5em 1em;
	height: 39px;
	box-sizing: border-box;
	font-size:.9em;
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
	-webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
        -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.sidebar nav li a .fa{
	width: 2em
}
.sidebar nav li a:hover,.sidebar nav .current_pagination_item{
	background: #F3F3F3
}
.sidebar nav .current_pagination_item a:after{
	content:"";
	display: block;
	position: absolute;
	right: 1em;
	top:16px;
	width: 6px;
	height: 6px;
	border-radius:50%;
	background:#ABABAB;
}

.sidebar-inner{
	padding:2em 1em;
	margin-top: 10px;
	background: #fff;
}
.sidebar-inner .avatar{
	width:100%;
}
.sidebar-inner .avatar img{
	width:60%;
	border:1px solid #eee;
}
.sidebar-inner .avatar .author{
	font-size: 1.2em;
	font-weight: bold;
	color:#222;
}
.sidebar-inner .tab{
	width: 100%;
	text-align: center;
}
.tab li{
	position: relative;
	display: inline-block;
	padding: 0 1em;
}
.tab li + li:before{
	position: absolute;
	left: 0;
	top:10px;
	content: "";
	display: inline-block;
	width: 1px;
	height:40px;
	background: #eee;
}
.tab li span{
	text-align: center;
	display: block;
}
.tab li span:first-child{
	font-size:16px;
	font-weight:600;
}
.sidebar-inner .rss{
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	text-align: center;
}
.rss .fa,.rss a{
	color:#FF8800
}
.menu-social-container{
	padding: 1em 0;
	border-bottom:1px dotted #ccc;
}
.menu-social-container li{
	display: inline-block;
	width:48%;
}
.sidebar-inner  .friend-link{
	padding: .5em 0;
}
 .friend-link h2{
	font-size: 1em;
	font-weight: bold
}
.friend-link li{
	display: inline-block;
	border-bottom: 1px solid #555
}
/*container*/
.container {
	float: right;
	width: 700px;
	padding: 3em;
	box-sizing:border-box;
	display: inline-block;
	background: #fff
}

/*article*/

article{
	padding: 3em 0;

  -webkit-animation-name: fadeInDownS;
  animation-name: fadeInDownS;
	-webkit-animation-delay: .8s;
  -o-animation-delay: .8s;
  animation-delay: .8s;
      -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
article .title{
	text-align: center;
	padding-bottom: 3em;

}
.title .tag .item{
	color: #999;
	font-size: .8em;
	padding:0  5px;

}
.title .tag a{
	border-bottom: 1px solid #555
}
.title .tag .item + .item{
	border-left: 1px solid #ccc;
}
article .read-more{
	text-align: center;
}
.read-more a{
	padding: .2em  1.5em;
	border: 2px solid #222;
	transition: all .3s;
}
.read-more a:hover{
	background: #222;
	color: #fff;
}
/*文章显示*/
article .title_link{
	border-bottom: none;
}
article .title h1{
    font-size: 26px;
    text-align: center;
    word-break: break-word;
    display: inline-block;
}
article .title h1:after{
	content: "";
	display: block;
	height: 2px;
	background: #555;
	margin-top: -5px;
	margin-bottom:10px;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
article .title h1:hover:after{
	opacity: 1;
	visibility:inherit;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}
article .content{
	font-family: 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: 16px;
  	word-break: break-all;
}
article .content h2{
    font-size: 21px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-family: 'Roboto Slab', 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
}
article .content h3,
article .content h4,
article .content h5,
article .content h6{
	padding-top: 10px;
	font-weight: bold;
    line-height: 1.5;
    font-size: 18px;
    font-family: 'Roboto Slab', 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
}
article a{
	    border-bottom: 1px solid #555;
}
.hljs{
	background: #f7f7f7 ;
	padding: 0;
	overflow-x: initial;
}
pre, code {
    font-family: 'PT Mono', consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
	font-size: 16px;
	background: #f7f7f7 ;
}
code{
	padding:2px 5px;
	background: #F1F0F0;
}
pre code{
	background: #f7f7f7 ;
}
pre{
	position: relative;
	padding-left:40px;
	overflow-y:hidden;
}
pre:before{	
	content:"1\A 2\A 3\A 4\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 66\A 67\A 68\A 69\A 70\A 81\A 82\A 83\A 84\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 96\A 97\A 98\A 99\A 100\A 101\A 102\A 103\A 104\A 106\A 107\A 108\A 109\A 110\A";
	display: inline-block;
	text-align: right;
	position: absolute;
	line-height: 32px;
	left:0;
	background: #eff2f3;
	color: #869194;
	text-align: center;
	width: 28px;
	word-wrap: break-word;
}
/*pagination*/
.pagination{
	margin-top:3em;
	border-top: 1px solid #eee;
	text-align: center;
}
.pagination li{
	display: inline-block;
	padding: 0 .5em;
}
.pagination a,.pagination span{
	position: relative;
	display: inline-block;
	padding: .2em .8em;
}
.pagination a:before{
	content: "";
	width: 100%;
	height: 1px;
	background: #555;
	display: block;
	position: absolute;
	top:-1px;
	left: 0;
	opacity: 0;
	transition: all .5s
}
.pagination a:hover:before{
	content: "";
	width: 100%;
	height: 1px;
	background: #555;
	display: block;
	position: absolute;
	top: -1px;
	left: 0;
	opacity: 1
}
.pagination span.current{
	background: #ccc;
	color: #fff
}
.pagination span.current:before,
.pagination span.current:hover:before{
	visibility: hidden;
}

/*archives*/

.archives li{
	position: relative;
	padding-top: 2em;
	padding-left: .5em;
	border-left: 4px solid #eee;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.archives li:hover{
	border-color:#555 #eee;
}
.archives li:hover:before{
	background: #555
}
.archives li:before{
	position: absolute;
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	left: -5px;
	top:3em;
	border-radius: 5px;
	background: #ccc;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.archives li .time{
	font-size: .9em;
	padding: 0 .5em
}
.archives li a{
	font-size: 1em;
}
.archives li.footer{
	border-bottom:none;
}
.archives li.footer:before{
	display: none;
}
.archives ul li:first-child{
	border-bottom:none;
	font-size: 1.5em;
	font-weight: 600
}
.archives ul li:first-child:before{
	width: 8px;
	height: 8px;
	left: -6.5px;
	top:2.8em;
	background: #bbb
}
.archives .head li:first-child{
	font-size: 1em;
}
.archives .head li:first-child:before{
	width: 10px;
	height: 10px;
	left: -8px;
	background: #777;
}

/*tags*/
.tags{
	padding: 50px 0;
	min-height: 500px;
}
.tags a{
	display: inline-block;
	padding:2px 0;
	margin:0 10px;
	color: #bbb;
	border-bottom: 1px solid #999
}
.tags a:hover{
	border-bottom: 1px solid #222
}

/*post nav */
.post-nav {
	margin-top: 2em;
	border-top: 1px solid #ddd
}
.post-nav .fa{
	font-size: .8em;
}
.post-nav .prev{
	float:left;
}
.post-nav .next{
	float: right;
}

/*backtop*/
#backTop{
	position: fixed;
	right:50px;
	bottom:50px;
	width: 2em;
	height: 2em;
	background: #666;
	text-align: center;
	transition: .2s ease-in-out;
}
#backTop.hide{
	bottom: -2em;
}
#backTop .fa{
	color:#eee;

}

/*授权*/
.post-copyright{
    padding: 0.5em 1em;
    border-left: 3px solid #ff1700;
    background-color: #f9f9f9;
    margin-bottom: 1rem;
	word-break: break-all
}
.post-copyright a{
    border-bottom: 1px solid #555;
}

/*post-tags*/
.post-tags{
    text-align: center;
}
.post-tags a{
    display: inline-block;
    margin-right: 10px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #999;
    word-wrap: break-word;
}
.post-tags a:before{
    content: '#';
}

/*comments*/
.comment{
    list-style: none;
    padding: 1rem 10px;
}
.comment-author{
    float: left;
}
.comment-author img{
    vertical-align: middle;
    width: 42px;
    height: 42px;
    border-radius: 42px;
    border: 2px solid #e4e4e4;
}
.children .comment-author img{
    width: 2rem;
    height: 2rem;
}
.children .comment-body cite{
    float: left;
    color: #000;
    margin-right: 10px;
}
.children .comment-body cite:after{
    content: ':';
}
.children {
    padding-left: 50px;
}
.children .comment{
    padding: 2px 0;
    clear: both;
}
.children .comment_content p{
    float: left;
    display: inline-block;
    margin: 0;
}
.comment-body{
    position: relative;
}
.comment_content .reply{
    padding-top: 5px;
    border-top: 1px solid #e4e4e4;
    font-size: 12px;
    color: #9e9e9e;
    clear: both;
}
.children .comment_content .reply{
    border-top: none;
    padding-top: 0;
}
.comment_content .commentmetadata{
    float: left;
}
.comment_content{
    padding-left: 50px;
}
.comment_content p{
    margin-top: 0;
}
.comment_content .reply a{
    margin-left: 10px;
}
.comment-respond {
    margin: 1rem 10px;
    border-top: 1px solid #555555;
    padding: 1rem 0;
}
.comment-respond label{
    display: block;
}
.comment-respond textarea{
    outline: none;
    border: 1px solid #555;
    width: 100%;
    padding: 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.comment-respond input{
    line-height: 2rem;
    outline: none;
    padding: 0 10px;
    border: 1px solid #555;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.comments-pagination {
    border-top: none;
    margin-top: 0;
}
.form-submit .submit{
    border: 1px solid #555;
    background: #fff;
    color: #555;
    transition: .3s;
    padding: 0 20px;
    margin-top: 1rem;
}
.form-submit .submit:hover{
    background: #555;
    color: #fff;
}
/*footer*/
footer{
	max-width: 700px;
    padding-left: 260px;
    padding-bottom: 20px;
    padding-top: 50px;
    text-align: center;
    margin: 0 auto;
	color: #999;
}
footer .fa-heart{
	color: #999;
	padding: 0 5px;
}
footer a{
	color: #555;
	text-decoration: underline;
}

@media (max-width: 991px){
	.toggle-nav {
		display: block
	}
	.sidebar{
		width: 100%;
	}
	.sidebar-inner{
		display: none;
	}
	.sidebar nav{
		transition: all .3s ease-out;
		height: 0;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.sidebar nav.show{
		padding: 1em 0
	}

	.container{
		width: 100%;
	}
	#backTop{
		right: 20px;
	}
	footer{
		width: 100%;
		padding:30px 0;
	}
}

@media (max-width: 560px) {
    .comment{
        padding: 1rem 0;
    }
    .children{
        padding-left: 0;
    }

    .comment-respond input{
        width: 100%;
    }
    .form-submit .submit{
        background: #000;
        color: #fff;
    }
}