feat: finished with html (pretty much) started with css
This commit is contained in:
parent
212d3a25a5
commit
2f112edb29
12 changed files with 141 additions and 58 deletions
|
|
@ -1,6 +1,3 @@
|
|||
import styles from "./page.module.css"
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import styles from "./page.module.css"
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
//"use client"
|
||||
import styles from "./page.module.css"
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
import React from 'react';
|
||||
|
||||
interface SectionProps {
|
||||
|
|
|
|||
|
|
@ -12,22 +12,22 @@
|
|||
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
font-family: "Splatoon", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background-color: black;
|
||||
background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/bg.jpg");
|
||||
background-repeat: repeat;
|
||||
background-size: 300px;
|
||||
background-position: center;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
body a,p,h1,h2,h3,h4,h5,h6,span,li,ul {
|
||||
font-family: "Splatoon", sans-serif;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import styles from "./page.module.css";
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
|
||||
export default function Stack() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import styles from "./page.module.css"
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
|
||||
export default function Imprint() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import './globals.css'
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import type {Metadata} from 'next'
|
||||
import {Inter} from 'next/font/google'
|
||||
import React from "react";
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
import styles from "./util/wrapping_objects.module.css";
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
|
|
@ -20,7 +21,9 @@ export default function RootLayout({
|
|||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
<NavBar/>
|
||||
{children}
|
||||
<div className={styles.contentDiv}>
|
||||
{children}
|
||||
</div>
|
||||
<Footer/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import styles from "./page.module.css"
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import styles from "./page.module.css";
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
|
||||
export default function Stack() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import styles from "./page.module.css"
|
||||
import {Footer, NavBar} from "@/app/util/wrapping_objects";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,106 @@
|
|||
max-height: initial;
|
||||
}
|
||||
|
||||
.gpl3Logo {
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
width: 100px
|
||||
.footer {
|
||||
align-items: center;
|
||||
margin: 100px 1px auto auto;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.fong {
|
||||
font-family: "Splatoon", sans-serif;
|
||||
.footerIcon {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footerImage {
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
width: 48px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footerNotice {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.footerTable {
|
||||
margin: 10px 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 4px 7px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 4px 7px;
|
||||
}
|
||||
|
||||
.table a {
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.table a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.table a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #ffffff;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.table a:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
column-gap: 5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footerIcon {
|
||||
grid-column: span 1;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.footerTable {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.footerNotice {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contentDiv {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import styles from "./wrapping_objects.module.css"
|
||||
|
||||
export function NavBar(){
|
||||
return(
|
||||
<nav className={styles.navMenu}>
|
||||
<img className={styles.logo} src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"} alt={"The Bots Logo"}/>
|
||||
<a href={"/"} target={"_self"}>li'l Judd</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={"/"} target={"_self"}>Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/features"} target={"_self"}>Features</a>
|
||||
</li>
|
||||
|
|
@ -20,19 +18,27 @@ export function NavBar(){
|
|||
<li>
|
||||
<a href={"/about"} target={"_self"}>About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
|
||||
target={"_blank"}>Invite to your Discord Server</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"} target={"_blank"}>Invite to your Discord Server</a>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<img src={"https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"} alt={"A cute Image of lil Judd <3"}/>
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<>
|
||||
<footer className={styles.footer}>
|
||||
<div className={styles.footerIcon}>
|
||||
<img className={styles.footerImage} src={"https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"}
|
||||
alt={"A cute Image of lil Judd <3"}/>
|
||||
<p>li'l Judd</p>
|
||||
</div>
|
||||
<div className={styles.footerTable}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<p className={styles.fong}>Navigation</p>
|
||||
|
|
@ -47,8 +53,8 @@ export function Footer() {
|
|||
<p>Legal</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href={"/"} target={"_self"}>Home</a>
|
||||
|
|
@ -110,11 +116,14 @@ export function Footer() {
|
|||
<a href={"/about"} target={"_self"}>About</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Notice/>
|
||||
</footer>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={styles.footerNotice}>
|
||||
<Notice/>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue