metro-hot

metro-hot/css/metro-hot.css

@@ -18,7 +18,7 @@
 * skin metro-hot style
 *
 * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
-* @version 1.0.0.9, Jul 24, 2013
+* @version 1.0.1.0, Jul 31, 2013
 */
 /* start base */
 @font-face {
@@ -407,9 +407,10 @@ textarea {
 }
 
 .article-list > div > img {
-    min-width: 100%;
     max-width: 100%;
     transition: all 1.2s;
+    display: block;
+    margin: 0 auto;
 }
 
 .article-list > div:hover > img {
@@ -500,6 +501,11 @@ textarea {
     word-wrap: break-word;
     padding: 0;
 }
+
+.article-image .article-body {
+    padding: 10px;
+    height: 95px;
+}
 /* end article list*/
 
 /* start side */
@@ -920,7 +926,7 @@ textarea {
     float: left;
     font-size: 12px;
     line-height: 20px;
-    margin: 6px 10px;
+    margin: 6px;
     padding: 5px 10px;
     transition: all 0.8s ease 0s;
     white-space: nowrap;

metro-hot/css/metro-hot.min.css

@@ -65,7 +65,7 @@ textarea{overflow:auto;vertical-align:top}
 .navigation a.lats{border-bottom-width:0}
 .main .pagination{float:none;padding:20px 0 25px;text-align:right;margin-right:10px;line-height:34px}
 .article-list>div{background-color:#323232;float:left;height:220px;margin:5px 10px 5px 0;overflow:hidden;position:relative;width:450px}
-.article-list>div>img{min-width:100%;max-width:100%;transition:all 1.2s}
+.article-list>div>img{max-width:100%;transition:all 1.2s;display:block;margin:0 auto}
 .article-list>div:hover>img{transform:scale(1.2)}
 .article-list>div:hover .article-image{top:0}
 .article-list>div:hover .fn-right{display:block}
@@ -82,6 +82,7 @@ textarea{overflow:auto;vertical-align:top}
 .article-info>a:hover{background-color:#ea4040;color:#fff}
 .article-abstract>.article-tags{margin:10px 0 0 10px}
 .article-abstract>.article-body{height:115px;margin:10px 10px 0;overflow:hidden;white-space:inherit;word-wrap:break-word;padding:0}
+.article-image .article-body{padding:10px;height:95px}
 .side{float:right;width:240px}
 #search{background-color:#fff;border:0 none;color:#3a3a3a;height:50px;margin-top:5px;padding:0 10px;width:177px;transition:all .3s ease-out 0}
 .side form>span{background-color:#fff;color:#3a3a3a;float:right;font-size:25px;height:32px;margin-top:5px;padding:9px}
@@ -143,7 +144,7 @@ textarea{overflow:auto;vertical-align:top}
 .links-tile{margin-left:20px;background-color:#7b4f9d}
 .tags-tile span,.links-tile span,.archives-tile span,.most-comment span,.most-view span{font-size:60px}
 .tags-tile .text,.links-tile .text,.archives-tile .text,.most-comment .text,.most-view .text{position:static;width:253px}
-.tags-tile a,.links-tile a,.archives-tile a{background-color:#ea4040;color:#d1d2d1;float:left;font-size:12px;line-height:20px;margin:6px 10px;padding:5px 10px;transition:all .8s ease 0;white-space:nowrap}
+.tags-tile a,.links-tile a,.archives-tile a{background-color:#ea4040;color:#d1d2d1;float:left;font-size:12px;line-height:20px;margin:6px;padding:5px 10px;transition:all .8s ease 0;white-space:nowrap}
 .tags-tile a:hover,.links-tile a:hover,.archives-tile a:hover{background-color:#fff;color:#ea4040}
 .most-comment,.most-view{background-color:#f09609;width:535px;margin:100px 0}
 .most-comment .text,.most-view .text{margin-right:20px;line-height:24px;width:430px}

metro-hot/dynamic.ftl

@@ -163,7 +163,7 @@
                         <#else>
                         <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
                            title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})">
-                            ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})</a>
+                            ${archiveDate.archiveDateYear?substring(2,4)}${yearLabel}${archiveDate.archiveDateMonth}${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})</a>
                         </#if>
                         </#list>
                     </div>

metro-hot/js/metro-hot.js

@@ -17,7 +17,7 @@
  * @fileoverview metro-hot js.
  *
  * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
- * @version 1.0.0.8, Jul 24, 2013
+ * @version 1.0.0.9, Jul 31, 2013
  */
 
 var MetroHot = {
@@ -153,10 +153,17 @@ var MetroHot = {
                 $it.addClass("article-image");
                 $images.hide();
 
-                $it.before("<img src='" + $($images[0]).attr("src") + "'/>");
+                $it.before("<img onload='MetroHot.loadImg(this);' src='" + $($images[0]).attr("src") + "'/>");
             }
         });
     },
+    /**
+     * @description 计算图片 margin-top
+     * @param {BOM} it 图片元素
+     */
+    loadImg: function(it) {
+        it.style.marginTop = ("margin-top", (220 - it.height) / 2 + "px");
+    },
     /**
      * @description 分享按钮
      */

metro-hot/macro-head.ftl

@@ -10,7 +10,6 @@
 <meta http-equiv="Window-target" content="_top" />
 <link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
 <link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}-responsive${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
-<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/font${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
 <link href="${servePath}/blog-articles-feed.do" title="ATOM" type="application/atom+xml" rel="alternate" />
 <link rel="icon" type="image/png" href="${staticServePath}/favicon.png" />
 ${htmlHead}