Main page created without function. CSS not working
This commit is contained in:
danielvici123
@@ -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>
|
||||
|
||||
6
postcss.config.cjs
Normal file
6
postcss.config.cjs
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
10
src/App.vue
10
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>
|
||||
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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
2
src/vite-env.d.ts
vendored
@@ -16,7 +16,7 @@ export default defineConfig({
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
'@': fileURLToPath(new URL('../src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
29
tailwind.config.js
Normal file
29
tailwind.config.js
Normal 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: {},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user