zoeynoort/Macrame
1
0
Fork 0
mirror of https://github.com/Macrame-App/Macrame synced 2025-12-29 07:19:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removed scss styling in favor of Tailwind, more base styling added

Browse source 
Background images added and styled.
Also added a font family to the index.html: anaheim from bunnyfonts.
This commit is contained in:
Jesse Malotaux 2025-02-28 11:56:27 +01:00
parent d2d9aca35c
commit 617660c18b
9 changed files with 1031 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

2
fe/index.html
View file

@ -4,6 +4,8 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<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>
</head>
<body>

976
fe/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
fe/package.json
View file

@ -11,6 +11,8 @@
"format": "prettier --write src/"
},
"dependencies": {
"@tabler/icons-vue": "^3.30.0",
"@tailwindcss/vite": "^4.0.9",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
@ -22,6 +24,8 @@
"eslint": "^9.20.1",
"eslint-plugin-vue": "^9.32.0",
"prettier": "^3.5.1",
"sass-embedded": "^1.85.1",
"tailwindcss": "^4.0.9",
"vite": "^6.1.0",
"vite-plugin-vue-devtools": "^7.7.2"
}

47
fe/src/App.vue
View file

@ -1,13 +1,54 @@
<template>
<div>
<RouterView />
<div class="app-background">
<img class="bg2" src="./assets/bg_2.jpg" aria-hidden="true" />
<img class="bg1" src="./assets/bg_1.jpg" aria-hidden="true" />
</div>
<MainMenu />
<RouterView />
</template>
<script setup>
import MainMenu from '@/components/base/MainMenu.vue'
import { RouterView } from 'vue-router'
console.log('app.vue loaded')
</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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 644 KiB

BIN
fe/src/assets/bg_2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 MiB

56
fe/src/assets/main.css
View file

@ -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
fe/src/main.js
View file

@ -1,3 +1,4 @@
// import './assets/jemx.scss'
import './assets/main.css'
import { createApp } from 'vue'

9
fe/vite.config.js
View file

@ -3,21 +3,16 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), vueDevTools()],
plugins: [vue(), vueDevTools(), tailwindcss()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
// server: {
// port: 6969,
// hmr: {
// host: 'localhost',
// },
// },
base: '/',
publicDir: '../public',
build: {