Skip to content

Commit

Permalink
refactor: Convert footer CSS to Tailwind
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cauatn @ADKaster
Cauatn authored and ADKaster committed Jul 11, 2024
1 parent c8542e2 commit 5d06bac
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 152 deletions.
68 changes: 39 additions & 29 deletions src/components/global/footer.astro
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
<footer class="footer">
<footer class="bg-[#000] py-0 px-20">
<div class="container">
<div class="footer__box">
<div class="footer__box-content">
<h2>Sign up for our newsletter</h2>
<p>We'll e-mail you once a month with updates about Ladybird.</p>
<div
class="flex items-center h-[335px] sm:h-[380px] bg-cover bg-no-repeat relative z-10 -top-[60px] rounded-[80px] bg-[url('../../../assets/img/discover-bg.webp')] w-full"
>
<div class="p-7 md:h-[335px] md:p-10 lg:py-12 lg:px-20">
<h2 class="text-[#000] mb-1 text-[36px] lg:text-4xl">
Sign up for our newsletter
</h2>
<p class="text-[#000] mb-6 max-w-[832px] lg:text-lg">
We'll e-mail you once a month with updates about Ladybird.
</p>

<div class="footer__pages-block">
<div class="flex flex-col">
<form
action="https://ladybird.us18.list-manage.com/subscribe/post?u=c15e0446263bcb0793a049dd0&id=43762f159d&f_id=00b4c2e1f0"
method="post"
Expand Down Expand Up @@ -60,50 +66,54 @@
</div>
</div>

<div class="footer__content">
<div class="footer__content-top sm:flex sm:flex-col md:flex md:flex-row">
<div class="footer__content-left max-w-36">
<img
class="ladybird-logo"
src="/assets/img/logo-new.webp"
alt="Logo"
/>
<div>
<div class="flex sm:flex-col md:flex-row justify-between gap-10">
<div class="h-fit">
<img class="max-w-48" src="/assets/img/logo-new.webp" alt="Logo" />
</div>
<div class="footer__content-right">
<div class="footer__pages">
<div class="footer__pages-block">
<a href="/#about" class="footer__pages-link">About</a>
<a href="/#news" class="footer__pages-link">News</a>
<a href="/#gi" class="footer__pages-link">Get Involved</a>
<div>
<div class="flex gap-14">
<div class="flex flex-col">
<a href="/#about" class="mb-3 font-normal">About</a>
<a href="/#news" class="mb-3 font-normal">News</a>
<a href="/#gi" class="mb-3 font-normal">Get Involved</a>
</div>

<div class="footer__pages-block">
<a href="/#sponsors" class="footer__pages-link">Sponsors</a>
<a href="mailto:[email protected]" class="footer__pages-link"
<div class="flex flex-col">
<a href="/#sponsors" class="mb-3 font-normal">Sponsors</a>
<a href="mailto:[email protected]" class="font-normal mb-0"
>Contact Us</a
>
</div>
</div>
</div>
</div>

<div class="footer__content-bottom">
<div class="footer__privacy">
<div
class="flex sm:flex-row flex-col gap-10 items-center justify-between py-[30px] pb-5 px-0 border-t-[#303030] border-t-[1px] mt-8 border-solid"
>
<div class="[&>p]:text-[#404040] font-normal">
<p>© 2024. All rights reserved.</p>
</div>
<div class="footer__social">
<div>
<a
href="https://github.com/LadybirdBrowser/ladybird"
class="footer__social-link"
class="w-8 h-8 inline-flex items-center justify-center rounded-full bg-[#16141b] hover:bg-[#8a64e5]"
>
<img src="/assets/img/github.svg" alt="GitHub" />
</a>

<a href="https://discord.gg/nvfjVJ4Svh" class="footer__social-link">
<a
href="https://discord.gg/nvfjVJ4Svh"
class="w-8 h-8 inline-flex items-center justify-center rounded-full bg-[#16141b] hover:bg-[#8a64e5]"
>
<img src="/assets/img/discord.svg" alt="Discord" />
</a>

<a href="https://x.com/ladybirdbrowser" class="footer__social-link">
<a
href="https://x.com/ladybirdbrowser"
class="w-8 h-8 inline-flex items-center justify-center rounded-full bg-[#16141b] hover:bg-[#8a64e5]"
>
<img src="/assets/img/x.svg" alt="X/Twitter" />
</a>
</div>
Expand Down
123 changes: 0 additions & 123 deletions src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,129 +159,6 @@ a {
color: #fff;
}

.footer {
background: #000;
padding: 0 20px;
}

.footer__box {
position: relative;
z-index: 10;
top: -60px;
border-radius: 80px;
background-image: url("../../../assets/img/discover-bg.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 380px;
display: flex;
align-items: center;
}

@media (min-width: 768px) {
.footer__box {
height: 335px;
}
}

.footer__box-content {
padding: 30px;
}

@media (min-width: 768px) {
.footer__box-content {
padding: 40px;
}
}

@media (min-width: 991px) {
.footer__box-content {
padding: 50px 90px;
}
}

.footer__box h2 {
color: #000;
margin-bottom: 4px;
font-size: 36px;
}

@media (min-width: 991px) {
.footer__box h2 {
font-size: 48px;
}
}

.footer__box p {
color: #000;
margin-bottom: 24px;
max-width: 832px;
}

.footer__pages {
display: flex;
gap: 60px;
}

.footer__pages-link {
margin-bottom: 12px;
font-weight: 400;
}

.footer__pages-link:nth-last-child(1) {
margin-bottom: 0;
}

.footer__pages-block {
display: flex;
flex-direction: column;
}

.footer__social-link {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100px;
background: #16141b;
}

.footer__social-link:hover {
background: #8a64e5;
}

.footer__privacy p {
color: #404040;
font-weight: 400;
}

.footer__content-top {
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 40px;
}

.footer__content-bottom {
display: flex;
justify-content: space-between;
border-top: 1px solid #303030;
padding: 30px 0 20px 0;
margin-top: 30px;
flex-direction: column;
gap: 40px;
text-align: center;
}

@media (min-width: 380px) {
.footer__content-bottom {
flex-direction: row;
gap: initial;
text-align: initial;
}
}

.hero {
background-color: #000;
position: relative;
Expand Down

0 comments on commit 5d06bac

Please sign in to comment.