style: minor ui improvements on donate page (merge pull request #43 from osarthak/update-donate)

update donate ui && fix footer links margin
This commit is contained in:
Ahwx 2023-09-03 23:07:57 +02:00 committed by GitHub
commit 530fbf5a26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 169 additions and 12 deletions

View File

@ -7,16 +7,71 @@
<title>LibreY - Donate</title>
</head>
<body>
<div class="misc-container">
<h1>Donate to the original developer of LibreX, a project LibreY tries to improve.</h1>
<h2>Bitcoin (BTC):</h2>
<p>bc1qs43kh6tvhch02dtsp7x7hcrwj8fwe4rzy7lp0h</p>
<img src="static/images/btc.png" alt="btc qr code" width="150" height="150"/>
<h2>Monero (XMR):</h2>
<p>41dGQr9EwZBfYBY3fibTtJZYfssfRuzJZDSVDeneoVcgckehK3BiLxAV4FvEVJiVqdiW996zvMxhFB8G8ot9nBFqQ84VkuC</p>
<img src="static/images/xmr.png" alt="xmr qr code" width="150" height="150"/>
<h1>Donate to the person that forked LibreX into LibreY</h1>
<a href="https://ahwx.org/donate.php">Click here</a>
<div class="donate-container">
<!-- librex dev -->
<h2>
Donate to the original developer of Libre<span class="Y">X</span>, a
project LibreY tries to improve.
</h2>
<div class="flexbox-column">
<div class="qr-box">
<div class="inner-wrap">
<h3>Bitcoin [BTC]</h3>
<p>bc1qs43kh6tvhch02dtsp7x7hcrwj8fwe4rzy7lp0h</p>
</div>
<img
src="/static/images/btc.png"
height="160"
width="160"
alt="btc qr code"
/>
</div>
<div class="qr-box">
<div class="inner-wrap">
<h3>Monero [XMR]</h3>
<p>
41dGQr9EwZBfYBY3fibTtJZYfssfRuzJZDSVDeneoVcgckehK3BiLxAV4FvEVJiVqdiW996zvMxhFB8G8ot9nBFqQ84VkuC
</p>
</div>
<img
src="/static/images/xmr.png"
height="160"
width="160"
alt="xmr qr code"
/>
</div>
<hr class="small-line" />
<!-- librey dev -->
<h2>
Donate to the person that forked LibreX into Libre<span class="Y"
>Y</span
>
</h2>
<div class="flex-row">
<a href="https://ko-fi.com/Ahwxorg" target="_blank"
><img
src="/static/images/kofi.png"
alt="kifi img"
height="50"
width="auto"
/></a>
<a href="https://www.buymeacoffee.com/ahwx" target="_blank">
<img
src="/static/images/buy-me-a-coffee.png"
height="50"
width="auto"
alt="buy-me-a-coffee img"
/></a>
</div>
</div>
</div>
<?php require "misc/footer.php"; ?>

View File

@ -319,8 +319,7 @@ a[title] {
}
.footer-container a {
margin-left: 15px;
margin-right: 15px;
margin-right: 30px;
}
.hide {
@ -339,6 +338,60 @@ a[title] {
color: #ff79c6;
}
/* donate css start */
.donate-container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
}
.flexbox-column {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.inner-wrap {
width: 500px;
padding: 20px;
}
.qr-box {
background-color: var(--search-container-background-color);
border: 1px solid var(--search-container-background-border);
border-radius: 10px 0px 0px 10px;
width: 100%;
display: flex;
word-wrap: break-word;
align-items: center;
justify-content: space-between;
}
.flex-row {
width: 700px;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
hr.small-line {
/* background-color: #f1f3f4; */
border: 2px solid var(--main-fg);
height: 0px;
width: 100px;
margin: 30px;
border-radius: 2px;
}
/* donate css end */
@media only screen and (max-width: 1320px) {
.special-result-container {
position: relative;
@ -485,4 +538,53 @@ a[title] {
margin-left: 20px;
}
/* dontate css start*/
.donate-container {
margin-bottom: 100px;
width: 95%;
text-align: center;
}
.qr-box {
display: flex;
flex-direction: column;
word-wrap: break-word;
align-items: center;
justify-content: space-between;
word-wrap: break-word;
height: auto;
}
.qr-box {
border-radius: 10px;
flex-direction: column;
align-items: center;
}
.inner-wrap {
width: 80%;
text-align: center;
}
.qr-box img {
width: 40%;
height: auto;
padding: 20px;
}
.flex-row {
flex-direction: column;
align-items: center;
gap: 5px;
width: 0;
}
.flex-row a img {
width: 220px;
height: auto;
}
/* donate css end */
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
static/images/kofi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB