content

package-lock.json

@@ -9,6 +9,7 @@
       "license": "ISC",
       "devDependencies": {
         "@11ty/eleventy": "^0.12.1",
+        "@tailwindcss/aspect-ratio": "^0.2.0",
         "autoprefixer": "^10.2.5",
         "cssnano": "^5.0.1",
         "postcss": "^8.2.13",
@@ -226,6 +227,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tailwindcss/aspect-ratio": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.2.0.tgz",
+      "integrity": "sha512-v5LyHkwXj/4lI74B06zUrmWEdmSqS43+jw717pkt3fAXqb7ALwu77A8t7j+Bej+ZbdlIIqNMYheGN7wSGV1A6w==",
+      "dev": true
+    },
     "node_modules/@trysound/sax": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
@@ -6055,6 +6062,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@tailwindcss/aspect-ratio": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.2.0.tgz",
+      "integrity": "sha512-v5LyHkwXj/4lI74B06zUrmWEdmSqS43+jw717pkt3fAXqb7ALwu77A8t7j+Bej+ZbdlIIqNMYheGN7wSGV1A6w==",
+      "dev": true
+    },
     "@trysound/sax": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",

package.json

@@ -21,6 +21,7 @@
   "homepage": "https://gitlab.com/gaiety/fursona#readme",
   "devDependencies": {
     "@11ty/eleventy": "^0.12.1",
+    "@tailwindcss/aspect-ratio": "^0.2.0",
     "autoprefixer": "^10.2.5",
     "cssnano": "^5.0.1",
     "postcss": "^8.2.13",

src/_includes/default.njk

@@ -82,12 +82,32 @@
                 About
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ about }}
+                {{ about | safe }}
               </dd>
             </div>
           </dl>
         </div>
       </div>
+
+      <div class="bg-white">
+        <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+          <div class="bg-pink-900 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
+            <div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+              <div class="lg:self-center">
+                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+                  <span class="block">Want art with her?</span>
+                  <span class="block">Reach out and let's make it happen!</span>
+                </h2>
+                <p class="mt-4 text-lg leading-6 text-pink-200">Gaiety is generally available for most kinds of art with fun people. Be kind, respectful and let's find an artist together and chat.</p>
+                <a href="https://sfw.furaffinity.net/user/sharpshark28/" class="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-pink-900 hover:bg-pink-50">Shout or Note on FurAffinity.net</a>
+              </div>
+            </div>
+            <a class="block -mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1" href="https://sfw.furaffinity.net/view/34038907/" title="View Reference Sheet by ZeDzar on Furaffinity.net">
+              <img class="rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20" src="/assets/reference-sfw.jpg" alt="Reference by ZeDzar">
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   </body>
 </html>

src/index.md

@@ -9,7 +9,6 @@ species: Anatolian Shepherd
 personality: 💋 Playful, Courageous, Friendly
 gender: 💃 Female [She/Her]
 orientation: 🌈 Bisexual (Leaning Lesbian)
-about: ...
+about: While she's evolved time and time again she's the same shep I've had since I was a pup in the real. Gaiety is a 1:1 reflection of her creator. So much so that I've adopted her name as my middle name. <a href="https://www.gaiety.me/uses/" class="text-pink-900">You can learn a little more about her creator at Gaiety.me</a>
 ---
 
-Sup

tailwind.config.js

@@ -7,5 +7,7 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ],
 }