From 16e9f31e5499dc23e2a6785f42c56969f17db93f Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Sat, 2 Mar 2024 11:59:24 +0000
Subject: [PATCH] added styling to header and footer

---
 src/App.css                | 22 +++++++++++++++++-----
 src/components/Content.jsx |  1 +
 src/components/Footer.jsx  |  6 +++---
 src/components/Header.jsx  |  6 +++---
 src/styles/content.css     |  5 +++++
 src/styles/footer.css      | 16 ++++++++++++++++
 src/styles/header.css      | 36 ++++++++++++++++++++++++++++++++++++
 7 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 src/styles/content.css
 create mode 100644 src/styles/footer.css
 create mode 100644 src/styles/header.css

diff --git a/src/App.css b/src/App.css
index 902778b..19d450e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,18 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+* {
+  margin: 0;
+  box-sizing: border-box;
+  font-family: monospace;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  height: 100vh;
+}
+
+#root {
+  color: green;
+  height: 100%;
 }
diff --git a/src/components/Content.jsx b/src/components/Content.jsx
index dc0a52c..718aa00 100644
--- a/src/components/Content.jsx
+++ b/src/components/Content.jsx
@@ -1,6 +1,7 @@
 /* ----- Project Imports ----- */
 import Details from "@/components/Details.jsx";
 import Projects from "@/components/Projects.jsx"
+import "@/styles/content.css";
 
 function Content() {
   return (
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 3443d77..b69c0b0 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,11 +1,11 @@
 /* ----- Project Imports ----- */
-
+import "@/styles/footer.css"
 
 
 function Footer() {
   return (
-    <footer>
-    <p>footer stuff rn </p>
+    <footer className="project-footer">
+    <p className="footer-text">© paul hughes</p>
     </footer>
   );
 };
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 5c1b09c..a752fe2 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,11 +1,11 @@
 /* ----- Project Imports ----- */
-
+import "@/styles/header.css";
 
 
 function Header() {
   return (
-    <header>
-    <p>This is some header stuff rn </p>
+    <header className="project-header">
+    <h1><a href="https://paulus.casa">paulus.casa</a></h1>
     </header>
   );
 };
diff --git a/src/styles/content.css b/src/styles/content.css
new file mode 100644
index 0000000..7576729
--- /dev/null
+++ b/src/styles/content.css
@@ -0,0 +1,5 @@
+.contentContainer {
+  display: flex;
+  background: linear-gradient(109.6deg, rgb(0, 0, 0) 11.2%, rgb(11, 132, 145) 91.1%);
+  min-height: 100%;
+}
diff --git a/src/styles/footer.css b/src/styles/footer.css
new file mode 100644
index 0000000..ac01fa4
--- /dev/null
+++ b/src/styles/footer.css
@@ -0,0 +1,16 @@
+.project-footer {
+  display: block;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  background: linear-gradient(to right, #434343 0%, black 100%);
+  height: 3rem;
+  width: 100%;
+}
+
+.footer-text {
+  color: white;
+  font-size: 1rem;
+  padding: 1rem 0.5rem;
+  text-transform: capitalize;
+}
diff --git a/src/styles/header.css b/src/styles/header.css
new file mode 100644
index 0000000..3c4fd5a
--- /dev/null
+++ b/src/styles/header.css
@@ -0,0 +1,36 @@
+.project-header {
+  all: initial;
+}
+
+.project-header * {
+  all: unset;
+}
+
+h1 {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+.project-header {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, #434343 0%, black 100%);
+  height: 3rem;
+  width: 100%;
+}
+
+.project-header h1 {
+  padding: 0.5rem;
+  font-size: 2rem;
+  text-align: left;
+}
+
+.project-header a, a:hover, a:visited, a:active {
+  color: white;
+  text-decoration: none;
+}
+