From 0e0cdfaa280b9b40b8fac7ddb84c96c8e01fa54d Mon Sep 17 00:00:00 2001
From: danielvici123 <danielauto1000@gmail.com>
Date: Thu, 31 Oct 2024 16:38:36 +0100
Subject: [PATCH] Main page created without function. CSS not working

---
 index.html                  |  1 +
 postcss.config.cjs          |  6 +++
 src/App.vue                 | 10 ++---
 src/components/contacts.vue |  4 +-
 src/components/feed.vue     |  6 +--
 src/components/sidebar.vue  | 14 +++----
 src/main.ts                 |  2 +-
 src/style.css               | 79 -------------------------------------
 src/vite-env.d.ts           |  2 +-
 tailwind.config.js          | 29 ++++++++++++++
 10 files changed, 55 insertions(+), 98 deletions(-)
 create mode 100644 postcss.config.cjs
 delete mode 100644 src/style.css
 create mode 100644 tailwind.config.js
diff --git a/index.html b/index.html
index dde16aa..c48ee50 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue + TS</title>
+    <link rel="stylesheet" href="/src/assets/main.css" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.vue b/src/App.vue
index 1ea1f65..ed419a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Sidebar from "@/components/sidebar.vue";
-import NiceThings from "@/components/interesting-hashtags.vue";
-import Feed from "@/components/feed.vue";
-import Contacts from "@/components/contacts.vue";
-import Legal from "components/legal.vue";
+import Sidebar from "../src/components/sidebar.vue";
+import NiceThings from "../src/components/interesting-hashtags.vue";
+import Feed from "../src/components/feed.vue";
+import Contacts from "../src/components/contacts.vue";
+import Legal from "../src/components/legal.vue";
 </script>
 
 
diff --git a/src/components/contacts.vue b/src/components/contacts.vue
index 3477621..214992e 100644
--- a/src/components/contacts.vue
+++ b/src/components/contacts.vue
@@ -15,12 +15,12 @@ const contacts =[
       <ul class="space-y-1">
         <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
           <!--CONTACT-->
-          <img src="@/assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
+          <img src="../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
           <div class="flex flex-col">
             <label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
             <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
           </div>
-          <img src="@/assets/icons/mail.png" alt="" class="ml-auto">
+          <img src="../assets/icons/mail.png" alt="" class="ml-auto">
         </li>
       </ul>
     </div>
diff --git a/src/components/feed.vue b/src/components/feed.vue
index 8fcc3b0..eb7407c 100644
--- a/src/components/feed.vue
+++ b/src/components/feed.vue
@@ -55,7 +55,7 @@
       <ul>
         <li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
           <!-- POST -->
-          <img src="@/assets/default_pp.png" alt="" class="w-16 h-16">
+          <img src="../assets/default_pp.png" alt="" class="w-16 h-16">
           <div>
             <div> <!-- POST HEADER -->
               <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
@@ -66,13 +66,13 @@
             </div>
             <div class="flex "> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
-                <img src="@/assets/icons/comment.png" alt="" class="align-middle">
+                <img src="../assets/icons/comment.png" alt="" class="align-middle">
                 <label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
                 <label class="text-sm m-1" v-else>Comments disabled</label>
               </div>
 
               <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
-                <img type="image" alt="" src="@/assets/icons/herz.png" class="align-middle">
+                <img type="image" alt="" src="../assets/icons/herz.png" class="align-middle">
                 <label class="text-sm m-1">{{ postitem.likes }}</label>
               </div><!-- ENDE -->
             </div>
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 309f38b..76bb563 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -25,14 +25,14 @@ const sb_settings = () => {
 
 <template>
   <div class="pt-4 pl-1">
-    <img src="@/assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
+    <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
     <div class="align-middle space-y-3 pt-3 pl-3">
-      <img src="@/assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
-      <img src="@/assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
-      <img src="@/assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
-      <img src="@/assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
-      <img src="@/assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg"  v-on:click="sb_accounts">
-      <img src="@/assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
+      <img src="../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
+      <img src="../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
+      <img src="../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
+      <img src="../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
+      <img src="../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg"  v-on:click="sb_accounts">
+      <img src="../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
     </div>
   </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 054a83a..0f3d4d7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
-import App from '@/App.vue';
+import App from '../src/App.vue';
 
 const app = createApp(App);
 
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index bb131d6..0000000
--- a/src/style.css
+++ /dev/null
@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 564256a..53ab848 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -16,7 +16,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('../src', import.meta.url))
     }
   }
 })
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..eb17f28
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', 'Inter', 'sans-serif'],
+      },
+      gridTemplateRows: {
+        '70/30': '70% 28%'
+      },
+    },
+    colors: {
+        'logo-farbe-lila': '#5500a2',
+        'logo-farbe-rot': '#a2002b',
+        'logo-farbe-blau': '#0b1074',
+        'weiss': '#ffffff',
+        'schwarz': '#000000',
+        'grau': '#404040',
+        'grau-dunkel': '#1c1c1c',
+        'grau-hell': '#a29e9e',
+        'grau-hell2': '#d5d3d3',
+    }
+  },
+ variants: {
+    extend: {},
+ },
+};
+
