From f3ee4ecdfdffe19f1c9f973470a3357d8510f749 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Sat, 1 Jul 2023 08:28:26 +0200
Subject: [PATCH] Apply various styling tweaks

---
 src/views/Home.vue    | 52 ++++---------------------------------------
 src/views/Ranking.vue |  1 +
 2 files changed, 5 insertions(+), 48 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 08f02c6..74c5828 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,58 +1,14 @@
 <template>
   <section
-    class="w-screen h-screen text-center d-flex flex-column justify-center align-center"
+    class="w-100 h-100 px-6 text-center d-flex flex-column justify-center align-center"
   >
-    <h1 class="mb-lg-6 mb-3 text-lg-h1 text-h2">RaceMash</h1>
-    <p class="mb-lg-9 mb-5 text-lg-h4 text-h5 font-weight-regular">
+    <h1 class="mb-md-6 mb-3 text-md-h1 text-h2">RaceMash</h1>
+    <p class="mb-md-9 mb-5 text-md-h4 text-h5 font-weight-regular">
       It's like FaceMash, but with photos of F1 cars
     </p>
     <div id="hero-btns" class="d-flex justify-center flex-wrap mb-12">
       <v-btn color="primary" size="large" to="/vote">Play</v-btn>
-      <v-btn size="large" to="#about">Tell me more</v-btn>
-    </div>
-  </section>
-  <section
-    id="about"
-    class="w-100 py-10 d-flex flex-column justify-center bg-grey-darken-4"
-  >
-    <h2 class="text-h2 text-center mb-10">About</h2>
-    <div class="w-50 mx-auto my-0">
-      <p class="mb-6 text-h5 font-weight-regular">
-        In RaceMash, you're presented with two randomly picked photographs of F1
-        cars from the 2022 season. Below them you'll find buttons for placing a
-        vote for one of the images and an extra one for declaring a draw. Once
-        you've placed your vote, another pair of images gets picked and the
-        cycle continues.
-      </p>
-      <p class="mb-6 text-h5 font-weight-regular">
-        Every vote you submit gradually fills up a progress bar and if you reach
-        25%, 50%, or 75%, you'll be awarded a fun fact about Formula One. Once
-        you've submitted all votes, you unlock a ranking page that reveals the
-        photos' final ratings, where the images are ordered by said ratings
-        descendingly.
-      </p>
-      <p class="mb-6 text-h5 font-weight-regular">
-        But how are these ratings calculated? Each photograph has a base rating
-        of 1500 points (as well as a few other parameters you don't need to
-        worry about) that gets updated using
-        <a
-          href="http://www.glicko.net/glicko/glicko2.pdf"
-          target="_blank"
-          rel="noopener noreferrer"
-          >the Glicko-2 system</a
-        >
-        every 12 votes you cast.
-      </p>
-      <p class="text-h5 font-weight-regular">
-        This project was developed by
-        <a
-          href="https://maciejpedzi.ch"
-          target="_blank"
-          rel="noopener noreferrer"
-          >Maciej Pędzich</a
-        >
-        and its source code is available under the Apache 2.0 License.
-      </p>
+      <v-btn size="large" to="/about">Tell me more</v-btn>
     </div>
   </section>
 </template>
diff --git a/src/views/Ranking.vue b/src/views/Ranking.vue
index 73ea071..8f7a2c8 100644
--- a/src/views/Ranking.vue
+++ b/src/views/Ranking.vue
@@ -31,6 +31,7 @@ const cols = computed(() =>
           <v-card max-width="480" max-height="270">
             <v-img
               :src="`/images/${photo.fileName}`"
+              lazy-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAEOCAYAAABRmsRnAAAW00lEQVR4Xu3d55IbRRsFYJkMJuecU5Hh/i+BImdMzmCyycFfHdUnahEzPVqlbrWfqfKv3Z3uft62jnriiWefffbszEaAAAECBAjsVeCEAN6rt8YIECBAgMBcQACbCAQIECBAoIKAAK6ArkkCBAgQICCAzQECBAgQIFBBQABXQNckAQIECBAQwOYAAQIECBCoICCAK6BrkgABAgQICGBzgAABAgQIVBAQwBXQNUmAAAECBASwOUCAAAECBCoICOAK6JokQIAAAQIC2BwgQIAAAQIVBARwBXRNEiBAgAABAWwOECBAgACBCgICuAK6JgkQIECAgAA2BwgQIECAQAUBAVwBXZMECBAgQEAAmwMECBAgQKCCgACugK5JAgQIECAggM0BAgQIECBQQUAAV0DXJAECBAgQEMDmAAECBAgQqCAggCuga5IAAQIECAhgc4AAAQIECFQQEMAV0DVJgAABAgQEsDlAgAABAgQqCAjgCuiaJECAAAECAtgcIECAAAECFQQEcAV0TRIgQIAAAQFsDhAgQIAAgQoCArgCuiYJECBAgIAANgcIECBAgEAFAQFcAV2TBAgQIEBAAJsDBAgQIECggoAAroCuSQIECBAgIIDNAQIECBAgUEFAAFdA1yQBAgQIEBDA5gABAgQIEKggIIAroGuSAAECBAgIYHOAAAECBAhUEBDAFdA1SYAAAQIEBLA5QIAAAQIEKggI4AromiRAgAABAgLYHCBAgAABAhUEBHAFdE0SIECAAAEBbA4QIECAAIEKAgK4AromCRAgQICAADYHCBAgQIBABQEBXAFdkwQIECBAQACbAwQIECBAoIKAAK6ArkkCBAgQICCAzQECBAgQIFBBQABXQNckAQIECBAQwOYAAQIECBCoICCAK6BrkgABAgQICGBzgAABAgQIVBAQwBXQNUmAAAECBASwOUCAAAECBCoICOAK6JokQIAAAQIC2BwgQIAAAQIVBARwBXRNEiBAgAABAWwOECBAgACBCgICuAK6JgkQIECAgAA2BwgQIECAQAUBAVwBXZMECBAgQEAAmwMECBAgQKCCgACugK5JAgQIECAggM0BAgQIECBQQUAAV0DXJAECBAgQEMDmAAECBAgQqCAggCuga5IAAQIECAhgc4AAAQIECFQQEMAV0DVJgAABAgQEsDlAgAABAgQqCAjgCuiaJECAAAECAtgcIECAAAECFQQEcAV0TRIgQIAAAQFsDhAgQIAAgQoCArgCuiYJECBAgIAANgcIECBAgEAFAQFcAV2TBAgQIEBAAJsDBAgQIECggoAAroCuSQIECBAgIIDNAQIECBAgUEFAAFdA1yQBAgQIEBDA5gABAgQIEKggIIAroGuSAAECBAgIYHOAAAECBAhUEBDAFdA1SYAAAQIEBLA5QIAAAQIEKggI4AromiRAgAABAgLYHCBAgAABAhUEBHAFdE0SIECAAAEBbA4QIECAAIEKAgK4AromCRAgQICAADYHCBAgQIBABQEBXAFdkwQIECBAQACbAwQIECBAoIKAAK6ArkkCBAgQICCAzQECBAgQIFBBQABXQNckAQIECBAQwOYAAQIECBCoICCAK6BrkgABAgQICGBzgAABAgQIVBAQwBXQNUmAAAECBASwOUCAAAECBCoICOAK6JokQIAAAQIC2BwgQIAAAQIVBARwBXRNEiBAgAABAWwOECBAgACBCgICuAK6JgkQIECAgAA2BwgQIECAQAUBAVwBXZMECBAgQEAAmwMEKgtcccUVswcffHCwFz/99NPsjTfeGPzZPffcM7v22msHf/bee+/Nvvnmm8oj0zwBAiUBAWx+/CPwyCOPzC699NJBke+++272zjvv0NqBgADeAapdEjgAAQF8AEXaVxcF8L6k/92OAK7jrlUCtQUEcO0KNNS+AK5TDAFcx12rBGoLCODaFWiofQFcpxgCuI67VgnUFhDAtSvQUPsCuE4x1g3g22+/fXb11VcPdvrjjz+e5by9jQCBdgUEcLu12XvPBPDeyecNrhvAdXqrVQIEtiUggLcl2cF+BHCdIgrgOu5aJVBbQADXrkBD7dcO4EsuuWR+G9QFF1wwO//882dnz56d/fnnn7M//vhjlvth//rrr420zjvvvNnFF188u+iii2YXXnjhvI0TJ07M9/n333/P9//bb7/Nfvnll43bWnT08ssvn2VcGVPG8vvvv89+/PHH+dgWW8sBHJ/0L2YZQ4x+/fXX2ZkzZ/41huMWJrVY7Dd1SI2z39TZRuBcERDA50qlVxhnjQBO4N50002zq666av4BX9p+/vnn2enTp2dff/31PDBX2a6//vrZlVdeObvsssvm4bvqlhBOO2nvuMGf0MqYbrzxxnnQL28J4uz7s88+m+973QBe90EcTzzxxGC/0s+XX355/iUhoXjLLbfMrrvuusG6pN9ffPHF7PPPPz9WEKfGt9122/wBIgnh5S1tf/nll/N/+ZJy6623zvsxtKXtTz75ZNWS+j0CzQkI4OZKUq9D+wzgfPjeeeed8w/4425ZLb3//vuzH374YfJPH3vssWMF7/IO09YHH3ww+/777yfbyi8kYB544IF54E9tCZtTp07N/2afT8KaCuD057777puveqe21CAPaFnlC1GOBmS/U1+00mZW2LHJFxkBPFUFPz9UAQF8qJXbQb/3FcD5YE9I5dDsJltWP1kFlbZNAzj7zkosITMVwlk1PvTQQ6NPExvqZ1bDGcddd901OIxdPIqyFMAZ59133z1fAa+6ZbX60UcfFX/95MmT85ofZ78Zew7X33zzzYP7tgJetUJ+r1UBAdxqZSr0ax8BvE5IlSiyEs7h3LFtGwGcfeeQaw7Plg5HJ7jWWdFn9Th0ODbt7juAS30p1eGVV16Znz8f2jK2zK3jnAJY7KfUHwFc4UNCk1sVEMBb5Tzsne0jgLPSy3nZ0pbzr7kgJ2GdlVNp1ZTV6auvvjr64b8I4Pxewmyx76w8E6Y5X5v9JxxyHrp06PjTTz+dn7cd2nJ4Navf0pYwSfvpy+LCrKkZs+8AXu5P+hyjxcVqY/0thWHuV86h5NKWw/GxSTtTNV/sRwBPzR4/b11AALdeoT32b9cBnJB79NFHRz/Ms4J69913Z7nYarHlAzkX7ZQ+wLMCzkp4aMuFSjlPmYdSrHIx1Q033DA/Nz20JSBee+21wZ/l3ObYQzHyBzlMmwA/2oesltPW2Oo3f1crgNPfXGSVYEz/0tc77rhjtHZj/czf5pD32JeoBHzOsR99c1NqnvO+Y+d+BfAePxQ0tVMBAbxT3sPa+a4DOB/guTJ4aMsHccJt7DBm6fBuVpQvvvjiSgG7SkVKDi+88MJ/2slFRQmZsVViwiWvBxzacjVwviSMbTUCeGyln3Ox+TI0Vr/nn3/+Pz+aGl/ptYn5cpIvRGObFfAqs9nvtCwggFuuzp77tusAzup37MKrqQt5cjtPQm5sy8VDqz56MUGZC8GyKssKbfkQa259yWHQoS3v5l2+VzWHru+///7Rvi1u7Rn7hZL7vgM4h/7zRejofcqLfucIRg7pj20J4OWroUshmrZy+mBsm/piI4D3/AGhua0LCOCtkx7uDncZwAm7p556ahTn7bffnryt6OGHHx4NxhwuzfOPx7bca5tDxLknOEEydU5zbD9D/Szdq5rD6a+//npxUmRVOXal774DuHRlecyeeeaZ0bG89NJL8wdqHN1KNVslQHN7Vmo3tK3y94f7v1HPzwUBAXwuVHnFMe4ygLPyzQp4bBv68F7+3dIFXGOHefOgj6zCcpHUNraco/7222//tat1+nV0B6XDtPsO4Lfeemt+68/Y9vTTT4+esx5a6ZeuQp+6gj19KK2gBfA2ZrR91BQQwDX1G2t7lwE8dZXwc889N/lEpdLVtLnQKqvTo9s6955OlWTonOW99947u+aaawb/dOrQev4oq/LcIzu07TuAc0g4h4bHthzFGLugaiiAS7+/ymkDT8KampF+fsgCAviQq7flvu8ygEuPW8wwth3AOVya8Wz6sI9l4t4DeOp89ZNPPjn6JKuhvy099GPoaMKyd+lLlxXwlj8A7G7vAgJ47+TtNrjLAM6h4Ox/bNv2Ieic782tQWNbnmqV1WnO0eae4KNbLqjKhVVD21AA93QIetsBXLrwLk/PSg1KW+l51wK43c8SPVtNQACv5nRO/NYuAzhXtGb1NLZt+yKs0rnDXC2dw59jWx6oMXbOeCiAN70Iq/T3+z4Eve0ALn2ZKd2etajN448/PvpMagF8TnwsdT1IAdx1eY83uF0GcHqyz9uQSh/8pXOPOXSd85ZjD8cYCuCebkPadgBP3Tuc9paPQCxm7ZTrVABnDoydr84cGGs37W/yt/lCNXbldp6ktspLRI73P9dvH6qAAD7Uyu2g37sO4E0exFE6zDv0II7SKrZ09W2euJXzjmPbUABP3a9aelLX1IMqDn0FPHXqIacCEobL9x3nPu3UsPRGpqkAPu756qM13+RvSxfllR48soP/0nbZuIAAbrxA++xeKYDzCMU8lvA4W1YYua1lseWCqLQxdg/u2KMos6IYu082+x4KuNKHYELtzTff/M+HflZcOW9cukd47AN06lGUuU85T5g6+qCKhG++WLT0KMptr4BTn9KXofw8j/j86quv5ldfxz6H//PEtKk3Jwng4/xv9LstCgjgFqtSqU+lAF6nS3koQy6uOrqt8sagXBh19GUMpffHjr2MYWolmw/906dPzx99mf0nfMduJTra/7EAnrrKO/tI+GZsi5cx5OleU9uhr4AzvlVsphyGfi6A11HzNy0JCOCWqlG5L/sI4Kxq8nSkbd0elAf5J0iXtxy6zEMg1nniVVb7Y6uv0iHEVb5cDJW4pdcR7mIFnDGXTj+MTft8UTlz5szaT8La5DDyJn/rEHTlD7IDal4AH1Cxdt3VfQRwxpBHQebBE+u8H/aoQen1gPm90tXFY5Y5FJrwPs5tSIt9rfOu44R9Hv849gamHlbA8ckXoXxByWH3Vbecq88cGXsrkhXwqpJ+r1UBAdxqZSr0a18BnKElrBI6x/lAXpDk3HI+nHMBz9S2yvuHF/vISvrDDz+cnwdeJ4CznxzOzpeL0nuFF+3lEP2pU6fmFnnm8dDWSwAvQjjn8hOopSMTccmRjdS39CCOqS9gm6xiN/lbK+Cp/5V+vhAQwObCPwL7DOBFo7lKNudrE3ilc735/Zw/TUjmoqvlt+6UypiQz2p4bMWd/WY1tXjG83EfxLHcdsIlY8qFREPnebPqzT2wCZB8mSidI+0pgBdOqUPeL5yaL95KldDNef+4pA6L+pYexJEvSzliMbZtEqKb/K0A9qG6qoAAXlXK7+1cIGGcc8MJ4qwKcw4wAZUP5wTR0ZfZr9OZrErzL/vPB3z2m4uxSs8+Xqedf77d/v+K3gRO2sxYciV5zmse5wvEJn049L8tPYgjRw9WOQpy6Ab636+AAO63tkZG4KAFSg/iGLr3+6AHq/PnpIAAPifLbtAE9iuQw+wJ1BzqLz2BatGrqQdx5JWJR+8x3+9otEZgOwICeDuO9kKAQEFg8crFHHrPed78y2mF5UPxOVSfc/a5UKt0TcDUe4sVg8AhCAjgQ6iSPhI4cIGhdx7nMHLOiS9WxAncVW5Ny0VaeZWhjcChCwjgQ6+g/hM4AIGhAF6n27mALW/OchHbOnr+pjUBAdxaRfSHQIcC2wjg3H6WdwhvejV8h7yGdKACAvhAC6fbBA5J4OTJk/NX/E3d6z00plxwlZdZuOXokCqur6sICOBVlPwOAQIbC+QBJQnivO0o92PnfG+uds7boPIvK9v8yznh3J+di7Ty7ty8MMNGoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHAQHcY1WNiQABAgSaFxDAzZdIBwkQIECgRwEB3GNVjYkAAQIEmhcQwM2XSAcJECBAoEcBAdxjVY2JAAECBJoXEMDNl0gHCRAgQKBHgf8Byq/FHpGVJwcAAAAASUVORK5CYII="
               :alt="photo.altText"
               class="align-end"
               gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"