Changed too much shit I dont care

src/components/bootstrap.tsx

@@ -0,0 +1,10 @@
+'use client'
+import 'bootstrap/dist/css/bootstrap.css';
+import { useEffect } from 'react';
+
+export default function Bootstrap(Component, children, pageProps){
+    useEffect(() => {
+        typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null
+    }, []);
+    return <><div {...pageProps} /></>;
+}

src/components/header.module.css

@@ -1,6 +1,6 @@
 .header{
     display: flex;
-    background-color: green;
+    background-color: #008BC7;
     flex-direction: row;
     flex-grow: 0;
 }

src/components/header.tsx

@@ -1,4 +1,4 @@
-import styles from "./styles.header.module.css"
+import styles from "./header.module.css"
 
 export default function Header() {
     return <div className={`${styles.header} pp`}>

src/components/navbar.module.css

@@ -1,7 +1,8 @@
 .navbar{
-    background-color: pink;
+    background-color: #136D94;
     flex-grow: 0;
 }
 .navItem{
     margin: 8px;
+    color: white;
 }

src/components/navbar.tsx

@@ -1,8 +1,9 @@
-import styles from "./styles.navbar.module.css"
+import styles from "./navbar.module.css"
 
 const navItems = ["News", "Projects", "About Me"];
 const navList = navItems.map(value => <a key={value} className={styles.navItem}>{value}</a>);
 
+
 export default function Navbar() {
     return <nav className={`${styles.navbar}`}>
         <ul>{navList}</ul>

src/components/news/article-preview.module.css

@@ -0,0 +1,23 @@
+.previewbox{
+    display:flex;
+    flex-direction: row;
+    box-sizing: content-box;
+    min-height:128px;
+    /* background-color: aqua; */
+    /* max-width:25vw; */
+    /* outline: auto; */
+
+}
+.imagecontainer{
+    min-width:128px;
+    min-height:100%;
+    /* flex-grow: 10; */
+    background-image: url(/placeholder-square.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.summary{
+    /* flex-shrink: 1; */
+    padding:8px;
+}

src/components/news/article-preview.tsx

@@ -0,0 +1,21 @@
+import Tagbar from "@/components/news/tagbar";
+import styles from "./article-preview.module.css"
+
+import bg from "public/placeholder-square.png"
+import { ReactNode } from "react"
+import { Style } from "util";
+
+
+export default function ArticlePreview(){
+    return <div className={styles.previewbox}>
+        <div className={styles.imagecontainer}>
+            
+        </div>
+        <div className={styles.summary}>
+            <h2>Lorem Ipsum</h2><Tagbar/>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci quis elit suscipit varius vitae sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            </p>
+        </div>
+    </div>;
+}

src/components/news/article.module.css

@@ -0,0 +1,24 @@
+.previewbox{
+    display:flex;
+    flex-direction: row;
+    box-sizing: content-box;
+    min-height: 128px;
+    /* background-color: aqua; */
+    /* max-width:25vw; */
+    /* outline: auto; */
+
+}
+.imagecontainer{
+    min-width:100%;
+    min-height:256px;
+    /* flex-grow: 10; */
+    background-image: url(/placeholder-square.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #00000044;
+}
+.summary{
+    /* flex-shrink: 1; */
+    padding:8px;
+}

src/components/news/article.tsx

@@ -0,0 +1,19 @@
+import Tagbar from "@/components/news/tagbar";
+import "public/global.css"
+import "@/app/index.css"
+import styles from "./article.module.css"
+
+
+export default function Article(params: { id: String, title: String, content: String, date?:String } ) {
+    return (
+        <article id={`post-${params.id}`}>
+            <h1 className=".article-title">{params.title}</h1>
+            <Tagbar/>
+            <div className={styles.imagecontainer}/>
+            
+            <p className=".article-content">{params.content}</p>
+            <section className=".article-date">{params.date}</section>
+            <br/>
+        </article>
+    );
+}

src/components/news/tagbar.module.css

@@ -0,0 +1,14 @@
+.tagbar ul li{
+    color:white;
+    background-color: purple;
+    display: inline-block; 
+    zoom: 1; 
+    margin-right:6px;
+    margin-left:0px;
+    padding: 1px 5px 1px 5px;
+    border-radius: 20%;
+    *display: inline; 
+}
+.tagbar{
+    margin: 0px 0px 4px 0px;
+}

src/components/news/tagbar.tsx

@@ -0,0 +1,11 @@
+import styles from "./tagbar.module.css"
+
+const tagItems = ["tag1", "tag2", "tag3"];
+const tagList = tagItems.map(value => <li key={value} className={styles.navItem}><a>{value}</a></li>);
+
+
+export default function Tagbar() {
+    return <div className={`${styles.tagbar}`}>
+        <ul>{tagList}</ul>
+    </div>;
+}

src/components/page-container.module.css

@@ -0,0 +1,8 @@
+.pagecontainer{
+    color: #C0F0FF;
+    display:flex;
+    flex-direction: row;
+    background-color: #1E536A;
+    padding:8px;
+    flex-grow: 1;
+}

src/components/page-container.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import styles from "./styles.page-container.module.css"
+import styles from "./page-container.module.css"
 
 interface Props {
     children: ReactNode;

src/components/page-template.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react"
+import Header from "./header";
+import Navbar from "./navbar";
+import PageContainer from "./page-container";
+
+interface Props {
+    children: ReactNode;
+}
+
+
+export default function PageTemplate(props:Props){
+    return <div className={`root`}>
+        <Header/>
+        <Navbar/>
+        <PageContainer>
+            {props.children}
+        </PageContainer>
+    </div>;
+}

src/components/sidebar.module.css

@@ -0,0 +1,7 @@
+.sidebar{
+    background-color: #1E536A;
+    flex-grow: 0;
+    height:100%;
+    padding: 8px;
+    min-width: 200px;
+}

src/components/sidebar.tsx

@@ -0,0 +1,12 @@
+import styles from "./sidebar.module.css"
+import { ReactNode } from "react"
+
+interface Props{
+    children:ReactNode;
+}
+
+export default function Sidebar(props:Props) {
+    return <div className={`${styles.sidebar}`}>
+        {props.children}
+    </div>
+}

src/components/styles.page-container.module.css

@@ -1,4 +0,0 @@
-.pagecontainer{
-    background-color: yellow;
-    flex-grow: 1;
-}