💄 Main layout done.

2023-05-22 21:55:41 -07:00 · 2023-05-22 21:55:41 -07:00 · 917e553561
commit 917e553561
parent 0813f22643
6 changed files with 214 additions and 19 deletions
--- a/frontend/app.vue
+++ b/frontend/app.vue
@ -12,7 +12,7 @@
    </header>

    <main>
-
+      <NuxtPage />
    </main>

    <footer>&copy; 2023</footer>
@ -20,17 +20,20 @@
  </div>
 </template>

-<!-------------------------------------------------------------------------------------- style ---->
+<!-------------------------------------------------------------------------------------- STYLE ---->

 <style lang="postcss">
+:root {
+  --gradient: linear-gradient(to bottom right, #f472b6, #f0abfc, #22d3ee);
+}
+
 .page {
  @apply min-h-screen w-screen p-5 flex flex-col gap-y-5;
  @apply bg-gradient-to-br from-pink-400 via-fuchsia-300 to-cyan-400;
 }

 header,
-main,
-footer section {
+section {
  @apply bg-white bg-opacity-30;
  @apply rounded-lg;
 }
@ -40,7 +43,11 @@ header {
 }

 main {
-  @apply grow;
+  @apply grow flex justify-center;
+}
+
+section {
+  @apply p-4;
 }

 footer {
@ -53,13 +60,27 @@ nav a {
  @apply opacity-70;
 }

+h1,
+h2 {
+  @apply text-2xl uppercase italic font-bold;
+}
+
 header h1 {
-  @apply text-2xl uppercase italic tracking-wide font-bold;
+  @apply tracking-wide;
  @apply transition-[letter-spacing] hover:tracking-widest;
 }

 nav a {
  @apply mx-2;
-  @apply transition-all hover:opacity-100 hover:border-b-pink-500 hover:border-b-2;
+  @apply transition-all hover:opacity-100 hover:border-b-pink-400 hover:border-b-2;
+}
+
+main a {
+  @apply transition-all border-b border-b-pink-400;
+  @apply hover:border-b-cyan-400;
+}
+
+p {
+  @apply mb-2;
 }
 </style>
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@ -1,18 +1,15 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config

 export default defineNuxtConfig({
-  app: {
-    head: {
-      link: [
-          {rel: 'preconnect', href: 'https://fonts.googleapis.com'},
-          {rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-          {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Imprima&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'}
-      ],
-    },
-  },
-  modules: ['@nuxtjs/tailwindcss'],
+  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', 'nuxt-typed-router'],
  devServer: {
    host: 'bibliothecary.test',
  },
  telemetry: false,
+  googleFonts: {
+    preconnect: true,
+    families: {
+      Imprima: true,
+    }
+  }
 });
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -7,6 +7,7 @@
      "name": "nuxt-app",
      "hasInstallScript": true,
      "devDependencies": {
+        "@nuxtjs/google-fonts": "^3.0.1",
        "@nuxtjs/tailwindcss": "^6.7.0",
        "@tailwindcss/forms": "^0.5.3",
        "@types/node": "^18",
@ -16,6 +17,7 @@
        "eslint": "^8.41.0",
        "eslint-plugin-vue": "^9.14.0",
        "nuxt": "^3.5.1",
+        "nuxt-typed-router": "^3.2.2",
        "typescript": "^5.0.4",
        "vitest": "^0.31.1"
      }
@ -1561,6 +1563,17 @@
        "vue": "^3.3.4"
      }
    },
+    "node_modules/@nuxtjs/google-fonts": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/google-fonts/-/google-fonts-3.0.1.tgz",
+      "integrity": "sha512-9W5jZhpJ4UTmiPebljdoxs+ju89rOBVD5gb0sPRe73BVXCUUv46lV2Q0ynPZPsnono5WlTB6nyZbOCECa7IWDQ==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.5.0",
+        "google-fonts-helper": "^3.3.0",
+        "pathe": "^1.1.0"
+      }
+    },
    "node_modules/@nuxtjs/tailwindcss": {
      "version": "6.7.0",
      "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-6.7.0.tgz",
@ -5580,6 +5593,18 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/google-fonts-helper": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/google-fonts-helper/-/google-fonts-helper-3.3.0.tgz",
+      "integrity": "sha512-aFEVbmaavTY6wN3m6jZaWXQHfakMy6XNqdWN8YzHqHWCGpGma91zp8MiWsyb5i8gXQXYeGUWegb9ca/Jf/Q7Yw==",
+      "dev": true,
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "hookable": "^5.5.3",
+        "ofetch": "^1.0.1",
+        "ufo": "^1.1.1"
+      }
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@ -6749,6 +6774,12 @@
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
      "dev": true
    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
    "node_modules/lodash._reinterpolate": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@ -7598,6 +7629,54 @@
        }
      }
    },
+    "node_modules/nuxt-typed-router": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/nuxt-typed-router/-/nuxt-typed-router-3.2.2.tgz",
+      "integrity": "sha512-DjPG/9gI68jWyTPBOWXUzMFcxcK7oBFp06NKjL8A7ExiWlgSzUQMV2TI/opupMwADZQ/hVbYxY+wzAelJksQbQ==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.4.3",
+        "chalk": "^5.2.0",
+        "defu": "^6.1.2",
+        "lodash-es": "^4.17.21",
+        "log-symbols": "^5.1.0",
+        "mkdirp": "^3.0.1",
+        "nanoid": "^4.0.2",
+        "pathe": "1.1.0",
+        "prettier": "2.8.8"
+      }
+    },
+    "node_modules/nuxt-typed-router/node_modules/log-symbols": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
+      "integrity": "sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^5.0.0",
+        "is-unicode-supported": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt-typed-router/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/nypm": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.2.0.tgz",
@ -8978,6 +9057,21 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
    "node_modules/pretty-bytes": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,6 +9,7 @@
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
+    "@nuxtjs/google-fonts": "^3.0.1",
    "@nuxtjs/tailwindcss": "^6.7.0",
    "@tailwindcss/forms": "^0.5.3",
    "@types/node": "^18",
@ -18,6 +19,7 @@
    "eslint": "^8.41.0",
    "eslint-plugin-vue": "^9.14.0",
    "nuxt": "^3.5.1",
+    "nuxt-typed-router": "^3.2.2",
    "typescript": "^5.0.4",
    "vitest": "^0.31.1"
  }
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@ -0,0 +1,65 @@
+<script setup lang="ts">
+
+</script>
+
+<!----------------------------------------------------------------------------------- TEMPLATE ---->
+
+<template>
+  <section>
+    <h2>Login</h2>
+
+    <form>
+
+      <div>
+        <label for="email">Email</label>
+        <input id="email" type="email" required name="email">
+      </div>
+
+      <div>
+        <label for="password">Password</label>
+        <input id="password" type="password" required name="password">
+      </div>
+
+      <div class="form-btns">
+        <button type="submit">Go</button>
+      </div>
+
+    </form>
+  </section>
+</template>
+
+<!-------------------------------------------------------------------------------------- STYLE ---->
+
+<style scoped lang="postcss">
+h2 {
+  @apply text-center mb-3;
+}
+
+section {
+  @apply min-w-max min-h-max self-center;
+}
+
+div {
+  @apply mb-4 last:mb-0;
+}
+
+label {
+  @apply block;
+}
+
+input {
+  @apply bg-white bg-opacity-30;
+  @apply border-gradient;
+}
+
+.form-btns {
+  @apply block text-right me-4;
+}
+
+button {
+  @apply px-5 py-1.5 rounded-xl;
+  @apply text-pink-500;
+  @apply border-pink-400 border-2;
+  @apply transition-colors duration-200 hover:bg-pink-400 hover:text-white;
+}
+</style>
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -1,10 +1,26 @@
+// noinspection NpmUsedModulesInstalled
+import plugin from 'tailwindcss/plugin';
 import tailwindForms from '@tailwindcss/forms';

 export default {
-  plugins: [tailwindForms],
+  plugins: [
+      tailwindForms,
+      plugin(({ addComponents }) => {
+        addComponents({
+          '.border-gradient': {
+            'border': '1px solid',
+            'border-image-slice': '1',
+            'border-image-source': 'var(--gradient)',
+          },
+          '.bg-gradient': {
+            'background-image': 'var(--gradient)',
+          }
+        });
+      }),
+  ],
  fontFamily: {
    'sans': ['Imprima'],
    'serif': ['"Playfair Display"'],
    'mono': ['"Fira Code Freeze"'],
-  }
+  },
 }