From 416086df7eebddc6286163d96b487a6e9ad6434a Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 4 Sep 2020 00:29:37 +0200
Subject: [PATCH] feat: :lipstick: update markup and styles

Minor text changes, add credits in muscle refs with hover, change responsive breakpoints and make paragraphs wider
---
 src/App.vue | 68 +++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8f82218..5ee7857 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -197,51 +197,87 @@
         <div class="prose" v-show="!nsfw">
           <p class="nsfw-bar">
             Some of these additional references are NSFW. Click
-            <a href="#" @click.prevent="nsfw = !nsfw">here</a> to see them.
+            <a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
+            mode.
           </p>
         </div>
         <gallery v-show="nsfw">
           <ul>
             <li>
-              <img src="@img/muscle-ref/muscle-ref1.png" alt="By Grisser" />
+              <img
+                src="@img/muscle-ref/muscle-ref1.png"
+                alt="By Grisser"
+                title="By Grisser"
+              />
             </li>
             <li>
               <img
                 src="@img/muscle-ref/muscle-ref2.png"
                 alt="By valentinapaz"
+                title="By valentinapaz"
               />
             </li>
             <li>
               <img
                 src="@img/muscle-ref/muscle-ref3.png"
                 alt="By Marsel-Defender"
+                title="By Marsel-Defender"
               />
             </li>
             <li>
-              <img src="@img/muscle-ref/muscle-ref4.png" alt="By SirBoburto" />
+              <img
+                src="@img/muscle-ref/muscle-ref4.png"
+                alt="By SirBoburto"
+                title="By SirBoburto"
+              />
             </li>
             <li>
-              <img src="@img/muscle-ref/muscle-ref5.jpeg" alt="By SexMuffin" />
+              <img
+                src="@img/muscle-ref/muscle-ref5.jpeg"
+                alt="By SexMuffin"
+                title="By SexMuffin"
+              />
             </li>
             <li>
-              <img src="@img/muscle-ref/muscle-ref6.png" alt="By Knuxlight" />
+              <img
+                src="@img/muscle-ref/muscle-ref6.png"
+                alt="By Knuxlight"
+                title="By Knuxlight"
+              />
             </li>
             <li>
-              <img src="@img/muscle-ref/muscle-ref7.png" alt="By ShoNuff44" />
+              <img
+                src="@img/muscle-ref/muscle-ref7.png"
+                alt="By ShoNuff44"
+                title="By ShoNuff44"
+              />
             </li>
             <li>
-              <img src="@img/muscle-ref/muscle-ref8.jpeg" alt="By j-cock" />
+              <img
+                src="@img/muscle-ref/muscle-ref8.jpeg"
+                alt="By j-cock"
+                title="By j-cock"
+              />
             </li>
             <li>
-              <img src="@img/muscle-ref/muscle-ref9.jpeg" alt="By j-cock" />
+              <img
+                src="@img/muscle-ref/muscle-ref9.jpeg"
+                alt="By j-cock"
+                title="By j-cock"
+              />
             </li>
             <li>
-              <img src="@img/muscle-ref/muscle-ref10.png" alt="By j-cock" />
+              <img
+                src="@img/muscle-ref/muscle-ref10.png"
+                alt="By j-cock"
+                title="By j-cock"
+              />
             </li>
             <li>
               <img
                 src="@img/muscle-ref/muscle-ref11.jpeg"
                 alt="By Marsel-Defender"
+                title="By Marsel-Defender"
               />
             </li>
           </ul>
@@ -631,7 +667,7 @@ export default {
     font-size: 1.25em;
   }
 
-  @media (min-width: 160em) {
+  @media (min-width: 125em) {
     font-size: 1.5em;
   }
 }
@@ -640,15 +676,23 @@ main {
   h2,
   h3,
   p {
-    max-width: 40rem;
+    max-width: 45rem;
     margin-left: auto;
     margin-right: auto;
+
+    @media (min-width: 125em) {
+      max-width: 55rem;
+    }
   }
 
   .prose {
-    max-width: 40rem;
+    max-width: 45rem;
     margin-left: auto;
     margin-right: auto;
+
+    @media (min-width: 125em) {
+      max-width: 55rem;
+    }
   }
 
   @include mq-mobile {