Fix mobile for 2.1.0

README.md

@@ -16,7 +16,7 @@ You can config all the data in `yaml` and make it your own résumé. Then, you m
 ## Features
 
 * Simple, elegant, and minimal design
-* PC and mobile friendly
+* PC and mobile friendly, but it looks better on PC
 * PDF supports and print friendly
 * Flexible and extensible
 

README_zh-CN.md

@@ -16,7 +16,7 @@
 ## 功能和特点
 
 * 简单、优雅、极简的设计
-* 桌面和移动友好
+* 桌面和移动友好，但桌面上的效果会更好
 * 支持输出 PDF 并且打印机友好
 * 简单的扩展方式
 

css/resume.css

@@ -44,7 +44,6 @@ header {
 }
 #jobtitle {
   font-size: 1.2rem;
-  font-style: italic;
   margin-top: .8rem;
 }
 #contact {
@@ -71,9 +70,19 @@ section {
 }
 .section-content {
 }
+.section-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
 .block {
   margin-bottom: 2rem;
 }
+.block-square {
+  width: 18rem;
+}
+.block-square:nth-last-child(2) {
+  margin-bottom: 0;
+}
 .block:last-child {
   margin-bottom: 0;
 }
@@ -117,13 +126,14 @@ footer {
   }
   header {
     display: block;
+    padding-bottom: 1rem;
   }
   #name-wrapper {
     text-align: center;
+    padding-bottom: 2rem;
   }
   #contact {
     padding-top: 1rem;
-    padding-bottom: 1rem;
     border-top: .1rem solid #bbbbbb;
   }
   .contact-item {
@@ -132,10 +142,19 @@ footer {
   }
   section {
     display: block;
-    padding: 0;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
   }
   .section-title {
     text-align: center;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
+  }
+  .section-flex {
+    display: block;
+  }
+  .block-square {
+  }
+  .block-square:nth-last-child(2) {
+    margin-bottom: 2rem;
   }
 }

resume.html

@@ -117,9 +117,9 @@
         <div class="section-title">
           Languages
         </div>
-        <div class="section-content">
+        <div class="section-content section-flex">
           {% for language in site.data.resume.languages %}
-          <div class="block">
+          <div class="block block-square">
             <div class="block-title">
               {{ language.name }}
             </div>

resume_zh-CN.html

@@ -117,9 +117,9 @@
         <div class="section-title">
           语言
         </div>
-        <div class="section-content">
+        <div class="section-content section-flex">
           {% for language in site.data.resume_zhcn.languages %}
-          <div class="block">
+          <div class="block block-square">
             <div class="block-title">
               {{ language.name }}
             </div>