diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..08d82597025e64cdbb1e778077ac063f743f450b
--- /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 10b7e9cd0fb58b9a69c692c2a9825f25aea9eb01..00bf8f33a01a389424bc44b89c8dff7e48775e5d 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 0000000000000000000000000000000000000000..c63c8d47ce0b51dfd1b434bedb8b4ce74721019f
--- /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 6dcb2ff07b6e4293ab4fc8e4c9fe3e2c6b36130e..db18ca54745a6467212c234e2faced6ef313ffa4 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 a1301554f6dfccd1fdcd5d11a3d24b2b4da334be..88df8b60741510d8271327302cc3f56151090705 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