even better layout
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
This commit is contained in:
parent
55058d493c
commit
516a0550ea
3 changed files with 14 additions and 87 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue