First layout test

2023-05-08 22:27:21 +02:00
parent a5465d6483
commit 947c4b6c1f
13 changed files with 392 additions and 20 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite Project</title>
+    <title>YoRHa System</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,13 @@
      "name": "vue-template",
      "version": "0.0.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/vue-fontawesome": "^3.0.3",
        "@vueuse/core": "^10.1.2",
        "pinia": "^2.0.35",
+        "sass": "^1.62.1",
        "vue": "^3.2.47",
        "vue-router": "^4.1.6"
      },
@@ -529,6 +534,60 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
+      "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
    "node_modules/@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -1665,7 +1724,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@@ -1908,7 +1966,6 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@@ -1951,7 +2008,6 @@
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
      "dependencies": {
        "fill-range": "^7.0.1"
      },
@@ -2163,7 +2219,6 @@
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
      "funding": [
        {
          "type": "individual",
@@ -2190,7 +2245,6 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@@ -3338,7 +3392,6 @@
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -3477,7 +3530,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@@ -3932,6 +3984,11 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4041,7 +4098,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@@ -4120,7 +4176,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -4138,7 +4193,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
@@ -4178,7 +4232,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
      "engines": {
        "node": ">=0.12.0"
      }
@@ -5017,7 +5070,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -5494,7 +5546,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -5950,7 +6001,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@@ -6174,6 +6224,22 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
+    "node_modules/sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/saxes": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -6824,7 +6890,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
--- a/package.json
+++ b/package.json
@@ -15,8 +15,13 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
    "@vueuse/core": "^10.1.2",
    "pinia": "^2.0.35",
+    "sass": "^1.62.1",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
--- a/public/tile-bg.svg
+++ b/public/tile-bg.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 5 5" style="enable-background:new 0 0 5 5;" xml:space="preserve">
+<polygon points="4.5,0 4.5,4.5 0,4.5 0,5 5,5 5,0 "/>
+</svg>
--- a/public/yorha-bg-left.svg
+++ b/public/yorha-bg-left.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511 566" style="enable-background:new 0 0 511 566;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{clip-path:url(#SVGID_00000054248822295797075820000001563571821240251807_);}
+	.st2{fill:none;stroke:#1D1D1B;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g class="st0">
+	<defs>
+		<rect id="SVGID_1_" y="0.5" class="st0" width="511.5" height="566"/>
+	</defs>
+	<clipPath id="SVGID_00000000912880200899487680000006902560803219149977_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000000912880200899487680000006902560803219149977_);">
+		<g>
+			<circle class="st2" cx="1.3" cy="2.2" r="179.1"/>
+			<line class="st2" x1="-177.9" y1="-177" x2="476.1" y2="477"/>
+			<line class="st2" x1="-231" y1="-177.1" x2="338" y2="391.9"/>
+			<line class="st2" x1="-131.2" y1="-177.1" x2="437.8" y2="391.9"/>
+			<circle class="st2" cx="1.3" cy="2.2" r="170.2"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/public/yorha-bg-right.svg
+++ b/public/yorha-bg-right.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511 566" style="enable-background:new 0 0 511 566;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{clip-path:url(#SVGID_00000158709037777668649130000009517331871316557969_);}
+	.st2{fill:none;stroke:#1D1D1B;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g class="st0">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" y="0.5" width="511.5" height="566"/>
+		</defs>
+		<clipPath id="SVGID_00000057861603827395612620000008022258052803901577_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g style="clip-path:url(#SVGID_00000057861603827395612620000008022258052803901577_);">
+			<g>
+				<circle class="st2" cx="510.8" cy="565.7" r="179.1"/>
+				<line class="st2" x1="690" y1="744.9" x2="36" y2="90.9"/>
+				<line class="st2" x1="743.1" y1="745" x2="174.1" y2="176"/>
+				<line class="st2" x1="643.3" y1="745" x2="74.3" y2="176"/>
+				<circle class="st2" cx="510.8" cy="565.7" r="170.2"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,5 +3,54 @@ import { RouterView } from 'vue-router'
 </script>

 <template>
+  <div id="wrapper" class="py-16 px-8">
    <RouterView />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+#wrapper {
+  position: relative;
+  min-height: 100dvh;
+  min-height: 100vh;
+  overflow-x: hidden;
+
+  display: grid;
+  grid-template-rows: 1fr;
+  isolation: isolate;
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.12) 0%,
+    rgba(0, 0, 0, 0) 10%,
+    rgba(0, 0, 0, 0) 90%,
+    rgba(0, 0, 0, 0.12) 100%
+  );
+
+  &::after,
+  &::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 50%;
+    content: '';
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+
+  &::before {
+    left: 0;
+    background-image: url('/yorha-bg-left.svg');
+    background-position: left;
+  }
+  &::after {
+    right: 0;
+    background-image: url('/yorha-bg-right.svg');
+    background-position: right;
+  }
+}
+</style>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
+
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+body {
+  @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400 bg-[url('/yorha-bg.svg')] bg-contain bg-no-repeat
+}
+
+body::before {
+  @apply absolute content-[''] h-full w-full bg-[url('/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
+}
--- a/src/components/YrhButton.vue
+++ b/src/components/YrhButton.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  href?: string
+  target?: string
+  rel?: string
+  disabled?: boolean
+  isActive?: boolean
+  hasSquare?: boolean
+}>()
+
+const attributes = {
+  href: props.href,
+  target: props.target,
+  rel: props.rel,
+  disabled: props.disabled
+}
+
+const elementTag = computed(() => (props.href ? 'a' : 'button'))
+</script>
+
+<template>
+  <component
+    :is="elementTag"
+    v-bind="attributes"
+    class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
+    :class="{ active: isActive }"
+  >
+    <span class="mr-1" v-if="hasSquare">
+      <font-awesome-icon :icon="['fas', 'square']" />
+    </span>
+    <slot />
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.btn {
+  position: relative;
+  isolation: isolate;
+
+  transition-property: color;
+  transition-duration: 0.5s;
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transition-delay: 0;
+
+  & + & {
+    margin-top: 1rem;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    left: 0;
+    height: 100%;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    top: 0;
+    left: 0;
+    width: 0%;
+    transition-property: width;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    background-color: var(--color-y-beige-700);
+    z-index: -1;
+  }
+
+  &::before {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    transition-property: border-color;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    border-top: 0.05rem solid transparent;
+    border-bottom: 0.05rem solid transparent;
+  }
+
+  &:not(:focus, :hover, .active) {
+    transition-delay: 0.15s;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus,
+  &:hover,
+  &.active {
+    color: var(--color-y-beige-400);
+
+    &::before {
+      height: calc(100% + 0.35rem);
+      border-top-color: var(--color-y-beige-700);
+      border-bottom-color: var(--color-y-beige-700);
+    }
+
+    &::after {
+      width: 100%;
+    }
+  }
+}
+</style>
--- a/src/components/YrhHeading.vue
+++ b/src/components/YrhHeading.vue
@@ -0,0 +1,11 @@
+<template>
+  <h1 class="mb-8 text-4xl">
+    <slot />
+  </h1>
+</template>
+
+<style scoped>
+h1 {
+  text-shadow: 5px 5px 0px var(--color-y-beige-500);
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,9 +6,16 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'

+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faSquare } from '@fortawesome/free-solid-svg-icons'
+
+/* add icons to the library */
+library.add(faSquare)
+
 const app = createApp(App)

 app.use(createPinia())
 app.use(router)
-
+app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,16 @@
+<script lang="ts" setup>
+import YrhButton from '@/components/YrhButton.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+</script>
+
 <template>
  <main>
-    <h1 class="text-3xl font-bold underline">Hello world!</h1>
+    <YrhHeading> MENU PRINCIPAL </YrhHeading>
+    <YrhButton has-square> Language </YrhButton>
+    <YrhButton has-square> Settings </YrhButton>
+    <YrhButton has-square> Camera </YrhButton>
+    <YrhButton has-square> Screen </YrhButton>
+    <YrhButton has-square> Sound </YrhButton>
+    <YrhButton has-square> Other </YrhButton>
  </main>
 </template>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,50 @@ module.exports = {
    container: {
      padding: '2rem',
      center: true
+    },
+    fontFamily: {
+      sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
+      serif: ['ui-serif', 'Georgia'],
+      mono: ['ui-monospace', 'SFMono-Regular'],
+      display: ['Oswald'],
+      body: ['Noto Sans']
+    },
+    extend: {
+      colors: {
+        'y-beige': {
+          DEFAULT: '#B0AB97',
+          50: '#FFFFFF',
+          100: '#F6F6F4',
+          200: '#E5E3DD',
+          300: '#D3D0C5',
+          400: '#cbc5af',
+          500: '#b0ab97',
+          600: '#767563',
+          700: '#4c4940',
+          800: '#3A382C',
+          900: '#2d2c21'
+        }
+      }
    }
  },
-  plugins: []
+  plugins: [
+    function ({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = '') {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey]
+
+          const newVars =
+            typeof value === 'string'
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`)
+
+          return { ...vars, ...newVars }
+        }, {})
+      }
+
+      addBase({
+        ':root': extractColorVars(theme('colors'))
+      })
+    }
+  ]
 }