From 947c4b6c1f763c5fcf54aded0a202945b5bdc191 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Mon, 8 May 2023 22:27:21 +0200 Subject: [PATCH] First layout test --- index.html | 2 +- package-lock.json | 95 ++++++++++++++++++++++++----- package.json | 5 ++ public/tile-bg.svg | 6 ++ public/yorha-bg-left.svg | 27 +++++++++ public/yorha-bg-right.svg | 29 +++++++++ src/App.vue | 51 +++++++++++++++- src/assets/main.css | 10 ++++ src/components/YrhButton.vue | 109 ++++++++++++++++++++++++++++++++++ src/components/YrhHeading.vue | 11 ++++ src/main.ts | 9 ++- src/views/HomeView.vue | 13 +++- tailwind.config.js | 45 +++++++++++++- 13 files changed, 392 insertions(+), 20 deletions(-) create mode 100644 public/tile-bg.svg create mode 100644 public/yorha-bg-left.svg create mode 100644 public/yorha-bg-right.svg create mode 100644 src/components/YrhButton.vue create mode 100644 src/components/YrhHeading.vue diff --git a/index.html b/index.html index c0f225b..f35afca 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite Project + YoRHa System
diff --git a/package-lock.json b/package-lock.json index d5d6b6d..d038b85 100644 --- 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" }, diff --git a/package.json b/package.json index 50bf466..caf7685 100644 --- 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" }, diff --git a/public/tile-bg.svg b/public/tile-bg.svg new file mode 100644 index 0000000..e871194 --- /dev/null +++ b/public/tile-bg.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/public/yorha-bg-left.svg b/public/yorha-bg-left.svg new file mode 100644 index 0000000..af4e002 --- /dev/null +++ b/public/yorha-bg-left.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/yorha-bg-right.svg b/public/yorha-bg-right.svg new file mode 100644 index 0000000..3e90ffd --- /dev/null +++ b/public/yorha-bg-right.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.vue b/src/App.vue index a78fb6f..281f8d6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,5 +3,54 @@ import { RouterView } from 'vue-router' + + diff --git a/src/assets/main.css b/src/assets/main.css index b5c61c9..fa791d0 100644 --- 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 +} diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue new file mode 100644 index 0000000..d92d402 --- /dev/null +++ b/src/components/YrhButton.vue @@ -0,0 +1,109 @@ + + + + + diff --git a/src/components/YrhHeading.vue b/src/components/YrhHeading.vue new file mode 100644 index 0000000..0239d18 --- /dev/null +++ b/src/components/YrhHeading.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/main.ts b/src/main.ts index 5dcad83..5e3bf13 100644 --- 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') diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 4b4de20..6d4cba0 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,5 +1,16 @@ + + diff --git a/tailwind.config.js b/tailwind.config.js index 8d2e25a..3a6258f 100644 --- 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')) + }) + } + ] }