专栏首页灵魂画师牧码mdnice序号自动排序之雁栖湖主题

mdnice序号自动排序之雁栖湖主题

Part1为什么主题叫做雁栖湖

这个主题之所以取名雁栖湖,是因为一篇文章:权威发布||2016年中国科学院大学大数据

1中国科学院大学

我就读于中科院计算所,所以在研一的时候统一在中国科学院大学雁栖湖校区上课,当时恰巧国科大官方微信团队的老师在找学生帮忙,我就报名了美编工作

国科大图片1

国科大图片2

2雁栖湖

雁栖湖是一个很美的地方,2014年APEC峰会就在雁栖湖畔举办

Part2我的美编生涯

3为什么做美术编辑

研一的时候,国科大官微有几个岗位,分别是主编、校对和美编,本人写稿件不太行,校对又感觉太无趣,为了提升审美能力,于是去做了美编

4排版的文章

权威发布||2016年中国科学院大学大数据这篇文章当时是我排版的,内容很好,阅读量很高,这个主题就是模仿这个而做的

故而取名为雁栖湖主题 鉴于今天是愚人节,该主题明天发布 (是真的实现了!!!)

Part3主题代码

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
#nice {
  counter-reset: counterh1 counterh2 counterh3;
}

/* 段落,下方未标注标签参数均同此处
 * 上边距 margin-top: 5px;
 * 下边距 margin-bottom: 5px;
 * 行高 line-height: 26px;
 * 词间距 word-spacing: 3px;
 * 字间距 letter-spacing: 3px;
 * 对齐 text-align: left;
 * 颜色 color: #3e3e3e;
 * 字体大小 font-size: 16px;
 * 首行缩进 text-indent: 2em;
 */
#nice p {
}

/* 一级标题 */
#nice h1 {
  line-height: 28px;
  border-bottom: 1px solid rgb(37,132,181);
}

#nice h1:before {
  background: rgb(37,132,181);
  color: white;
  counter-increment: counterh1;
  content: 'Part'counter(counterh1); 
  padding: 2px 8px;
}

/* 一级标题内容 */
#nice h1 .content {
  color: rgb(37,132,181);
  margin-left: 8px;
  font-size: 20px;
}

/* 一级标题前缀 */
#nice h1 .prefix {
}

/* 一级标题后缀 */
#nice h1 .suffix {
}

/* 二级标题 */
#nice h2 {
}

/* 二级标题内容 */
#nice h2 .content {
  font-size: 18px;
  border-bottom: 4px solid rgb(37,132,181);
  padding: 2px 4px;
  color: rgb(37,132,181);
}

/* 二级标题前缀 */
#nice h2 .prefix {
  display: inline-block;
}

#nice h2 .prefix:before {
  counter-increment: counterh2;
  content: counter(counterh2); 
  color:rgb(159,205,208);
  border-bottom: 4px solid rgb(159,205,208);
  font-size: 18px;
  padding: 2px 4px;
}

/* 二级标题后缀 */
#nice h2 .suffix {
}

/* 三级标题 */
#nice h3 {
}

/* 三级标题内容 */
#nice h3 .content {
  font-size: 16px;
  border-bottom: 1px solid rgb(37,132,181);
  padding: 2px 10px;
  color: rgb(37,132,181);
}

/* 三级标题前缀 */
#nice h3 .prefix {
  display:inline-block;
  background:linear-gradient(45deg, transparent 48%, rgb(37,132,181) 48%, 
            rgb(37,132,181) 52%, transparent 52%);
  width:24px;
  height:24px;
  margin-bottom: -7px;
}

/* 三级标题后缀 */
#nice h3 .suffix {
}

/* 无序列表整体样式
 * list-style-type: square|circle|disc;
 */
#nice ul {
}

/* 有序列表整体样式
 * list-style-type: upper-roman|lower-greek|lower-alpha;
 */
#nice ol {
}

/* 列表内容,不要设置li
 */
#nice li section {
}

/* 一级引用
 * 左边缘颜色 border-left-color: black;
 * 背景色 background: gray;
 */
#nice .multiquote-1 {
  border: 1px dashed rgb(37,132,181);
  background: transparent;
}

/* 一级引用文字 */
#nice .multiquote-1 p {
}

/* 二级引用
 */
#nice .multiquote-2 {
  border: 1px dashed rgb(248,99,77);
  box-shadow: none;
}

#nice .multiquote-2 blockquote {
  margin: 0;
}

/* 二级引用文字 */
#nice .multiquote-2 p {
}

#nice .multiquote-2 strong {
  color:rgb(248,99,77);
}

#nice .multiquote-2 a {
  color:rgb(248,99,77);
  border-bottom: 1px solid rgb(248,99,77);
}

/* 三级引用
 */
#nice .multiquote-3 {
}

/* 三级引用文字 */
#nice .multiquote-3 p {
}

/* 链接 
 * border-bottom: 1px solid #009688;
 */
#nice a {
  color:rgb(37,132,181);
  border-bottom: 1px solid rgb(37,132,181);
}

/* 加粗 */
#nice strong {
  color: rgb(37,132,181);
}

/* 斜体 */
#nice em {
  color: rgb(37,132,181);
}

/* 加粗斜体 */
#nice em strong {
  color: rgb(37,132,181);
}

/* 删除线 */
#nice del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
#nice hr {
  border-top: 1px solid rgb(37,132,181);
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
#nice img {
}

/* 图片描述文字 */
#nice figcaption {
}

/* 行内代码 */
#nice p code, #nice li code {
}

/* 
 * 代码块不换行 display: -webkit-box !important;
 * 代码块换行 display: block;
 */
#nice pre code {
}

/*
 * 表格内的单元格
 * 字体大小 font-size: 16px;
 * 边框 border: 1px solid #ccc;
 * 内边距 padding: 5px 10px;
 */
#nice table tr th {
  border: 1px solid rgb(248,99,77);
  background-color: rgb(235,114, 80);
  color: #f8f8f8;
  border-bottom: 0;
  border: 1px solid rgb(245,203,174);
}

#nice table tr td {
  border: 1px solid rgb(245,203,174);
}
/* 
 * 某一列表格列宽控制
 * n 可以修改为具体数字,不修改时表示所有列
 * 最小列宽 min-width: 85px;
 */
#nice table tr th:nth-of-type(n),
#nice table tr td:nth-of-type(n){
}

#nice table tr:nth-of-type(2) {
  background-color: rgb(248,222,203);
}
/* 脚注文字 */
#nice .footnote-word {
  color:rgb(37,132,181);
}

/* 脚注上标 */
#nice .footnote-ref {
  color:rgb(37,132,181);
}

/* "参考资料"四个字 
 * 内容 content: "参考资料";
 */
#nice .footnotes-sep:before {
}

/* 参考资料编号 */
#nice .footnote-num {
}

/* 参考资料文字 */
#nice .footnote-item p { 
}

/* 参考资料解释 */
#nice .footnote-item p em {
}

/* 行间公式
 * 最大宽度 max-width: 300% !important;
 */
#nice .block-equation svg {
}

/* 行内公式
 */
#nice .inline-equation svg { 
}
文章分享自微信公众号:
编程如画

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:灵魂画手大鹏
原始发表时间:2021-04-01
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 绕开登录限制,私有化部署Markdown转公众号格式神器mdnice教程

    mdnice是一款将markdown格式转公众号/知乎/掘金格式的在线小工具, 但最近官方版本越来越难用了.

    zhaoolee
  • 思否独立开发者丨大鹏:整整齐齐的排好,程序员中的灵魂画手做的好事

    今天我们采访的对象是大鹏,他是程序员中的灵魂画手,为很多算法题画过题解,同时也是一位开源开发者,排版工具 mdnice 就是他的主要作品。

    灵魂画师牧码
  • Kafka分区与消费者的关系kafka分区和消费者线程的关系

    kafka中的topic可以细分为不同的partition,一个topic可以将消息存放在不同的partition中。

    chenchenchen
  • PowerBI 2019年5月更新 引入做计划预测大杀器

    本月除了常规的更新以外,引入了一个非常牛的大杀器,叫做VALQ,专门用来做计划,预测,调整等,在很多领域都有广泛的运用。

    BI佐罗
  • Excel图表学习74:制作动态排序的条形图

    条形图不仅有助于说明一个或多个数据系列中值的大小,而且还可以很好地替代饼图,饼图比较了一组数据中一个系列的比例。

    fanjy
  • Java入门 - 高级教程 - 02.集合

    原文地址:http://www.work100.net/training/java-collection.html

    光束云
  • 任务调度的并行算法

    如果串行是肯定不行的。我们可以考虑并行策略,但是开了并行,怎么能够充分利用资源比较好呢。

    jeanron100
  • Java集合框架

    早在 Java 2 中之前,Java 就提供了特设类。比如:Dictionary, Vector, Stack, 和 Properties 这些类用来存储和操作...

    朝雨忆轻尘
  • PowerBI 大型全自动图片库终极解决方案

    经过实际测试,多达数百兆的图片资源,只需 20 秒不到,就可以全部加载到 Power BI 中供使用。

    BI佐罗
  • Java基础面试题2

    答:String类是final类故不可以继承 22、try {}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会...

    java金融
  • Jupyter-Notebook使用技巧

    如果你用Python做开发,那么首选Pycharm;但是如果你想用Python做数据分析、数据挖掘,以及火热的机器学习和人工智能项目,Jupyter Noteb...

    皮大大
  • Kafka工作流程及文件存储机制

    Kafka中消息是以topic进行分类的,生产者生产消息,消费者消费消息,都是面向topic的。

    王知无-import_bigdata
  • 张戈博客成功启用移动端主题:Mobile Pack

    建站以来,总是忙于 PC 端主题的折腾,移动端主题只是偷懒的使用了 WPtouch 插件。现在 PC 端主题已完善七七八八了,是时候折腾下移动端自适应主题了,毕...

    张戈
  • 如何用 Python 爬取网页制作电子书

    关键时刻,第一时间送达! 作者简介:孙亖,软件工程师,长期从事企业信息化系统的研发工作,主要擅长后台业务功能的设计开发。 本文来自作者在 GitChat 上分享...

    企鹅号小编
  • SQL Server数据库高级进阶之分布式唯一ID生成实战演练

    跟着阿笨一起玩NET
  • Java面试葵花宝典打印版【1】

    爱明依
  • 用Markdown制作幻灯片:Marp

    ​ 在 Microsoft PowerPoint 里面,我们需要调整幻灯片的格式,操作起来些许麻烦。幻灯片通常是辅助演讲者的一个工具,这也是说,幻灯片不需...

    常青AAS

扫码关注腾讯云开发者

领取腾讯云代金券