diff --git a/.vscode/settings.json b/.vscode/settings.json index 1947a0d..92a2df2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,5 +2,13 @@ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" - } + }, + "files.associations": { + "*.css": "tailwindcss" + }, + "editor.quickSuggestions": { + "strings": "on" + }, + "tailwindCSS.classAttributes": ["class", "ui"], + "tailwindCSS.experimental.classRegex": [["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]] } diff --git a/app/app.vue b/app/app.vue index 0562709..ccbbedf 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,10 +1,15 @@ diff --git a/app/assets/css/main.css b/app/assets/css/main.css new file mode 100644 index 0000000..253a174 --- /dev/null +++ b/app/assets/css/main.css @@ -0,0 +1,30 @@ +@import 'tailwindcss'; +@import '@nuxt/ui'; + +body { + font-family: var(--font-main); + background-color: var(--depth); +} + +.font-heading { + font-family: var(--font-heading); +} + +@layer base { + :root { + /* Couleurs */ + --primary: 59 130 246; + --secondary: 139 92 246; + --accent: 236 72 153; + --depth: #dadada; + + /* Spacing */ + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 2rem; + + /* Fonts */ + --font-main: 'Montserrat', sans-serif; + --font-heading: 'Birthstone Bounce', sans-serif; + } +} diff --git a/app/components/HeaderItem.vue b/app/components/HeaderItem.vue index 5152776..37ad1fd 100644 --- a/app/components/HeaderItem.vue +++ b/app/components/HeaderItem.vue @@ -1,16 +1,35 @@