ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-08 00:00:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#151 new footer layout

Browse source
This commit is contained in:
neil 2023-01-18 09:59:46 +08:00
parent d9582a3811
commit ef12e1a36e
2 changed files with 57 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
modules/gui/src/components/FooterLinks/FooterLinks.svelte
View file

@ -1,104 +1,62 @@
<footer class="h-autofont-machina relative w-full bg-black"> <script lang="ts">
<section class="p-4 px-16 py-16"> import Button from '@tea/ui/Button/Button.svelte';
<div class="flex"> </script>
<div class="footer-text w-3/4 pr-16">
<h3 class="mb-5 text-4xl text-primary">
Changing the way you build. And what happens after you build it.
</h3>
<p class="mb-5">
tea.cli is a delightful package manager that gets out of your way and sets you up for a
joyful development process. You can install it today. Our web3 protocol will create an OSS
ecosystem that is safer for all users, and fair for all maintainers. Read our white paper
here.
</p>
<div class="w-3/4">
<img src="/images/footer-grid-element.svg" alt="grid" />
</div>
</div>
<div class="card social-box h-full w-1/4 border-2 border-gray"> <footer class="relative h-auto w-full bg-black font-machina">
<ul class="list-group list-group-flush"> <section class="p-4 px-16 py-16">
<div class="border-b border-gray p-3"> <h3 class="mb-5 text-2xl text-primary">QUICK LINKS</h3>
<a <menu class="flex gap-4">
class="list-group-item" <div class="flex-grow border border-l-0 border-r-0 border-gray">
role="button" <a href="/">
href="https://twitter.com/teaxyz" <Button>
target="_blank" <div class="flex justify-between text-primary hover:text-black">
rel="noreferrer"><i class="icon-twitter social-icon mr-3" />Twitter</a <div class="uppercase">About the tea store</div>
> <div>&#8594</div>
</div> </div>
<div class="border-b border-gray p-3"> </Button>
<a </a>
class="list-group-item"
role="button"
href="https://discord.gg/KCZsXfJphn"
target="_blank"
rel="noreferrer"><i class="icon-discord social-icon mr-3" />Discord</a
>
</div> </div>
<div class="border-b border-gray p-3"> <div class="flex-grow border border-l-0 border-r-0 border-gray">
<a <a href="/">
class="list-group-item" <Button>
role="button" <div class="flex justify-between text-primary hover:text-black">
href="https://github.com/teaxyz" <div class="uppercase">REPORT A PROBLEM</div>
target="_blank" <div>&#8594</div>
rel="noreferrer"><i class="icon-github social-icon mr-3" />GitHub</a
>
</div> </div>
<div class="border-b border-gray p-3"> </Button>
<a </a>
class="list-group-item"
role="button"
href="https://reddit.com/r/teaxyz"
target="_blank"
rel="noreferrer"><i class="icon-reddit social-icon mr-3" />Reddit</a
>
</div> </div>
<div class="p-3"> <div class="flex-grow border border-l-0 border-r-0 border-gray">
<a <a href="https://tea.xyz" target="_blank" rel="noreferrer">
class="list-group-item" <Button>
role="button" <div class="flex justify-between text-primary hover:text-black">
href="https://t.me/tea_xyz" <div class="uppercase">VISIT TEA.XYZ</div>
target="_blank" <div>&#8594</div>
rel="noreferrer"><i class="icon-telegram social-icon mr-3" />Telegram</a
>
</div>
</ul>
</div> </div>
</Button>
</a>
</div> </div>
</menu>
</section> </section>
<section class="h-16 border border-r-0 border-gray p-4 px-16"> <section class="h-16 border border-r-0 border-gray p-4 px-16">
<div class="flex"> <div class="flex gap-4 text-xs text-gray">
<div class="w-1/2 pt-2">
<p class="text-xs">
©2022 tea inc. You can also share our <a
href="https://linktr.ee/teaxyz"
target="_blank"
rel="noreferrer">Linktree</a
>.
</p>
</div>
<div class="flex w-1/2 pt-2">
<ul class="nav ml-auto flex text-xs">
<li class="nav-item mr-3 ">
<a <a
class="nav-link footer-link small"
href="https://tea.xyz/privacy-policy/"
target="_blank"
rel="noreferrer">Privacy Policy</a
>
</li>
<li class="nav-item">
<a
class="nav-link footer-link small"
href="https://tea.xyz/terms-of-use/" href="https://tea.xyz/terms-of-use/"
target="_blank" target="_blank"
rel="noreferrer">Terms of Use</a rel="noreferrer"
class="hover:text-white"
> >
</li> TERMS & SERVICES
</ul> </a>
</div> <a
href="https://tea.xyz/privacy-policy/"
target="_blank"
rel="noreferrer"
class="hover:text-white"
>
PRIVACY POLICY
</a>
</div> </div>
</section> </section>
</footer> </footer>

8
modules/gui/src/routes/+layout.svelte
View file

@ -23,7 +23,7 @@
<div id="main-layout" class="w-full"> <div id="main-layout" class="w-full">
<TopBar /> <TopBar />
<section class="pt-24" bind:this={view}> <section class="relative pt-24" bind:this={view}>
<figure /> <figure />
<div class="content"> <div class="content">
@ -42,11 +42,9 @@
height: 100vh; height: 100vh;
} }
section { section {
position: fixed; height: calc(100vh - 82px);
left: 0px;
right: 0px;
height: 100vh;
overflow-y: scroll; overflow-y: scroll;
box-sizing: border-box;
} }
figure { figure {