92 adjusted the company logo sizing (#99)

adriandelisle · web-flow · commit b5a67226ca60 · 2021-02-20T11:16:59.000-08:00
diff --git a/components/company-logo/index.js b/components/company-logo/index.js
@@ -10,33 +10,21 @@ const SIZE = Object.freeze({
   large: 'large',
 })
 
-const getSize = (variant) => {
-  switch (variant) {
-    case SIZE.large:
-      return '256px'
-    case SIZE.small:
-      return '220px'
-    default:
-      return '256px'
-  }
-}
+const SIZE_PERCENT = Object.freeze({
+  small: 25,
+  large: 33,
+})
+
+const getSize = (variant) => SIZE_PERCENT[variant] ?? SIZE_PERCENT.large
 
 const Anchor = styled.a`
   display: flex;
   justify-content: center;
   align-items: center;
-`
-
-const StyledImg = styled.img`
-  padding: 24px;
+  flex-grow: ${(props) => getSize(props.size) / 100};
+  max-width: ${(props) => getSize(props.size)}%;
   min-width: 180px;
-  width: 30%;
-  max-width: ${(props) => getSize(props.size)};
-  margin: 24px 0px;
-  opacity: 0.5;
-  :hover {
-    opacity: 0.75;
-  }
+  padding: 36px;
 
   @media only screen and (max-width: ${DESKTOP_SIZE}) {
     margin: 0;
@@ -54,9 +42,17 @@ const StyledImg = styled.img`
   }
 `
 
+const StyledImg = styled.img`
+  max-width: 100%;
+  opacity: 0.5;
+  :hover {
+    opacity: 0.75;
+  }
+`
+
 const CompanyLogo = ({ url, logoSrc, alt, size }) => (
-  <Anchor href={url} rel="noopener noreferrer">
-    <StyledImg alt={alt} src={logoSrc} size={size} />
+  <Anchor href={url} rel="noopener noreferrer" size={size}>
+    <StyledImg alt={alt} src={logoSrc} />
   </Anchor>
 )
 
diff --git a/pages/about.js b/pages/about.js
@@ -1,10 +1,4 @@
-import {
-  CompanyLogo,
-  Heading,
-  Text,
-  Footer,
-  SiteHeader,
-} from 'components'
+import { CompanyLogo, Heading, Text, Footer, SiteHeader } from 'components'
 import { ExecutiveTeamSection, LogoSection } from 'sections'
 import styles from 'styles/about.module.css'
 
diff --git a/styles/constants.js b/styles/constants.js
@@ -1,4 +1,4 @@
 export const DESKTOP_SIZE = '1023px'
 export const TABLET_SIZE = '767px'
-export const COMPACT_SIZE = '575px'
 export const MOBILE_SIZE = '413px'
+export const COMPACT_SIZE = '575px'
