Revamp app layout, theming and navigation
Refactor Layout.vue to implement a redesigned, responsive shell: new branding (SVG icon, title & subtitle), computed sidebar/footer routes, route-aware page title & description, improved footer visibility, and a mobile-friendly navigation drawer. Theme handling now uses a data-theme attribute, persistent storage, accessible labels and toggle controls. Added new image assets (icon.svg, icon.png, 404NotFound.png), global.css and documentation files (style.md, codexInfo.md), updated related plugins/routes/components, and removed the old logo.png. Also updated the favicon.
This commit is contained in:
Jonas
+131
-17
@@ -1,30 +1,144 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import notFoundImage from '@/assets/images/404NotFound.png'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function navigateBack() {
|
||||
if (window.history.length > 1) {
|
||||
router.back()
|
||||
return
|
||||
}
|
||||
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container fluid class="fill-height d-flex flex-column justify-center align-center">
|
||||
<h1 class="error-title text-h1 font-weight-bold">404</h1>
|
||||
<p class="error-message text-h5">Seite nicht gefunden</p>
|
||||
<v-container fluid class="not-found-page">
|
||||
<section class="not-found-shell hoard-panel">
|
||||
<div class="not-found-visual">
|
||||
<div class="image-frame">
|
||||
<img :src="notFoundImage" alt="Illustration für eine nicht gefundene Seite" class="not-found-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-link to="/" class="text-primary text-decoration-none font-weight-medium mt-5">
|
||||
Zurueck zur Startseite
|
||||
</router-link>
|
||||
<div class="not-found-content">
|
||||
<p class="not-found-kicker">Fehler 404</p>
|
||||
<h1>Seite nicht gefunden</h1>
|
||||
<p class="not-found-text">
|
||||
Der Link ist ungültig oder die Seite wurde verschoben. Du kannst direkt zur
|
||||
Startseite zurück oder die vorherige Ansicht öffnen.
|
||||
</p>
|
||||
|
||||
<div class="not-found-actions">
|
||||
<v-btn color="primary" prepend-icon="mdi-home" to="/">Zur Startseite</v-btn>
|
||||
<v-btn variant="outlined" prepend-icon="mdi-arrow-left" @click="navigateBack">Zurück</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.error-title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 2px;
|
||||
.not-found-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - 210px);
|
||||
padding: var(--space-8) var(--space-4);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.85;
|
||||
.not-found-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr);
|
||||
gap: var(--space-8);
|
||||
width: min(100%, 980px);
|
||||
padding: var(--space-8);
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-100) 6%) 0%,
|
||||
color-mix(in srgb, var(--color-surface) 82%, var(--color-surface-alt) 18%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline !important;
|
||||
.not-found-visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-frame {
|
||||
width: min(100%, 360px);
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: color-mix(in srgb, var(--color-surface-alt) 84%, var(--color-surface) 16%);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.not-found-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.not-found-kicker {
|
||||
margin: 0 0 var(--space-2);
|
||||
color: var(--color-primary-700);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--space-3);
|
||||
font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.not-found-text {
|
||||
margin-bottom: var(--space-6);
|
||||
max-width: 44ch;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.not-found-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
@media (width <= 960px) {
|
||||
.not-found-page {
|
||||
min-height: calc(100vh - 180px);
|
||||
padding: var(--space-5) var(--space-2);
|
||||
}
|
||||
|
||||
.not-found-shell {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.not-found-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user