reidlab/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

change how the transitions are handled

Browse source
This commit is contained in:
Reid 2024-07-09 00:05:02 -07:00
parent 5114ed70a0
commit 4f5b4dc52c
Signed by: reidlab
GPG key ID: DAF5EAF6665839FD
1 changed files with 66 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

126
src/layouts/Layout.astro
View file

@ -42,64 +42,70 @@ import "../styles/main.css";
<Intro />
<Sidebar />
<main
data-vtbot-replace="main"
transition:name="main"
transition:animate="initial"
>
<slot />
</main>
</body><style is:global>
body {
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: auto auto;
grid-auto-flow: row;
}
/* mobile */
@media screen and (max-width: 600px) {
body {
grid-template-columns: auto auto;
grid-template-rows: min-content auto;
grid-auto-flow: column;
}
}
main {
background: linear-gradient(
275deg,
#f38ba8,
#eba0ac 30%,
transparent 0%
),
linear-gradient(
260deg,
#74c7ec,
#89b4fa 45%,
transparent 0%
),
linear-gradient(
270deg,
#fab387,
#f9e2af 55%,
transparent 0%
),
linear-gradient(
265deg,
#a6e3a1,
#94e2d5 70%,
transparent 0%),
#181818;
background-attachment: fixed;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 1em;
padding: 1em;
min-height: 100vh;
height: 100%;
width: 100%;
}
</style>
<div class="container">
<main
data-vtbot-replace="main"
transition:name="main"
transition:animate="initial"
>
<slot />
</main>
</div>
</body>
</html>
<style is:global>
body {
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: auto auto;
grid-auto-flow: row;
}
/* mobile */
@media screen and (max-width: 600px) {
body {
grid-template-columns: auto auto;
grid-template-rows: min-content auto;
grid-auto-flow: column;
}
}
.container {
background: linear-gradient(
275deg,
#f38ba8,
#eba0ac 30%,
transparent 0%
),
linear-gradient(
260deg,
#74c7ec,
#89b4fa 45%,
transparent 0%
),
linear-gradient(
270deg,
#fab387,
#f9e2af 55%,
transparent 0%
),
linear-gradient(
265deg,
#a6e3a1,
#94e2d5 70%,
transparent 0%),
#181818;
background-attachment: fixed;
}
main {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 1em;
padding: 1em;
min-height: 100vh;
height: 100%;
width: 100%;
}
</style>