diff --git a/app/about/page.tsx b/app/about/page.tsx
index dc7ba6a..1311364 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,6 +1,3 @@
-import styles from "./page.module.css"
-import {Footer, NavBar} from "@/app/util/wrapping_objects";
-
export default function About() {
return (
<>
diff --git a/app/acknowledgements/page.tsx b/app/acknowledgements/page.tsx
index c0bf7ab..3be8803 100644
--- a/app/acknowledgements/page.tsx
+++ b/app/acknowledgements/page.tsx
@@ -1,6 +1,3 @@
-import styles from "./page.module.css"
-import {Footer, NavBar} from "@/app/util/wrapping_objects";
-
export default function About() {
return (
<>
diff --git a/app/features/page.tsx b/app/features/page.tsx
index 6d028c2..d24b361 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -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 {
diff --git a/app/globals.css b/app/globals.css
index 3e60340..1080537 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -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;
}
-
diff --git a/app/how-do-i/page.tsx b/app/how-do-i/page.tsx
index 251fba5..0055186 100644
--- a/app/how-do-i/page.tsx
+++ b/app/how-do-i/page.tsx
@@ -1,6 +1,3 @@
-import styles from "./page.module.css";
-import {Footer, NavBar} from "@/app/util/wrapping_objects";
-
export default function Stack() {
return (
<>
diff --git a/app/imprint/page.tsx b/app/imprint/page.tsx
index e8396d9..caa4a8a 100644
--- a/app/imprint/page.tsx
+++ b/app/imprint/page.tsx
@@ -1,6 +1,3 @@
-import styles from "./page.module.css"
-import {Footer, NavBar} from "@/app/util/wrapping_objects";
-
export default function Imprint() {
return (
<>
diff --git a/app/layout.tsx b/app/layout.tsx
index 68c467c..301b884 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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({
- {children}
+
+ {children}
+
diff --git a/app/privacy-policy/page.tsx b/app/privacy-policy/page.tsx
index 067990c..88030c9 100644
--- a/app/privacy-policy/page.tsx
+++ b/app/privacy-policy/page.tsx
@@ -1,6 +1,3 @@
-import styles from "./page.module.css"
-import {Footer, NavBar} from "@/app/util/wrapping_objects";
-
export default function About() {
return (
<>
diff --git a/app/stack/page.tsx b/app/stack/page.tsx
index 53343b3..64181e1 100644
--- a/app/stack/page.tsx
+++ b/app/stack/page.tsx
@@ -1,6 +1,3 @@
-import styles from "./page.module.css";
-import {Footer, NavBar} from "@/app/util/wrapping_objects";
-
export default function Stack() {
return (
<>
diff --git a/app/terms-of-service/page.tsx b/app/terms-of-service/page.tsx
index ac63c79..372909e 100644
--- a/app/terms-of-service/page.tsx
+++ b/app/terms-of-service/page.tsx
@@ -1,6 +1,3 @@
-import styles from "./page.module.css"
-import {Footer, NavBar} from "@/app/util/wrapping_objects";
-
export default function About() {
return (
<>
diff --git a/app/util/wrapping_objects.module.css b/app/util/wrapping_objects.module.css
index 485dff4..ef2347a 100644
--- a/app/util/wrapping_objects.module.css
+++ b/app/util/wrapping_objects.module.css
@@ -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;
}
diff --git a/app/util/wrapping_objects.tsx b/app/util/wrapping_objects.tsx
index b008078..5166019 100644
--- a/app/util/wrapping_objects.tsx
+++ b/app/util/wrapping_objects.tsx
@@ -1,13 +1,11 @@
import styles from "./wrapping_objects.module.css"
+
export function NavBar(){
return(
)
}
export function Footer() {
return (
-
+ >
)
}