论道主题青石板很特别，动用了哪些黑科技？

这是一个没什么干货的答案，想看干货的各位不用点进来了，以及我只是个菜鸡……
 
其实没有用什么高科技的东西。勉强要说的话，用了点css3的新（并不）特性也许算？而且最开始做的时候比较naive，完全没考虑到性能的问题，导致现在的主题有点影响性能（就不该拿box-shadow做过渡动画的，大家别学我（手动捂脸））（谢谢kirk君的提醒）……
 
做这个主题主要是因为，一开始来论道的时候，发现这里的UI实在是……有点难以接受，交互体验太糟糕了……我是那种“有什么不满就自己动手解决”的人，所以稀里糊涂地联系了一下狐狸叔（这里应该@Joey ）就开始了从头学习的入坑之路（对我就是现学现卖）。为了提高交互体验，我添加了很多的过渡动画（transition）和一些css动画（animation），但依然做的不太好，整体上也缺乏统一的设计和协调，算是非常不成熟的尝试吧。
 
我之后还会不断随着网站的更新而更新主题的，有什么问题也欢迎大家通过私信或者邮件（请发至haku@lundao.pub）向我反映。当然，欢迎各位大牛指教。
 
以上

= =说点不好听的话，，，，感觉有点丑- -
我把顶栏用我自己理解的 Material Design 重写了一遍。。。。
包括配色、阴影、动画。。。。
页面其他部分暂时懒得动。（DOM 结构有点蛋疼，用纯CSS实现有点难受，最蛋疼的是搜索栏的动画效果。。用纯CSS实现的我头疼。。。）
代码贴在下面。想试试的可以下 stylelish 贴进去试一下。

.aw-top-menu-wrap{

	box-shadow:0 7px 14px rgba(0,0,0,.25);

	height:53px;

}

.aw-top-menu-wrap,

.navbar-collapse{

	background-color:#009688;

}

.aw-top-nav > nav > ul > li > a.active,

.aw-top-nav > nav > ul > li > a:hover{

	background-color:#26A69A;

	color:black;

	font-weight:normal;

}

.aw-publish-btn{

	box-shadow:0 1px 2px rgba(0,0,0,.25);

	position:relative;

}

.aw-publish-btn:hover{

	box-shadow:0 3px 6px rgba(0,0,0,.25);

	height:96px;

}

.btn-primary,

.aw-publish-btn .dropdown-list a{

	background-color:#00897B;

}

.aw-publish-btn .dropdown-list a:hover,

.btn-primary:active,

.btn-primary:focus,

.btn-primary:hover{

	background-color:#00796B;

}

.aw-publish-btn .dropdown-list ul li:last-child a,

.aw-publish-btn:hover #header_publish,

.aw-publish-btn a{

	border-radius:0;

}

.aw-search-box form input::placeholder{

	color:#E0F2F1;

}

.aw-search-box form input{

	border-radius:0;

	background:0;

	color:#fff;

	border-bottom:1px solid #E0F2F1;

	font-size:12px;

	padding:0 30px 0 5px;

}

.aw-search-box #global_search_btns{

	position: absolute;

	top: auto;

	left:0;

	right:0;

	bottom:1px;

	width:100%;

	margin:auto;

}

.aw-search-box form input + span::before{

	content:"";

	position:absolute;

	height:1px;

	left:0;

	right:0;

	margin:auto;

	width:0;

	bottom:0;

	background:#E0F2F1;

	transition:width ease .2s;

	pointer-events:none;

}

.aw-search-box form input:focus + span::before{

	width:100%;

}

.aw-search-box form input + span i{

	position:absolute;

	color:#fff;

	cursor:pointer;

	bottom:7px;

	right:6px;

}

.form-control:focus{

	border-bottom:1px solid #E0F2F1 !important;

}

.aw-dropdown{

	box-shadow:0 3px 6px rgba(0,0,0,.25);

	border-radius:0;

	border:none;

	background-color:#E0F2F1;

}

.aw-search-box .aw-dropdown .mod-footer{

	background-color:#E0F2F1;

}

.aw-search-box .aw-dropdown p{

	color:black;

}

.aw-search-box .aw-dropdown .mod-footer .btn-success{

	background-color:#00796B;

	border-radius:0;

	box-shadow:0 1px 2px rgba(0,0,0,.25);

	transition:all ease .2s;

}

.aw-search-box .aw-dropdown .mod-footer .btn-success:hover{

	box-shadow:0 2px 4px rgba(0,0,0,.25);

	background-color:#00897B !important;

}

.aw-dropdown .aw-dropdown-list li a{

	color:#000;

}

.aw-dropdown .aw-dropdown-list li:hover,

.aw-dropdown .aw-dropdown-list li.active{

	background-color:#80CBC4 !important;

}

.aw-user-nav > a img{

	border-radius:50%;

}

.badge.badge-important{

	background-color:#F44336;

}

建议参考已有的文章：

https://www.lundao.com/article/208
你的论道你做主--自定义风格征集开始啦！

看起来应该是涉及了一些 CSS 方面的相应技巧，CSS 样式表本身属于文本文件，如果不需要实时预览之类的话估计记事本就可以实现修改，具体的技巧应该在前端相关的教程内容里面会比较多。

我也切换到这个主题看了下，个人不是很接受这一风格，不过比起原始主题增加了一些细节动画的设定还是挺有趣的，无意打击作者。

最后作为一个没做出来的人还是匿了吧。