Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-05-31 15:53:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create my own pages

Browse source
This commit is contained in:
Michał Gdula 2024-05-22 16:05:32 +01:00
parent 2fc6cdfa26
commit 5970f11bcc
9 changed files with 437 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

170
src/layouts/Layout.astro
View file

@ -1,51 +1,139 @@
---
import { Image } from 'astro:assets';
interface Props {
title: string;
title: string;
src?: string,
alt: string,
}
const { title } = Astro.props;
const { title, src, alt } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<title>{title}</title>
</head>
<body>
<div class="banner">
{src && <Image src={src} alt={alt} inferSize={true} />}
</div>
<main>
<slot />
</main>
</body>
</html>
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
code {
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
<style is:global lang="scss">
@import "../styles/vars";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'IBM Plex Mono', monospace;
}
html {
min-height: 100vh;
font-size: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
/*border-top: 2px solid $orange;*/
/*border-bottom: 2px solid $orange;*/
background-color: #261f1b;
color: $light
}
.banner {
background-color: $gray;
height: 400px;
> img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
}
main {
margin: -300px auto 0;
padding: 32px;
width: 100%;
max-width: 800px;
flex-grow: 1;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
background-color: $dark;
box-shadow: 0 8px 8px rgba(#000, 0.3);
animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
> h1 {
padding-bottom: 8px;
}
> hr {
margin: 32px 0;
height: 2px;
border: 0 solid transparent;
background-color: $gray;
}
}
@keyframes mainSlide {
0% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
footer {
padding: 0 32px;
height: 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
section {
padding-bottom: 32px;
> h2 {
padding-bottom: 8px;
}
&:last-of-type {
padding-bottom: 0;
}
}
</style>