making background custom based on layout

2022-01-13 18:20:51 -08:00
parent 9a945edd87
commit 9f5b3d072a
6 changed files with 23 additions and 5 deletions
@@ -0,0 +1,8 @@
+
+export default function BackgroundLayout({ children }) {
+  return (
+    <div id="bg">
+      {children}
+    </div>
+  )
+}
@@ -1,7 +1,7 @@

 import Head from "next/head"

-export default function Layout({ children }) {
+export default function SiteLayout({ children }) {
  return (
    <>
      <Head>
@@ -3,7 +3,7 @@ import Image from 'next/image';

 export default function Home() {
  return (
-    <div className={styles.container}>
+    <div className='container m-20'>
      <main className="space-y-10">
        <p id="main-title">nirvana</p>

@@ -28,6 +28,8 @@ import { BsThreeDots } from "react-icons/bs";
 import { UserStatus, User } from '../../models/user'
 import { KeyCode } from '../../globals/keycode'

+import BackgroundLayout from '../../components/Layouts/BackgroundLayout'
+
 let testFriends = [ 
    {
        name: "Liam",
@@ -163,7 +165,7 @@ export default class Demo extends React.Component<{ }, MyState> {

    render() {
        return (
-            <>
+            <BackgroundLayout>
                <div className="container mx-auto max-w-screen-xl py-10 flex flex-col space-y-5">
                    {/* header content */}
                    <section className="flex-1 flex flex-row items-center justify-between py-5">
@@ -846,7 +848,7 @@ export default class Demo extends React.Component<{ }, MyState> {
                        </span>
                    </section>
                </div>
-            </>
+            </BackgroundLayout>
            )
    }
    
@@ -1,3 +1,8 @@
+/**
+ * 
+ * wrapper for authentication for the future for each individual component
+ */
+
 export function requireAuthentication(gssp) {
  return async (context) => {
      const { req, res } = context;
@@ -16,12 +16,15 @@ a {
 }

 /* my personal css */
+body {
+  @apply bg-slate-100 !important;
+}

 main {
  font-family: "Poppins", sans-serif;
 }

-bg {
+#bg {
  background: url("/wallpapers/dark-mountains.jpg") no-repeat center center
    fixed;
  -webkit-background-size: cover;