nin0/website
1
0
Fork 1
Code Pull requests Packages 1 Activity

made window

Browse source
This commit is contained in:
nin0dev 2024-07-29 13:10:58 -04:00
parent 2e77b84df3
commit f9b8428d2b
6 changed files with 67 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -10,6 +10,7 @@
"astro": "astro"
},
"dependencies": {
"7.css": "^0.16.0",
"@astrojs/node": "^8.3.2",
"astro": "^4.12.2"
}

8
pnpm-lock.yaml
View file

@ -8,6 +8,9 @@ importers:
.:
dependencies:
7.css:
specifier: ^0.16.0
version: 0.16.0
'@astrojs/node':
specifier: ^8.3.2
version: 8.3.2(astro@4.12.2)
@ -17,6 +20,9 @@ importers:
packages:
7.css@0.16.0:
resolution: {integrity: sha512-qZleAhXgVqtAc8Wb4mAJRczbGBcUMv6i2wNogXzHgf9Dztky0CqrehWOJtzU05tMw9a9xLeyvumnJeD+WjLiNQ==}
'@ampproject/remapping@2.3.0':
resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
engines: {node: '>=6.0.0'}
@ -1693,6 +1699,8 @@ packages:
snapshots:
7.css@0.16.0: {}
'@ampproject/remapping@2.3.0':
dependencies:
'@jridgewell/gen-mapping': 0.3.5

26
src/components/Window.astro Normal file
View file

@ -0,0 +1,26 @@
---
const {title, showClose, maxWidth} = Astro.props
---
<style define:vars={{ maxWidth }}>
#window {
max-width: var(--maxWidth);
}
</style>
<div class="background" id="window">
<div class="window glass active" style="max-width: 100%">
<div class="title-bar">
<div class="title-bar-text">{title}</div>
{
showClose &&
<div class="title-bar-controls">
<button aria-label="Close"></button>
</div>
}
</div>
<div class="window-body has-space">
<slot />
</div>
</div>
</div>

5
src/css/style.css Normal file
View file

@ -0,0 +1,5 @@
body {
background-color: #56a0d1;
padding: 30px;
font-family: sans-serif !important;
}

19
src/layouts/BaseLayout.astro Normal file
View file

@ -0,0 +1,19 @@
---
import "7.css/dist/7.css";
import "../css/style.css";
const {tabTitle} = 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>{tabTitle}</title>
</head>
<body>
<slot />
</body>
</html>

22
src/pages/index.astro
View file

@ -1,16 +1,10 @@
---
import Window from "../components/Window.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
---
---
<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>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<BaseLayout tabTitle="Home - nin0dev">
<Window title="Home" maxWidth="600px">
<p>I love astro</p>
</Window>
</BaseLayout>