Editorial Challenge -- Harvard Business Review

editorial-challenge-harvard-business-review.markdown

Editorial Challenge -- Harvard Business Review

A Pen by Dave Cross on CodePen.

License.

index.html

<!-- What are we going to do tonight, Brain? -->
<article>
  <header>
    <h1><span>Dolorem</span>Provident</h1>
    <div>Repudiandae officiis quisquam hic repellat</div>
  </header>
  <img src='https://images.unsplash.com/photo-1519823038424-f8dbabca95f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
  <section>
    <aside>
      <div>Dolor consectetur</div>
      <div>Placeat quo minus nulla voluptate ipsum.</div>
      <div>Officia, numquam velit. Suscipit, culpa ea!</div>
    </aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo dignissimos placeat maiores esse totam sed qui enim voluptas reprehenderit consequatur quis adipisci porro corporis possimus, voluptates praesentium. Rem natus alias fugit quo sequi accusamus
      iusto est ipsa veritatis voluptatem odit, laudantium molestiae tempora et officia velit, molestias magni suscipit corporis!</p>
  </section>
</article>

script.js

// Same thing we do every night, Pinky. Try to take over the world.

style.scss

*,*::before,*::after {
  box-sizing: border-box;
}

body {
  font: 1rem serif;
  padding: 2rem;
}

h1 {
  font: 700 3rem Aleo, sans-serif;
  text-align: center;
  margin: 0;
  
  border-image: 100% 0 0 linear-gradient(90deg, transparent calc(50% - 4.35em), currentColor 0, currentColor calc(50% + 4.35em), transparent 0);
  border-top: 10px solid transparent;
  box-shadow: inset 0 1px 0;
}
h1 span {
  color: skyblue;
}
h1 + div {
  font: 300 1.75rem 'Advent Pro', sans-serif;
  text-align: center;
  color: silver;
  margin-bottom: 1rem;
}

img {
  width: 100%;
}

section {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: -1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #000;
}
section > * {
  align-self: end;
  margin-bottom: 0;
}
section > :first-child {
  background: white;
  padding-top: 1rem;
}

aside {
  font-family: sans-serif;
}
aside :first-child {
  color: skyblue;
  text-transform: uppercase;
  margin-bottom: 0.2em;
}

aside :nth-child(2) {
  font-size: 2rem;
}

aside :last-child {
  color: silver;
  font-size: 1.75rem;
}

p {
  border-left: 1px solid #000;
  padding-left: 1rem;
  margin-left: -1rem;
}

p:first-of-type::first-line {
  // text-transform is buggy on :first-line
  // text-transform: uppercase;
  font-variant: all-small-caps;
  font-size: 1.25rem;
}