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(tailwind): add styling for header, footer and content area

Browse Source
This commit is contained in:
Stefan Imhoff
2023-02-21 16:37:18 +01:00
parent 36e4e1c4e2
commit 6cd6eb1d28
2 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/layouts/Layout.astro
View File

@@ -29,7 +29,7 @@ const { title } = Astro.props;
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/assets/images/branding/favicons/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/assets/images/branding/favicons/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/assets/images/branding/favicons/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/assets/images/branding/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" /> <!-- <link rel="manifest" href="/manifest.webmanifest" /> -->
<link <link
rel="preload" rel="preload"
@@ -47,6 +47,12 @@ 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">
<slot /> <header class="grid grid-cols-18 grid-rows-layout mbe-layout print:hidden" role="banner">
Header
</header>
<main class="flex grow">
<slot />
</main>
<footer class="grid grid-cols-18 grid-rows-layout mbs-layout print:hidden">Footer</footer>
</body> </body>
</html> </html>

11
src/pages/index.astro
View File

@@ -2,13 +2,4 @@
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
--- ---
<Layout title="Welcome to Astro."> <Layout title="Homepage">Homepage</Layout>
<main>
<h1>Hello, world!</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium optio magni
asperiores fugiat, necessitatibus voluptatem sit quaerat pariatur natus, tempora
voluptatibus vero eveniet repudiandae, expedita libero. Cum cupiditate at placeat.
</p>
</main>
</Layout>