壢歷史 update new design

yanyiyi · Jul 4, 2018 · bc8bb92 · bc8bb92
1 parent 8982b6b
commit bc8bb92
Show file tree

Hide file tree

Showing 20 changed files with 12,910 additions and 6,485 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 
 .DS_Store
+img/ori/壢歷史0703電腦及手機.ai
diff --git a/GoogleSheetRead.html b/GoogleSheetRead.html
@@ -9,7 +9,7 @@
 
 
 <body>
-    <div id="ext">1234</div>
+    <div id="ext"></div>
 </body>
 
 </html>
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,8 @@
+@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
+* {
+    font-family: 'Noto Sans TC';
+}
+
 html,
 body {
     height: 100%;
@@ -6,83 +11,145 @@ body {
     font-size: 1em;
 }
 
+p {
+    font-weight: 100;
+    font-size: 0.8em;
+}
+
 .navSet {
-    height: 20%;
+    height: 200px;
     width: 100%;
     display: block;
-    background: url("../img/Lili_bk.png") bottom no-repeat;
+    background: url("../img/Lili_bk.png") bottom center no-repeat;
     background-size: cover;
     clear: both;
+    position: relative;
 }
 
 .rulerDec {
     width: 100%;
-    height: 15%;
+    height: 30px;
     background: url("../img/Lili_ruler.png") bottom repeat-x;
     background-size: contain;
 }
 
 .navWarp {
-    width: 85%;
-    height: 60%;
-    margin: 2.5% auto;
+    width: 66.7%;
+    height: 110px;
+    margin: 30px auto 40px auto;
+    position: relative;
 }
 
 #mainLogo {
     width: 30%;
-    background: url(../img/Lili_logo.png) no-repeat bottom center;
-    display: block;
+    background: url(../img/Lili_logo.png) no-repeat bottom left;
     height: 80%;
     background-size: contain;
     float: left;
+    position: absolute;
+    top: 0%;
 }
 
 #navBar {
-    width: 70%;
+    width: 65%;
     float: left;
-    position: relative;
-    bottom: -50%;
+    position: absolute;
+    bottom: 2em;
+    right: 0px;
+    padding: 0 2.5%;
+    font-size: 1.1em;
+}
+
+#navBar a:nth-child(1) {
+    background: url(../img/mark_1.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:nth-child(2) {
+    background: url(../img/mark_2.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:nth-child(3) {
+    background: url(../img/mark_3.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:nth-child(4) {
+    background: url(../img/mark_4.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:nth-child(5) {
+    background: url(../img/mark_5.png) left no-repeat;
+    background-size: contain;
 }
 
 #navBar a {
-    border-left: #000 1px solid;
-    padding: 0% 2.5%;
+    padding-left: 1.25em;
+    font-weight: 300;
+    display: inline-block;
+    width: 5em;
+    height: 1.5em;
+    text-align: left;
+    line-height: 1.75em;
+
 }
 
-#navBar a:hover {
-    border-color: #FFF;
-    background-color: #000;
-    color: #FFF;
-    padding: 0% 2.5%;
+#navBar a:nth-child(1):hover {
+    background: url(../img/mark_1hover.png) left no-repeat;
+    background-size: contain;
 }
 
-#navBar a:last-child {
-    border-right: #000 1px solid;
+#navBar a:nth-child(2):hover {
+    background: url(../img/mark_2hover.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:nth-child(3):hover {
+    background: url(../img/mark_3hover.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:nth-child(4):hover {
+    background: url(../img/mark_4hover.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:nth-child(5):hover {
+    background: url(../img/mark_5hover.png) left no-repeat;
+    background-size: contain;
+}
+
+#navBar a:hover {
+    text-decoration: underline;
+    background-size: contain;
 }
 
 .mainMap {
     padding: 2.5% 0%;
     display: block;
     height: 95%;
-    width: 85%;
+    width: 66.7%;
     margin: 0 auto;
     clear: both;
 }
 
 .decWords {
-    width: 22.5%;
+    width: 30%;
     float: left;
     display: block;
 }
 
 .decWords p {
     line-height: 250%;
     letter-spacing: 3px;
+    padding: 15px;
 }
 
 #map {
     height: 70%;
-    width: 77.5%;
+    width: 70%;
     float: left;
     display: block;
     -webkit-box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, 0.25);

diff --git a/img/Lili_bk.png b/img/Lili_bk.png
diff --git a/img/Lili_logo.png b/img/Lili_logo.png
diff --git a/img/Lili_ruler.png b/img/Lili_ruler.png
diff --git a/img/mark.ai b/img/mark.ai
diff --git a/img/mark_1.png b/img/mark_1.png
diff --git a/img/mark_1hover.png b/img/mark_1hover.png
diff --git a/img/mark_2.png b/img/mark_2.png
diff --git a/img/mark_2hover.png b/img/mark_2hover.png
diff --git a/img/mark_3.png b/img/mark_3.png
diff --git a/img/mark_3hover.png b/img/mark_3hover.png
diff --git a/img/mark_4.png b/img/mark_4.png
diff --git a/img/mark_4hover.png b/img/mark_4hover.png
diff --git a/img/mark_5.png b/img/mark_5.png
diff --git a/img/mark_5hover.png b/img/mark_5hover.png
diff --git a/img/ori/Lili.ai b/img/ori/Lili.ai
diff --git a/img/ori/icon.ai b/img/ori/icon.ai
diff --git a/index.html b/index.html
@@ -29,8 +29,11 @@
     </nav>
     <section class="mainMap">
         <div class="decWords">
-            <p>五十幅 肖像畫 <br> 五十幅 老照片 <br> 五十幅 中壢故事 <br>
+            <p>50位扎根中壢的LiLi們丶50個QR CODE丶將帶出50個身後故事丶50張肖像和許許多多的老照片... </p>
+            <p>
+                每一位Mr.LiLi 或 Miss LiLi，都是曾經或現在的中壢人，攤有與這塊土地的獨特記憶。 盼召喚那些庶民生活的記憶點滴丶影像，透過肖像及訪談書寫，折射出更多屬於中壢人的共同顯影。
             </p>
+
         </div>
         <div id="map">
         </div>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,3 @@

		.DS_Store
		img/ori/壢歷史0703電腦及手機.ai
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     <body>
-        <div id="ext">1234</div>
+        <div id="ext"></div>
     </body>
     </html>