minor UI tweaks; add PWA; update branding

ulf-frostypaw · Jan 21, 2023 · 7fcbefa · 7fcbefa
1 parent 4322f20
commit 7fcbefa
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 31 deletions.
diff --git a/components/Dropdown/DropdownItem.vue b/components/Dropdown/DropdownItem.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/components/Icon/IconMono.vue b/components/Icon/IconMono.vue
@@ -0,0 +1,36 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="512"
+    height="512"
+    viewBox="0 0 512 512"
+    fill="none"
+    focusable="false"
+    role="img"
+  >
+    <path
+      d="M51.5918 339.277C51.5918 251.251 51.5918 163.5 51.5918 75.8161C51.5918 61.0311 63.0309 49.8054 76.9597 49.8054C195.792 49.9423 314.691 49.9423 433.523 49.8739C446.644 49.8739 458.083 61.7156 458.016 74.7209C457.881 130.302 457.948 185.814 457.948 241.395C457.948 242.764 457.948 244.064 457.948 245.639C452.229 245.228 446.846 244.886 441.463 244.543C437.896 244.27 434.397 243.927 430.831 243.654C409.366 242.079 388.305 238.657 367.714 232.086C350.758 226.678 335.752 217.574 321.15 207.581C310.115 200.051 298.07 194.712 285.151 191.701C280.037 190.537 279.768 190.195 279.633 184.856C279.297 170.344 276.874 156.107 272.77 142.212C269.944 132.766 266.647 123.32 262.475 114.421C256.755 102.306 250.026 90.738 241.01 80.7445C237.376 76.706 233.944 72.3252 229.84 68.8343C224.995 64.7958 218.67 66.3701 215.103 71.7092C209.989 79.307 204.876 86.9733 199.627 94.7765C196.801 90.5327 194.042 85.8781 190.879 81.4974C185.295 73.8311 179.844 66.0963 173.721 58.9092C169.213 53.5701 161.609 54.5284 157.504 60.415C148.488 73.4888 140.278 87.1787 133.751 101.758C125.744 119.692 119.352 138.173 116.256 157.681C114.439 169.181 113.228 180.817 112.219 192.385C111.546 200.599 111.21 208.95 111.546 217.232C111.882 225.994 112.892 234.687 114.17 243.38C115.853 254.948 118.073 266.447 120.226 278.015C120.765 280.958 121.37 284.039 122.649 286.708C124.129 289.925 123.254 292.389 121.37 294.717C114.305 303.204 107.576 312.171 99.8378 319.974C87.7259 332.158 73.2588 340.372 56.2347 343.521C55.4945 343.658 54.6871 343.521 53.8796 343.589C53.2067 343.658 52.5338 343.795 51.5918 343.932C51.5918 342.494 51.5918 341.057 51.5918 339.277ZM377.606 125.852C380.163 125.852 382.652 125.852 385.344 125.852C385.344 133.861 385.277 141.322 385.344 148.851C385.411 154.122 389.381 158.845 394.091 159.393C399.744 160.009 404.454 156.928 405.463 151.316C406.136 147.551 406.069 143.718 406.136 139.885C406.271 135.298 406.136 130.644 406.136 125.921C413 125.921 419.392 125.921 425.784 125.921C427.669 125.921 429.62 126.126 431.437 125.716C435.609 124.757 439.646 119.213 439.04 115.243C438.166 109.288 433.994 105.181 428.947 105.386C424.91 105.523 420.872 105.386 416.835 105.386C413.269 105.386 409.77 105.386 406.136 105.386C406.136 97.583 406.203 90.2589 406.136 83.0033C406.069 77.5958 401.897 72.3937 397.389 71.8461C391.804 71.23 386.959 74.3787 385.68 80.1969C385.007 83.1402 385.344 86.2888 385.344 89.3691C385.277 94.6396 385.344 99.9787 385.344 105.386C377.471 105.386 370.069 105.523 362.668 105.318C356.006 105.181 352.372 111.067 352.44 115.654C352.507 120.445 356.141 126.126 362.802 125.852C367.512 125.716 372.223 125.852 377.606 125.852Z"
+      fill="currentColor"
+    />
+    <path
+      d="M166.857 419.02C161.003 423.606 155.082 427.782 149.699 432.505C138.596 442.293 127.83 452.355 116.862 462.28C116.122 462.965 114.91 463.307 113.901 463.307C101.116 463.375 88.3314 463.718 75.5466 463.239C64.0402 462.828 54.3506 454.477 52.332 442.772C51.861 440.103 51.6591 437.433 51.6591 434.695C51.5918 412.792 51.6591 390.888 51.6591 368.984C51.6591 367.752 51.6591 366.52 51.6591 366.041C60.7431 363.577 69.6252 361.523 78.1708 358.648C88.0623 355.363 96.8771 349.887 104.884 343.042C110.402 338.319 116.054 333.527 120.832 328.12C127.965 320.043 134.693 311.487 141.019 302.725C152.39 287.119 162.887 270.828 174.528 255.427C186.102 240.163 199.694 226.883 217.189 218.67C225.062 214.973 233.271 212.167 242.019 211.414C248.681 210.866 255.275 209.908 261.936 210.113C274.519 210.524 287.035 212.167 298.34 218.259C305.674 222.161 312.807 226.747 319.737 231.333C337.771 243.311 357.217 251.867 378.211 256.454C389.987 259.055 401.964 260.834 413.942 262.614C421.007 263.709 428.207 264.188 435.407 264.667C444.693 265.284 454.046 265.626 463.399 266.036C469.051 266.31 474.771 266.584 480.423 266.721C482.24 266.789 482.98 267.405 483.047 269.322C483.518 285.202 479.144 299.097 468.647 311.35C455.391 326.888 438.838 336.06 419.728 341.467C408.02 344.821 396.177 346.806 384.133 348.175C371.953 349.544 359.774 350.708 347.595 352.351C331.782 354.473 315.902 356.321 300.224 359.264C278.557 363.303 257.361 369.395 236.972 378.156C214.431 387.876 193.302 400.128 173.048 414.024C170.962 415.598 169.011 417.241 166.857 419.02ZM273.174 265.01C281.383 269.527 280.979 278.836 281.719 283.628C282.661 289.788 286.631 292.869 292.082 292.663C297.465 292.526 301.704 289.446 301.839 282.67C301.906 279.658 301.704 276.578 301.166 273.566C299.753 266.379 296.994 259.739 291.947 254.263C282.93 244.475 271.559 240.779 258.908 242.353C253.256 243.038 247.335 245.365 242.423 248.445C232.935 254.4 227.888 263.846 226.004 274.866C225.399 278.357 225.466 282.259 226.206 285.681C227.215 290.404 232.531 293.416 236.972 292.732C241.952 291.91 245.922 287.256 246.056 282.259C246.191 277.262 247.402 272.471 250.632 268.569C255.006 263.504 264.561 260.903 273.174 265.01Z"
+      fill="currentColor"
+    />
+    <path
+      d="M456.737 446.126C453.238 456.873 442.943 463.307 432.513 463.307C381.845 463.239 331.176 463.307 280.508 463.307C279.297 463.307 278.086 463.307 276.336 463.307C277.076 462.417 277.547 461.733 278.086 461.117C286.631 452.424 294.908 443.388 303.79 435.038C314.691 424.77 326.534 415.666 339.52 408.069C354.997 399.033 371.819 393.968 388.843 389.177C399.34 386.233 409.702 382.263 419.661 377.814C429.283 373.502 438.3 367.957 447.519 362.687C451.018 360.702 454.18 358.032 457.747 355.5C457.814 356.253 457.948 357.074 457.948 357.895C457.948 385.138 458.016 412.381 457.881 439.624C458.016 441.746 457.208 443.799 456.737 446.126Z"
+      fill="currentColor"
+    />
+    <path
+      d="M170.558 88.3423C174.999 95.0503 179.575 101.348 183.41 108.056C191.081 121.403 197.339 135.367 201.78 150.152C205.347 161.994 208.24 174.041 209.047 186.498C209.249 189.989 209.653 193.48 209.586 196.971C209.586 197.998 208.644 199.504 207.702 199.983C191.485 207.581 178.229 219.149 166.588 232.565C158.177 242.285 150.843 253.031 143.104 263.298C141.893 264.873 140.817 266.516 139.202 268.706C124.937 202.995 131.329 141.322 166.925 83.4824C168.405 85.399 169.347 86.768 170.558 88.3423Z"
+      fill="currentColor"
+    />
+    <path
+      d="M226.543 463.307C199.762 463.307 173.384 463.307 145.931 463.307C149.766 459.816 152.727 456.736 156.091 453.998C163.964 447.564 171.837 440.993 180.113 435.106C189.601 428.261 199.291 421.758 209.317 415.735C218.199 410.396 227.552 405.878 236.838 401.292C250.968 394.379 265.705 388.903 280.979 385.275C293.764 382.263 306.683 379.525 319.603 377.13C327.206 375.692 334.877 375.213 342.548 374.255C351.767 373.159 360.918 371.996 370.137 370.901C371.482 370.764 372.828 370.901 374.309 371.38C370.675 372.543 366.974 373.639 363.341 374.939C357.352 377.061 351.363 379.183 345.509 381.647C332.186 387.328 320.074 395.132 308.433 403.825C302.646 408.137 297.196 412.928 291.813 417.788C286.026 423.127 280.373 428.672 274.923 434.285C267.454 441.951 260.12 449.754 252.718 457.489C248.95 461.459 244.845 464.128 238.991 463.307C235.021 462.896 230.916 463.307 226.543 463.307Z"
+      fill="currentColor"
+    />
+    <path
+      d="M218.333 134.34C216.315 129.617 214.229 125.168 212.614 120.513C212.143 119.076 212.479 117.023 213.152 115.654C216.517 108.877 220.15 102.238 223.716 95.5979C223.986 95.0503 224.658 94.7081 225.466 93.9552C247.738 121.814 257.832 153.848 259.649 188.894C249.69 189.716 240 190.537 230.109 191.358C229.167 171.85 224.591 153.027 218.333 134.34Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/components/Navbar/UserLoggedIn.vue b/components/Navbar/UserLoggedIn.vue
@@ -4,11 +4,11 @@
   <div class="flex items-center gap-x-3">
     <NavbarButton class="aspect-square">
       <span class="sr-only">Options</span>
-      <i class="fas fa-ellipsis-vertical fa-fw fa-lg"></i>
+      <i class="fas fa-ellipsis-vertical fa-fw fa-xl"></i>
     </NavbarButton>
     <NavbarButton class="aspect-square">
       <span class="sr-only">Notifications</span>
-      <i class="far fa-bell fa-fw fa-lg"></i>
+      <i class="far fa-bell fa-fw fa-xl"></i>
     </NavbarButton>
     <button
       aria-label="Profile"

diff --git a/components/Navbar/UserLoggedOut.vue b/components/Navbar/UserLoggedOut.vue
@@ -2,12 +2,12 @@
 </script>
 <template>
 	<div>
-		<NavbarButton class="aspect-square rounded-full">
+		<NavbarButton class="rounded-full aspect-square">
 			<span class="sr-only">Options</span>
-			<i class="fas fa-ellipsis-vertical fa-fw fa-lg"></i>
+			<i class="fas fa-ellipsis-vertical fa-fw fa-xl"></i>
 		</NavbarButton>
-		<NavbarButton class="aspect-square rounded-md">
-			<i class="far fa-bell fa-fw fa-lg"></i>
+		<NavbarButton class="rounded-md aspect-square">
+			<i class="far fa-bell fa-fw fa-xl"></i>
 		</NavbarButton>
 	</div>
 </template>
diff --git a/components/TheBaseFooter.vue b/components/TheBaseFooter.vue
@@ -1,15 +1,19 @@
 <template>
-	<footer>
-		<div class="px-10 py-6 flex justify-between">
-			<span id="copyright">
-				&copy; {{ new Date().getFullYear() }} MyFursona
-			</span>
-			<div class="flex items-center gap-x-5">
-				<NuxtLink to="/contact">Contact</NuxtLink>
-				<NuxtLink to="https://github.com/MyFursona-Project/MyFursona" rel="noopener noreferrer" target="_blank">
-					<i class="fab fa-github fa-fw fa-lg"></i>
-				</NuxtLink>
-			</div>
-		</div>
-	</footer>
-</template>
+  <footer>
+    <div class="flex justify-between px-10 py-6">
+      <span id="copyright">
+        &copy; 2022-{{ new Date().getFullYear() }} MyFursona
+      </span>
+      <div class="flex items-center gap-x-5">
+        <NuxtLink to="/contact">Contact</NuxtLink>
+        <NuxtLink
+          to="https://github.com/MyFursona-Project/MyFursona"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <i class="fab fa-github fa-fw fa-lg"></i>
+        </NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/components/TheBaseNavbar.vue b/components/TheBaseNavbar.vue
@@ -1,10 +1,12 @@
-<script setup></script>
-
 <template>
   <header>
-    <div class="flex items-center justify-between px-12 py-6">
+    <div class="flex items-center justify-between py-6 px-9">
       <div class="flex items-center gap-x-6">
-        <NuxtLink to="/" class="logo-wordmark">MyFursona</NuxtLink>
+        <NuxtLink to="/" class="flex items-center gap-x-2.5 logo-wordmark">
+          <span class="sr-only">MyFursona</span>
+          <IconMono class="w-[3.25rem] h-[3.25rem] text-purple-500"/>
+          <span>MyFursona</span>
+        </NuxtLink>
         <NavbarSearchBox />
       </div>
       <NavbarUserLoggedIn />
@@ -15,6 +17,6 @@
 <style lang="scss">
 .logo-wordmark {
   @apply text-3xl font-bold font-inter select-none
-	bg-gradient-to-br from-orange-400 via-purple-500 to-pink-400 bg-clip-text text-transparent;
+	bg-gradient-to-br from-orange-500 via-purple-500 to-pink-400 bg-clip-text text-transparent;
 }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -36,6 +36,10 @@ export default defineNuxtConfig({
   app: {
     head: {
       link: [
+        {
+          rel: "manifest",
+          href: "./manifest.json",
+        },
         {
           rel: "stylesheet",
           href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,13 +1,13 @@
 {
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "MyFursona",
+  "short_name": "MyFursona",
   "theme_color": "#000000",
   "background_color": "#FFFFFF",
-  "start_url": "/",
   "scope": "/",
-  "display": "standalone",
+  "start_url": "/",
   "orientation": "portrait",
-  "name": "MyFursona",
-  "description": "MyFursona is a platform where you can show off your fluffy characters and show them off to your friends!",
-  "short_name": "MyFursona",
+  "display": "minimal-ui",
   "icons": [
     {
       "src": "/icon.png",
@@ -20,4 +20,4 @@
       "type": "image/png"
     }
   ]
-}
+}