mirror of
https://github.com/Macrame-App/Macrame
synced 2025-12-29 07:19:26 +00:00
Removed scss styling in favor of Tailwind, more base styling added
Background images added and styled. Also added a font family to the index.html: anaheim from bunnyfonts.
This commit is contained in:
Jesse Malotaux
parent
d2d9aca35c
commit
617660c18b
9 changed files with 1031 additions and 64 deletions
|
|
@ -4,6 +4,8 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net" />
|
||||||
|
<link href="https://fonts.bunny.net/css?family=anaheim:400,600,800" rel="stylesheet" />
|
||||||
<title>Vite + Vue</title>
|
<title>Vite + Vue</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
976
fe/package-lock.json
generated
976
fe/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,6 +11,8 @@
|
||||||
"format": "prettier --write src/"
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tabler/icons-vue": "^3.30.0",
|
||||||
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
|
|
@ -22,6 +24,8 @@
|
||||||
"eslint": "^9.20.1",
|
"eslint": "^9.20.1",
|
||||||
"eslint-plugin-vue": "^9.32.0",
|
"eslint-plugin-vue": "^9.32.0",
|
||||||
"prettier": "^3.5.1",
|
"prettier": "^3.5.1",
|
||||||
|
"sass-embedded": "^1.85.1",
|
||||||
|
"tailwindcss": "^4.0.9",
|
||||||
"vite": "^6.1.0",
|
"vite": "^6.1.0",
|
||||||
"vite-plugin-vue-devtools": "^7.7.2"
|
"vite-plugin-vue-devtools": "^7.7.2"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,54 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="app-background">
|
||||||
<RouterView />
|
<img class="bg2" src="./assets/bg_2.jpg" aria-hidden="true" />
|
||||||
|
<img class="bg1" src="./assets/bg_1.jpg" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
|
<MainMenu />
|
||||||
|
<RouterView />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import MainMenu from '@/components/base/MainMenu.vue'
|
||||||
import { RouterView } from 'vue-router'
|
import { RouterView } from 'vue-router'
|
||||||
|
|
||||||
console.log('app.vue loaded')
|
console.log('app.vue loaded')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style scoped>
|
||||||
|
@reference "@/assets/main.css";
|
||||||
|
|
||||||
|
.app-background {
|
||||||
|
@apply fixed
|
||||||
|
inset-0
|
||||||
|
size-full
|
||||||
|
overflow-hidden
|
||||||
|
pointer-events-none
|
||||||
|
opacity-40
|
||||||
|
z-[-1];
|
||||||
|
|
||||||
|
img {
|
||||||
|
@apply absolute
|
||||||
|
size-full
|
||||||
|
object-cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg1 {
|
||||||
|
@apply mix-blend-multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg2 {
|
||||||
|
@apply grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
@apply content-['']
|
||||||
|
absolute
|
||||||
|
inset-0
|
||||||
|
bg-radial
|
||||||
|
from-sky-400/40
|
||||||
|
to-black/80
|
||||||
|
mix-blend-multiply
|
||||||
|
pointer-events-none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
BIN
fe/src/assets/bg_1.jpg
Normal file
BIN
fe/src/assets/bg_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 644 KiB |
BIN
fe/src/assets/bg_2.jpg
Normal file
BIN
fe/src/assets/bg_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
|
|
@ -0,0 +1,56 @@
|
||||||
|
@import 'tailwindcss';
|
||||||
|
|
||||||
|
@variant dark (&:where(.dark, .dark *));
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: 'Anaheim', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply font-sans
|
||||||
|
bg-slate-900
|
||||||
|
text-slate-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
@apply font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
@apply font-semibold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@apply text-4xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@apply text-3xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@apply text-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@apply text-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@apply text-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
@apply fixed
|
||||||
|
inset-16
|
||||||
|
p-4
|
||||||
|
bg-white/10
|
||||||
|
backdrop-blur-sm
|
||||||
|
rounded-xl
|
||||||
|
border
|
||||||
|
border-white/15;
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
// import './assets/jemx.scss'
|
||||||
import './assets/main.css'
|
import './assets/main.css'
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
|
|
||||||
|
|
@ -3,21 +3,16 @@ import { fileURLToPath, URL } from 'node:url'
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue(), vueDevTools()],
|
plugins: [vue(), vueDevTools(), tailwindcss()],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// server: {
|
|
||||||
// port: 6969,
|
|
||||||
// hmr: {
|
|
||||||
// host: 'localhost',
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
base: '/',
|
base: '/',
|
||||||
publicDir: '../public',
|
publicDir: '../public',
|
||||||
build: {
|
build: {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue