From 4be325a9d471d82266958e64bdfbee4a16ab8de1 Mon Sep 17 00:00:00 2001
From: Kat Tannehill <katetannehill@gmail.com>
Date: Tue, 17 Sep 2024 17:51:01 -0600
Subject: [PATCH] Update deploy with style overhaul

---
 client/src/components/About.js       |   2 +-
 client/src/components/ProjectCard.js |   2 +-
 client/src/components/ProjectList.js |   4 +-
 client/src/index.css                 | 464 ---------------------------
 client/src/pages/ProjectDetail.js    |  10 +-
 client/src/style/global.css          |  35 +-
 client/src/style/header-footer.css   |   5 +-
 client/src/style/project-card.css    |  22 +-
 8 files changed, 66 insertions(+), 478 deletions(-)
 delete mode 100644 client/src/index.css

diff --git a/client/src/components/About.js b/client/src/components/About.js
index 75fe785..4dd644b 100644
--- a/client/src/components/About.js
+++ b/client/src/components/About.js
@@ -16,7 +16,7 @@ const About = () => {
             </aside>
             <main className='text-container'>
                 <h3>Hi, I'm</h3>
-                <h1 className='orange-block'>Kat Tannehill</h1>
+                <h1 className='orange-block intro-orange-block'>Kat Tannehill</h1>
                 <h3>
                     Full-stack software artist blending creative vision with React/Flask skills. Crafting intuitive web experiences through purposeful design (and puns).
                 </h3>
diff --git a/client/src/components/ProjectCard.js b/client/src/components/ProjectCard.js
index a7ad587..c09985a 100644
--- a/client/src/components/ProjectCard.js
+++ b/client/src/components/ProjectCard.js
@@ -17,7 +17,7 @@ const ProjectCard = ({ proj }) => {
       
       <div className='details'>
         <h3>{title}</h3>
-        <p>{summary}</p>
+        <p className='blurb'>{summary}</p>
 
         <Link to={`/project/${id}`}>
           <button className='link-effect link-effect-green'>
diff --git a/client/src/components/ProjectList.js b/client/src/components/ProjectList.js
index d5f22e7..15d8f03 100644
--- a/client/src/components/ProjectList.js
+++ b/client/src/components/ProjectList.js
@@ -7,7 +7,9 @@ const mapped_projects = PROJECTS.reverse().map(proj => <ProjectCard key={proj.id
 const Projects = () => {
   return (
     <div id="projects" className='container'>
-        <h2 className='padded orange-block'>Projects</h2>
+      <div className='padded'>
+        <h2 className='orange-block'>Projects</h2>
+      </div>
         <div>
           {mapped_projects}
         </div>
diff --git a/client/src/index.css b/client/src/index.css
deleted file mode 100644
index 132015b..0000000
--- a/client/src/index.css
+++ /dev/null
@@ -1,464 +0,0 @@
-/* body {
-  margin: 0;
-  font-family: "Nobile", sans-serif;
-  line-height: 150%;
-  font-size: 120%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  box-sizing: border-box;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-:root {
-  --light-green-1: #E9EDC9; 
-  --light-green-2: #CCD5AE; 
-  --light-orange-1: #FAEDCD; 
-  --light-orange-2: #D4A373; 
-  --cream: #FEFAE0; 
-  --dark-green-1: #606C38; 
-  --dark-green-2: #283618; 
-  --dark-orange-1: #DDA15E; 
-  --dark-orange-2: rgb(188, 108, 37); 
-
-  background: var(--dark-green-2);
-  color: var(--cream)
-} */
-
-/*! Containers */
-
-/* #flex {
-  display: flex;
-  flex-flow: column;
-  min-height: 100vh;
-  height: 100%;
-  width: 100%;
-  background-image: url("https://images.unsplash.com/photo-1612485222394-376d81a3e829?q=80&w=2046&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-#outlet {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  flex: 1 1 auto;
-  overflow: auto;
-  background-color: rgba(40, 54, 24, 0.9);
-}
-
-.container {
-  width: 100%;
-}
-
-.dark-green-bg {
-  background-color: var(--dark-green-2);
-  margin: 3rem 0;
-}
-
-.two-thirds {
-  width: 80%;
-  margin: auto;
-}
-
-.padded {
-  padding: 3rem 0;
-} */
-
-/*! Header/ Footer */
-
-/* #header {
-  background-color: var(--dark-green-1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 3rem;
-}
-
-#header h3 {
-  position: relative;
-}
-
-#header h3::after {
-  content: "KT";
-  color: var(--dark-green-2);
-  top: 10%;
-  left: 10%;
-  bottom: 5%;
-  position: absolute;
-  z-index: -1;
-}
-
-#header ul {
-  list-style: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
-
-#header li {
-  padding: 0 1rem;
-}
-
-#footer {
-  background-color: var(--dark-green-1);
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 0 3rem;
-  font-size: 80%;
-} */
-
-/*! Main Section */
-
-/* .box {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  margin: auto;
-  justify-content: center;
-  align-items: center;
-} */
-
-/* .box div {
-  flex-grow: 1;
-}
-
-#main-img {
-  width: 100%;
-}
-
-#main-img img {
-  width: 100%;
-  height: 100%;
-  min-width: 300px;
-  max-height: 600px;
-  object-fit: cover;
-} */
-
-/* #tech-box {
-  display: flex;
-  justify-content: space-evenly;
-  font-size: 200%;
-  padding: 1rem 0;
-}
-
-#tech-box .tech {
-  transition: 0.5s;
-  position: relative;
-  display: inline-block;
-  z-index: 100;
-}
-
-#tech-box .tech:hover {
-  color: var(--dark-green-1);
-  transition: 0.5s;
-}
-
-#tech-box .tech::before {
-  content: "";
-  width: 120%;
-  height: 90%;
-  position: absolute;
-  transition: 0.5s;
-  top: 15%;
-  bottom: -5%;
-  left: 5%;
-  transform: translateY(0px);
-  z-index: -1;
-  background: var(--dark-green-2);
-}
-
-#tech-box .tech:hover::before {
-  background: var(--dark-orange-2);
-  transform: translateY(3px);
-} */
-
-/* #tech-list {
-  list-style: none;
-  display: flex;
-  flex-flow: row wrap;
-  gap: 1rem; */
-  /* grid-auto-columns: 1fr;
-  grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) ); */
-  /* padding: 0;
-}
-
-#tech-list li {
-  padding: 0 0.5rem;
-} */
-
-/*! Random Styles */
-
-/* ::selection {
-  background: var(--dark-orange-2);
-} */
-
-/* h1, h2, .orange-block {
-  transition: 0.5s;
-  position: relative;
-  display: inline-block;
-  z-index: 100;
-} */
-
-/* h1 {
-  font-size: 2rem;
-} */
-
-/* h1::before, h2::before, .orange-block::before {
-  content: "";
-  width: 120%;
-  position: absolute;
-  transition: 0.5s;
-  top: 30%;
-  bottom: 5%;
-  transform: translateX(5%);
-  z-index: -1;
-  background: var(--dark-orange-1);
-}
-
-h1:hover::before, h2:hover::before, .orange-block:hover::before {
-  top: 20%;
-  background: var(--dark-orange-2);
-} */
-
-/* .green-block {
-  transition: 0.5s;
-  position: relative;
-  display: inline-block;
-  z-index: 100;
-}
-
-.green-block::before {
-  content: "";
-  width: 120%;
-  position: absolute;
-  transition: 0.5s;
-  top: 30%;
-  bottom: 5%;
-  transform: translateX(5%);
-  z-index: -1;
-  background: var(--dark-green-2);
-}
-
-.green-block:hover::before {
-  top: 20%;
-  background: var(--dark-green-1);
-} */
-
-/* a {
-  color: var(--cream);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.link-effect {
-  color: var(--cream);
-  position: relative;
-  display: inline-block;
-  z-index: 100;
-}
-
-.link-effect::before, .link-effect::after {
-  content: "";
-  width: 48%;
-  position: absolute;
-  transition: 0.5s;
-  top: 5%;
-  bottom: 5%;
-  z-index: -1;
-}
-
-.link-effect::before {
-  background: var(--dark-orange-1);
-  left: 5%;
-  transform: translateY(3px);
-}
-
-.link-effect::after {
-  background: var(--dark-orange-2);
-  left: 48%;
-  transform: translateY(-3px);
-}
-
-.link-effect:hover::before, .link-effect:hover::after {
-  background: var(--dark-orange-2);
-  transition: 0.5s;
-}
-
-.link-effect:hover::before {
-  background: var(--dark-orange-2);
-  transform: translateY(0px);
-}
-
-.link-effect:hover::after {
-  background: var(--dark-orange-2);
-  transform: translateY(0px);
-}
-
-.orange-accent {
-  color: var(--dark-orange-1)
-} */
-
-/*! Projects */
-
-/* .card {
-  height: 450px;
-  min-width: 350px;
-  background-color: var(--dark-green-2);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  transition: 0.5s;
-  margin-top: 3rem;
-}
-
-.card img, .card picture {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  /* opacity: 0.7; *
-}
-
-.card-view img, .card picture {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.details {
-  opacity: 0;
-  background-color: rgba(188, 108, 37, 0.9);
-  transition: 0.5s;
-  position: absolute;
-  z-index: 100;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 3rem;
-}
-
-.card:hover .details {
-  opacity: 100;
-  transition: 0.5s;
-}
-
-.card:hover {
-  transition: 0.5s;
-  transform: scale(0.95, 0.95);
-  box-shadow: 2px 2px 10px var(--dark-green-2);
-} */
-
-/*! Contact */
-
-/* .rev-box {
-  display: flex;
-  flex-direction: row;
-  gap: 3rem;
-}
-
-.icon {
-  font-size: 120%;
-  margin: 0.5rem;
-}
-
-.contact-links {
-  margin: 0;
-  padding: 1rem 0;
-  display: flex;
-  align-items: center;
-}
-
-.contact-links:hover, .contact-links:hover a, p a {
-  color: var(--dark-orange-1);
-  cursor: pointer;
-}
-
-#form-container {
-  width: 100%;
-  max-width: 800px;
-  min-width: 200px;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-#form-container label {
-  font-size: 80%;
-  display: block;
-  color: var(--dark-orange-1);
-}
-
-#form-container label input, #form-container textarea {
-  display: block;
-  width: 90%;
-  padding: 0.5rem;
-}
-
-textarea {
-  resize: none;
-  height: 100px;
-}
-
-input:focus, textarea:focus {
-  outline: 1px solid var(--dark-orange-2);
-  box-shadow: 4px 4px 0px var(--dark-orange-2);
-  border: none;
-}
-
-button {
-  border: none;
-  font-size: 120%;
-  background-color: rgba(0, 0, 0, 0);
-  color: var(--cream);
-  text-decoration: none;
-  cursor: pointer;
-  width: fit-content;
-  margin: 1rem;
-} */
-
-/*! Media Queries */
-
-/* @media (min-width: 50rem) {
-  .box {
-    flex-direction: row;
-    gap: 3rem;
-    justify-content: center;
-    align-items: center;
-  }
-
-  #header li {
-    padding: 0 2rem;
-  }
-
-  .details {
-    padding: 0 6rem;
-  }
-
-  .rev-box {
-    flex-direction: column;
-    gap: 0;
-  }
-
-  #form-container {
-    width: 66%;
-  }
-}
-
-@media (min-width: 75rem) {
-  .box {
-    flex-direction: row;
-    gap: 3rem;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .two-thirds {
-    width: 66%;
-  }
-} */
\ No newline at end of file
diff --git a/client/src/pages/ProjectDetail.js b/client/src/pages/ProjectDetail.js
index 997d272..86f2edf 100644
--- a/client/src/pages/ProjectDetail.js
+++ b/client/src/pages/ProjectDetail.js
@@ -38,14 +38,20 @@ const ProjectDetail = () => {
     <>
 
       <div className='container'>
-        <h1 className='orange-block'>{title}</h1>
+        <div className='padded'>
+          <div className='heading-container'>
+            <div className='orange-block'>
+              <h1>{title}</h1>
+            </div>
+          </div>
+        </div>
         <aside>
           <picture className='card'>
             <source srcSet={smallImg} media='(max-width: 600px)' />
             <source srcSet={mediumImg} media='(max-width: 1200px)' />
             <img src={largeImg} alt={title} loading="lazy" />
           </picture>
-          <p><a href={link} target="_blank" rel="noopener noreferrer" className='link-effect'>
+          <p className='padded'><a href={link} target="_blank" rel="noopener noreferrer" className='link-effect'>
             GitHub
           </a></p>
         </aside>
diff --git a/client/src/style/global.css b/client/src/style/global.css
index d4a17d0..52c55d5 100644
--- a/client/src/style/global.css
+++ b/client/src/style/global.css
@@ -7,6 +7,8 @@
 body {
     margin: 0;
     font-family: "Nobile", sans-serif;
+    /* line-height: 1.25rem;
+    font-size: 1rem; */
     line-height: 150%;
     font-size: 120%;
     -webkit-font-smoothing: antialiased;
@@ -98,7 +100,6 @@ code {
 
 h1 {
     font-size: 2rem;
-    margin: 0;
 }
 
 h2 {
@@ -106,24 +107,32 @@ h2 {
     margin: 0.5rem 0;
 }
 
+.heading-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.heading-container h1 {
+    margin: 0.5rem 0 0 0;
+}
+
 .orange-block {
-    transition: 0.5s;
     position: relative;
     display: inline-block;
     z-index: 100;
-    max-width: fit-content; 
+    width: fit-content;
 }
 
 .orange-block::before {
     content: "";
-    width: calc(100% + 2rem);
     position: absolute;
-    transition: 0.5s;
+    left: 0.5rem;
     top: 30%;
     bottom: 5%;
-    transform: translateX(5%);
     z-index: -1;
     background: var(--dark-orange-1);
+    width: calc(100% + 2rem);
+    transition: 0.5s;
 }
 
 .orange-block:hover::before {
@@ -131,6 +140,10 @@ h2 {
     background: var(--dark-orange-2);
 }
 
+
+
+/* Links */
+
 a {
     color: var(--cream);
     text-decoration: none;
@@ -195,6 +208,11 @@ a {
 /*! Media Queries */
 
 @media (min-width: 600px) {
+    /* body {
+        line-height: 1.5rem;
+        font-size: 1.25rem;
+    } */
+
     #outlet {
         padding: 2rem 0;
     }
@@ -210,6 +228,11 @@ a {
     .green-100 {
         margin: 2rem 0;
     }
+
+    .orange-block::before {
+        width: calc(100% + 2rem);
+        max-width: calc(100% + 2rem);
+    }
 }
 
 @media (min-width: 800px) {
diff --git a/client/src/style/header-footer.css b/client/src/style/header-footer.css
index 5fc1ca9..d453ac3 100644
--- a/client/src/style/header-footer.css
+++ b/client/src/style/header-footer.css
@@ -5,11 +5,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1rem;
+  padding: 1rem;
 }
 
 #header .orange-block::before {
-  width: calc(100% + 1rem);
+  min-width: 100%;
+  max-width: 100%;
 }
 
 #header h3 {
diff --git a/client/src/style/project-card.css b/client/src/style/project-card.css
index 9e770ed..7fb7f11 100644
--- a/client/src/style/project-card.css
+++ b/client/src/style/project-card.css
@@ -32,7 +32,8 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 0 3rem;
+    padding: 0 1rem;
+    /* overflow: hidden; */
 }
   
 .card:hover .details {
@@ -44,4 +45,23 @@
     transition: 0.5s;
     transform: scale(0.95, 0.95);
     box-shadow: 2px 2px 10px var(--dark-green-2);
+}
+
+/* .blurb {
+    overflow: hidden;
+    text-overflow: ellipsis;
+} */
+
+.details h3, .details p {
+    margin: 0.5rem;
+}
+
+@media (min-width: 400px) {
+    .details {
+        padding: 0 3rem;
+    }
+
+    .details h3, .details p {
+        margin: 1rem;
+    }
 }
\ No newline at end of file