fix(web): some responsive issues after the new download button

This commit is contained in:
wanhose 2024-04-15 20:03:36 +02:00
parent 4128bec4c4
commit 4cc6168578
2 changed files with 22 additions and 6 deletions

View File

@ -10,7 +10,16 @@
@layer components {
.button {
@apply font-bold gap-2 inline-flex items-center md:bg-2x md:hover:shadow-md rounded-lg text-white px-8 py-4;
@apply block font-bold items-center md:bg-2x md:hover:shadow-md lg:px-8 overflow-x-hidden rounded-lg text-ellipsis text-white px-4 py-4 whitespace-nowrap;
}
.button > img,
.button > span {
@apply mr-2;
}
.button > svg {
@apply float-right;
}
.icon {

View File

@ -385,7 +385,7 @@
</div>
<div class="md:text-center md:pb-20 pb-10 pt-10" id="downloads">
<h2>Available now on</h2>
<div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-16">
<div class="grid gap-4 grid-cols-1 justify-center md:gap-8 md:grid-cols-4 mt-16">
<a
class="bg-gradient-to-r button from-chrome-1 md:hover:animate-gradient to-chrome-3 via-chrome-2"
href="https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg"
@ -434,7 +434,7 @@
target="_blank"
>
<img aria-hidden="true" class="icon" src="/images/firefox.svg" />
Firefox Add-ons<sup>1</sup>
Firefox Add-ons <sup>1</sup>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
@ -455,7 +455,7 @@
target="_blank"
>
<span aria-hidden="true" class="icon" role="img">📦</span>
Packed version<sup>2</sup>
Packed version <sup>2</sup>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
@ -481,7 +481,14 @@
<sup>2</sup> This version is not recommended for regular users. It is intended for
advanced users who want to test the latest features before they are released to the
public, or for Mozilla (or other not supported browsers) users who want to run a
development copy of the last version of the extension.
development copy of the last version of the extension. We recommend you to follow
<a
class="underline"
href="https://github.com/wanhose/cookie-dialog-monster/tree/main/packages/browser-extension#installation-for-mozilla-firefox-and-non-listed-browser-users"
target="_blank"
>
this guide</a
>.
</p>
</div>
</main>
@ -489,7 +496,7 @@
<div class="max-w-5xl mx-auto">
<p class="text-center text-white text-sm">
An open source project built by you and
<a class="hover:underline" href="https://github.com/wanhose" target="_blank"> wanhose</a>
<a class="underline" href="https://github.com/wanhose" target="_blank"> wanhose</a>
</p>
</div>
</footer>