danielvici123/esp-projekt
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main page created without function. CSS not working

Browse Source
This commit is contained in:
danielvici123
2024-10-31 16:38:36 +01:00
parent be36049883
commit 0e0cdfaa28
10 changed files with 55 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -5,6 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>Vite + Vue + TS</title>
<link rel="stylesheet" href="/src/assets/main.css" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

6
postcss.config.cjs Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

10
src/App.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import Sidebar from "@/components/sidebar.vue"; import Sidebar from "../src/components/sidebar.vue";
import NiceThings from "@/components/interesting-hashtags.vue"; import NiceThings from "../src/components/interesting-hashtags.vue";
import Feed from "@/components/feed.vue"; import Feed from "../src/components/feed.vue";
import Contacts from "@/components/contacts.vue"; import Contacts from "../src/components/contacts.vue";
import Legal from "components/legal.vue"; import Legal from "../src/components/legal.vue";
</script> </script>

4
src/components/contacts.vue
View File

@@ -15,12 +15,12 @@ const contacts =[
<ul class="space-y-1"> <ul class="space-y-1">
<li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg"> <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
<!--CONTACT--> <!--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"> <div class="flex flex-col">
<label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br> <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> <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
</div> </div>
<img src="@/assets/icons/mail.png" alt="" class="ml-auto"> <img src="../assets/icons/mail.png" alt="" class="ml-auto">
</li> </li>
</ul> </ul>
</div> </div>

6
src/components/feed.vue
View File

@@ -55,7 +55,7 @@
<ul> <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"> <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 --> <!-- 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>
<div> <!-- POST HEADER --> <div> <!-- POST HEADER -->
<label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label> <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
@@ -66,13 +66,13 @@
</div> </div>
<div class="flex "> <!-- POST FOOTER --> <div class="flex "> <!-- POST FOOTER -->
<div class="flex"> <!-- Comments --> <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-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
<label class="text-sm m-1" v-else>Comments disabled</label> <label class="text-sm m-1" v-else>Comments disabled</label>
</div> </div>
<div class="flex items-center" @click="addLike(indexus)"> <!-- Likes --> <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> <label class="text-sm m-1">{{ postitem.likes }}</label>
</div><!-- ENDE --> </div><!-- ENDE -->
</div> </div>

14
src/components/sidebar.vue
View File

@@ -25,14 +25,14 @@ const sb_settings = () => {
<template> <template>
<div class="pt-4 pl-1"> <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"> <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/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/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/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/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/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/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
</div> </div>
</div> </div>
</template> </template>

2
src/main.ts
View File

@@ -1,7 +1,7 @@
import './assets/main.css' import './assets/main.css'
import { createApp } from 'vue' import { createApp } from 'vue'
import App from '@/App.vue'; import App from '../src/App.vue';
const app = createApp(App); const app = createApp(App);

79
src/style.css
View File

@@ -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;
}
}

2
src/vite-env.d.ts vendored
View File

@@ -16,7 +16,7 @@ export default defineConfig({
], ],
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('../src', import.meta.url))
} }
} }
}) })

29
tailwind.config.js Normal file
View File

@@ -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: {},
},
};