2020/05/25 - 博客装修

昨天我将博客装修了一下，这个博客原先一直使用的是Scott Emmons写的主题，虽然有点不太喜欢，但是一直没有改动，除了没有舍得抽出时间，还有我审美太差怕越改越坏的缘故。不过昨天看到Mercury Reader插件渲染的内容，感觉很不错，突然兴起了装修一下博客的想法。

底部固定

常见的方法是将footer部分设置为绝对位置，然后将bottom属性设置为0。这个博客原先采用的就是这种方式。然而这种方式由于底部固定不动，会导致视野变窄，尤其是在屏幕小的手机上，效果不好。以前知道另外一种footer高度固定，但是margin负值的方式，不过这种方式设置稍显复杂，不容易记住。检索了一遍，在依义不依语的博客发现了，代码如下：

<html>
  <head>
    <style type="text/css">
      html,body{height:100%;margin:0;padding:0;}

      .container{min-height:100%;}
      .header{background-color: #ffe4c4;}
      /* main的padding-bottom值要等于或大于footer的height值 */
      .main{padding-bottom:100px;background-color: #bdb76b;}
      /* margin-top（负值的）高度等于footer的height值 */
      .footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}
    </style>
  </head>


  <body>
    <div class="container">
        <div class="header">header</div>
        <div class="main">main content</div>
    </div>
    <div class="footer">footer</div>
</html>

注明：这里的所有的css定位代码都是要注意必不可少的。

移除sidebar部分

因为这个博客主要就是自己看看，感觉sidebar似乎也没有什么用，因此在default layout的基础上，将sidebar的代码删除，然后将container里边的栅格设置为12，但是感觉这样container在屏幕较大的电脑上显示太宽了，因此加了一个最大宽度限制。

.container{
    max-width: 840px;
}

设置body背景和日志背景

原先的主题是背景为白色，内容为淡灰色，现在参考Mercury Reader插件，颜色的设置正好相反了。

body{
    background-color: #e9e9e9 !important;
}
article{
    background-color: #f8f8f8 !important;
    border: 1px solid #dbdbdb !important;
}

日志内边缘宽度

同时，将日志的内边缘宽度设置更大，但是由于手机的宽度本身很少，太大的margin会导致文本宽度太小，也不太好，因此设置了media查询属性。

<!-- 手机 -->
@media screen and (max-width: 750px) {
}
<!-- 电脑 -->
@media screen and (min-width: 750px) {
}

日志的字体

首先是将各级标题字体大小限制取消，然后将正文字体的大小设置为16px，并将正文的字体设置如下

body{
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,sans-serif;
}

其他的一些杂项就是设置图片的margin，设置段落的margin等等，让整体的内容显得更加舒适一些。

博客截图