From b012917ab68fc1a53a729ea8ac08807c23093b0d Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Thu, 18 Jan 2024 15:40:49 -0600 Subject: [PATCH] Fix some minor details on author detail block. --- .../blocks/author-detail/author-detail.css | 193 ++++++++++-------- .../blocks/author-detail/author-detail.js | 31 +-- cigaradvisor/styles/reset.css | 67 ++++++ cigaradvisor/styles/styles.css | 20 +- 4 files changed, 200 insertions(+), 111 deletions(-) create mode 100644 cigaradvisor/styles/reset.css diff --git a/cigaradvisor/blocks/author-detail/author-detail.css b/cigaradvisor/blocks/author-detail/author-detail.css index 2e4d5d5c..fc5140aa 100644 --- 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; - } -} \ No newline at end of file + .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 index 5a3406fa..f9f99824 100644 --- 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 = ` -
- ${picture.outerHTML} -
-
-
-

${config.name}

-

${config.title || ''}

+
+
+ ${picture.outerHTML}
-
-

${config.intro}

-
- `; + } diff --git a/cigaradvisor/styles/reset.css b/cigaradvisor/styles/reset.css new file mode 100644 index 00000000..adb2bf91 --- /dev/null +++ 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 index d9695a24..89b288b1 100644 --- 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 {