fix(web): some responsive issues after the new download button
This commit is contained in:
parent
4128bec4c4
commit
4cc6168578
@ -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 {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user