Background, claw icon

package.json

@@ -10,8 +10,10 @@
     "serve:handlebars": "node app.js",
     "serve:css": "tailwindcss -i ./src/app.css -o ./dist/app.css --watch",
     "serve:svg": "nodemon --watch 'src/svgs/*' -e svg --exec 'npm run build:svg'",
+    "serve:svg": "nodemon --watch 'src/images/*' --exec 'npm run build:images'",
     "build:css": "tailwindcss -i ./src/app.css -o ./dist/app.css",
     "build:svg": "svgdir2sprite ./src/svgs ./dist/spritesheet.svg",
+    "build:images": "mkdir -p ./dist ./dist/images && cp ./src/images/* ./dist/images/",
     "test": "ava",
     "lint": "prettier --check .",
     "prepare": "husky install"

src/app.css

@@ -30,6 +30,19 @@ body {
   font-weight: 500;
 }
 
+body::after {
+  content: "";
+  background-image: url("images/bg.jpeg");
+  filter: grayscale(50%);
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: -1;
+  opacity: 0.05;
+}
+
 header h2 {
   font-family: "Special Elite", cursive;
   font-size: 2em;

src/svgs/claw.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <g transform="rotate(-98.4103, 13.3507, 12.3419)" id="svgg">
+   <path id="path0" d="m9.73959,0.74372c0.02531,0.06154 0.18636,0.21856 0.35778,0.34897c0.62715,0.47719 2.93009,2.61072 3.60682,3.34156c0.37192,0.4016 1.6607,1.84269 2.06178,2.30539c0.14926,0.1723 0.49805,0.64705 0.77501,1.05511c0.27696,0.40806 0.76366,1.01758 1.08147,1.35441c0.35656,0.37786 0.88429,1.11499 1.37772,1.92421c0.43983,0.7215 1.09256,1.70277 1.45043,2.18066c0.35787,0.47789 0.88176,1.26014 1.16413,1.7383c0.40893,0.69244 0.51952,0.82773 0.543,0.66451c0.10797,-0.75136 -2.27161,-5.51864 -3.6372,-7.28679c-0.22415,-0.29014 -0.55793,-0.78383 -0.74184,-1.09692c-0.18391,-0.31318 -0.55095,-0.76244 -0.81551,-0.99829c-0.26465,-0.23585 -0.74839,-0.78575 -1.07501,-1.222c-0.99593,-1.32997 -1.79861,-1.94176 -4.67066,-3.56004c-0.38406,-0.21638 -0.88412,-0.49866 -1.11115,-0.62715c-0.22712,-0.12857 -0.39217,-0.18339 -0.36677,-0.12194m-3.09393,0.84746c0.11417,0.14062 0.69855,0.85069 1.29864,1.57795c0.60009,0.72735 1.36113,1.72197 1.69125,2.21025c0.8115,1.20044 1.73952,2.37513 2.67906,3.39114c0.54266,0.58682 0.85723,1.01339 1.02988,1.39657c0.25871,0.57425 0.71731,1.28511 1.59488,2.47202c0.28394,0.38406 0.85339,1.16963 1.26547,1.74571c0.7332,1.02508 1.39797,1.83064 2.23259,2.70586c0.22895,0.24004 0.79666,1.01539 1.26154,1.72302c0.46497,0.70763 0.85889,1.27297 0.87548,1.25639c0.05307,-0.05298 -0.66241,-1.84435 -1.34691,-3.3722c-0.0968,-0.21603 -0.22555,-0.5499 -0.28604,-0.74193c-0.19421,-0.61571 -0.43748,-1.02543 -1.21833,-2.05121c-0.92663,-1.21737 -1.39317,-1.96506 -1.90073,-3.04636c-0.6199,-1.32055 -1.09613,-1.96122 -2.47184,-3.3255c-0.70186,-0.6961 -1.46902,-1.50009 -1.7046,-1.78665c-0.40326,-0.49037 -0.66232,-0.78618 -1.47705,-1.68645c-0.18636,-0.20591 -0.6158,-0.55653 -0.95438,-0.7792c-0.33858,-0.22267 -1.08042,-0.75136 -1.64857,-1.17487c-1.12537,-0.83899 -1.23256,-0.89896 -0.92034,-0.51455m-2.10551,3.28255c0,0.0467 0.41461,0.59538 0.9213,1.21929c0.7469,0.91956 1.95913,2.70516 1.95913,2.88567c0,0.14446 0.99436,1.60082 1.51484,2.21863c0.98999,1.1753 1.19197,1.44615 2.1811,2.92564c0.51359,0.76811 1.09989,1.59777 1.30291,1.84365c1.30833,1.58432 2.63812,3.23909 3.08127,3.83437c0.28412,0.38161 0.53873,0.71347 0.56587,0.73748c0.06328,0.05604 1.44667,2.24429 1.83483,2.90225c0.34207,0.57984 0.55296,0.71548 0.34556,0.22232c-0.04635,-0.11024 -0.36241,-0.90751 -0.70221,-1.77164c-0.33989,-0.86413 -0.67027,-1.68898 -0.73425,-1.833c-0.06398,-0.14402 -0.24196,-0.59232 -0.3954,-0.9961c-0.27015,-0.71077 -0.35944,-0.84178 -1.53317,-2.24813c-0.60882,-0.72945 -2.22421,-3.22512 -2.22421,-3.43626c0,-0.09471 -0.55112,-0.64609 -1.06942,-1.06995c-0.57198,-0.46776 -1.53824,-1.62299 -2.20527,-2.63655c-0.64426,-0.979 -1.34516,-1.71944 -3.05352,-3.22573c-0.43206,-0.381 -1.01147,-0.9096 -1.28746,-1.17478c-0.276,-0.26509 -0.50189,-0.44385 -0.50189,-0.39715m5.14506,13.7008" fill="currentColor" fill-rule="evenodd"/>
+  </g>
+ </g>
+
+</svg>

src/views/partials/footer.handlebars

@@ -12,5 +12,6 @@
     <div class="space-y-2 lg:text-right">
         <p>This site uses <a href="https://gitlab.com/gaiety/pronoun-monster/-/blob/main/UNLICENSE" class="font-bold">the Unlicense</a> and icons from <a href="https://pronouns.design/" class="font-bold">pronouns.design</a></p>
         <p>Inspired by <a href="https://twitter.com/morganastra" class="font-bold">@morganastra</a>'s <a href="https://github.com/witch-house/pronoun.is" class="font-bold">pronoun.is</a> project</p>
+        <p>Background Photo by <a href="https://unsplash.com/@jazminantoinette?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" class="font-bold">Jazmin Quaynor</a> on <a href="https://unsplash.com/photos/bm9zWKi_c9Y?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" class="font-bold">Unsplash</a></p>
     </div>
 </footer>

src/views/partials/pronounList.handlebars

@@ -2,7 +2,7 @@
     {{#each pronounList}}
       <li class="mb-2 flex flex-row gap-1 items-center">
         <svg viewBox="0 0 24 24" class="w-8 h-8 pronoun-list-icon">
-          <use xlink:href="spritesheet.svg#leaf"></use>
+          <use xlink:href="spritesheet.svg#claw"></use>
         </svg>
         <a href="/{{this}}" class="pronoun-list-link -mt-1">{{this}}</a>
       </li>