Skip to content
Snippets Groups Projects
Commit e79def4b authored by Péter Márk's avatar Péter Márk
Browse files

base.css megváltoztatva, EZ BASZTA EL BASZDMEG AZ EGÉSZET! Megoldva :)

parent 9f1fb95f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 9
− 48
View file @ e79def4b
<template>
<!-- Teljes szélességű piros fejléc -->
<Header @navigate="handleNavigate" />
<!-- Középső rész: mainContent vagy login nézet -->
<component :is="currentPage" @navigate="handleNavigate" />
<!-- Teljes szélességű piros lábléc -->
<Footer />
</template>
<script setup> <script setup>
import { ref, computed } from 'vue' import MainContent from './components/MainContent.vue'
import Header from './components/Header.vue' </script>
import Footer from './components/Footer.vue'
import MainContent from './components/MainContent.vue'
import Login from './components/Login.vue'
/**
* Megadjuk a lehetséges nézeteket: "main", "login"
* Később, ha szeretnénk kosár oldalt, beírhatjuk ide: cart: CartView
*/
const pages = {
main: MainContent,
login: Login
}
// Alapértelmezett nézet: főoldal (main)
const currentView = ref('main')
// A gyermek komponensek (Header, Login) kibocsátanak egy "navigate" eseményt <template>
function handleNavigate(page) {
currentView.value = page
}
// Eltérő érték → eltérő komponens <main>
const currentPage = computed(() => { <MainContent />
return pages[currentView.value] || MainContent </main>
}) </template>
</script>
<style> <style>
/* Globális stílus – mindenképpen 100% széles és magas (ha kell) */
html, body { </style>
margin: 0; \ No newline at end of file
padding: 0;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #fbeaea; /* halvány pirosas háttér */
font-family: Arial, sans-serif;
}
</style>
src/assets/base.css
+ 0
− 29
View file @ e79def4b
...@@ -50,36 +50,7 @@ ...@@ -50,36 +50,7 @@
} }
} }
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body { body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
......
src/assets/main.css
+ 4
− 25
View file @ e79def4b
@import './base.css'; @import './base.css';
#app { #app {
max-width: 1280px; display: contents;
margin: 0 auto;
padding: 2rem;
font-weight: normal; font-weight: normal;
} justify-content: center;
place-items: center;
a, background: #c7c7c7;
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
} }
src/components/Footer.vue deleted 100644 → 0
+ 0
− 19
View file @ 9f1fb95f
<script setup>
</script>
<template>
<footer class="footer-container">
<p>&copy; 2025 Ignis - Minden jog fenntartva.</p>
</footer>
</template>
<style scoped>
.footer-container {
width: 100%;
background-color: #800000;
color: white;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
</style>
src/components/Header.vue deleted 100644 → 0
+ 0
− 89
View file @ 9f1fb95f
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['navigate'])
</script>
<template>
<header class="header-container">
<!-- Bal oldalt a logó és a cím -->
<div class="logo-container">
<svg class="fire-logo" viewBox="0 0 24 24">
<path
fill="white"
d="M12.0 2.0C9 6 14 8 10 13c-1 2-2 4 0 7 2 3 6 3 8 0 2-3 2-6 0-9-1-1-1-3 0-4 1-1 0-3-1-4-1-1-2-2-5-1z"
/>
</svg>
<h1>Ignis - Számítógép alkatrészek</h1>
</div>
<!-- Jobb oldalt a gombok -->
<nav>
<button @click="emit('navigate', 'main')">Termékek</button>
<button @click="emit('navigate', 'login')">Bejelentkezés</button>
<!-- Kosár gomb -->
<button class="cart-btn" @click="emit('navigate', 'cart')">
<svg class="cart-icon" viewBox="0 0 24 24">
<path
fill="white"
d="M7 4H2v2h3l3.6 7.59-1.35 2.41C6.52 16.37 7.48 18 9 18h11v-2H9.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.85 6H6.31l-.95-2H2V2h4a1 1 0 0 1 .92.61L7.68 4H7z"
/>
</svg>
</button>
</nav>
</header>
</template>
<style scoped>
.header-container {
/* Teljes szélesség a böngészőben */
width: 100%;
background-color: #b30000; /* Piros fejléc */
color: white;
padding: 20px;
box-sizing: border-box;
/* Kulcs: a flexbox elrendezés,
bal oldalt a logó, jobb oldalt a navigáció */
display: flex;
justify-content: space-between;
align-items: center;
}
/* Logó + felirat (bal oldalt) */
.logo-container {
display: flex;
align-items: center;
gap: 10px;
}
.fire-logo {
width: 40px;
height: 40px;
}
/* Gombok (jobb oldalt) */
nav {
display: flex;
gap: 10px;
}
button {
background-color: #800000;
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
}
button:hover {
background-color: #cc0000;
}
/* Kosár ikon */
.cart-btn {
display: flex;
align-items: center;
justify-content: center;
}
.cart-icon {
width: 20px;
height: 20px;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment