Merge pull request #1145 from isaacphysics/hotfix/about-us-horizontal

Fix About Us alignment and similar issues

Author: sjd210

src/app/components/content/IsaacFeaturedProfile.tsx

@@ -3,6 +3,7 @@ import {IsaacFeaturedProfileDTO} from "../../../IsaacApiTypes";
 import {apiHelper, isDefined} from "../../services";
 import {IsaacContent} from "./IsaacContent";
 import {Col, Row} from "reactstrap";
+import { Spacer } from "../elements/Spacer";
 
 interface IsaacFeaturedProfileProps {
     doc: IsaacFeaturedProfileDTO;
@@ -13,7 +14,7 @@ export const IsaacFeaturedProfile = ({doc, contentIndex}: IsaacFeaturedProfilePr
     const path = doc.image && doc.image.src && apiHelper.determineImageUrl(doc.image.src);
     const summary = doc.children && doc.children[0];
 
-    return <div className={`text-center featured-profile ${contentIndex && contentIndex % 3 === 0 ? "featured-profile-new-row" : ""}`}>
+    return <div className={`text-center featured-profile d-flex flex-column ${contentIndex && contentIndex % 3 === 0 ? "featured-profile-new-row" : ""}`}>
         <div>
             <img className="profile-image" src={path} alt=""/>
         </div>
@@ -33,6 +34,7 @@ export const IsaacFeaturedProfile = ({doc, contentIndex}: IsaacFeaturedProfilePr
         <div className="profile-description">
             {isDefined(summary) && <IsaacContent doc={summary} />}
         </div>
+        <Spacer/>
         {doc.emailAddress && <a href={"mailto:" + doc.emailAddress} className="mb-4">
             <img src='/assets/phy/icons/icon-mailto.png' alt=""/>
             <span className="visually-hidden">{"Email " + doc.title}</span>

src/scss/phy/featured-profile.scss

@@ -3,3 +3,59 @@
 .profile-description {
   padding: 0.5rem 1.5rem 0 1.5rem;
 }
+
+// Detecting a div with any number of featured-profile children
+div:has(> .featured-profile) {
+  @extend .flex-row;
+  @extend .card-deck;
+  @extend .row-cols-1;
+  @extend .row-cols-sm-2;
+  @extend .row-cols-md-3;
+
+  .featured-profile {
+    margin-bottom: 1rem;
+  }
+}
+
+// Detecting a div with exactly two featured-profile children (co-founders)
+div:has(> .featured-profile:first-child:nth-last-child(2)) {
+  @extend .flex-row;
+  @extend .row-cols-1;
+  @extend .row-cols-sm-2;
+
+  .featured-profile {
+    @extend .isaac-tab;
+
+    width: 47.5%;
+    @include media-breakpoint-down(sm) {
+      width: 100%;
+    }
+
+    margin-top: 0%;
+    margin-right: 0%;
+    padding: 2.5%;
+    overflow-x: hidden;
+
+    .profile-description {
+      padding: 1rem 0;
+      font-size: initial;
+      color: black;
+    }
+
+    .profile-image {
+      padding-bottom: 1rem;
+      width: 95%;
+    }
+  }
+
+  .featured-profile:first-child {
+    margin-right: 5%;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  div.pad:has(> div > .featured-profile:first-child:nth-last-child(2)) {
+    padding-left: 0;
+  }
+}
+