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

1
src/components/Footer.astro
View file

@ -18,6 +18,7 @@ const t = useTranslations(lang);
<div class="footer-madeby"> <div class="footer-madeby">
<Link href="https://wearr.dev" newTab linkTextContent={t("footer.madeWithLove")} /> <Link href="https://wearr.dev" newTab linkTextContent={t("footer.madeWithLove")} />
</div> </div>
</div>
<div class="footer-bottom"> <div class="footer-bottom">
<div class="footer-links"> <div class="footer-links">
<Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} /> <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />

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

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