/**
 * 模板样式表
 */

/* 全局样式
---------------------------------------------------*/
/* 禁止页面溢出出现滚动条 */
:root {
	overflow-x: hidden
}
/* 一些变量 */
* {
	--marRadius: 8px;          /* 卡片圆角 */
	--conBgcolor: #ffffff;   /* 导航、卡片、内容的背景颜色 */
	--bodyBground: #f5f5f6;  /* 页面背景颜色 */
	--fontColor: #5a5c69;    /* 普通文本的颜色 */
	--aColor:  #333333;      /* a 标签的颜色 */
	--aHoverColor:  #f6607d; /* a 标签 hover 状态的颜色 */
	--lightColor: #929292      /* 比较浅一点的文本颜色 */
}
/* 定义所有元素的 width =（border+padding），方便后续计算 */
* { 
	box-sizing: border-box
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	font-weight: 400
}

/* 无样式列表  */
.unstyle-li {
	padding-left: 0px;
	list-style: none;
	/*margin-block: 8px;*/
	font-size: medium;
	    margin-top: 0px;
}
/* 卡片属性。页面以卡片形式组成，这里直接配置，让整个页面的卡片有统一的内边距。 */
.card-padding {
	padding: 1.25rem
}

/* 布局
   行（row）上选择flex布局，并设置允许换行（wrap）
   列（col）则需要通过根据大小屏分别配置，这是网页最重要的地方，是整个网页的骨架
---------------------------------------------------*/
.row {
	display: flex;
	flex-wrap: wrap;
}
/* 大屏下的列 */
@media (min-width:768px)  {
	.column-big {
		padding-right: 10px;
		flex: 0 0 69.666667%;
		max-width: 69.666667%
	}
	/* 工具栏列 */
	.column-small {
		font-size: medium;
		padding-left: 8px;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 30.333333%;
		max-width: 30.333333%
	}
	/* 文章发布时间和文章阅读评论数这两列的配置 */
	.info-row {
		padding: 1rem !important
	}
	.log-info {
		flex: 0 0 66.666667%;
		max-width: 66.666667%
	}
	.log-count {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
		text-align: right
	}
}
/* 小屏下的列 */
@media (max-width:767px) {

	.column-big {
		padding-right: 8px;
		padding-left: 8px;
		width:100%
	}
	/* 工具栏列 */
	.column-small {
		padding-right: 8px;
		padding-left: 8px;
		width:100%
	}
	/* 文章发布时间和文章阅读评论数两列的配置 */
	.log-info {
		flex: 0 0 60%;
		max-width: 60%
	}
	.log-count {
		white-space: nowrap;
		flex: 0 0 40%;
		max-width: 40%;
		text-align: right
	}
}

/* 最外层整体容器的响应式配置，即 container 配置
---------------------------------------------------*/
.container{
	width: 100%;
	align-items: center;/* 网页容器在整个网页中垂直居中 */
	margin-right: auto;
	margin-left: auto
}
/* container 在不同屏幕下的配置 */
@media (min-width:576px) {.container{max-width: 540px}}
@media (min-width:768px) {.container{max-width: 720px}}
@media (min-width:992px) {.container {max-width: 960px}}
@media (min-width:1201px) {.container {max-width: 1140px}}
/* 设置 container 在小型屏幕上的内外边距 ，使其更符合小型屏幕的观感体验 */
@media (min-width:768px)  {
	.container{
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto
	}
}

/* 在绝对定位情况下，主边栏的全宽(可供一些位于主边栏的难以计算宽度的对象使用)
---------------------------------------------------*/
@media (min-width:1px) {.rea-width{width: calc(100% - 18px)}}
@media (min-width:576px) {.rea-width{width: 524px}}
@media (min-width:768px) {.rea-width{width: 450px}}
@media (min-width:992px) {.rea-width{width: 609px}}
@media (min-width:1201px) {.rea-width{width: 730px}}

/* 博客页面底部（footer）没有空隙（即防止 footer 在页面中间位置出现的诡异现象）
---------------------------------------------------*/
body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.blog-header {
	flex: 0 0 auto;
}
.blog-container {
	flex: 1 0 auto;
}
.blog-footer {
	flex: 0 0 auto;
}



/* 博客头部属性的配置
----------