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>

110
src/pages/index.astro
View file

@ -1,91 +1,41 @@
--- ---
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> <p>Home of a FOSS extremist and music nerd.</p>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <h1>My services</h1>
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <div id="cards">
<title>Ahurac</title> <Card
</head> id="forgejo"
<body> name="Forgejo"
<Header /> link="https://git.ahur.ac/"
<main> >A straight-to-the-point source code forge</Card>
<p>Home of a FOSS extremist and music nerd.</p> <Card
<h1>My services</h1> id="send"
<div id="cards"> name="Send"
<Card link="https://send.ahur.ac/"
id="forgejo" >Encrypt and send files privately</Card>
name="Forgejo" <Card
link="https://git.ahur.ac/" id="matrix"
>A straight-to-the-point source code forge</Card> name="Matrix"
<Card link="https://chat.ahur.ac/"
id="send" >The messenger that doesn't spy on you</Card>
name="Send" <Card
link="https://send.ahur.ac/" id="vaultwarden"
>Encrypt and send files privately</Card> name="Vaultwarden"
<Card link="https://vw.ahur.ac/"
id="matrix" >A (Rust) based password manager</Card>
name="Matrix" </div>
link="https://chat.ahur.ac/"
>The messenger that doesn't spy on you</Card>
<Card
id="vaultwarden"
name="Vaultwarden"
link="https://vw.ahur.ac/"
>A (Rust) based password manager</Card>
</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>