使用默认生成的主题,文章宽度过小,而两遍宽度过大。可以修改
themes\next\source\css_schemes\Pisces_layout.styl
中
.header{ width: 80%; } /* 80% */
.container .main-inner { width: 80%; } /* 80% */
.content-wrap { width: calc(100% - 260px); }
代码,改变大小。但加了之后,虽然能够在电脑上显示,但手机上的显示却会出问题,不能自适应。下面提供我的方法,可以直接复制粘贴我的_layout.styl配置。
.header {
position: relative;
margin: 0 auto;
//width: $main-desktop;
width: 80%;
+tablet() {
width: auto;
}
+mobile() {
width: auto;
}
}
.header-inner {
position: absolute;
top: 0;
overflow: hidden;
padding: 0;
width: 240px;
background: rgba(255,255,255,0.8);
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
+desktop-large() {
.container & { width: 240px; }
}
+tablet() {
position: relative;
width: auto;
border-radius: initial;
}
+mobile() {
position: relative;
width: auto;
border-radius: initial;
}
}
.main {
clearfix();
+tablet() {
padding-bottom: 100px;
}
+mobile() {
padding-bottom: 100px;
}
}
.container .main-inner {
//width: $main-desktop;
width: 80%;
+tablet() {
width: auto;
}
+mobile() {
width: auto;
}
}
.content-wrap {
float: right;
box-sizing: border-box;
padding: $content-desktop-padding;
//width: $content-desktop;
width: calc(100% - 260px);
background: white;
min-height: 700px;
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
+tablet() {
width: 100%;
padding: 20px;
border-radius: initial;
}
+mobile() {
width: 100%;
padding: 20px;
min-height: auto;
border-radius: initial;
}
}
.sidebar {
position: static;
float: left;
margin-top: 300px;
width: $sidebar-desktop;
background: $body-bg-color;
box-shadow: none;
+tablet() {
display: none;
}
+mobile() {
display: none;
}
}
.sidebar-toggle { display: none; }
.footer-inner {
//width: $main-desktop;
padding-left: 260px;
+tablet() {
width: auto;
padding-left: 0 !important;
padding-right: 0 !important;
}
+mobile() {
width: auto;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.sidebar-position-right {
.header-inner { right: 0; }
.content-wrap { float: left; }
.sidebar { float: right; }
.footer-inner {
padding-left: 0;
padding-right: 260px;
}
}
透明背景
内容板块透明
博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .content-wrap 标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
菜单栏背景
博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .header-inner 标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
站点概况背景
博客根目录 themes\next\source\css_schemes\Pisces_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
然后修改博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .sidebar 标签下 background: $body-bg-color修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
按钮背景
博客根目录 themes\next\source\css_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;
网友评论