fixheader

dist/css/sprite.css

@@ -60,16 +60,22 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
 }
 .icon-instagram {
   background-image: url(sprite.png);
-  background-position: -52px 0px;
+  background-position: 0px -52px;
   width: 32px;
   height: 32px;
 }
 .icon-pinterest {
   background-image: url(sprite.png);
-  background-position: 0px -52px;
+  background-position: -52px 0px;
   width: 32px;
   height: 32px;
 }
+.icon-round {
+  background-image: url(sprite.png);
+  background-position: -15px -84px;
+  width: 15px;
+  height: 15px;
+}
 .icon-tuite {
   background-image: url(sprite.png);
   background-position: -84px 0px;

dist/css/style.css

@@ -62,16 +62,22 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
 }
 .icon-instagram {
   background-image: url(sprite.png);
-  background-position: -52px 0px;
+  background-position: 0px -52px;
   width: 32px;
   height: 32px;
 }
 .icon-pinterest {
   background-image: url(sprite.png);
-  background-position: 0px -52px;
+  background-position: -52px 0px;
   width: 32px;
   height: 32px;
 }
+.icon-round {
+  background-image: url(sprite.png);
+  background-position: -15px -84px;
+  width: 15px;
+  height: 15px;
+}
 .icon-tuite {
   background-image: url(sprite.png);
   background-position: -84px 0px;
@@ -526,6 +532,10 @@ body {
   -o-object-fit: cover;
   object-fit: cover;
 }
+.exhBox .am-gallery-overlay .am-gallery-item img {
+  -o-object-fit: initial;
+  object-fit: initial;
+}
 .am-gallery-overlay .am-gallery-title {
   height: 100%;
   text-align: center;
@@ -723,10 +733,8 @@ a.cd-read-more:hover {
 }
 .bg-timeline-content h2 {
   color: #b2b2b2;
-  line-height: 50px;
+  line-height: 30px;
   font-size: 14px;
-  background: url(../images/dot.png) bottom left repeat-x;
-  margin-bottom: 16px;
 }
 .bg-timeline-content p {
   font-size: 14px;
@@ -832,19 +840,6 @@ a.cd-read-more:hover {
   .topbar-nav > li > a:after {
     display: none;
   }
-  .topbar-nav > .current_page_item > a:after {
-    width: 86%;
-    position: absolute;
-    left: 7%;
-    margin-left: 0;
-    bottom: -3px;
-    content: "";
-    display: inline-block;
-    height: 0;
-    vertical-align: middle;
-    border-bottom: 1px solid #d4d4d4;
-    opacity: 0;
-  }
   .topbar-nav > li.current_page_item > a {
     border-radius: 0;
     color: #d4d4d4;
@@ -861,12 +856,6 @@ a.cd-read-more:hover {
     border-radius: 50%;
     background-color: #666;
   }
-  .topbar-nav > .current_page_item > a:after {
-    bottom: -3px;
-  }
-  .topbar-nav > li.current_page_item > a:after {
-    border-bottom-color: #d4d4d4;
-  }
   #exhibitionsUl {
     margin: 2% 20%;
   }
@@ -879,7 +868,7 @@ a.cd-read-more:hover {
     left: 0;
     width: 100px;
     height: 1px;
-    background: #d4d4d4;
+    background: #858484;
   }
   .topbar-nav > li > a {
     color: #8a8a8a;
@@ -1014,7 +1003,7 @@ a.cd-read-more:hover {
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: left;
-    padding-left: 30px;
+    padding-left: 20px;
     margin-top: 8px;
     font-style: italic;
   }
@@ -1224,7 +1213,7 @@ a.cd-read-more:hover {
   #news ul li .blog .brief p {
     padding: 35px;
     line-height: 26px;
-    font-size: 14px;
+    font-size: 12px;
     text-align: left;
     margin: 0px 0px 15px 0px;
     overflow: hidden;
@@ -1460,6 +1449,7 @@ a.cd-read-more:hover {
   #news ul li .blog .brief p {
     padding: 30px;
     line-height: 24px;
+    font-size: 12px;
   }
   #news ul li .blog .brief .moreBtn {
     bottom: 10px;
@@ -1560,7 +1550,7 @@ a.cd-read-more:hover {
   #news ul li .blog .brief p {
     padding: 28px;
     line-height: 23px;
-    font-size: 13px;
+    font-size: 12px;
     text-indent: 30px;
   }
   #news ul li .blog .brief .moreBtn {
@@ -1656,6 +1646,34 @@ a.cd-read-more:hover {
 }
 /*移动端媒体样式*/
 @media only screen and (max-width: 640px) {
+  .bg-timeline-content li {
+    margin-bottom: 15px;
+  }
+  .bg-timeline-content h2 {
+    font-size: 12px;
+  }
+  .bg-timeline-content p {
+    font-size: 12px;
+    line-height: 24px;
+    color: #909090;
+    margin-bottom: 10px;
+    text-indent: 24px;
+    letter-spacing: 0px;
+  }
+  .bg-timeline-content .shotList {
+    margin: 10px 20px;
+  }
+  .bg-timeline-content .shotList li {
+    font-size: 12px;
+    line-height: 24px;
+    margin: 0px;
+    color: #909090;
+    list-style-type: disc;
+  }
+  .am-gallery-overlay .am-gallery-title h3 {
+    font-size: 12px;
+    line-height: 20px;
+  }
   .cd-timeline-content img {
     width: 80%;
     height: auto;
@@ -1663,7 +1681,7 @@ a.cd-read-more:hover {
     object-fit: cover;
   }
   .am-gallery-overlay > li {
-    margin-bottom: 20px;
+    margin-bottom: 15px;
   }
   .sileTop {
     margin-top: 200px;
@@ -1786,15 +1804,15 @@ a.cd-read-more:hover {
   }
   .publicCon h2 {
     color: #d4d4d4;
-    font-size: 16px;
-    line-height: 35px;
+    font-size: 14px;
+    line-height: 30px;
     letter-spacing: 1px;
     margin-bottom: 10px;
   }
   .publicCon p {
     color: #8a8a8a;
-    line-height: 25px;
-    font-size: 14px;
+    line-height: 22px;
+    font-size: 12px;
     text-align: left;
     text-indent: 28px;
   }
@@ -1818,13 +1836,13 @@ a.cd-read-more:hover {
     text-align: center;
   }
   .publicationsIntro h3 {
-    font-size: 16px;
+    font-size: 12px;
     color: #d4d4d4;
-    height: 25px;
+    height: 20px;
     overflow: hidden;
     word-spacing: normal;
     text-overflow: ellipsis;
-    line-height: 25px;
+    line-height: 20px;
     margin-top: 10px;
   }
   .publicationsIntro p {
@@ -2012,7 +2030,7 @@ a.cd-read-more:hover {
     margin: 0 auto;
   }
   #news ul li .blog h2 {
-    font-size: 16px;
+    font-size: 14px;
     text-align: center;
     line-height: 30px;
     margin: 15px auto 5px;
@@ -2042,7 +2060,7 @@ a.cd-read-more:hover {
   }
   #news ul li .blog .brief p {
     line-height: 25px;
-    font-size: 14px;
+    font-size: 12px;
     text-align: left;
     padding: 15px 15px 0px 15px;
     text-indent: 28px;
@@ -2054,12 +2072,12 @@ a.cd-read-more:hover {
     background: #a6a6a6;
     color: #f6f6f6;
     border-radius: 4px;
-    font-size: 13px;
+    font-size: 12px;
     float: right;
     margin: 5px 20px 10px;
-    height: 30px;
-    line-height: 30px;
-    width: 72px;
+    height: 28px;
+    line-height: 28px;
+    width: 68px;
     text-align: center;
   }
   /*模态框效果*/

dist/html/biography.html

@@ -52,7 +52,8 @@
     </style>
 </head>
 <body>
-<script type="text/javascript" src="../js/navRoll.min.js"></script>
+<!--<script type="text/javascript" src="../js/navRoll.min.js"></script>-->
+<script type="text/javascript" src="../js/navRoll.js"></script>
 <!--header-->
 <header class="am-topbar am-topbar-fixed-top wos-header blackBg header boxShadow">
     <div class="am-container">
@@ -69,12 +70,18 @@
         <div class="am-collapse am-topbar-collapse nav-wrap" id="collapse-head">
             <div class="language"><a href="#">中文</a> | <a href="#">English</a></div>
             <ul class="am-nav-pills topbar-nav right" id="example-one">
-                <li class=""><a href="./portfolio.html">Portfolio</a></li>
+<!--                <li class=""><a href="./portfolio.html">Portfolio</a></li>
                 <li><a href="./exhibition.html">Exhibition</a></li>
                 <li><a href="./publications.html">Publications</a></li>
                 <li><a href="./news.html">News</a></li>
                 <li><a href="./biography.html">Biography</a></li>
-                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>-->
+                <li class=""><a href="./portfolio.html">作品</a></li>
+                <li><a href="./exhibition.html">展览</a></li>
+                <li><a href="./publications.html">出版</a></li>
+                <li><a href="./news.html">新闻</a></li>
+                <li><a href="./biography.html">简历</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">联系我们</a></li>
             </ul>
             <input type="hidden"  id="dataModal"/>
         </div>
@@ -148,7 +155,6 @@
                     </div>
                     <div class="cd-timeline-content bg-timeline-content">
                         <span class="cd-date">2015</span>
-                        <p>《失落园》系列的重要作品，参加巴塞罗那国际当代艺术博览会（SWAB）</p>
                         <ul>
                             <li>
                                 <h2>2016年5-10月工作情况</h2>

dist/html/exhibition.html

@@ -48,7 +48,8 @@
 
 </head>
 <body>
-<script type="text/javascript" src="../js/navRoll.min.js"></script>
+<!--<script type="text/javascript" src="../js/navRoll.min.js"></script>-->
+<script type="text/javascript" src="../js/navRoll.js"></script>
 <!--header-->
 <header class="am-topbar am-topbar-fixed-top wos-header blackBg header boxShadow">
     <div class="am-container">
@@ -65,12 +66,18 @@
         <div class="am-collapse am-topbar-collapse nav-wrap" id="collapse-head">
             <div class="language"><a href="#">中文</a> | <a href="#">English</a></div>
             <ul class="am-nav-pills topbar-nav right" id="example-one">
-                <li class=""><a href="./portfolio.html">Portfolio</a></li>
+<!--                <li class=""><a href="./portfolio.html">Portfolio</a></li>
                 <li><a href="./exhibition.html">Exhibition</a></li>
                 <li><a href="./publications.html">Publications</a></li>
                 <li><a href="./news.html">News</a></li>
                 <li><a href="./biography.html">Biography</a></li>
-                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>-->
+                <li class=""><a href="./portfolio.html">作品</a></li>
+                <li><a href="./exhibition.html">展览</a></li>
+                <li><a href="./publications.html">出版</a></li>
+                <li><a href="./news.html">新闻</a></li>
+                <li><a href="./biography.html">简历</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">联系我们</a></li>
             </ul>
             <input type="hidden"  id="dataModal"/>
         </div>

dist/html/news.html

@@ -51,7 +51,8 @@
     </style>
 </head>
 <body>
-<script type="text/javascript" src="../js/navRoll.min.js"></script>
+<!--<script type="text/javascript" src="../js/navRoll.min.js"></script>-->
+<script type="text/javascript" src="../js/navRoll.js"></script>
 <!--header-->
 <header class="am-topbar am-topbar-fixed-top wos-header blackBg header boxShadow">
     <div class="am-container">
@@ -68,12 +69,18 @@
         <div class="am-collapse am-topbar-collapse nav-wrap" id="collapse-head">
             <div class="language"><a href="#">中文</a> | <a href="#">English</a></div>
             <ul class="am-nav-pills topbar-nav right" id="example-one">
-                <li class=""><a href="./portfolio.html">Portfolio</a></li>
+<!--                <li class=""><a href="./portfolio.html">Portfolio</a></li>
                 <li><a href="./exhibition.html">Exhibition</a></li>
                 <li><a href="./publications.html">Publications</a></li>
                 <li><a href="./news.html">News</a></li>
                 <li><a href="./biography.html">Biography</a></li>
-                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>-->
+                <li class=""><a href="./portfolio.html">作品</a></li>
+                <li><a href="./exhibition.html">展览</a></li>
+                <li><a href="./publications.html">出版</a></li>
+                <li><a href="./news.html">新闻</a></li>
+                <li><a href="./biography.html">简历</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">联系我们</a></li>
             </ul>
             <input type="hidden"  id="dataModal"/>
         </div>

dist/html/portfolio.html

@@ -55,7 +55,8 @@
     </style>
 </head>
 <body>
-<script type="text/javascript" src="../js/navRoll.min.js"></script>
+<!--<script type="text/javascript" src="../js/navRoll.min.js"></script>-->
+<script type="text/javascript" src="../js/navRoll.js"></script>
 <!--header-->
 <header class="am-topbar am-topbar-fixed-top wos-header blackBg header boxShadow">
     <div class="am-container">
@@ -72,12 +73,18 @@
         <div class="am-collapse am-topbar-collapse nav-wrap" id="collapse-head">
             <div class="language"><a href="#">中文</a> | <a href="#">English</a></div>
             <ul class="am-nav-pills topbar-nav right" id="example-one">
-                <li class=""><a href="./portfolio.html">Portfolio</a></li>
+<!--                <li class=""><a href="./portfolio.html">Portfolio</a></li>
                 <li><a href="./exhibition.html">Exhibition</a></li>
                 <li><a href="./publications.html">Publications</a></li>
                 <li><a href="./news.html">News</a></li>
                 <li><a href="./biography.html">Biography</a></li>
-                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>-->
+                <li class=""><a href="./portfolio.html">作品</a></li>
+                <li><a href="./exhibition.html">展览</a></li>
+                <li><a href="./publications.html">出版</a></li>
+                <li><a href="./news.html">新闻</a></li>
+                <li><a href="./biography.html">简历</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">联系我们</a></li>
             </ul>
             <input type="hidden"  id="dataModal"/>
         </div>

dist/html/publications.html

@@ -56,7 +56,8 @@
     </style>
 </head>
 <body>
-<script type="text/javascript" src="../js/navRoll.min.js"></script>
+<!--<script type="text/javascript" src="../js/navRoll.min.js"></script>-->
+<script type="text/javascript" src="../js/navRoll.js"></script>
 <!--header-->
 <header class="am-topbar am-topbar-fixed-top wos-header blackBg header boxShadow">
     <div class="am-container">
@@ -73,12 +74,18 @@
         <div class="am-collapse am-topbar-collapse nav-wrap" id="collapse-head">
             <div class="language"><a href="#">中文</a> | <a href="#">English</a></div>
             <ul class="am-nav-pills topbar-nav right" id="example-one">
-                <li class=""><a href="./portfolio.html">Portfolio</a></li>
+<!--                <li class=""><a href="./portfolio.html">Portfolio</a></li>
                 <li><a href="./exhibition.html">Exhibition</a></li>
                 <li><a href="./publications.html">Publications</a></li>
                 <li><a href="./news.html">News</a></li>
                 <li><a href="./biography.html">Biography</a></li>
-                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>-->
+                <li class=""><a href="./portfolio.html">作品</a></li>
+                <li><a href="./exhibition.html">展览</a></li>
+                <li><a href="./publications.html">出版</a></li>
+                <li><a href="./news.html">新闻</a></li>
+                <li><a href="./biography.html">简历</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">联系我们</a></li>
             </ul>
             <input type="hidden"  id="dataModal"/>
         </div>

dist/js/navRoll.js

@@ -3,8 +3,8 @@ function tarRoll(){
     var $el, leftPos, newWidth;
 
     var $magicLine = $("#magic-line");
-    var lineWidth=parseInt($(".current_page_item").width()*0.6);
-    var lineLeft=parseFloat($(".current_page_item a").position().left + $(".current_page_item").width()*0.14);
+    var lineWidth=parseInt($(".current_page_item").width()*0.5);
+    var lineLeft=parseFloat($(".current_page_item a").position().left + $(".current_page_item").width()*0.17);
     $magicLine
         .width(lineWidth)
         .css("left", lineLeft)
@@ -13,8 +13,8 @@ function tarRoll(){
 
     $("#example-one li").find("a").hover(function() {
         $el = $(this);
-        leftPos = parseFloat($el.position().left + $el.parent().width()*0.14);
-        newWidth = parseInt($el.parent().width()*0.6);
+        leftPos = parseFloat($el.position().left + $el.parent().width()*0.17);
+        newWidth = parseInt($el.parent().width()*0.5);
 
         $magicLine.stop().animate({
             left: leftPos,

dist/js/navRoll.min.js

-function tarRoll(){var $el,leftPos,newWidth;var $magicLine=$("#magic-line");var lineWidth=parseInt($(".current_page_item").width()*0.6);var lineLeft=parseFloat($(".current_page_item a").position().left+$(".current_page_item").width()*0.14);$magicLine.width(lineWidth).css("left",lineLeft).data("origLeft",$magicLine.position().left).data("origWidth",$magicLine.width());$("#example-one li").find("a").hover(function(){$el=$(this);leftPos=parseFloat($el.position().left+$el.parent().width()*0.14);newWidth=parseInt($el.parent().width()*0.6);$magicLine.stop().animate({left:leftPos,width:newWidth})},function(){$magicLine.stop().animate({left:$magicLine.data("origLeft"),width:$magicLine.data("origWidth")})})}var winHeight=document.documentElement.clientHeight;var winWidth=document.documentElement.clientWidth;$(function(){$("#example-one").append("<li id='magic-line'></li>");tarRoll()});$(window).resize(function(){if(winWidth>414){tarRoll()}});
+function tarRoll(){var $el,leftPos,newWidth;var $magicLine=$("#magic-line");var lineWidth=parseInt($(".current_page_item").width()*0.5);var lineLeft=parseFloat($(".current_page_item a").position().left+$(".current_page_item").width()*0.17);$magicLine.width(lineWidth).css("left",lineLeft).data("origLeft",$magicLine.position().left).data("origWidth",$magicLine.width());$("#example-one li").find("a").hover(function(){$el=$(this);leftPos=parseFloat($el.position().left+$el.parent().width()*0.17);newWidth=parseInt($el.parent().width()*0.5);$magicLine.stop().animate({left:leftPos,width:newWidth})},function(){$magicLine.stop().animate({left:$magicLine.data("origLeft"),width:$magicLine.data("origWidth")})})}var winHeight=document.documentElement.clientHeight;var winWidth=document.documentElement.clientWidth;$(function(){$("#example-one").append("<li id='magic-line'></li>");tarRoll()});$(window).resize(function(){if(winWidth>414){tarRoll()}});
\ No newline at end of file

dist/js/public.js

@@ -88,7 +88,7 @@ $(window).resize(function() {
     if(winWidth>414){
         newsHeight("#news",1);
 
-        autoWidth('.exhBox',1.358,3);
+        autoWidth('.exhBox',1.32,3);
         autoWidth('.porBox',0.665,4);
         autoWidth('.pubBox',1,5);
     }

src/less/style.less

@@ -139,6 +139,12 @@ body{
     -o-object-fit: cover;
     object-fit: cover;
 }
+.exhBox{
+  .am-gallery-overlay .am-gallery-item img{
+    -o-object-fit: initial;
+    object-fit:initial;
+  }
+}
 .am-gallery-overlay .am-gallery-title{
   height: 100%;
   text-align: center;
@@ -334,10 +340,8 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
   }
   h2{
     color: #b2b2b2;
-    line-height: 50px;
+    line-height: 30px;
     font-size: 14px;
-    background: url(../images/dot.png) bottom left repeat-x;
-    margin-bottom: 16px;
   }
   p{
     font-size: 14px;
@@ -446,19 +450,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
   .topbar-nav>li>a:after {
     display: none;
   }
-    .topbar-nav>.current_page_item>a:after {
-        width: 86%;
-        position: absolute;
-        left:7%;
-        margin-left: 0;
-        bottom: -3px;
-        content: "";
-        display: inline-block;
-        height: 0;
-        vertical-align: middle;
-        border-bottom: 1px solid #d4d4d4;
-        opacity: 0;
-    }
     .topbar-nav>li.current_page_item>a {
         border-radius: 0;
          color: #d4d4d4;
@@ -475,12 +466,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
        border-radius: 50%;
         background-color: #666;
     }
-  .topbar-nav > .current_page_item> a:after {
-    bottom: -3px;
-  }
-  .topbar-nav>li.current_page_item>a:after{
-    border-bottom-color: #d4d4d4;
-  }
     #exhibitionsUl{
         margin: 2% 20%;
     }
@@ -494,7 +479,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
     left:0;
     width:100px;
     height:1px;
-    background:#d4d4d4
+    background:#858484
   }
   .topbar-nav > li > a {
     color: #8a8a8a;
@@ -634,7 +619,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: left;
-    padding-left:30px;
+    padding-left:20px;
     margin-top: 8px;
     font-style: italic;
   }
@@ -847,7 +832,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
           p{
             padding: 35px;
             line-height: 26px;
-            font-size: 14px;
+            font-size: 12px;
             text-align: left;
             margin: 0px 0px 15px 0px;
             overflow: hidden;
@@ -1088,6 +1073,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
   .blog .brief p {
       padding: 30px;
       line-height: 24px;
+      font-size: 12px;
     }
   .blog .brief .moreBtn {
       bottom: 10px;
@@ -1194,7 +1180,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
               p{
                 padding: 28px;
                 line-height: 23px;
-                font-size: 13px;
+                font-size: 12px;
                 text-indent: 30px;
               }
           .moreBtn{
@@ -1301,6 +1287,36 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
 
 /*移动端媒体样式*/
 @media only screen and (max-width: 640px){
+  .bg-timeline-content{
+    li{
+      margin-bottom: 15px;
+    }
+    h2{
+    font-size: 12px;
+    }
+    p{
+      font-size: 12px;
+      line-height: 24px;
+      color: #909090;
+      margin-bottom: 10px;
+      text-indent: 24px;
+      letter-spacing: 0px;
+    }
+    .shotList{
+      margin: 10px 20px;
+      li{
+        font-size: 12px;
+        line-height: 24px;
+        margin: 0px;
+        color: #909090;
+        list-style-type: disc;
+      }
+    }
+  }
+  .am-gallery-overlay .am-gallery-title h3{
+    font-size: 12px;
+    line-height: 20px;
+  }
   .cd-timeline-content img{
     width: 80%;
     height: auto;
@@ -1308,7 +1324,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
     object-fit: cover;
   }
   .am-gallery-overlay>li{
-    margin-bottom: 20px;
+    margin-bottom: 15px;
   }
   .sileTop{
     margin-top: 200px;
@@ -1432,15 +1448,15 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
     margin-bottom: 20px;
     h2{
       color: #d4d4d4;
-      font-size: 16px;
-      line-height: 35px;
+      font-size: 14px;
+      line-height: 30px;
       letter-spacing: 1px;
       margin-bottom: 10px;
     }
     p{
       color: #8a8a8a;
-      line-height: 25px;
-      font-size: 14px;
+      line-height: 22px;
+      font-size: 12px;
       text-align: left;
       text-indent: 28px;
      img{
@@ -1464,13 +1480,13 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
   .publicationsIntro{
     text-align: center;
     h3{
-      font-size: 16px;
+      font-size: 12px;
       color: #d4d4d4;
-      height: 25px;
+      height: 20px;
       overflow: hidden;
       word-spacing: normal;
       text-overflow: ellipsis;
-      line-height: 25px;
+      line-height: 20px;
       margin-top: 10px;
     }
     p{
@@ -1659,7 +1675,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
         width: 100%;
         margin: 0 auto;
         h2{
-          font-size: 16px;
+          font-size: 14px;
           text-align: center;
           line-height: 30px;
           margin: 15px auto 5px;
@@ -1688,7 +1704,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
           float: none;
           p{
             line-height: 25px;
-            font-size: 14px;
+            font-size: 12px;
             text-align: left;
             padding: 15px 15px 0px 15px;
             text-indent: 28px;
@@ -1700,12 +1716,12 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
             background: #a6a6a6;
             color: #f6f6f6;
             border-radius: 4px;
-            font-size: 13px;
+            font-size: 12px;
             float: right;
             margin: 5px 20px 10px;
-            height: 30px;
-            line-height: 30px;
-            width: 72px;
+            height: 28px;
+            line-height: 28px;
+            width: 68px;
             text-align: center;
           }
         }

src/pages/biography.ejs

@@ -58,7 +58,6 @@
                     </div>
                     <div class="cd-timeline-content bg-timeline-content">
                         <span class="cd-date">2015</span>
-                        <p>《失落园》系列的重要作品，参加巴塞罗那国际当代艺术博览会（SWAB）</p>
                         <ul>
                             <li>
                                 <h2>2016年5-10月工作情况</h2>

src/pages/components/header.html

-<script type="text/javascript" src="../js/navRoll.min.js"></script>
+<!--<script type="text/javascript" src="../js/navRoll.min.js"></script>-->
+<script type="text/javascript" src="../js/navRoll.js"></script>
 <!--header-->
 <header class="am-topbar am-topbar-fixed-top wos-header blackBg header boxShadow">
     <div class="am-container">
@@ -15,12 +16,18 @@
         <div class="am-collapse am-topbar-collapse nav-wrap" id="collapse-head">
             <div class="language"><a href="#">中文</a> | <a href="#">English</a></div>
             <ul class="am-nav-pills topbar-nav right" id="example-one">
-                <li class=""><a href="./portfolio.html">Portfolio</a></li>
+<!--                <li class=""><a href="./portfolio.html">Portfolio</a></li>
                 <li><a href="./exhibition.html">Exhibition</a></li>
                 <li><a href="./publications.html">Publications</a></li>
                 <li><a href="./news.html">News</a></li>
                 <li><a href="./biography.html">Biography</a></li>
-                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">Contact</a></li>-->
+                <li class=""><a href="./portfolio.html">作品</a></li>
+                <li><a href="./exhibition.html">展览</a></li>
+                <li><a href="./publications.html">出版</a></li>
+                <li><a href="./news.html">新闻</a></li>
+                <li><a href="./biography.html">简历</a></li>
+                <li onclick="n=$('.am-active').index();$(this).addClass('am-active').siblings().removeClass('am-active');"  id="contact"><a  data-am-modal="{target: '#contact-modal'}">联系我们</a></li>
             </ul>
             <input type="hidden"  id="dataModal"/>
         </div>