RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix a lot of the UI for mobile

Browse source
This commit is contained in:
wearrrrr 2024-02-11 18:52:16 -06:00
parent 4a3faa9761
commit bded1098bb
2 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Footer.astro
View file

@ -18,15 +18,16 @@ const t = useTranslations(lang);
<div class="footer-madeby">
<Link href="https://wearr.dev" newTab linkTextContent={t("footer.madeWithLove")} />
</div>
<div class="footer-bottom">
<div class="footer-links">
<Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
</div>
<div class="footer-bottom">
<div class="footer-links">
<Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
<div class="footer-copyright">
<p>&copy; {t("footer.aluProject")} 2024</p>
</div>
<div class="footer-copyright">
<p>&copy; {t("footer.aluProject")} 2024</p>
</div>
</div>
</div>
<style>
.wave-svg-container {

32
src/pages/[lang]/index.astro
View file

@ -14,12 +14,15 @@ export function getStaticPaths() {
<Layout title={t("pages.home")}>
<div class="main-content">
<h1 class="title-text">{t("menu.welcome")}</h1>
<form class="url-input-form" id="url-input-form">
<input class="url-input" type="text" placeholder={t("menu.search")} />
<div id="loading-content">Loading...</div>
<div id="top-bar"></div>
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
</form>
<div class="form-wrapper">
<form class="url-input-form" id="url-input-form">
<input class="url-input" type="text" placeholder={t("menu.search")} />
<div id="loading-content">Loading...</div>
<div id="top-bar"></div>
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
</form>
</div>
<div class="faq-section">
<div class="faq-card">
<h2>{t("faq.whatIsAProxy")}</h2>
@ -46,16 +49,17 @@ export function getStaticPaths() {
<style>
.main-content {
width: 100%;
margin-top: 50px;
}
.form-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 75vh;
margin-top: 50px;
}
form {
width: 40%;
height: 56px;
}
.title-text {
@ -104,6 +108,7 @@ export function getStaticPaths() {
gap: 20px;
margin: 0 auto;
width: 90%;
margin-top: 20px;
}
.faq-card {
@ -112,6 +117,11 @@ export function getStaticPaths() {
padding: 20px;
color: var(--text-color);
}
@media (max-width: 768px) {
.faq-card {
grid-column: span 2;
}
}
.faq-large {
grid-column: span 2;
}