[+] Styling

src/views/Photo.vue

@@ -12,6 +12,11 @@ interface PhotoMetadata {
   exif: {[id: string]: string}
 }
 
+// Take in a string, use its hash to produce a number from 0 to 1
+function detRandom(seed: string): number {
+  return Array.from(seed).reduce((acc, char) => (acc + char.charCodeAt(0) * 65535) % 22859, 0) / 22859
+}
+
 @Component({})
 export default class Photos extends Vue {
   photos: PhotoMetadata[]
@@ -21,22 +26,28 @@ export default class Photos extends Vue {
     this.photos = await (await fetch('https://p.aza.moe/photos')).json()
     this.photos.sort((a, b) => (b.upload_time < a.upload_time ? 1 : -1))
 
+    let rowProbabilityTable = {
+      1: 0, 2: 0.5, 3: 0.5
+    }
+
     // Generate photo rows: there is a 10% chance that a photo will be the only photo in its row
     this.photoRows = []
     let currentRow: PhotoMetadata[] = []
     this.photos.forEach((p) => {
-      if (currentRow.length === 0) {
+      if (currentRow.length === 0) currentRow.push(p)
-        currentRow.push(p)
+      else if (currentRow.length >= 3) {
-      } else {
+        this.photoRows.push(currentRow)
-        const singleChance = Math.random()
+        currentRow = [ p ]
-        if (singleChance < 0.1) {
+      }
+      else {
+        const singleChance = detRandom(p.original_photo)
+        if (singleChance < rowProbabilityTable[currentRow.length]) {
           this.photoRows.push(currentRow)
           currentRow = [ p ]
-        } else {
+        } else currentRow.push(p)
-          currentRow.push(p)
-        }
       }
     })
+    if (currentRow.length > 0) this.photoRows.push(currentRow)
   }
 
   url(s: string): string {
@@ -45,29 +56,39 @@ export default class Photos extends Vue {
   }
 
   randomRotation(s: string): string {
-    const hash = Array.from(s).reduce((acc, char) => acc + char.charCodeAt(0), 0)
+    const angle = (detRandom(s) * 20) - 10 // -10 to +10 degrees
-    const angle = (hash % 21) - 10 // -10 to +10 degrees
     return `rotate(${angle}deg)`
   }
 }
 </script>
 
 <template>
-  <div class="header mb-10">
+  <div class="title">
-    <h1 class="font-script-en bold">The Wandering Gallery</h1>
+    <div class="font-script-en bold">The Wandering Gallery</div>
-    <div>Here I post pictures of the wonderful scenes I encounter during my trips.</div>
+<!--    <div class="subtitle">Here I post pictures of the wonderful scenes I encounter during my trips.</div>-->
   </div>
-  <div class="outer-grid grid grid-cols-2 gap-2 p-2">
+  <div class="outer-grid">
-    <div v-for="p in photos" class="img-container" :style="{transform: randomRotation(p.id)}" :key="p.id">
+    <div v-for="row in photoRows" :key="row[0].id" flex justify-center :class="`grid-cols-${row.length}`">
-      <img class="w-full h-full object-contain" :src="url(p.thumbnail_edited)" :alt="p.id"/>
+      <div v-for="p in row" :style="{transform: randomRotation(p.id)}" :key="p.id"
+           class="img-container" relative>
+        <img class="photo" w-full h-full object-contain :src="url(p.thumbnail_edited)" :alt="p.id"/>
+        <div flex w-full justify-center absolute position-top-none>
+          <img class="pin" src="/thumb%20tack%202%20plain.png" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="sass">
 @use "../css/colors"
+@use "../css/responsive"
 
-h1
+.title
+  margin-top: 8rem
+  margin-bottom: 6rem
+
+.bold
   font-size: 3em
 
 .outer-grid
@@ -76,8 +97,13 @@ h1
 .img-container
   filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3))
   margin: -15px
+  max-width: 50%
 
-img
+img.photo
-  clip-path: inset(10px 8px)
+  clip-path: inset(3.2% 1.8%)
   pointer-events: none
+
+img.pin
+  width: 40px
+  height: 40px
 </style>