mkohn/gt-astro-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: mkohn:main
Branches Tags
mkohn:main
mkohn:feature/add_tailwind_and_layout
mkohn:feature/make-new-base-layout
..
compare: mkohn:feature/make-new-base-layout
Branches Tags
mkohn:feature/add_tailwind_and_layout
mkohn:feature/make-new-base-layout
mkohn:main

2 Commits
main ... feature/ma

Author SHA1 Message Date
Marco Kohn
beb7642637 add some styling 2024-12-23 23:43:38 +01:00
Marco Kohn
3ef5b9e59d initial file content cleanup 2024-12-23 13:28:11 +01:00
2 changed files with 171 additions and 7 deletions
Show Stats Expand all files Collapse all files

106
src/layouts/Layout.astro
View File

@ -1,3 +1,4 @@
<!doctype html>
<html lang="en">
<head>
@ -12,11 +13,106 @@
</body>
</html>
<style>
html,
body {
<style is:global>
* {
margin: 0;
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
}
h1 {
font-size: 1.25rem;
line-height: 1.25;
}
h2 {
font-size: 0.875rem;
}
p {
margin-block-end: 1.5rem;
}
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #161616;
background-color: #f3f3f3;
min-block-size: 100vh;
min-block-size: 100dvh;
display: grid;
/* grid-template-columns: 100px 150px 200px 200px; */
/* grid-template-columns: 100px auto 10rem 200px; */
/* grid-template-columns: 100px auto repeat(2, 200px); */
/* grid-template-columns: repeat(2, 100px 200px); */
grid-template-columns: 5rem 1fr;
/* grid-template-rows: 100px 200px 100px; */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-areas:
"sidebar header"
"sidebar main"
"footer footer";
transition: grid-template-columns 0.3s ease;
}
body.sb-expand {
grid-template-columns: 12.5rem 1fr;
}
.dashboard-header {
grid-area: header;
background-color: #fff;
padding: 1.25rem;
}
.dashboard-footer {
grid-area: footer;
background-color: #fff;
padding: 1.25rem;
}
.dashboard-main {
grid-area: main;
padding: 1.25rem;
}
.dashboard-sidebar {
overflow: hidden;
position: relative;
grid-area: sidebar;
color: #fff;
background-color: #1d1d29;
}
.dashboard-sidebar button {
position: absolute;
inset: 4.5rem -0.75rem auto auto;
width: 1.5rem;
aspect-ratio: 1;
background-color: #fff;
border: solid 1px;
border-radius: 50%;
cursor: pointer;
}
.logo {
display: flex;
justify-content: center;
font-size: 3rem;
line-height: 1.3;
}
.mynavi {
overflow-x: auto;
}
</style>

72
src/pages/index.astro
View File

@ -1,5 +1,5 @@
---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
@ -7,5 +7,73 @@ import Layout from '../layouts/Layout.astro';
---
<Layout>
<Welcome />
<header class="dashboard-header">
<h1>CSS Grid - Full-Height Page Layout</h1>
</header>
<aside class="dashboard-sidebar">
<div class="logo">&#9812;</div>
<button type="button" id="resize">
&#9776;
</button>
<div class="mynav">
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
</div>
</aside>
<main class="dashboard-main">
Main<br/>
Main<br/>
Main<br/>
Main<br/>
Main<br/>
Main<br/>
Main<br/>
</main>
<footer class="dashboard-footer">
Footer
</footer>
</Layout>
<script is:inline>
const resizeBtn = document.getElementById('resize');
resizeBtn.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.toggle('sb-expand');
});
</script>