even better layout
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s

This commit is contained in:
BOTAlex 2025-08-19 19:21:37 +02:00
parent 55058d493c
commit 516a0550ea
3 changed files with 14 additions and 87 deletions

View file

@ -1,4 +1,8 @@
<div class="grid grid-cols-4 w-full h-full">
<div class="bg-blue-200 col-start-2">test1</div>
<div class="bg-violet-600 col-start-3">test2</div>
<div class="bg-blue-200 h-full col-start-2">
<div class="flex flex-col items-center w-full h-full">
<div class="w-10 h-10 bg-lime-200"></div>
</div>
</div>
<div class="bg-violet-600 h-full col-start-3">test2</div>
</div>

View file

@ -82,7 +82,7 @@
bind:matches={isMobile}
/>
<div class="flex flex-col min-h-screen bg-base-200 p-0">
<div class="flex flex-col justify-between min-h-screen bg-base-200 p-0">
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
<div class="nav-bar pr-4">
{#if !isMobile}
@ -155,8 +155,10 @@
</div>
</header>
<!-- Page content -->
{@render children?.()}
<div class="flex-1">
<!-- Page content -->
{@render children?.()}
</div>
<Zooter bind:hideOnPrint />
</div>
@ -176,7 +178,7 @@
</style>
{/if}
<style lang="scss">
<style>
/* Nav bar. */
header {
display: flex;
@ -222,20 +224,6 @@
gap: 10px;
}
#logo-link {
width: 64px;
aspect-ratio: 1 / 1;
}
#logo-text {
font-size: 24px;
color: oklch(var(--bc));
font-family: var(--title-font);
margin: 0;
min-width: 200px;
}
.nav-spacer {
width: 100%;
}
@ -246,71 +234,8 @@
font-size: 22px;
font-family: var(--title-font);
// Text color
color: oklch(var(--bc));
}
/* Footer. */
footer {
margin-top: 50px;
padding: 25px 0;
background-color: oklch(var(--b3));
height: 100%;
display: flex;
justify-content: center;
}
.about-container {
width: 80%;
height: 100%;
color: oklch(var(--bc));
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
& h3 {
font-size: larger;
}
}
.about-container > div {
align-items: center;
text-align: center;
}
.credits {
line-height: 2;
}
.contact {
display: flex;
flex-direction: column;
}
.social {
display: flex;
align-content: center;
gap: 10px;
}
.social > img {
width: 24px;
}
footer h3 {
margin-top: 0px;
color: var(--text2);
}
footer a {
color: var(--text2);
text-decoration-line: underline;
}
a:hover {
filter: brightness(130%);
}

View file

@ -155,7 +155,7 @@
on:resize={onResize}
/>
<div class="{hideOnPrint ? 'hide-on-print' : ''} mt-auto w-full">
<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
<!-- Keep scrolling thing -->
<div class="hidden h-64 w-full flex flex-col justify-center items-center">
<div>Keep scrolling to veiw Zhen's portfolio site!</div>
@ -179,9 +179,7 @@
</div>
<!-- About footer -->
<div
class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
>
<div class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300">
<div class="flex justify-center">
<div class="grid gap-8 sm:grid-cols-3 items-center w-full">
<div class="flex flex-col items-center">