Update styles for mobile devices

zry656565 · Jun 24, 2017 · a3aa3d5 · a3aa3d5
1 parent 40318ec
commit a3aa3d5
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 103 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ pages/1_articles.md
 .tmp
 assets/css/main.css
 assets/css/posts.css
+assets/css/pages.css
 
 #PhpStorm configure files
 .idea

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -15,6 +15,7 @@ module.exports = function(grunt) {
             },
             "<%= pkg.srcRoot %>/css/main.css": "<%= pkg.srcRoot %>/css/main.less",
             "<%= pkg.srcRoot %>/css/posts.css": "<%= pkg.srcRoot %>/css/posts.less",
+            "<%= pkg.srcRoot %>/css/pages.css": "<%= pkg.srcRoot %>/css/pages.less",
         },
         useminPrepare: {
             html: '_includes/head.html',

diff --git a/_includes/header.html b/_includes/header.html
@@ -2,6 +2,9 @@
   <div class="wrap">
     <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
     <nav class="site-nav">
+      <div class="menu-icon">
+        <img class="icon" src="{{ site.static_url }}/menu.svg" title="More"/>
+      </div>
       <div class="trigger">
         <a class="page-link" href="/">首页</a>
         {% for page in site.pages %}

diff --git a/assets/css/main.less b/assets/css/main.less
@@ -2,6 +2,7 @@
  *===========================================================*/
 
 @import "config";
+@import "utils";
 
 @media-diverge-small: 600px;
 @media-diverge-medium: 840px;
@@ -90,7 +91,7 @@ hr{
   }
 
   @media screen and (max-width: @media-diverge-small) {
-    position: fixed;
+    position: absolute;
     z-index: 10;
     top: 14px;
     right: 8px;
@@ -104,12 +105,15 @@ hr{
       display: block;
       float: right;
       width: 36px;
-      font-size: 24px;
-      color: #505050;
+      height: 36px;
       text-align: center;
       line-height: 36px;
 
-      svg { width: 18px; height: 16px; }
+      img {
+        padding: 9px;
+        width: 18px;
+        height: 18px;
+      }
     }
 
     .trigger {
@@ -123,11 +127,15 @@ hr{
     .page-link {
       display: block;
       margin: 0;
-      padding: 5px 10px;
+      padding: 10px 20px;
       text-align: right;
       line-height: 1.25;
     }
 
+    .page-link:last-child {
+      display: none;
+    }
+
   }
 }
 

diff --git a/assets/css/pages.css b/assets/css/pages.css
diff --git a/assets/css/pages.less b/assets/css/pages.less
@@ -0,0 +1,85 @@
+/* articles
+======================================*/
+
+.label-section {
+  margin-bottom: 20px;
+
+  .post-label {
+    display: inline-block;
+    font-size: 14px;
+    color: #555;
+    background: #FFEFD5;
+    border: 1px solid #aaa;
+    border-radius: 2px;
+    padding: 1px 6px;
+    margin: 0 7px 7px 0;
+    cursor: pointer;
+
+    &.select {
+      color: #fff;
+      background: #f59b4d;
+    }
+  }
+}
+
+.label-section h2,
+.articles-section h2 {
+  font-weight: 400;
+  font-size: 1.1em;
+  margin: 0;
+}
+
+.articles {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  font-size: 1em;
+
+  .article-date {
+    display: block;
+    float: left;
+    color: #818181;
+    padding: 4px 10px 0 20px;
+    font-size: 0.8em;
+    line-height: 1.5;
+  }
+
+  .article-title {
+    display: block;
+    overflow: hidden;
+    line-height: 1.8;
+  }
+}
+
+.articles-section {
+  h2 {
+    display: inline-block;
+  }
+
+  .search-icon {
+    display: inline-block;
+    margin-left: 4px;
+    cursor: pointer;
+
+    img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .search-box {
+    display: inline-block;
+    font-size: 14px;
+    width: 170px;
+    margin-left: 20px;
+  }
+
+  h3 {
+    display: inline-block;
+    font-size: 1.1em;
+    margin: 0.5em 0;
+    border-bottom: 1px solid #ccc;
+    padding: 0 50px 0 5px;
+    font-weight: 500;
+  }
+}
diff --git a/assets/css/utils.less b/assets/css/utils.less
@@ -0,0 +1,10 @@
+.clearfix {
+  &:before,&:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
diff --git a/assets/js/index_main.js b/assets/js/index_main.js
diff --git a/pages/articles.js b/pages/articles.js
@@ -88,9 +88,11 @@
         render: function() {
             var post = this.props.post;
             return (
-                <li className="article">
+                <li className="article clearfix">
                     <span className="article-date">{post.date.substr(5)}</span>
-                    <a className="article-title" href={post.link}>{post.title}</a>
+                    <div className="article-title">
+                        <a href={post.link}>{post.title}</a>
+                    </div>
                 </li>
             );
         }