👄 mobile

Jane/article-list.ftl

@@ -39,10 +39,12 @@
                 ${article.articleCreateDate?string("yyyy-MM-dd")}
             </time>
             &nbsp;
+            <span class="mobile__none">
             <#list article.articleTags?split(",") as articleTag>
-                <a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}" class="ft__red">
+                <a rel="tag" class="ft__red" href="${servePath}/tags/${articleTag?url('UTF-8')}">
                     ${articleTag}</a><#if articleTag_has_next>, </#if>
             </#list>
+            </span>
             <div class="fn__right">
                 <a class="ft__red" href="${servePath}${article.articlePermalink}#comments"><#if article.articleCommentCount gt 0>${article.articleCommentCount} </#if>${commentLabel}</a>
                 •

Jane/article.ftl

@@ -75,10 +75,12 @@
             ${article.articleCreateDate?string("yyyy-MM-dd")}
             </time>
             &nbsp;
+            <span class="mobile__none">
             <#list article.articleTags?split(",") as articleTag>
                 <a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}" class="ft__red">
                     ${articleTag}</a><#if articleTag_has_next>, </#if>
             </#list>
+            </span>
             <div class="fn__right">
                 <a class="ft__red" href="${servePath}${article.articlePermalink}#comments"><#if article.articleCommentCount gt 0>${article.articleCommentCount} </#if>${commentLabel}</a>
                 •

Jane/css/base.css

@@ -792,11 +792,12 @@ a {
 .wrapper {
   max-width: 768px;
   margin: 0 auto;
-  padding: 0 70px 0 20px; }
+  padding: 0 70px 0 20px;
+  box-sizing: border-box; }
 
 .footer {
   color: #999;
-  padding: 30px 0;
+  margin: 30px auto;
   line-height: 1.6em;
   font-size: 0.85em; }
   .footer a {
@@ -896,7 +897,7 @@ a {
 
 .comment-body-ref {
   position: absolute;
-  width: 664px;
+  width: 80%;
   left: 84px; }
 
 .comments__title {
@@ -986,3 +987,34 @@ a {
   .form input:focus,
   .form textarea:focus {
     border-color: #2a2a2a; }
+
+@media (max-width: 768px) {
+  .header {
+    position: inherit;
+    width: 100%;
+    height: 45px;
+    flex-direction: row;
+    padding-right: 10px; }
+    .header a, .header span {
+      float: left;
+      width: auto;
+      padding: 0;
+      line-height: 25px;
+      margin-left: 10px; }
+  .wrapper {
+    padding-right: 20px; }
+  .article__item {
+    margin: 20px 0; }
+    .article__item .tag {
+      display: none; }
+  .article__more {
+    margin-bottom: 40px; }
+  .footer {
+    text-align: right; }
+  .icon__up {
+    display: none; }
+  .pagination > .ft__center {
+    visibility: hidden;
+    height: 36px; }
+  .mobile__none {
+    display: none; } }

Jane/css/base.scss

@@ -119,12 +119,13 @@ a {
   max-width: 768px;
   margin: 0 auto;
   padding: 0 70px 0 20px;
+  box-sizing: border-box;
 }
 
 // footer
 .footer {
   color: $gray;
-  padding: 30px 0;
+  margin: 30px auto;
   line-height: 1.6em;
   font-size: 0.85em;
   a {
@@ -252,7 +253,6 @@ a {
   }
 }
 
-
 // comments
 
 #comments {
@@ -261,7 +261,7 @@ a {
 
 .comment-body-ref {
   position: absolute;
-  width: 664px;
+  width: 80%;
   left: 84px;
 }
 
@@ -381,3 +381,56 @@ a {
     border-color: #2a2a2a;
   }
 }
+
+@media (max-width: 768px) {
+  .header {
+    position: inherit;
+    width: 100%;
+    height: 45px;
+    flex-direction: row;
+    padding-right: 10px;
+
+    a, span {
+      float: left;
+      width: auto;
+      padding: 0;
+      line-height: 25px;
+      margin-left: 10px;
+    }
+  }
+
+  .wrapper {
+    padding-right: 20px;
+  }
+
+  .article {
+    &__item {
+      margin: 20px 0;
+
+      .tag {
+        display: none;
+      }
+    }
+
+    &__more {
+      margin-bottom: 40px;
+    }
+  }
+
+  .footer {
+    text-align: right;
+  }
+
+  .icon__up {
+    display: none;
+  }
+
+  .pagination > .ft__center {
+    visibility: hidden;
+    height: 36px;
+  }
+
+  .mobile__none {
+    display: none;
+  }
+}