ahurac/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

src : modularisation avec un layout

Browse source
This commit is contained in:
Ahurac 2024-05-16 13:31:28 +02:00
parent 60f490f2c5
commit 666e177701
2 changed files with 92 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/layouts/Page.astro Normal file
View file

@ -0,0 +1,62 @@
---
import Header from '../components/Header.astro';
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{ title }</title>
</head>
<body>
<Header />
<main><slot /></main>
</body>
</html>
<style>
@font-face {
font-family: 'Cantarell';
src: url('/fonts/cantarell.otf') format('otf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
/* Background */
background: linear-gradient(90deg, #08001a 0%, #000d1a 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: black;
/* Text */
color: white;
font-family: 'Cantarell', sans-serif;
/* Flex */
display: flex;
align-items: center;
margin: 0;
flex-direction: column;
}
main {
width: 40%;
}
@media screen and (max-width: 1200px) {
main {
width: 60%;
}
}
@media screen and (max-width: 800px) {
main {
width: 95%;
}
}
</style>

62
src/pages/index.astro
View file

@ -1,21 +1,15 @@
--- ---
import Header from '../components/Header.astro'; import Page from '../layouts/Page.astro';
import Card from '../components/Card.astro'; import Card from '../components/Card.astro';
const title = 'Home';
--- ---
<html lang="en"> <Page title={ `Ahurac | ${title}` }>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Ahurac</title>
</head>
<body>
<Header />
<main>
<p>Home of a FOSS extremist and music nerd.</p> <p>Home of a FOSS extremist and music nerd.</p>
<h1>My services</h1> <h1>My services</h1>
<div id="cards"> <div id="cards">
<Card <Card
id="forgejo" id="forgejo"
@ -38,54 +32,10 @@ import Card from '../components/Card.astro';
link="https://vw.ahur.ac/" link="https://vw.ahur.ac/"
>A (Rust) based password manager</Card> >A (Rust) based password manager</Card>
</div> </div>
</main>
</body>
</html>
<style> <style>
#cards { #cards {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@font-face {
font-family: 'Cantarell';
src: url('/fonts/cantarell.otf') format('otf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
/* Background */
background: linear-gradient(90deg, #08001a 0%, #000d1a 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: black;
/* Text */
color: white;
font-family: 'Cantarell', sans-serif;
/* Flex */
display: flex;
align-items: center;
margin: 0;
flex-direction: column;
}
main {
width: 40%;
}
@media screen and (max-width: 1200px) {
main {
width: 60%;
}
}
@media screen and (max-width: 800px) {
main {
width: 95%;
}
}
</style> </style>