[+] Routes

src/App.vue

@@ -7,6 +7,8 @@
         <div id="items" class="fbox-v">
             <router-link class="router-link" ref="others" to="/others">{{ $t('nav.others') }}</router-link>
             <div class="dot">·</div>
+            <router-link class="router-link" ref="photo" to="/photo">{{ $t('nav.photo') }}</router-link>
+            <div class="dot">·</div>
             <router-link class="router-link" ref="blog" to="/blog">{{ $t('nav.blog') }}</router-link>
             <div class="dot">·</div>
             <router-link class="router-link" ref="life" to="/life">{{ $t('nav.life') }}</router-link>
@@ -14,8 +16,7 @@
             <router-link class="router-link" ref="about" to="/about">{{ $t('nav.about') }}</router-link>
             <div class="dot">·</div>
             <router-link class="router-link" ref="home" to="/">
-                <svg focusable="false" data-prefix="fal" data-icon="house-night" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-house-night fa-w-20"><path fill="currentColor" d="M112,224a111.5,111.5,0,0,0,87-41.45,20.51,20.51,0,0,0-19.75-33.08A59.2,59.2,0,0,1,138.84,39.85a20.3,20.3,0,0,0,10.07-21.27,20.26,20.26,0,0,0-16.47-16.7A136,136,0,0,0,112,0a112,112,0,0,0,0,224ZM97.78,33.27a91.21,91.21,0,0,0,54.47,147.9A80,80,0,1,1,97.78,33.27Zm97.15,35.51,39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L317,68.78a5.33,5.33,0,0,0,0-9.54L277.32,42.68,260.76,3a5.33,5.33,0,0,0-9.55,0L234.65,42.68,194.93,59.24a5.34,5.34,0,0,0,0,9.54ZM157,379.24l-39.72-16.57L100.76,323a5.34,5.34,0,0,0-9.55,0L74.65,362.67,34.93,379.24a5.34,5.34,0,0,0,0,9.54l39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L157,388.78a5.33,5.33,0,0,0,0-9.54Zm179-101.9v85.33A21.39,21.39,0,0,0,357.36,384h85.31A21.39,21.39,0,0,0,464,362.67V277.34A21.4,21.4,0,0,0,442.67,256H357.36A21.4,21.4,0,0,0,336,277.34ZM368,288H432v64H368Zm266.49,8L576,244.75V144a16,16,0,0,0-32,0v72.75L410.53,100a16,16,0,0,0-21.07,0l-224,196a16,16,0,0,0,21.07,24.09L224,287.28V464a48.05,48.05,0,0,0,48,48H528a48.06,48.06,0,0,0,48-48V287.28l37.46,32.78A16,16,0,0,0,634.53,296ZM544,464a16,16,0,0,1-16,16H272a16,16,0,0,1-16-16V264a15.94,15.94,0,0,0-.81-4L400,133.27l144,126Z" class=""></path></svg></router-link>
+              <svg focusable="false" data-prefix="fal" data-icon="house-night" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-house-night fa-w-20"><path fill="currentColor" d="M112,224a111.5,111.5,0,0,0,87-41.45,20.51,20.51,0,0,0-19.75-33.08A59.2,59.2,0,0,1,138.84,39.85a20.3,20.3,0,0,0,10.07-21.27,20.26,20.26,0,0,0-16.47-16.7A136,136,0,0,0,112,0a112,112,0,0,0,0,224ZM97.78,33.27a91.21,91.21,0,0,0,54.47,147.9A80,80,0,1,1,97.78,33.27Zm97.15,35.51,39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L317,68.78a5.33,5.33,0,0,0,0-9.54L277.32,42.68,260.76,3a5.33,5.33,0,0,0-9.55,0L234.65,42.68,194.93,59.24a5.34,5.34,0,0,0,0,9.54ZM157,379.24l-39.72-16.57L100.76,323a5.34,5.34,0,0,0-9.55,0L74.65,362.67,34.93,379.24a5.34,5.34,0,0,0,0,9.54l39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L157,388.78a5.33,5.33,0,0,0,0-9.54Zm179-101.9v85.33A21.39,21.39,0,0,0,357.36,384h85.31A21.39,21.39,0,0,0,464,362.67V277.34A21.4,21.4,0,0,0,442.67,256H357.36A21.4,21.4,0,0,0,336,277.34ZM368,288H432v64H368Zm266.49,8L576,244.75V144a16,16,0,0,0-32,0v72.75L410.53,100a16,16,0,0,0-21.07,0l-224,196a16,16,0,0,0,21.07,24.09L224,287.28V464a48.05,48.05,0,0,0,48,48H528a48.06,48.06,0,0,0,48-48V287.28l37.46,32.78A16,16,0,0,0,634.53,296ZM544,464a16,16,0,0,1-16,16H272a16,16,0,0,1-16-16V264a15.94,15.94,0,0,0-.81-4L400,133.27l144,126Z" class=""></path></svg></router-link>
-            <div class="dot">·</div>
         </div>
 
         <div id="nav-bookmark" ref="bookmark" :style="bookmarkCss"></div>
@@ -95,6 +96,7 @@ class App extends Vue
 
     calculateBookmarkCss(): void
     {
+      console.log('CalculateBookmarkCss called', this.currentRoute, this.$refs)
         if (this.currentRoute in this.$refs)
             this.currentLink = (this.$refs[this.currentRoute] as ComponentPublicInstance).$el
         else return

src/scripts/messages.ts

@@ -8,7 +8,8 @@ export const messages = {
             blog: '记事本',
             life: '生活',
             projects: 'Projects',
-            others: '更多'
+            others: '更多',
+            photo: '相册'
         }
     },
     zh: {

src/scripts/router.ts

@@ -27,6 +27,12 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('../views/Blog.vue'),
         props: route => (route.query)
     },
+    {
+        path: '/photo',
+        name: 'Photo',
+        meta: {title: '相册', nav: true},
+        component: () => import('../views/Photo.vue')
+    },
     {
         path: '/others',
         name: 'Others',
@@ -51,12 +57,6 @@ const routes: Array<RouteRecordRaw> = [
         meta: {title: '我做的', navBookmark: 'Others'},
         component: () => import('../views/others/Projects.vue')
     },
-    {
-        path: '/photo',
-        name: 'Photo',
-        meta: {title: '摄影', navBookmark: 'Others'},
-        component: () => import('../views/Photo.vue')
-    },
 ]
 
 export const router = createRouter({

src/views/Photo.vue

@@ -24,10 +24,10 @@ export default class Photos extends Vue {
 
   async created() {
     this.photos = await (await fetch('https://p.aza.moe/photos')).json()
-    this.photos.sort((a, b) => (b.upload_time < a.upload_time ? 1 : -1))
+    this.photos.sort((a, b) => (a.exif.DateTime < b.exif.DateTime ? 1 : -1))
 
     let rowProbabilityTable = {
-      1: 0, 2: 0.5, 3: 0.5
+      1: 0, 2: 0.3, 3: 0.5
     }
 
     // Generate photo rows: there is a 10% chance that a photo will be the only photo in its row
@@ -65,7 +65,7 @@ export default class Photos extends Vue {
 <template>
   <div class="title">
     <div class="font-script-en bold">The Wandering Gallery</div>
-<!--    <div class="subtitle">Here I post pictures of the wonderful scenes I encounter during my trips.</div>-->
+    <div class="subtitle <sm:hidden">想要把旅行中用相机拍到好看照片时的喜悦分享给照片里出现的路人，所以买了便携照片打印机、搭了这个网页！</div>
   </div>
   <div class="outer-grid">
     <div v-for="row in photoRows" :key="row[0].id" flex justify-center :class="`grid-cols-${row.length}`">
@@ -96,7 +96,7 @@ export default class Photos extends Vue {
 
 .img-container
   filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3))
-  margin: -15px
+  margin: -0.5rem
   max-width: 50%
 
 img.photo