From 9403726d1e37e198d1f6d9ea3bcdebc4abf88691 Mon Sep 17 00:00:00 2001 From: Nexerate <erl1ls@outlook.com> Date: Mon, 5 Feb 2024 18:11:14 +0100 Subject: [PATCH] Theme --- assets/css/main.css | 14 ++++ assets/css/tailwind.css | 116 +++++++++++++++-------------- components/flashy/FlashyButton.vue | 29 ++++++++ nuxt.config.ts | 1 + pages/index.vue | 26 +++++-- 5 files changed, 124 insertions(+), 62 deletions(-) create mode 100644 assets/css/main.css create mode 100644 components/flashy/FlashyButton.vue diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..08d8259 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,14 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); + +body { + /* --background: #2f3542; + --white: #ffffff; + --border: #57606f; + --primary-background: #ff4757; + --primary-foreground: #f8f8f8; + --secondary: #ff6b81; */ + + /* background-color: var(--background); */ + + font-family: 'Poppins'; +} \ No newline at end of file diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 10b7e9c..00bf8f3 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -1,70 +1,70 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; - + + @layer base { :root { --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - + --card-foreground: 240 10% 3.9%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - - --ring: 222.2 84% 4.9%; - + --destructive-foreground: 0 0% 98%; + + --border:240 5.9% 90%; + --input:240 5.9% 90%; + --ring:346.8 77.2% 49.8%; --radius: 0.5rem; } - + .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - - --ring: 212.7 26.8% 83.9%; + --background:20 14.3% 4.1%; + --foreground:0 0% 95%; + + --card:24 9.8% 10%; + --card-foreground:0 0% 95%; + + --popover:0 0% 9%; + --popover-foreground:0 0% 95%; + + --primary:346.8 77.2% 49.8%; + --primary-foreground:355.7 100% 97.3%; + + --secondary:240 3.7% 15.9%; + --secondary-foreground:0 0% 98%; + + --muted:0 0% 15%; + --muted-foreground:240 5% 64.9%; + + --accent:12 6.5% 15.1%; + --accent-foreground:0 0% 98%; + + --destructive:0 62.8% 30.6%; + --destructive-foreground:0 85.7% 97.3%; + + --border:240 3.7% 15.9%; + --input:240 3.7% 15.9%; + --ring:346.8 77.2% 49.8%; } } @@ -73,6 +73,8 @@ @apply border-border; } body { - @apply bg-background text-foreground; + @apply dark bg-background text-foreground; + + font-family: 'Poppins'; } } \ No newline at end of file diff --git a/components/flashy/FlashyButton.vue b/components/flashy/FlashyButton.vue new file mode 100644 index 0000000..c63c8d4 --- /dev/null +++ b/components/flashy/FlashyButton.vue @@ -0,0 +1,29 @@ +<template> + <Button> Flashy Knapp + </Button> +</template> +<!-- +<style lang="scss"> +@import '../../assets/css/main.css'; + +.button { + background-color: var(--primary-background); + color: var(--primary-foreground); + + font-size: 15px; + line-height: 1; + + padding: 5px 15px; + + border-radius: 5px; + + border: 2px solid transparent; + + transition-duration: 0.2s; +} + +.button:hover { + border: 2px solid var(--secondary); +} + +</style> --> \ No newline at end of file diff --git a/nuxt.config.ts b/nuxt.config.ts index 6dcb2ff..db18ca5 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -2,6 +2,7 @@ export default defineNuxtConfig({ devtools: { enabled: true }, modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'], + css: ['~/assets/css/main.css', '~/assets/css/tailwind.css'], shadcn: { /** * Prefix for all the imported component diff --git a/pages/index.vue b/pages/index.vue index a130155..88df8b6 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,17 +1,33 @@ +<script setup lang="ts"> +import { ref } from 'vue'; + +const clickCount = ref(0); + +function onClick() { + clickCount.value++; +} +</script> + <template> <div> - <p>Velkommen til Flashy!</p> + <!-- <p>Velkommen til Flashy!</p> --> + <FlashyButton @click="onClick"> + <!-- <p>Denne knappen har blitt klikket {{ clickCount }} ganger</p> --> + </FlashyButton> </div> </template> <style lang="scss"> -p { +button { position: absolute; left: 50%; - top: 50%; - - font-weight: bold; + top: 60%; transform: translate(-50%, -50%); + + // border: 2px solid gray; + // border-radius: 5px; + // padding: 5px 15px; + } </style> \ No newline at end of file -- GitLab