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

Compare commits

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

No commits in common. "feature/make-new-base-layout" and "main" have entirely different histories.
feature/ma ... main

2 changed files with 7 additions and 171 deletions
Show Stats Expand all files Collapse all files

106
src/layouts/Layout.astro
View File

@ -1,4 +1,3 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
@ -13,106 +12,11 @@
</body> </body>
</html> </html>
<style is:global> <style>
* { html,
margin: 0;
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 { body {
font-family: system-ui, sans-serif; margin: 0;
font-size: 1rem; width: 100%;
line-height: 1.7; height: 100%;
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> </style>

72
src/pages/index.astro
View File

@ -1,5 +1,5 @@
--- ---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.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 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
@ -7,73 +7,5 @@ import Layout from '../layouts/Layout.astro';
--- ---
<Layout> <Layout>
<header class="dashboard-header"> <Welcome />
<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> </Layout>
<script is:inline>
const resizeBtn = document.getElementById('resize');
resizeBtn.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.toggle('sb-expand');
});
</script>