kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(astro): migrate back link

Browse Source
This commit is contained in:
Stefan Imhoff
2023-02-21 17:34:12 +01:00
parent 95599b9afe
commit e2ccaf991f
1 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/layouts/Layout.astro
View File

@@ -1,11 +1,12 @@
--- ---
import '../styles/global.css'; import '../styles/global.css';
import { Sprite } from 'astro-icon';
export interface Props { export interface Props {
title: string; title: string;
} }
const { title } = Astro.props; const { title, frontmatter } = Astro.props;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -47,12 +48,44 @@ const { title } = Astro.props;
/> />
</head> </head>
<body class="flex h-screen flex-col font-sans font-normal leading-relaxed"> <body class="flex h-screen flex-col font-sans font-normal leading-relaxed">
<header class="grid grid-cols-18 grid-rows-layout mbe-layout print:hidden" role="banner"> <Sprite.Provider>
Header <header
</header> class="page-header grid grid-cols-18 grid-rows-layout mbe-layout print:hidden"
<main class="flex grow"> role="banner"
<slot /> >
</main> <!-- Backlink -->
<footer class="grid grid-cols-18 grid-rows-layout mbs-layout print:hidden">Footer</footer> {
frontmatter?.backLink ? (
<a
class="back-link col-span-1 col-start-1 self-center justify-self-center transition-transform duration-500 ease-in-out mie-[15px] hover:-translate-x-1 focus:-translate-x-1 print:hidden"
href="{frontmatter.backLink}"
>
<button
class="back-link-button flex h-[40px] w-[40px] cursor-pointer items-center justify-center border-none bg-transparent text-[0]"
aria-label="Back to overview"
type="button"
>
<Sprite name="ri:arrow-left-line" />
</button>
</a>
) : (
<div class="back-link-spacer col-span-1 col-start-1 h-[40px] w-[40px] justify-center self-center mie-[15px]" />
)
}
</header>
<main class="page-content flex grow">
<slot />
</main>
<footer class="page-footer grid grid-cols-18 grid-rows-layout mbs-layout print:hidden">
Footer
</footer>
</Sprite.Provider>
</body> </body>
</html> </html>
<style>
[astro-icon] {
width: 24px;
height: 24px;
}
</style>