记录一下自己在使用 Kratos-Rebirth 过程中的一些样式微调。
1. 部分文本的修改
1.1 主页标题
在主题目录中的 source/css/kratosr.min.css 文件（之后也是在这个文件）中找到 .kratos-cover .desc h2，改成以下内容：
1 | .kratos-cover .desc h2{color:#fff;display:inline-block;font-size:80px;font-family:Garamond;font-weight:800;text-shadow: 0 0 0.5em #fc149b, 0 0 0.2em #5c5c5c;margin-bottom:10px;text-transform:none} |
1.2 主页副标题
找到 .kratos-cover .desc p,.kratos-cover .desc span，改成以下内容：
1 | .kratos-cover .desc p,.kratos-cover .desc span{color:#fff;display:inline-block;font-size:36px;font-family:Consolas;text-shadow: 0 0 0.5em #085bb4, 0 0 0.2em #5c5c5c;letter-spacing:1px;margin-bottom:30px} |
1.3 主页文章标题
找到 .kratos-entry-header a,.kratos-entry-header span，改成以下内容：
1 | .kratos-entry-header a,.kratos-entry-header span{color:#000;font-family:KaiTi;} |
1.4 进入文章页面时的标题
找到 .kratos-entry-title，改成以下内容：
1 | .kratos-entry-title{font-size:30px;margin:0 0 15px;font-family:KaiTi;} |
2. 内容宽度
2.1 主体宽度
主体宽度是指文章区域与右侧目录标签区域整体的宽度，找到 @media (min-width:1200px)，其后的 .container{width:xx} 即为主体部分宽度，改成以下内容：
1 | @media (min-width:1320px){.container{width:1300px}.visible-lg{display:block}.hidden-lg{display:none}} |
找到 @media (min-width:992px)，改成以下内容：
1 | @media (min-width:1078px){.container{width:1060px}[class*=col-md-]{float:left}.col-md-1{width:8.33333333%}.col-md-2{width:16.66666667%}.col-md-3{width:25%}.col-md-4{width:33.33333333%}.col-md-5{width:41.66666667%}.col-md-6{width:50%}.col-md-7{width:58.33333333%}.col-md-8{width:66.66666667%}.col-md-9{width:75%}.col-md-10{width:83.33333333%}.col-md-11{width:91.66666667%}.col-md-12{width:100%}.page404 .errtxt{margin-top:15%}.page404 .errtxt h5,.page404 .errtxt p{margin-top:30px}} |
找到 @media (min-width:992px) and (max-width:1199px)，改成以下内容：
1 | @media (min-width:1078px) and (max-width:1319px) |
找到 @media (min-width:768px) and (max-width:991px)，改成以下内容：
1 | @media (min-width:768px) and (max-width:1077px) |
2.2 文章与目录区域宽度占比
可以看到之前在 @media (min-width:992px) 中有 col-md-x 的类，其中 col-md-4 是右侧目录区域宽度占比，col-md-8 是文章区域宽度占比，在页面宽度超过 1320px 后我们将文章区域的宽度占比从66%改为70%：
1 | @media (min-width:1320px){.container{width:1300px}.col-md-4{width:30%}.col-md-8{width:70%}.visible-lg{display:block}.hidden-lg{display:none}} |
3. 导航栏
3.1 导航栏选项宽度固定
找到 #kratos-menu-wrap .sf-menu a，将导航栏中的选项卡宽度固定，并让文字居中：
1 | #kratos-menu-wrap .sf-menu a{border:none;color:#fff;display:block;font-size:15px;font-weight:400;padding:7px 14px;position:relative;width:135px;text-align:center;} |
3.2 下拉子菜单偏移位置修改
找到 #kratos-desktop-topnav .sf-menu>li>ul.sub-menu 将下拉菜单的偏移量 left:-18px; 删去：
1 | #kratos-desktop-topnav .sf-menu>li>ul.sub-menu{background:hsla(0,0%,100%,.933);border-radius:5px;-webkit-box-shadow:0 5px 15px rgba(0,0,0,.15);box-shadow:0 5px 15px rgba(0,0,0,.15);margin-top:6px;opacity:0;padding:10px 5px;position:absolute;top:calc(100% + 6px);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;visibility:hidden;width:135px} |
3.3 下拉子菜单文字宽度
找到 #kratos-desktop-topnav .sf-menu>li>ul.sub-menu a，改成以下内容：
1 | #kratos-desktop-topnav .sf-menu>li>ul.sub-menu a{color:#848484;letter-spacing:0;line-height:20px;width:100%;padding:7px 2px} |
4. 代码块
在主题目录中的 source/css/highlight/light.min.css 文件中找到 figure.highlight{，将代码块顶部横条部分背景改成以下内容：
1 | background:#ececec; |
找到 figure.highlight .code{，将代码块内容部分背景改成以下内容：
1 | background-color:#f3f3f3; |
找到 figure.highlight .gutter pre，将代码块左侧代码行部分背景改成以下内容：
1 | background-color:#ecf0f1; |