cellphone

css/nav.css

@@ -15,7 +15,6 @@
   display: flex;
   font-size: 1.3em;
   font-weight: bold;
-  position: absolute;
   left: 5%;
 }
 
@@ -24,6 +23,17 @@
   align-items: center;
   font-size: 1em;
   font-weight: bold;
-  position: absolute;
   right: 5%;
 }
+
+@media only screen and (max-width: 767px) {
+  .nav {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nav>.title:nth-child(1) {
+    font-size: 0em;
+    left: 0%;
+  }
+}

css/timeline.css

@@ -189,9 +189,22 @@
   .item:last-child {
     padding-bottom: 40px;
   }
-}
 
-@media only screen and (max-width: 767px) {
+  .img {
+    max-width: 90%;
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
+  }
+
+  .content-title {
+    font-weight: normal;
+    font-size: 50px;
+    margin: -10px 0 0 0;
+    transition: 0.4s;
+    padding: 0 10px;
+    box-sizing: border-box;
+    color: #B0E0E6;
+  }
+
   .timeline:before {
     left: 40px;
   }

scripts/story.js

@@ -18,8 +18,6 @@ let Timeline = function() {
       </div>
     `);
   });
-  // 初始化 timeline 插件
-  $("#shell").timeline();
 }
 
 Timeline();