Apply style to ProjectDetail page

ktannehill · Sep 17, 2024 · e8efd09 · e8efd09
1 parent 7085f81
commit e8efd09
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 19 deletions.
diff --git a/client/src/index.css b/client/src/index.css
@@ -177,19 +177,19 @@ code {
   transform: translateY(3px);
 } */
 
-#tech-list {
+/* #tech-list {
   list-style: none;
   display: flex;
   flex-flow: row wrap;
-  gap: 1rem;
+  gap: 1rem; */
   /* grid-auto-columns: 1fr;
   grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) ); */
-  padding: 0;
+  /* padding: 0;
 }
 
 #tech-list li {
   padding: 0 0.5rem;
-}
+} */
 
 /*! Random Styles */
 
@@ -225,7 +225,7 @@ h1:hover::before, h2:hover::before, .orange-block:hover::before {
   background: var(--dark-orange-2);
 } */
 
-.green-block {
+/* .green-block {
   transition: 0.5s;
   position: relative;
   display: inline-block;
@@ -247,7 +247,7 @@ h1:hover::before, h2:hover::before, .orange-block:hover::before {
 .green-block:hover::before {
   top: 20%;
   background: var(--dark-green-1);
-}
+} */
 
 /* a {
   color: var(--cream);
@@ -424,7 +424,7 @@ button {
 
 /*! Media Queries */
 
-@media (min-width: 50rem) {
+/* @media (min-width: 50rem) {
   .box {
     flex-direction: row;
     gap: 3rem;
@@ -461,4 +461,4 @@ button {
   .two-thirds {
     width: 66%;
   }
-}
+} */
diff --git a/client/src/pages/ProjectDetail.js b/client/src/pages/ProjectDetail.js
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import PROJECTS from "../assets/data/data"
+import '../style/global.css'
+import '../style/project-detail.css'
 
 const ProjectDetail = () => {
   const { id } = useParams()
@@ -33,12 +35,12 @@ const ProjectDetail = () => {
   const mapped_desc = description?.map(para => <p key={para}>{para}</p>)
 
   return (
-    <section className='container padded'>
+    <>
 
-      <div className='two-thirds'>
-        <h1>{title}</h1>
-        <aside className='card-view padded'>
-          <picture>
+      <div className='container'>
+        <h1 className='orange-block'>{title}</h1>
+        <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" />
@@ -49,25 +51,27 @@ const ProjectDetail = () => {
         </aside>
       </div>
 
-        <main className='dark-green-bg padded'>
-          <div className='two-thirds'>
+      <main className='green-100'>
+        <div className='container'>
+          <div className='padded'>
             <ul id="tech-list" className='orange-accent'>
               {mapped_tech}
             </ul>
 
             <div className='padded'>
-              <h2>Highlights</h2>
+              <h2 className='orange-block'>Highlights</h2>
               <ul>
                 {mapped_HL}
               </ul>
             </div>
 
-            <h2>The Making Of</h2>
+            <h2 className='orange-block'>The Making Of</h2>
             {mapped_desc}
           </div>
-        </main>
+        </div>
+      </main>
 
-    </section>
+    </>
   )
 }
 

diff --git a/client/src/style/global.css b/client/src/style/global.css
@@ -141,6 +141,7 @@ a {
     position: relative;
     display: inline-block;
     z-index: 100;
+    color: var(--cream);
 }
 
 .link-effect::before, .link-effect::after {

diff --git a/client/src/style/project-detail.css b/client/src/style/project-detail.css
@@ -0,0 +1,14 @@
+#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;
+    margin-bottom: 3rem;
+}
+
+#tech-list li {
+    padding: 0 0.5rem;
+}