Magazine Feature

HTML

              
                <!-- https://www.mtu.edu/magazine/research/2018/stories/exercise/ 
-->
<nav class="nav">
  <div class="nav-1"></div>
  <div class="nav-2"></div>
</nav>
<div class="hide">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="facebook" viewBox="-200 -200 2200 2200">
      <path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z"></path>
    </symbol>
    <symbol id="linkedin" viewBox="-80 -50 575 575">
      <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>
    </symbol>
    <symbol id="google-plus" viewBox="-240 -240 2300 2300">
      <path d="M1181 913q0 208-87 370.5t-248 254-369 91.5q-149 0-285-58t-234-156-156-234-58-285 58-285 156-234 234-156 285-58q286 0 491 192L769 546Q652 433 477 433q-123 0-227.5 62T84 663.5 23 896t61 232.5T249.5 1297t227.5 62q83 0 152.5-23t114.5-57.5 78.5-78.5 49-83 21.5-74H477V791h692q12 63 12 122zm867-122v210h-209v209h-210v-209h-209V791h209V582h210v209h209z"></path>
    </symbol>
    <symbol id="instagram" viewBox="-200 -200 2200 2200">
      <path d="M1490 1426V778h-135q20 63 20 131 0 126-64 232.5T1137 1310t-240 62q-197 0-337-135.5T420 909q0-68 20-131H299v648q0 26 17.5 43.5T360 1487h1069q25 0 43-17.5t18-43.5zm-284-533q0-124-90.5-211.5T897 594q-127 0-217.5 87.5T589 893t90.5 211.5T897 1192q128 0 218.5-87.5T1206 893zm284-360V368q0-28-20-48.5t-49-20.5h-174q-29 0-49 20.5t-20 48.5v165q0 29 20 49t49 20h174q29 0 49-20t20-49zm174-208v1142q0 81-58 139t-139 58H325q-81 0-139-58t-58-139V325q0-81 58-139t139-58h1142q81 0 139 58t58 139z"></path>
    </symbol>
    <symbol id="tripadvisor" viewBox="-200 -200 2200 2200">
      <path d="M395 997q0 39-27.5 66.5T302 1091q-39 0-66.5-27.5T208 997q0-38 27.5-65.5T302 904q38 0 65.5 27.5T395 997zm1154-1q0 39-27.5 66.5T1455 1090t-66.5-27.5T1361 996t27.5-66 66.5-27 66.5 27 27.5 66zm-1040 1q0-79-56.5-136T316 804t-136.5 56.5T123 997t56.5 136.5T316 1190t136.5-56.5T509 997zm1153-1q0-80-56.5-136.5T1469 803q-79 0-136 56.5T1276 996t56.5 136.5T1469 1189t136.5-56.5T1662 996zm-1068 1q0 116-81.5 197.5T316 1276q-116 0-197.5-82T37 997t82-196.5T316 719t196.5 81.5T594 997zm1154-1q0 115-81.5 196.5T1469 1274q-115 0-196.5-81.5T1191 996t81.5-196.5T1469 718q116 0 197.5 81.5T1748 996zm-964 3q0-191-135.5-326.5T322 537q-125 0-231 62T-77 767.5-139 999t62 231.5T91 1399t231 62q191 0 326.5-135.5T784 999zm668-573q-254-111-556-111-319 0-573 110 117 0 223 45.5T728.5 593t122 183T896 999q0-115 43.5-219.5t118-180.5T1235 476t217-50zm479 573q0-191-135-326.5T1470 537t-326.5 135.5T1008 999t135.5 326.5T1470 1461t326-135.5T1931 999zm-266-566h383q-44 51-75 114.5T1933 662q110 151 110 337 0 156-77 288t-209 208.5-287 76.5q-133 0-249-56t-196-155q-47 56-129 179-11-22-53.5-82.5T768 1360q-80 99-196.5 155.5T322 1572q-155 0-287-76.5T-174 1287t-77-288q0-186 110-337-9-51-40-114.5T-256 433h365q149-100 355-156.5T896 220q224 0 421 56t348 157z"></path>
    </symbol>
    <symbol id="twitter" viewBox="-200 -200 2200 2200">
      <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path>
    </symbol>
    <symbol id="envelope" viewBox="0 -50 512 600">
      <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
    </symbol>
    <symbol id="print" viewBox="-50 0 600 512">
      <title id="print-title">print</title>
      <path d="M464 192h-16V81.941a24 24 0 0 0-7.029-16.97L383.029 7.029A24 24 0 0 0 366.059 0H88C74.745 0 64 10.745 64 24v168H48c-26.51 0-48 21.49-48 48v132c0 6.627 5.373 12 12 12h52v104c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V384h52c6.627 0 12-5.373 12-12V240c0-26.51-21.49-48-48-48zm-80 256H128v-96h256v96zM128 224V64h192v40c0 13.2 10.8 24 24 24h40v96H128zm304 72c-13.254 0-24-10.746-24-24s10.746-24 24-24 24 10.746 24 24-10.746 24-24 24z"></path>
    </symbol>
  </svg>
</div>
<div class="header-wrapper" style="background-image: url('https://www.mtu.edu/magazine/research/2018/stories/exercise/images/exercise-every-body-1600feature.jpg')">
  <div class="header">
    <h1 class="h1">Exercise for Every Body</h1>
    <button aria-expanded="false" class="js-info-trigger info-icon"></button>
    <div class="stamp">
      <div class="author">By: <a href="https://www.mtu.edu/news/writers/sidortsova/index.html" class="gold">Stefanie Sidortsova</a> Published: <span class="gold">10:58 AM, May 14, 2018
        </span>
      </div>
      <div class="tags">
        Category:
        <a href="https://www.mtu.edu/news/stories/?category=Research">Research</a>
      </div>
      <div class="share">
        <!--- SVG ICONS --->
        Share this story:
        <ul class="menu-list social-list">
          <li class="facebook">
            <svg class="icon facebook">
              <use xlink:href="#facebook"></use>
            </svg>
          </li>
          <li class="twitter">
            <svg class="icon twitter">
              <use xlink:href="#twitter"></use>
            </svg>
          </li>
          <li class="linkedin">
            <svg class="icon linkedin">
              <use xlink:href="#linkedin"></use>
            </svg>
          </li>
          <li class="envelope">
            <svg class="icon envelope">
              <use xlink:href="#envelope"></use>
            </svg>
          </li>
          <li class="print">
            <svg class="icon print">
              <use xlink:href="#print"></use>
            </svg>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="info-wrapper">
    <div id="js-info-content" class="info-content">
      <div class="info">In Elmer’s exercise physiology laboratory, researchers study and seek to <a href="#" style="color:#fc0">understand how</a> muscles in the legs and arms work. This is important for restoring function after injury, maintaining health, and improving performance.
        <button class="js-info-trigger chevron" title="Close Caption" tabindex="0">&times;</button>
      </div>
    </div>
  </div>
</div>
<div class="researcher">
  <ul>
    <li>
      <div class="researcher-avatar">
        <a href="https://www.mtu.edu/kip/people-groups/faculty/elmer/index.html" class="gold"> <img src="https://www.mtu.edu/kip/people-groups/faculty/elmer/images/elmer-personnel.jpg"></a>
      </div>
      <div class="detail">
        <a href="https://www.mtu.edu/kip/people-groups/faculty/elmer/index.html" class="gold">Steven Elmer</a><br>Assistant Professor,<br>Kinesiology and Integrative Physiology
      </div>
    </li>
  </ul>
</div>

<article class="content-wrapper">
  <div class="magazine-layout-wrapper">
    <section class="magazine-layout three-col-text">
      <p class="preview">In <a href="https://www.mtu.edu/kip/people-groups/faculty/elmer/index.html">Steve Elmer's</a> lab, researchers explore the limits of the human body in a quest to make people move—and
        feel—better. Elmer's team designs cutting edge equipment and training regimes to help
        every body reach its highest potential, regardless of age, profession, or ability.
      </p>
      <p>The benefits of strength training are many and well known: Strength training helps
        you maintain a healthy weight. It protects your bones and preserves your muscle mass.
        It helps develop better body mechanics, boosts your energy, and improves your mood.
        It even plays a role in disease prevention and pain management.
      </p>

      <p>In fact, strength training is so beneficial that the American College of Sports Medicine
        (ACSM) recommends adults engage in a strength-training program a minimum of two non-consecutive
        days each week. And their recommendations don't stop there—ACSM outlines specific
        types of strength-building exercises and target numbers for repetition.
      </p>

      <p>So everyone should be strength training, right?</p>

      <p>While it's easy to say everyone should, not everyone can, at least not in a "traditional"
        manner.
      </p>

      <p>Take, for instance, someone who uses a wheelchair or someone who has recently undergone
        knee surgery. Finding effective lower-body strength-training exercises that don't
        overtax the heart, lungs, and joints can be a challenge. And many with old injuries
        run into the same problem.
      </p>

      <p>Michigan Tech researchers have found a solution. Steve Elmer is an assistant professor
        of <a href="/kip/index.html">kinesiology and integrative physiology</a>, an affiliated assistant professor of <a href="/biological/index.html">biological sciences</a>, and an affiliated assistant professor of <a href="/mechanical/index.html">mechanical engineering</a>. His lab is interdisciplinary, where students, participants, and researchers explore
        the edges of physiology.
      </p>
    </section>
  </div>
  <div class="magazine-layout-wrapper">
    <section class="magazine-layout two-col-text">
      <h2>Restriction Training</h2>


      <figure class="caption float-left" style="max-width:320px;"><img src="https://www.mtu.edu/magazine/research/2018/stories/exercise/images/leg-band-350sidebar.jpg" alt="Person's leg pulling an exercise band that is attached to the seat." data-caption="Using a blood pressure cuff, Michigan Tech researchers study the impact of restricted blood flow on muscle strength and size." />
        <figcaption>
          <td>Using a blood pressure cuff, Michigan Tech researchers study the impact of restricted
            blood flow on muscle strength and size.
          </td>
        </figcaption>
      </figure>



      <p>PhD student Matt Kilgas studies the impact of restricted blood flow on muscle strength
        and size. Study participants lift light weights with a blood pressure cuff around
        the working muscle; the cuff is tightened just so, making sure enough blood is coming
        in, but not all is going back out.
      </p>

      <p>Preliminary data shows that restricting the blood flow this way increases the size
        and strength of the muscle—helping to restore balance between limbs—even though the
        exerciser is only lifting light weights.
      </p>

      <p>"This research has excellent applications," Elmer says. "Not only can it be used for
        rehabilitation, it can also be used by older adults, athletes, anyone who wants to
        get stronger."
      </p>
      <p>Kilgas' research is also unique in that it can be done at home with a rubber exercise
        band: "If you lift 40 pounds with equipment at the gym," Elmer explains, "you can
        lift five or 10 pounds at home while using the rubber band, and it feels like 40 pounds.
        It has the same impact as 40."
      </p>

      <p>Kilgas' research was partially funded by the Blue Cross Blue Shield Foundation, which
        provides PhD candidates with up to $3,000 for research aimed at improving the health
        of Michigan residents. Kilgas also received a student grant from the Michigan Space
        Grant Consortium—his research may have important implications for astronauts, whose
        muscles atrophy quickly in space and have to exercise many hours a day to prevent
        muscle loss.
      </p>

    </section>
  </div>

  <section class="single-layout">
    <h2>Accessible and Adjustable</h2>

    <p>Regular exercise is important for maintaining health, especially for wheelchair users.
      However, wheelchair-friendly exercise equipment is not always readily accessible,
      adjustable, or effective.
    </p>
    <blockquote>Elmer's research equipment and graduate students were funded in part through the Portage
      Health Foundation. The infrastructure grant helps improve research facilities and
      the assistantships recognize outstanding doctoral students promoting the wellness
      of Houghton, Keweenaw, Baraga, and Ontonagon communities.
    </blockquote>
    <p>For the past two years, Elmer has led a team of mechanical engineering, kinesiology,
      and physical therapy students who collaborated to develop new exercise equipment for
      wheelchair users—bridging the gap between engineering and rehabilitation.
    </p>
    <p>With funding from the ACSM, Elmer's team brought 10 wheelchair users to campus to
      use the specially designed exercise equipment and measure how it impacts upper body
      muscles. The equipment uses a specialized motor-driven arm cycle to provide a high-intensity
      workout for upper body muscles, without overtaxing the heart and lungs.
    </p>

    <p>Wheelchair users can do this type of exercise regardless of their fitness level to
      help strengthen their upper body muscles. Having increased strength and fitness can
      help individuals be more independent and ultimately have better quality of life. With
      additional funding from the National Science Foundation, Elmer, Kilgas, and Michael
      Morley, Michigan Tech's director of technology commercialization, teamed up to look
      at the commercial needs. The three talked to more than 100 people—including clinicians,
      wheelchair users, and equipment manufacturers—to determine what the needs are for
      wheelchair equipment and how Michigan Tech can adapt technology to fit that need.
    </p>
  </section>
  <section class="magazine-layout three-col-text">
    <h2>Marathon Minutes</h2>

    <p>Can a human run a marathon in under two hours? In May 2017, all eyes were on Milan,
      Italy, as three of the world's best marathon runners set out to answer that question.
      When runner Eliud Kipchoge crossed the finish line, we knew this much: We're not there
      yet, but we've only got 25 seconds to go.
    </p>

    <div>
      <figure class="caption float-right" style="max-width: 320px;"><img src="https://www.mtu.edu/magazine/research/2018/stories/exercise/images/blood-pressure-cuff-350sidebar.jpg" alt="Blood pressure being checked with a cuff." data-caption="Preliminary data shows that restricting blood flow with a blood pressure cuff increases a muscle's size and strength, even though the exerciser is only lifting light weights." />
        <figcaption>
          <td>

            <p>Preliminary data shows that restricting blood flow with a blood pressure cuff increases
              a muscle's size and strength, even though the exerciser is only lifting light weights.
            </p>

          </td>
        </figcaption>
      </figure>
    </div>


    <p>Kipchoge ran the marathon in 2:00:25, setting a world record and shaving two and a
      half minutes off the previous record in the process. But long before Kipchoge and
      fellow runners Lelisa Dedisa and Zersenay Tadese had laced up their Nikes (the athletic
      apparel giant sponsored the experiment, known as Breaking2), Michigan Tech students
      had been grappling with the two-hour marathon question. During the past few semesters,
      they got help from Mayo Clinic physicianresearcher Mike Joyner, a world-renowned expert
      on human performance and exercise physiology. Joyner was one of the expert consultants on Breaking2.
    </p>

    <p>Exercise physiology undergraduate and graduate students set out to build the ideal
      runner and present their ideas to Joyner. When their projects—and runners—were complete,
      the undergraduates met with him as a class via Skype. The graduate students participated
      in a small-group workshop with Joyner and received feedback from him in March 2017.
      When Kipchoge, Dedisa, and Tadese ran Nike's Breaking2 race two months later, the
      graduate students received real-world confirmation that much of what they predicted
      was true.
    </p>

    <p>Elmer, Joyner, and Jason Carter, chair of the KIP department, worked together to debrief
      how the mental exercise worked in the classroom. They have written a paper on the
      subject, published in <em>Advances in Physiology Education</em> last summer.
    </p>

    <p>"This is a great example of the problembased learning we do here in KIP," Elmer says.
      "We then build upon that research so it becomes discovery-based learning."
    </p>

  </section>

  <aside class="sidebar">
    <div>
      <div class="sidebar-title">
        <h2>Humans Like Us—Baby, We Were Born to Run</h2>
      </div>
      <div class="sidebar-content">

        <p><img src="https://www.mtu.edu/magazine/research/2018/stories/exercise/images/kids-running-350sidebar.jpg" alt="Two children running on a dirt path in the woods."></p>

        <p>Or walk. Or climb a few flights of stairs when we're short on time.</p>

        <p>More than a decade ago, scientists declared that humans are not built for sitting.
          Our physiology shows that we're made to move, and move a lot. In the not-so-distant
          past, humans ran or walked nine to 15 kilometers a day.
        </p>

        <p>Many of our modern-day health problems, Elmer says, come from lack of movement. "Compare
          humans with chimpanzees. Chimpanzees are built to be sedentary. They have short bursts
          of movement here and there, but for the most part, they're very lazy, and they can
          get away with it. Humans, on the other hand, were not made to be still."
        </p>

        <p>But this doesn't mean we have to make drastic changes. Add in movement where you can,
          Elmer recommends. "Ten minutes here, five minutes there. It all adds up. As long as
          the total is more than zero, you're going in the right direction."
        </p>

        <p>Elmer says 30 minutes of movement a day is a great goal, but if that's not possible,
          consider going up several flights of stairs once or twice a day. The movement and
          the increase in your heart rate bring great benefits.
        </p>

      </div>
    </div>
  </aside>
  <!--<div class="about-the-author clearfix">
<h2 class="heading">About the Author</h2>
<div class="author-avatar">
<img src="https://www.mtu.edu/umc/staff/images/sidortsova-personnel.jpg">
</div>
<div class="author-info">
<div class="name">Stefanie Sidortsova</div>
<div class="email"><a href="mailto:ssidorts@mtu.edu">ssidorts@mtu.edu</a></div>
<div class="phone">906-487-1777</div>
<div class="profile">Stefanie leads the University's communications strategy and serves as a special assistant for state relations endeavors. Her professional background includes experience in law, government relations, higher education administration, and creative writing.</div>
<a class="profile-link" href="https://www.mtu.edu/news/writers/sidortsova/index.html">Author Profile</a>
</div>
</div>-->
  <div class="single-layout">
    <div class="disclaimer">
      Michigan Technological University is a public research university, home to more than 7,000 students from 54 countries. Founded in 1885, the University offers more than 120 undergraduate and graduate degree programs in science and technology, engineering, forestry, business and economics, health professions, humanities, mathematics, and social sciences. Our campus in Michigan’s Upper Peninsula overlooks the Keweenaw Waterway and is just a few miles from Lake Superior.
    </div>
  </div>
</article>
</div>
<div class="after-content">
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 1</h3>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 2</h3>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 3</h3>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 4</h3>
  </div>
</div>

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700|Merriweather:400i");

/* ----------------- *\
VARIABLES
\* ----------------- */
$gold: #fc0;
$white: #fff;
$black: #000;
$light-gray: hsl(0, 0%, 95);
$medium-gray: hsl(0, 0%, 40);
$dark-gray: hsl(0,0%, 20);

/* ----------------- *\
GENERAL STYLES
\* ----------------- */
body {
  box-sizing: border-box;
}
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;
  
  *{
    box-sizing: inherit;
  }
}

*:focus,
.researcher-avatar:focus-within {
  outline: 1px dashed $gold;
}

.content-wrapper *:focus{
  outline: 1px dashed $black;
}

/* --- Fake Nav --- */
.nav{
  &-1{
    height: 105px;
    background: $black;
    @media (max-width: 800px){
      height: 45px;
    }
  }

  &-2{
    height: 0;
    background: rgba($medium-gray, 0.8);
    @media (min-width: 800px){
      height: 65px;
    }
  }
}

ul.menu-list{
  margin: 0;
  padding: 0;
  list-style-type: none;

  & > li{
    display: inline-block;
    margin: 0;
    padding: 0;
  }
}

/* ----------------- *\
HEADER CONTENT
\* ----------------- */
.header-wrapper {
  display: flex;
  flex-direction: column-reverse;
  flex-flow: reverse;
  flex-wrap: wrap;
  position: relative;
  background-color: $dark-gray;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 25rem;
  height: 70vh;
}

// Header Fade to black at bottom
.header-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.4) 95%);
}

// Header Title Backdrop
.header {
  position: relative;
  align-self: flex-start;
  justify-self: flex-start;
  flex: 0 1 auto;
  color: white;
  width: calc(100% - 2rem);
  height: auto;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

// Author Stamp Styles
.stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.85rem;

  .author,
  .tags,
  .share{
    padding: 0.25rem;
    width: 100%;
    text-align: left;
    order: 0;
  }

  .share{
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  @media (min-width:768px){
    flex-direction: row;
    align-items: flex-end;

    .author,
    .tags,
    .share{
      float: left;
      width: 33%;
      padding: 0;
    }

    .tags{
      text-align: right;
      order: 2;
    }

    .share{
      flex-direction: column;
      text-align: center;
      order: 1;
    }
  }
}

ul.social-list{
  display: inline-block;
  margin-left: 0.5rem;

  @media (min-width: 768px){
    display: block;
    margin-top: 5px;
    margin-left: 0;
  }
}
.social-list > li {
  fill: currentColor;
  border: 2px solid transparent;
  border-radius: 50%;
  width: 1.75em;
  height: 1.75em;

  .icon{
    width: 1.5em;
    height: 1.5em; 
    margin: 0;
    padding: 0.1rem;
  }

  &:hover{
    cursor: pointer;
    background: #8a8a8a;
  }

  &.facebook:hover{
    // color: #3b5998;
    // border: 2px solid #3b5998;
    background:#3b5998;
  }

  &.twitter:hover{
    // color: #00aced;
    // border: 2px solid #00aced;
    background: #00aced;
  }

  &.linkedin:hover{
    // color: #00aced;
    // border: 2px solid #00aced;
    background: #0077b5;
  }
}

.gold,
.stamp a{
  color: $gold;
  opacity: 0.9;
  font-weight: 400;
  text-decoration: none;
}

// Header Title
.header .h1 {
  margin-top: 1rem;
  text-shadow: 2px 2px 2px black;
  font-size: calc(2rem + 3vw);
  font-weight: 400;

  @media (max-width:450px){
    font-size: 2rem;
  }
}

/* ----------------- *\
INFO BUTTON AND CONTENT
\* ----------------- */
.info-wrapper{
  position: absolute;
  height: 100%;
  width: 100%;
  flex: 1 0 auto;
  align-self: stretch;
  color: white;
  overflow:hidden;

  @media (min-width: 458px){
    position: relative;
    height: auto;
    flex: 1 1 auto;
  }
}

.info-icon{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  background: $white;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
  color: $black;

  &:hover{
    background: #e6e6e6;
  }

  &:focus{
    border: 2px dashed $black;
    box-shadow: 0 0 0 2px $gold;
    outline: 0;
  }

  &::before{
    display:block;
    transition: all 0.4s ease;
  }

  &[aria-expanded="false"]::before{
    content: 'i';
    transform: rotate(0deg);
  }

  &[aria-expanded="true"]::before{
    content: 'x';
    transform: rotate(360deg);
  }
}

.info-content{
  position: absolute;
  display: flex;
  align-content: center;
  top: -1000px;
  z-index: 1;
  background: rgba(0,0,0,0.9);
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
  box-shadow:inset 0 -3px 0 $gold;

  .info{
    max-width: 80%;
    margin: auto;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.5;

    @media (min-width: 458px){
      font-size:1.25rem;
    }
  }

  @media (min-width: 458px){
    background: rgba(0,0,0,0.7);
  }

  .chevron{
    position: relative;
    display: block;
    margin: 0 auto;
    background: transparent;
    border: none;
    color: $white;
    cursor: pointer;
    font-size: 3em;

    &:hover{
      color: $gold;
    }

    @media (min-width: 458px){
      font-size: 1.3em;
    }
  }

  &.info-content-open{
    top: 0px;
  }
}

/* ----------------- *\
Researcher Styles
\* ----------------- */
.researcher {
  display: flex;
  border-top: 3px solid $gold;
  border-bottom: 10px solid $gold;
  background: $black;
  margin: 0;
  color: white;
  padding: 1rem;
  font-weight: 100;

  a{
    font-size: 1rem;
  }

  ul {
    list-style-type: none;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 0;
    justify-content: space-evenly;
    display: flex;
    flex-wrap: wrap;

    > li {
      display: flex;
      padding: 0.5rem;
      align-items: center;

      > .detail {
        margin-left: 1rem;
        font-size: 0.85rem;
      }

      img{
        width: 100%;
      }
    }
  }
}


.researcher-avatar,
.researcher li > .detail {
  float: left;
}

.researcher-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .researcher ul {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 450px) {
  .researcher ul{
    margin-left: 0;


    .detail{
      margin: 0;
    }
    .researcher-avatar{
      display: none;
    }
  }
}

/* ----------------- *\
Content Styles
\* ----------------- */

.content-wrapper {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid black;
  line-height: 1.5;
}
/*
// Top and bottom yellow Triangels
.content-wrapper::before,
.content-wrapper::after {
content: "";
width: 150%;
height: 200px;
display: block;
position: absolute;
transform: rotate(-5deg);
background: $gold;
z-index: -1;
}

.content-wrapper::before {
top: 0;
left: 0;
transform-origin: bottom left;
}

.content-wrapper::after {
right: 0;
bottom: 0;
transform-origin: top right;
}
*/
/* ----------------- *\
Layout Classes
\* ----------------- */
.magazine-layout{
  max-width: 1200px;
  margin: 0 auto;
}

.single-layout,
.magazine-layout.single-layout {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  columns: auto;
}

@media (max-height: 768px) {
  .magazine-layout {
    max-width: 800px;
    columns: auto !important;
  }
}

@media screen and (min-width: 800px){
  p{
    &::before,
    &::after{
      content: '';
      display:table;
      // clear: both;
    }
  }
}

.magazine-layout img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.magazine-layout:not(.single-layout) {
  padding: 2rem;
  column-gap: 3rem;
  column-rule: 1px solid rgba(0, 0, 0, 0.25);

  & > h2 {
    column-span: all;
    margin: 0;
    padding: 0;
  }

  & > section:first-of-type h3 {
    margin-top: 0;
  }

  & > p:first-of-type {
    margin-top: 0;
  }
}

.three-col-text {
  columns: 3 300px;
}

.two-col-text {
  columns: 2 300px;
}

@media (min-width: 1200px) {
  .magazine-layout + .single-layout {
    border-top: 2px solid hsl(0, 0%, 80%);
  }
}

.single-layout + .single-layout {
  padding-top: 0;
}

/* ----------------- *\
Big content breaker
\* ----------------- */
.background-breaker {
  position: relative;
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-image: url("https://www.mtu.edu/magazine/research/2018/stories/exercise/images/kids-running-350sidebar.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: calc(1rem + 2vw);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 2px 2px 2px black;
  align-items: center;
  justify-content: center;

  p {
    z-index: 2;
    padding: 2rem;
    max-width: 80%;
    text-align: center;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }
}

/* ----------------- *\
Related Posts
\* ----------------- */
.after-content {
  width: 100%;
  max-width: 800px;
  padding: 2rem 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.after-content img{
  width: 100%;
  max-width: 350px;
}

.after-content > div {
  float: left;
  margin: 1rem;
}

/* ----------------- *\
Helper Classes
\* ----------------- */
blockquote{
  margin: 0 auto;
  padding-left: 0.5rem;
  width: 90%;
  border-left: 5px solid $gold;
  border-right: 5px solid transparent;
  font-family: Merriweather, Georgia, serif;
  font-style: italic;

  .author{
    font-style: normal;
    display: block;
    text-align: right;
    font-weight: 600;
  }
}

/* ----------------- *\
Small Quote
\* ----------------- */
.smallquote {
  display: block;
  margin: 1rem auto 1rem 0;
  padding: 1rem;
  max-width: 75%;
  width: 100%;
  min-width: 1px;
  border-left: 5px solid $gold;
  font-size: 1.4em;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.75);

  .author{
    display: block;
    text-align: right;
  }

  @media (min-width: 1200px){
    border-right: 5px solid $gold;
    border-radius: 15px;
    text-align: center;
  }
}

@media (min-width: 1200px) {
  .single-layout .smallquote.float-left {
    max-width: 30%;
    margin: 1rem;
    margin-left: -15%;
  }

  .single-layout .smallquote.float-right {
    max-width: 30%;
    margin: 1rem;
    margin-right: -15%;
  }
}

/* ----------------- *\
Reduce column breaking
\* ----------------- */
figure,
blockquote,
.smallquote {
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ----------------- *\
Figure Styles
\* ----------------- */
figure {
  display: block;
  margin: 1rem auto;

  img {
    max-width: 100%;
  }

  @media (min-width: 768px) {
    display: inline-block;
    margin: 1rem 1.5rem 1.5rem 0;
  }
}

@media (min-width: 1200px) {
  .single-layout {
    .float-left{
      margin-left: -150px;
    }

    .float-right{
      margin-right: -150px;
    }
  }
}

figure.caption {
  overflow: hidden;
  border-bottom: 1px solid black;
}

figure figcaption {
  display: block;
  padding: 0.5rem 1rem;
  color: #444444;
  font-size:0.8em;

}

figure p{
  &:first-of-type {
    margin-top: 0.25rem;
  }
}

/* ----------------- *\
Clear Fix
\* ----------------- */
.clear-fix::before,
.clear-fix::after {
  content: "";
  display: table;
  clear: both;
}

/* ----------------- *\
Floats
\* ----------------- */
@media (min-width: 768px){
  .float-left{
    margin-right: 1 rem;
  }
  .float-right{
    margin-left: 1rem;
  }
  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }
}




.sidebar{
  display: block;
  margin: 1rem auto;
  max-width: 800px;
  padding: 1rem;
  background: #e5e5e5;
  // outline: 4px double $black;
  box-shadow: 10px 10px 0 0 $gold,
    -10px -10px 0 0 $black;
}

.content-wrapper a {
  font-family: inherit;
  text-decoration: none !important;
  font-weight: normal;
  border-bottom: 1px solid $gold;
  box-shadow: inset 0 -2px $gold;
  color: inherit;
  transition: box-shadow 0.1s linear;
  padding: 0 1px;
  word-break: normal;

  &:hover{
    box-shadow: inset 0 -2em $gold;
    // background: $gold;
  }
}

.magazine-layout-wrapper+.magazine-layout-wrapper{
  background: $light-gray;
}

.about-the-author{
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
  font-size: 1rem;

  .heading{
    margin: 0 0 1rem 0;    
  }
}

.author-avatar{
  float: left;
  min-width: 100px;
  width: 20%;
  max-width: 300px;
  margin-right: 1rem;

  img{
    max-width: 100%;
  }
}

.author-info{
  .name{
    font-weight: 600;
  }

  a.profile-link {
    float: right;
  }
}

.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
  clear: both;  
}

.hide{
  position: absolute;
  left: -9999999px;
  height: 1px;
  width: 1px;
}

.disclaimer{
  font-style: italic;
  font-size: 0.8em;
  text-align: center;
  color: #444;
}

JS

              
                  
  (function() {
  /* Need to calculate the best column if it can be fit as a 2 column. */
  var textDivHeight = document.querySelectorAll(".magazine-layout");

  textDivHeight.forEach(function(item) {
    if (item.clientHeight > window.innerHeight) {
      item.classList.add("single-layout");
    }
  });

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    var textDivHeight = document.querySelectorAll(".magazine-layout");

    textDivHeight.forEach(function(item) {
      item.classList.remove("single-layout");

      if (item.clientHeight > window.innerHeight) {
        item.classList.add("single-layout");
      } else if (item.clientHeight < window.innerHeight) {
        item.classList.remove("single-layout");
      }
    });
  }

  var info_icon = document.querySelector('.info-icon')
  var info_trigger = document.querySelectorAll('.js-info-trigger');
  var info_content = document.querySelector('#js-info-content');

  info_trigger.forEach(function(trigger){
    trigger.addEventListener('click', toggleHeaderInfo);
  });

  function toggleHeaderInfo(){
    var trigger = this;
    info_content.classList.toggle('info-content-open');

    if ('true' === info_icon.getAttribute('aria-expanded')){
      info_icon.setAttribute('aria-expanded', false);
    }     else     {                      
      info_icon.setAttribute('aria-expanded', true);
    }

  };

})();

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions