feat: kinda finished homepage
This commit is contained in:
parent
3fa345888a
commit
e7a42b121e
4 changed files with 76 additions and 15 deletions
|
|
@ -1,5 +1,33 @@
|
|||
.section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section h1 {
|
||||
font-size: 4rem;
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
.section h5 {
|
||||
font-size: 1.5rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.section div {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.p1 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.p2 a {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@ export default function Home() {
|
|||
<section className={styles.section}>
|
||||
<h1>li'l Judd</h1>
|
||||
<h5>The competetive Splatoon Bot</h5>
|
||||
<p>Improve your competitive Splatoon experience!</p>
|
||||
<p>See what li'l Judd can help you with: <a href={"/features"}>here</a><br/>Invite the bot <a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"} target={"_blank"}>here</a></p>
|
||||
<div>
|
||||
<p className={styles.p1}>Improve your competitive Splatoon experience!</p>
|
||||
<p className={styles.p2}>See what li'l Judd can help you with: <a href={"/features"}>here</a></p>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
border-radius: 100%;
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
margin: .35rem;
|
||||
}
|
||||
|
||||
.navElem {
|
||||
|
|
@ -20,8 +21,23 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
|
||||
.navElem:hover {
|
||||
color: rgb(96 59 255) !important;
|
||||
}
|
||||
|
||||
.navElemR {
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.navElemR:hover {
|
||||
color: rgb(96 59 255) !important;
|
||||
}
|
||||
|
||||
|
||||
.logoWtxt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -33,6 +49,11 @@
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
.textBx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
align-items: center;
|
||||
margin: 100px 1px 0 0;
|
||||
|
|
@ -56,7 +77,7 @@
|
|||
max-width: initial;
|
||||
max-height: initial;
|
||||
width: 48px;
|
||||
margin: 0 auto;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.footerNotice {
|
||||
|
|
@ -72,6 +93,9 @@
|
|||
gap: 20px;
|
||||
}
|
||||
|
||||
.footerTable div {
|
||||
}
|
||||
|
||||
.footerTable h3 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -79,6 +103,7 @@
|
|||
.footerLinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -136,13 +161,22 @@
|
|||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
/*grid-template-columns: repeat(6, 1fr);*/
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
.navElem {
|
||||
grid-column: span 1;
|
||||
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navElemR {
|
||||
grid-column: 8;
|
||||
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footerIcon {
|
||||
|
|
|
|||
|
|
@ -6,26 +6,23 @@ export function NavBar(){
|
|||
<ul className={styles.grid}>
|
||||
<li className={styles.navElem}>
|
||||
<div className={styles.logoWtxt}>
|
||||
<img className={`${styles.logo} ${styles.pad3px}`}
|
||||
src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"}
|
||||
alt={"The Bots Logo"}/>
|
||||
<a className={styles.pad3px} href={"/"} target={"_self"}>li'l Judd</a>
|
||||
<a className={[styles.pad3px, styles.textBx].join(" ")} href={"/"} target={"_self"}><img className={`${styles.logo} ${styles.pad3px}`}src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"}alt={"The Bots Logo"}/>li'l Judd</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className={styles.navElem}>
|
||||
<a href={"/features"} target={"_self"}>Features</a>
|
||||
<a className={styles.navLink} href={"/features"} target={"_self"}>Features</a>
|
||||
</li>
|
||||
<li className={styles.navElem}>
|
||||
<a href={"/how-do-i"} target={"_self"}>How do I...?</a>
|
||||
<a className={styles.navLink} href={"/how-do-i"} target={"_self"}>How do I...?</a>
|
||||
</li>
|
||||
<li className={styles.navElem}>
|
||||
<a href={"/stack"} target={"_self"}>The Stack</a>
|
||||
<a className={styles.navLink} href={"/stack"} target={"_self"}>The Stack</a>
|
||||
</li>
|
||||
<li className={styles.navElem}>
|
||||
<a href={"/about"} target={"_self"}>About</a>
|
||||
<a className={styles.navLink} href={"/about"} target={"_self"}>About</a>
|
||||
</li>
|
||||
<li className={styles.navElem}>
|
||||
<a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
|
||||
<li className={styles.navElemR}>
|
||||
<a className={styles.navLink} href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
|
||||
target={"_blank"}>Invite to your server</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue