flat-box

layout/_partial/footer.ejs

@@ -2,7 +2,7 @@
     <div class="social-wrapper">
       <% (config.materialx && config.materialx.footer_social && (config.materialx.footer_social||[]) || (theme.materialx.footer_social||[])).forEach(function(value){ %>
         <% if (value.url && value.slug) { %>
-            <a href="<%= value.url %>" class="social <%= value.slug %>"
+            <a href="<%= value.url %>" class="social <%= value.slug %> flat-box"
                 target="_blank" rel="external">
             <i class="fa fa-<%= value.slug %> fa-fw"></i>
             </a>

layout/_partial/header.ejs

@@ -30,9 +30,9 @@
 			<% } %>
 			<ul class='switcher h-list'>
 				<% if (theme.nav_search.enable === true) { %>
-					<li class='s-search'><a href='javascript:void(0)'><i class="fa fa-search flat-box fa-fw"></i></span></a></li>
+					<li class='s-search flat-box'><a href='javascript:void(0)'><i class="fa fa-search fa-fw"></i></span></a></li>
 				<% } %>
-				<li class='s-menu'><a href='javascript:void(0)'><i class="fa fa-navicon flat-box fa-fw"></i></a></li>
+				<li class='s-menu flat-box'><a href='javascript:void(0)'><i class="fa fa-navicon fa-fw"></i></a></li>
 			</ul>
 		</div>
 
@@ -42,9 +42,9 @@
 			</a>
 
 			<ul class='switcher h-list'>
-				<li class='s-comment'><a href='javascript:void(0)'><i class="fa fa-comments flat-box fa-fw"></i></a></li>
+				<li class='s-comment flat-box'><a href='javascript:void(0)'><i class="fa fa-comments fa-fw"></i></a></li>
-				<li class='s-top'><a href='javascript:void(0)'><i class="fa fa-arrow-up flat-box fa-fw"></i></a></li>
+				<li class='s-top flat-box'><a href='javascript:void(0)'><i class="fa fa-arrow-up fa-fw"></i></a></li>
-				<li class='s-toc'><a href='javascript:void(0)'><i class="fa fa-list-ul flat-box fa-fw"></i></a></li>
+				<li class='s-toc flat-box'><a href='javascript:void(0)'><i class="fa fa-list-ul fa-fw"></i></a></li>
 			</ul>
 		</div>
 	</div>

source/less/_footer.less

@@ -29,8 +29,9 @@
             position: relative;
             display: inline-block;
             text-align: center;
-            font-size: 16px;
+            // font-size: 16px;
-            padding: 8px;
+            padding: 4px 2px;
+            border-radius: 100px;
             &:hover {
                 background: transparent;
                 color: @theme-text-highlight;

source/less/_header.less

@@ -84,11 +84,14 @@
 		padding: 0 @gap;
 		display: none;
 		font-size: @header-switcher-font-size;
+        line-height: @header-height - 1*@gap;
+
 		& > li{
+            border-radius: @header-height;
 			margin-left: @gap;
 			.enable-trans();
 			svg{
-				margin-top:16px;
+				// margin-top:16px;
 			}
 		}
 		// & > li.s-menu.active {