Add some layout
This commit is contained in:
DrMint
parent
11642958d4
commit
3d4ed5a410
File diff suppressed because it is too large
Load Diff
|
|
@ -15,7 +15,8 @@
|
|||
"accept-language": "^3.0.18",
|
||||
"astro": "^3.0.3",
|
||||
"hono": "^3.5.7",
|
||||
"node-cache": "^5.1.2"
|
||||
"node-cache": "^5.1.2",
|
||||
"sanitize.css": "^13.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bun-types": "^0.8.1"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import "sanitize.css";
|
||||
import "src/styles/global.css";
|
||||
|
||||
|
|
@ -14,20 +14,106 @@ const { title } = Astro.props;
|
|||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<div><slot name="subPanel" /></div>
|
||||
<div><slot name="contentPanel" /></div>
|
||||
<body class="theme-color-dark">
|
||||
<div id="main-panel">
|
||||
<slot name="mainPanel">Main Panel</slot>
|
||||
</div>
|
||||
<div id="sub-panel">
|
||||
<slot name="subPanel">Sub Panel</slot>
|
||||
</div>
|
||||
<div id="menu-panel">Menu Panel</div>
|
||||
<div id="navbar">
|
||||
<button id="open-menu">Open menu</button>
|
||||
<button id="open-sub">Open sub</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
const subPanel = document.getElementById("sub-panel");
|
||||
const menuPanel = document.getElementById("menu-panel");
|
||||
const openMenuButton = document.getElementById("open-menu");
|
||||
const subMenuButton = document.getElementById("open-sub");
|
||||
|
||||
openMenuButton?.addEventListener("click", () => {
|
||||
menuPanel?.classList.toggle("opened");
|
||||
});
|
||||
|
||||
subMenuButton?.addEventListener("click", () => {
|
||||
subPanel?.classList.toggle("opened");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 20rem 20rem 1fr;
|
||||
background-color: rgb(var(--theme-color-light));
|
||||
color: rgb(var(--theme-color-black));
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
background-color: red;
|
||||
border: 1px solid rgb(var(--theme-color-dark));
|
||||
background-color: rgb(var(--theme-color-light));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 60rem) {
|
||||
body {
|
||||
grid-template-areas: "main" "navbar";
|
||||
grid-template-rows: 1fr 5rem;
|
||||
|
||||
& > #menu-panel {
|
||||
grid-area: main;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
& > #menu-panel.opened {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
& > #sub-panel {
|
||||
grid-area: main;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
& > #sub-panel.opened {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
& > #main-panel {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
& > #navbar {
|
||||
grid-area: navbar;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
body {
|
||||
grid-template-columns: 20rem 20rem 1fr;
|
||||
grid-template-areas: "menu sub main";
|
||||
|
||||
& > #menu-panel {
|
||||
grid-area: menu;
|
||||
}
|
||||
|
||||
& > #sub-panel {
|
||||
grid-area: sub;
|
||||
}
|
||||
|
||||
& > #main-panel {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
& > #navbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = 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>
|
||||
</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>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import AppLayout from "../../layouts/AppLayout.astro";
|
||||
import "src/global.ts";
|
||||
import AppLayout from "src/layouts/AppLayout.astro";
|
||||
|
||||
const { locale } = Astro.params;
|
||||
---
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import "src/global.ts";
|
||||
import AppLayout from "src/layouts/AppLayout.astro";
|
||||
|
||||
const { locale } = Astro.params;
|
||||
---
|
||||
|
||||
<AppLayout title="Welcome to Astro.">
|
||||
<main slot="subPanel">
|
||||
<h1>Hello {locale}</h1>
|
||||
</main>
|
||||
</AppLayout>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.theme-color-light {
|
||||
--theme-color-highlight: 255 241 224;
|
||||
--theme-color-light: 255 237 216;
|
||||
--theme-color-mid: 240 209 179;
|
||||
--theme-color-dark: 156 102 68;
|
||||
--theme-color-shade: 192 132 94;
|
||||
--theme-color-black: 27 24 17;
|
||||
}
|
||||
|
||||
.theme-color-dark {
|
||||
--theme-color-highlight: 44 40 37;
|
||||
--theme-color-light: 38 34 30;
|
||||
--theme-color-mid: 57 45 34;
|
||||
--theme-color-dark: 192 132 94;
|
||||
--theme-color-shade: 25 25 20;
|
||||
--theme-color-black: 235 234 231;
|
||||
}
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strictest",
|
||||
"compilerOptions": {
|
||||
"types": ["bun-types"]
|
||||
"types": ["bun-types"],
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"src/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue