sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 06:30:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: refactor layout and styling for improved responsiveness and accessibility; add Footer component

Browse Source
This commit is contained in:
sHa
2025-05-15 15:49:56 +03:00
parent d30e2f9e0b
commit 9509ef0688
9 changed files with 342 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/App.svelte
View File

@@ -1,15 +1,10 @@
<script>
import { onMount } from "svelte";
import Router from 'svelte-spa-router';
// Import Router component directly with explicit path
import Router from 'svelte-spa-router/Router.svelte';
// Import pages for routing
import Home from './pages/Home.svelte';
import PreviewPage from './pages/Preview.svelte';
const routes = {
'/': Home,
'/preview/:id': PreviewPage,
};
// Import routes from centralized router.js file
import { routes } from './router.js';
let viewMode = "grid"; // 'grid' or 'list'
let searchQuery = "";
@@ -510,56 +505,19 @@
}
</script>
<main class="container app-flex">
<div class="container app-flex">
<Router {routes} />
</div>
<style>
.app-flex {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
}
.footer-flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1em;
}
.footer-left {
flex: 1;
text-align: left;
}
.footer-center {
flex: 2;
text-align: left;
}
.footer-github {
flex: 0;
margin-left: 1em;
display: inline-flex;
align-items: center;
}
@media (max-width: 700px) {
.footer-flex {
flex-direction: column;
align-items: flex-start;
gap: 0.3em;
}
.footer-left, .footer-center {
text-align: left;
width: 100%;
}
.footer-github {
margin-left: 0;
margin-top: 0.5em;
}
}
</style>
</main>
<style>
.app-flex {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.app-flex {
min-height: 100vh;
display: flex;
flex-direction: column;
}
</style>