Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

feat: finished with html (pretty much) started with css

Browse source
This commit is contained in:
moonleay 2023-10-18 20:34:15 +02:00
parent 212d3a25a5
commit 2f112edb29
12 changed files with 141 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/about/page.tsx
View file

@ -1,6 +1,3 @@
import styles from "./page.module.css"
import {Footer, NavBar} from "@/app/util/wrapping_objects";
export default function About() { export default function About() {
return ( return (
<> <>

3
app/acknowledgements/page.tsx
View file

@ -1,6 +1,3 @@
import styles from "./page.module.css"
import {Footer, NavBar} from "@/app/util/wrapping_objects";
export default function About() { export default function About() {
return ( return (
<> <>

2
app/features/page.tsx
View file

@ -1,6 +1,4 @@
//"use client" //"use client"
import styles from "./page.module.css"
import {Footer, NavBar} from "@/app/util/wrapping_objects";
import React from 'react'; import React from 'react';
interface SectionProps { interface SectionProps {

18
app/globals.css
View file

@ -12,22 +12,22 @@
:root { :root {
--foreground-rgb: 255, 255, 255; --foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
font-family: "Splatoon", sans-serif; font-family: "Splatoon", sans-serif;
} }
body { body {
color: rgb(var(--foreground-rgb)); color: rgb(var(--foreground-rgb));
background: linear-gradient( background-color: black;
to bottom, background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/bg.jpg");
transparent, background-repeat: repeat;
rgb(var(--background-end-rgb)) background-size: 300px;
) background-position: center;
rgb(var(--background-start-rgb)); min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
body a,p,h1,h2,h3,h4,h5,h6,span,li,ul { body a,p,h1,h2,h3,h4,h5,h6,span,li,ul {
font-family: "Splatoon", sans-serif; font-family: "Splatoon", sans-serif;
} }

3
app/how-do-i/page.tsx
View file

@ -1,6 +1,3 @@
import styles from "./page.module.css";
import {Footer, NavBar} from "@/app/util/wrapping_objects";
export default function Stack() { export default function Stack() {
return ( return (
<> <>

3
app/imprint/page.tsx
View file

@ -1,6 +1,3 @@
import styles from "./page.module.css"
import {Footer, NavBar} from "@/app/util/wrapping_objects";
export default function Imprint() { export default function Imprint() {
return ( return (
<> <>

7
app/layout.tsx
View file

@ -1,8 +1,9 @@
import './globals.css' import './globals.css'
import type { Metadata } from 'next' import type {Metadata} from 'next'
import { Inter } from 'next/font/google' import {Inter} from 'next/font/google'
import React from "react"; import React from "react";
import {Footer, NavBar} from "@/app/util/wrapping_objects"; import {Footer, NavBar} from "@/app/util/wrapping_objects";
import styles from "./util/wrapping_objects.module.css";
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({ subsets: ['latin'] })
@ -20,7 +21,9 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<NavBar/> <NavBar/>
<div className={styles.contentDiv}>
{children} {children}
</div>
<Footer/> <Footer/>
</body> </body>
</html> </html>

3
app/privacy-policy/page.tsx
View file

@ -1,6 +1,3 @@
import styles from "./page.module.css"
import {Footer, NavBar} from "@/app/util/wrapping_objects";
export default function About() { export default function About() {
return ( return (
<> <>

3
app/stack/page.tsx
View file

@ -1,6 +1,3 @@
import styles from "./page.module.css";
import {Footer, NavBar} from "@/app/util/wrapping_objects";
export default function Stack() { export default function Stack() {
return ( return (
<> <>

3
app/terms-of-service/page.tsx
View file

@ -1,6 +1,3 @@
import styles from "./page.module.css"
import {Footer, NavBar} from "@/app/util/wrapping_objects";
export default function About() { export default function About() {
return ( return (
<> <>

106
app/util/wrapping_objects.module.css
View file

@ -14,12 +14,106 @@
max-height: initial; max-height: initial;
} }
.gpl3Logo { .footer {
max-width: initial; align-items: center;
max-height: initial; margin: 100px 1px auto auto;
width: 100px background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
bottom: 0;
width: 100%;
padding: 5px;
} }
.fong { .footerIcon {
font-family: "Splatoon", sans-serif; 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;
} }

25
app/util/wrapping_objects.tsx
View file

@ -1,13 +1,11 @@
import styles from "./wrapping_objects.module.css" import styles from "./wrapping_objects.module.css"
export function NavBar(){ export function NavBar(){
return( return(
<nav className={styles.navMenu}> <nav className={styles.navMenu}>
<img className={styles.logo} src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"} alt={"The Bots Logo"}/> <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> <a href={"/"} target={"_self"}>li'l Judd</a>
<ul> <ul>
<li>
<a href={"/"} target={"_self"}>Home</a>
</li>
<li> <li>
<a href={"/features"} target={"_self"}>Features</a> <a href={"/features"} target={"_self"}>Features</a>
</li> </li>
@ -20,18 +18,26 @@ export function NavBar(){
<li> <li>
<a href={"/about"} target={"_self"}>About</a> <a href={"/about"} target={"_self"}>About</a>
</li> </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> </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> </nav>
) )
} }
export function Footer() { export function Footer() {
return ( return (
<footer> <>
<img src={"https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"} alt={"A cute Image of lil Judd <3"}/> <footer className={styles.footer}>
<div> <div className={styles.footerIcon}>
<table> <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> <thead>
<tr> <tr>
<th> <th>
@ -113,8 +119,11 @@ export function Footer() {
</tbody> </tbody>
</table> </table>
</div> </div>
<div className={styles.footerNotice}>
<Notice/> <Notice/>
</div>
</footer> </footer>
</>
) )
} }