ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-25 11:02:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: style footer

Browse Source
This commit is contained in:
madkarmaa 2025-05-07 12:11:33 +02:00
parent 0ee8984d2c
commit bbe6267c7f
3 changed files with 179 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/atoms/DmcaBadge.svelte
View File

@ -15,3 +15,11 @@
alt="DMCA.com Protection Status" alt="DMCA.com Protection Status"
/> />
</a> </a>
<style>
a {
display: flex;
align-items: center;
justify-content: center;
}
</style>

49
src/lib/components/molecules/FooterSection.svelte
View File

@ -33,3 +33,52 @@
</ul> </ul>
{/if} {/if}
</div> </div>
<style>
span {
list-style: none;
color: var(--text-four);
font-size: 0.9rem;
font-weight: 600;
}
ul {
margin: 1.25rem 0rem;
display: flex;
gap: 1rem;
flex-direction: column;
width: max-content;
}
.title {
display: flex;
justify-content: space-between;
background-color: transparent;
border: none;
width: 100%;
margin: 1.5rem 0;
cursor: pointer;
}
.mobile-only:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.mobile-only {
display: none;
}
.arrow {
transition: all 0.2s var(--bezier-one);
user-select: none;
}
@media screen and (max-width: 768px) {
.mobile-only {
display: block;
}
.desktop-only {
display: none;
}
}
</style>

157
src/lib/components/organisms/Footer.svelte
View File

@ -11,45 +11,132 @@
<SquigglyDivider /> <SquigglyDivider />
<footer> <footer>
<div class="footer-top"> <div class="footer-wrapper">
<section class="main-content"> <div class="footer-top">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" /> <section class="main-content">
{#await api.general.getAbout() then data} <img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
<div> {#await api.general.getAbout() then data}
<p>{data.about}</p> <p>{data.about}</p>
</div> {/await}
{/await} </section>
</section>
<section class="links-container"> <section class="links-container">
<FooterSection title="Pages"> <FooterSection title="Pages">
<li><Button type="text" href="/">Home</Button></li> <li><Button type="text" href="/">Home</Button></li>
<li><Button type="text" href="/download">Download</Button></li> <li><Button type="text" href="/download">Download</Button></li>
<li><Button type="text" href="/patches">Patches</Button></li> <li><Button type="text" href="/patches">Patches</Button></li>
<li><Button type="text" href="/contributors">Contributors</Button></li> <li><Button type="text" href="/contributors">Contributors</Button></li>
<li><Button type="text" href="/donate">Donate</Button></li> <li><Button type="text" href="/donate">Donate</Button></li>
</FooterSection>
{#await api.general.getAbout() then data}
<FooterSection title="Socials">
{#each data.socials as { name, url }}
<li>
<Button type="text" href={url} target="_blank">{name}</Button>
</li>
{/each}
</FooterSection> </FooterSection>
{#await api.general.getAbout() then data}
<FooterSection title="Socials">
{#each data.socials as { name, url }}
<li>
<Button type="text" href={url} target="_blank">{name}</Button>
</li>
{/each}
</FooterSection>
{/await}
</section>
</div>
<div class="footer-bottom">
<div id="logo-name"><span>Re</span>Vanced</div>
<Button type="text" href="/donate">Donate</Button>
{#await api.general.getAbout() then data}
<Button type="text" href="mailto:{data.contact.email}">Email</Button>
{/await} {/await}
</section>
</div>
<div class="footer-bottom"> <DmcaBadge guid={RV_DMCA_GUID} />
<div id="logo-name"><span>Re</span>Vanced</div> </div>
<a href="/donate"><div>Donate</div></a>
{#await api.general.getAbout() then data}
<Button type="text" href="mailto:{data.contact.email}">Email</Button>
{/await}
<DmcaBadge guid={RV_DMCA_GUID} />
</div> </div>
</footer> </footer>
<style>
footer {
background-color: var(--background-one);
}
.footer-wrapper {
max-width: min(87%, 100rem);
padding: 5rem 0rem;
margin: 0 auto;
}
.footer-top {
display: flex;
gap: 8rem;
justify-content: space-between;
margin-bottom: 4rem;
}
.footer-bottom {
display: flex;
gap: 2rem;
align-items: center;
}
@media screen and (max-width: 768px) {
.footer-bottom {
flex-wrap: wrap;
gap: 1rem;
}
}
#logo-name {
font-size: 1.4rem;
color: var(--text-one);
font-weight: 600;
}
#logo-name span {
color: var(--primary);
}
li {
list-style: none;
color: var(--text-four);
font-size: 0.9rem;
font-weight: 500;
}
.main-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.logo-image {
height: 2.5rem;
}
.links-container {
display: flex;
gap: 10rem;
margin-top: 1rem;
}
@media screen and (max-width: 1050px) {
.footer-top {
flex-direction: column;
gap: 2rem;
}
.links-container {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
}
@media screen and (max-width: 768px) {
.links-container {
display: flex;
flex-direction: column;
gap: initial;
}
}
</style>