CSS & Image updates to clean up PR.

components/DevProjectCards.js

@@ -44,9 +44,9 @@ function Project({
             <h3 className={styles['project-title']}>{name}</h3>
           </div>
         </div>
-        <div className={styles['card-`hover-content']}>
+        <div className={styles['card-hover-content']}>
           <div>
-            <p>{description}</p>
+            <p dangerouslySetInnerHTML={{ __html: description }}/>
             <p>{prim_lang}</p>
             <a href={repo_link} target="_blank" rel="noopener noreferrer">View Repository<br></br></a>
             <a href={proj_link} target="_blank" rel="noopener noreferrer">View Project</a>
@@ -66,7 +66,7 @@ function Project({
           <h3 className={styles.name}>{name}</h3>
         </div>
         <div className={styles['card-hover-content']}>
-          <div>
+          <div className={styles['description-header']}>
             <p className={`${styles['mobile-header']}`}>&nbsp;</p>
             <span className={`${styles['dev-badge']} ${styles[prim_lang]}`}></span>
               {/* TODO: Try dev-badge lang-{prim_lang} */}
@@ -75,7 +75,7 @@ function Project({
               <a href={repo_link} target="_blank" rel="noopener noreferrer"><u>Repo</u></a>
           </div>
           <div className={styles['description-box']}>
-            <p>{description}</p>
+            <p dangerouslySetInnerHTML={{ __html: description }}/>
           </div>
         </div>
       </div>

data/dev.js

@@ -1,3 +1,4 @@
+// Note: people array is now depreciated, board members is parsed from ggl sheets using officerparser.mjs
 export const people = [
   {
     name: 'Arsh Malik',
@@ -160,16 +161,20 @@ export const projects = [
     prim_lang: 'JS',
     proj_link: 'https://opensource.uclaacm.com/',
     repo_link: 'https://github.com/uclaacm/opensource',
-    description: `Everything we build is open source! In the spirit of open-source, anyone is welcome 
-    to view and contribute to our projects on Github.`,
+    description: `Open Source highlights all open source projects managed by 
+    <a href="https://github.com/uclaacm">ACM at UCLA</a>, and an activity feed showing
+     recent contributions. Anyone is welcome to contribute - an open invitation to get 
+     involved and make an impact!`,
     img: '/images/dev-projects/opensource.png',
     alt: 'Open Source!',
   },{
     name: 'CMS Template',
     prim_lang: 'JS',
     proj_link: 'https://github.com/uclaacm/committee-website-template-cms',
     repo_link: 'https://github.com/uclaacm/committee-website-template-cms',
-    description: 'This Committee Website template enables any ACM Committee to put up their website in minutes!',
+    description: `This Committee Website template is a no-code solution that empowers any ACM 
+    committee to build and deploy their website in minutes! It's actively in use by multiple
+    committees as it saves time and ensures consistency across sites.`,
     img: '/images/dev-projects/cmsproject.png',
     alt: 'Committee Website Template!',
   },{
@@ -195,8 +200,8 @@ export const projects = [
     prim_lang: 'Any',
     proj_link: 'mailto:[email protected]',
     repo_link: 'mailto:[email protected]',
-    description: `Have an idea for a project or any questions? Feel free to contact Arsh Malik 
-    ([email protected]), our Dev Team Director.`,
+    description: `Have an idea for a project or any questions?<br><br>Feel free to contact Arsh Malik 
+    (<a href="mailto:[email protected]">Email</a>), our Dev Team Advisor.`,
     img: '/images/dev-projects/acmlogocopy.jpg',
     alt: 'ACM Logo!',
   },

pages/dev.js

@@ -2,10 +2,10 @@ import { NextSeo } from 'next-seo';
 import Link from 'next/link';
 import React from 'react';
 
-import Officers from '../components/OfficerCard';
-import Projects from '../components/DevProjectCards';
 import Banner from '../components/Banner';
+import Projects from '../components/DevProjectCards';
 import Layout from '../components/Layout';
+import Officers from '../components/OfficerCard';
 
 import {projects} from '../data/dev';
 import data from '../offoutput.json';

styles/components/DevProjCard.module.scss

@@ -39,7 +39,7 @@
   color: black;
   display: flex;
   flex-direction: column;
-  font-family: sans-serif;
+  font-family: $font-body;
   font-size: 1.2em;
   height: 100%;
   left: 0;
@@ -86,7 +86,6 @@
 }
 
 /* stylelint-disable selector-class-pattern */
-
 .JS {
   background-color: #EFDF6A;
 }
@@ -109,6 +108,26 @@
   margin: 0;
 }
 
+.description-header {
+  font-size: 0.8em;
+}
+
+.description-box {
+  margin-top: 15px;
+  width: 100%;
+}
+
+.description-box p {
+  font-size: 0.8em;
+}
+
+@media (min-width: $tablet-breakpoint) and (max-width: $navbar-breakpoint) {
+  .grid-tablet-only-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 @media (max-width: $navbar-breakpoint) {
   .card-hover-content {
     font-size: 1em; 
@@ -117,13 +136,24 @@
   .mobile-header {
     margin: 0;
   }
-}
 
+  .description-header {
+    font-size: 1.8em;
+  }
 
+  .description-box p {
+    font-size: 1.8em;
+  }
+}
 
-.description-box {
-  margin-top: 15px;
-  width: 100%;
+@media (max-width: $sidebar-breakpoint) {
+  .description-header {
+    font-size: 1em;
+  }
+
+  .description-box p {
+    font-size: 1em;
+  }
 }
 
 .project-card a {          
@@ -140,12 +170,20 @@
 }
 
 .project-image-container {
-  align-items: center;
+  align-items: flex-start;
   aspect-ratio: 1 / 1;
   display: flex;
+  height: auto;
+  justify-content: start;
   margin: 0 auto;
   max-width: 300px;
+  width: 100%;
+}
+
+.project-image-container img {
+  height: 100%;
   object-fit: cover;
+  object-position: left top;
   width: 100%;
 }