Fix some minor details on author detail block.

hlxsites · Jan 18, 2024 · b012917 · b012917
1 parent 32ba073
commit b012917
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 111 deletions.
diff --git a/cigaradvisor/blocks/author-detail/author-detail.css b/cigaradvisor/blocks/author-detail/author-detail.css
@@ -1,124 +1,137 @@
+
 .author-detail.block {
-    display: flex;
-    flex-direction: column;
-    margin: 40px auto;
-    margin-bottom: 40px;
-    border: 2px solid var(--tan);
-    min-height: 350px;
-    padding: 20px 0;
+  background: url("https://main--famous-smoke-cigaradvisor--hlxsites.hlx.page/cigaradvisor/images/backgrounds/author.jpg") top no-repeat;
+  background-size: auto 300px;
+}
+
+.author-detail.block .author-detail-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2px solid var(--tan);
+  min-height: 350px;
+  padding: 20px 0;
 }
 
 .author-detail.block .author-image {
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
+  max-width: 245px;
+  width: 100%;
+}
+
+.author-detail.block .author-image picture {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .author-detail.block .author-image img {
-    max-height: 245px;
-    max-width: 245px;
-    margin: 0 auto;
-    padding: 0;
-    border: 1px solid var(--tan);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-position: center center;
+  object-fit: contain;
+  border: 1px solid var(--tan);
 }
 
 .author-detail.block .author-info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: none;
-    padding: 20px;
-    margin-left: 0;
-    margin-top: 20px;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 20px;
+  margin-top: 20px;
+  text-align: center;
 }
 
 .author-detail.block .author-info .author-name {
-    font-size: 20px;
-    text-align: center;
-    font-family: montserrat, sans-serif;
-    font-weight: 900;
-    color: var(--clr-dark-gray);
+  font-size: var(--heading-font-size-xxs);
+  font-weight: var(--font-weight-heavy);
+  line-height: var(--line-height-m);
+  text-align: center;
+  font-family: montserrat, sans-serif;
+  color: var(--clr-dark-gray);
 }
 
 .author-detail.block .author-info .author-title {
-    font-style: italic;
-    font-size: 18px;
-    margin: 0 15px;
-    font-weight: 400;
-    position: relative;
-    bottom: 2px;
+  font-style: italic;
+  font-size: var(--body-font-size-l);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-m);
+  margin: 0 15px;
 }
 
 .author-detail.block .author-intro {
-    margin: 12px 0;
+  margin: 12px 0;
 }
 
 .author-detail.block .author-intro p {
-    line-height: 24px;
-    font-weight: 700;
-    margin: 0;
+  line-height: var(--line-height-xl);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
 }
 
 .author-detail.block .social-links ul {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  gap: 25px;
 }
 
-.author-detail.block .social-links ul>li {
-    margin-right: 25px;
-}
 
 /* media queries */
 @media screen and (min-width: 900px) {
-    .author-detail.block{
-        flex-direction: row;
-        align-items: stretch;
-        max-width: 1080px;
-    }
-
-    .author-detail.block .author-image {
-        width: 25%;
-        float: left;
-    }
-
-    .author-detail.block .author-info {
-        width: 75%;
-        padding: 50px;
-        margin-top: 0;
-        text-align: left;
-        float: left;
-        align-items: flex-start;
-    }
-
-    .author-detail.block .author-heading-wrapper {
-        display: flex;
-        align-items: center;
-    }
-
-    .author-detail.block .author-info .author-name {
-        font-size: 24px;
-    }
-
-    .author-detail.block .author-info .author-title {
-        font-size: 24px;
-    }
-
-    .author-detail.block .social-links ul {
-        justify-content: flex-start;
-        padding-left: 0;
-    }
+  .author-detail.block {
+    padding-top: 200px;
+    background-size: cover;
+  }
+
+  .author-detail.block .author-detail-content {
+    padding: 0 20px;
+    max-width: 1076px;
+    margin: 0 auto;
+    flex-direction: row;
+    align-items: center;
+    border: 2px solid var(--tan);
+    background-color: var(--clr-white);
+  }
+
+  .author-detail.block .author-info {
+    align-items: flex-start;
+    text-align: left;
+    margin-top: 0;
+    padding: 50px;
+  }
 
+  .author-detail.block .author-heading-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .author-detail.block .author-info .author-name {
+    font-size: var(--heading-font-size-s);
+  }
+
+  .author-detail.block .author-info .author-title {
+    font-size: var(--body-font-size-xxl);
+  }
+
+  .author-detail.block .social-links ul {
+    justify-content: flex-start;
+  }
 }
 
 @media screen and (min-width: 1200px) {
-    .author-detail.block .author-image {
-        transform: translate(-20%,-20%);
-        margin-right: 0;
-    }
-}
+  .author-detail.block .author-image {
+    transform: translate(-22%, -32%);
+  }
+
+  .author-detail.block .author-info .author-intro p {
+    font-size: var(--body-font-size-s);
+    line-height: var(--line-height-l);
+  }
+}
diff --git a/cigaradvisor/blocks/author-detail/author-detail.js b/cigaradvisor/blocks/author-detail/author-detail.js
@@ -4,6 +4,10 @@ export default async function decorate(block) {
   const config = readBlockConfig(block);
   const social = block.querySelector('ul');
   const picture = block.querySelector('picture');
+  const img = picture.querySelector('img');
+  const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+  picture.style.paddingBottom = `${ratio}%`;
+
   if (social) {
     const links = social.querySelectorAll('a');
     links.forEach((link) => {
@@ -40,20 +44,23 @@ export default async function decorate(block) {
   }
   decorateIcons(social);
   block.innerHTML = `
-    <div class="author-image">
-      ${picture.outerHTML}
-    </div>
-    <div class="author-info">
-    <div class="author-heading-wrapper">
-      <h2 class="author-name">${config.name}</h2>
-      <p class="author-title">${config.title || ''}</p>
+    <div class="author-detail-content">
+      <div class="author-image">
+        ${picture.outerHTML}
       </div>
-      <div class="author-intro">
-        <p>${config.intro}</p>
-      </div>
-      <div class="social-links">
-        ${social.outerHTML}
+      <div class="author-info">
+      <div class="author-heading-wrapper">
+        <h2 class="author-name">${config.name}</h2>
+        <p class="author-title">${config.title || ''}</p>
+        </div>
+        <div class="author-intro">
+          <p>${config.intro}</p>
+        </div>
+        <div class="social-links">
+          ${social.outerHTML}
+        </div>
       </div>
     </div>
   `;
+
 }
diff --git a/cigaradvisor/styles/reset.css b/cigaradvisor/styles/reset.css
@@ -0,0 +1,67 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, button, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+
+  /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+source {
+  font-size: 0;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote::before, blockquote::after,
+q::before, q::after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button {
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
+}
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+@import url('reset.css');
+
 @font-face {
   font-family: 'Open Sans Fallback';
   font-style: normal;
@@ -155,13 +157,6 @@
   --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
   --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
 
-  /* body sizes */
-  --text-size-xs: 12px;
-  --text-size-sm: 14px;
-  --text-size-md: 16px;
-  --text-size-lg: 18px;
-  --text-size-xl: 24px;
-
   /* heading sizes */
   --heading-font-size-xxs: 18px;
   --heading-font-size-xs: 20px;
@@ -171,7 +166,7 @@
   --heading-font-size-xl: 40px;
 
   /* Font Weights */
-  --font-weight-extrabold: 900;
+  --font-weight-heavy: 900;
   --font-weight-bold: 700;
   --font-weight-semibold: 600;
   --font-weight-normal: 400;
@@ -187,9 +182,16 @@
   --body-font-size-xl: 20px;
   --body-font-size-xxl: 24px;
 
+  /* Line Heights */
+  --line-height-xs: 1.15em;
+  --line-height-s: 1.25em;
+  --line-height-m: 1.5em;
+  --line-height-l: 1.75em;
+  --line-height-xl: 2em;
+
   /* misc */
   --nav-height: 100px;
-  --icon-size: var(--text-size-xl);
+  --icon-size: var(--body-font-size-xxl);
 }
 
 body {