Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                

<div class="content-block">

     <h1>The Arctic's climate is characterized by cold winters and cool summers</h1>
  
       <div class="abstract">
        <p>In physical geography, tundra is a type of biome where the tree growth is hindered by low temperatures and short growing seasons. </p>
      </div>

      <nav class="index-links" >
        <h2>On this page</h2>
        <ul>
          <li><a href="#climate">Climate</a></li>
          <li><a href="#Relationship-with-global-warming">Relationship-with-global-warming</a></li>
          <li><a href="#product">Product</a></li>
        </ul>
      </nav> 
  
  
  <h2 id="climate">Climate</h2>
  <p>Arctic tundra occurs in the far Northern Hemisphere, north of the taiga belt. The word "tundra" usually refers only to the areas where the subsoil is permafrost, or permanently frozen soil. (It may also refer to the treeless plain in general, so that northern Sápmi would be included.) Permafrost tundra includes vast areas of northern Russia and Canada.[2] The polar tundra is home to several peoples who are mostly nomadic reindeer herders, such as the Nganasan and Nenets in the permafrost area (and the Sami in Sápmi).</p>
      <div class="abstract">
        <p>A personal compilation of recommended reading for product design, visual design, and general personal development.</p>
      </div>
<p>Arctic tundra contains areas of stark landscape and is frozen for much of the year. The soil there is frozen from 25 to 90 cm (10 to 35 in) down, making it impossible for trees to grow. Instead, bare and sometimes rocky land can only support certain kinds of Arctic vegetation, low growing plants such as moss, heath (Ericaceae varieties such as crowberry and black bearberry), and lichen.</p>

<p>There are two main seasons, winter and summer, in the polar tundra areas. During the winter it is very cold and dark, with the average temperature around −28 °C (−18 °F), sometimes dipping as low as −50 °C (−58 °F). However, extreme cold temperatures on the tundra do not drop as low as those experienced in taiga areas further south (for example, Russia's and Canada's lowest temperatures were recorded in locations south of the tree line). <a href="https://medium.com/google-design">During the summer, temperatures</a> rise somewhat, and the top layer of seasonally-frozen soil melts, leaving the ground very soggy. The tundra is covered in marshes, lakes, bogs and streams during the warm months. Generally daytime temperatures during the summer rise to about 12 °C (54 °F) but can often drop to 3 °C (37 °F) or even below freezing. Arctic tundras are sometimes the subject of habitat conservation programs. In Canada and Russia, many of these areas are protected through a national Biodiversity Action Plan.</p>
  
  <h3 id="Relationship-with-global-warming">Relationship with global warming</h3>
<p>A severe threat to tundra is global warming, which causes permafrost to melt. The melting of the permafrost in a given area on human time scales (decades or centuries) could radically change which species can survive there.[7]</p>

<p>Another concern is that about one third of the world's soil-bound carbon is in taiga and tundra areas. When the permafrost melts, it releases carbon in the form of carbon dioxide and methane,[8] both of which are greenhouse gases. The effect has been observed in Alaska. In the 1970s the tundra was a carbon sink, but today, it is a carbon source.[9] Methane is produced when vegetation decays in lakes and wetlands.[10]</p>
  
  <h2>Alpine tundra occurs in mountains worldwide</h2>
<p>Alpine tundra does not contain trees because the climate and soils at high altitude block tree growth. Alpine tundra is distinguished from arctic tundra in that alpine tundra typically does not have permafrost, and alpine soils are generally better drained than arctic soils. Alpine tundra transitions to subalpine forests below the tree line; stunted forests occurring at the forest-tundra ecotone (the treeline) are known as Krummholz.</p>

  <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/29d48864863161.5ae056571fba8.jpg" alt="">
  
<p>Alpine tundra occurs in mountains worldwide. The flora of the alpine tundra is characterized by dwarf shrubs close to the ground. The cold climate of the alpine tundra is caused by the low air temperatures, and is similar to polar climate.</p>

  <h3>Mountains worldwide</h3>
  <h4>Alpine</h4>
  <p>Alpine tundra does not contain trees because the climate and soils at high altitude block tree growth. Alpine tundra is distinguished from arctic tundra in that alpine tundra typically does not have permafrost, and alpine soils are generally better drained than arctic soils. Alpine tundra transitions to subalpine forests below the tree line; stunted forests occurring at the forest-tundra ecotone (the treeline) are known as Krummholz.</p>

<p>Alpine tundra occurs in mountains worldwide. The flora of the alpine tundra is characterized by dwarf shrubs close to the ground. The cold climate of the alpine tundra is caused by the low air temperatures, and is similar to polar climate.</p>
  
   <hr>
  
  
   <h2 id="product">Product</h2>
      <h3><a href="https://medium.com/google-design">Google Design Blog</a></h3>
      <p>Google Design is a cooperative effort led by a group of designers, writers, and developers at Google to support and further design and technology.</p>

      <h3><a href="https://facebook.design/">Facebook design</a></h3>
    <p>Collection of articles, videos, and resources made by designers at Facebook.</p>

        <h3><a href="https://www.smashingmagazine.com/articles/">Smashing Magazine</a></h3>
    <p>Smashing Magazine delivers reliable, useful, but most importantly practical articles to web designers and developers. We don’t care about trends; we care about things that work or fail in actual projects.</p>
  
  <h3><a href="https://medium.com/behance-blog">Behance: Blog</a></h3>
  <p></p>
  
  <h3><a href="https://www.wired.com/category/ideas/">Wired: ideas</a></h3>
  <p>source of information and ideas that make sense of a world in constant transformation. </p>
  
  
  <h2 id="curations">Curations</h2>
  <h3><a href="  https://www.siteinspire.com/">Siteinspire</a></h3>
  <p>siteInspire is a showcase of the finest web and interactive design.</p>
  
  
  <h3><a href="https://www.behance.net/galleries/8/Interaction">Behance: Interaction</a></h3>
  <p>The best projects across all creative fields</p>
  
  <h3><a href="https://www.behance.net/galleries/2/Graphic-Design">Behance: Graphic Design</a></h3>
  <p>The best projects across all creative fields</p>
  
  <h3><a href="https://www.pttrns.com/">Pttrns</a></h3>
  <p>A collection of mobile UI patterns</p>
  
  <h3><a href="https://www.awwwards.com/">Awwwards</a></h3>
  <p>The awards that recognize the talent and effort of the best web designers, developers and agencies in the world.</p>
  
  
  <h3><a href="https://www.typewolf.com/">Typewolf</a></h3>
  <h4>h4</h4>
  <p>Seeing type samples set in “the quick brown fox jumps over the lazy dog” isn’t very useful when it comes to web design—seeing how real type performs on actual websites is much more helpful.</p>
  
  
 
  </div>
    
    
    
              
            
!

CSS

              
                $color-background: #f1eeeb;
$color-text: #545454;
$linkColour: #ef004c; //rgba($color-text, 0.5);

$rem: 16; //presumed base font size

$tablet-width: 768px;
$desktop-width: 1024px;
$line-height: 1.85;

/**
 * Exponential Number
 * -----------------------------------------------------------------------------
 * Raise a number to a given power.
 *
 * @param   number      $number         Number to raise.
 * @param   number      $power          Power to which it should be raised.
 * @return  number      $exponent       Number raised to exponent.
 */

@function pow($number, $power) {
    $exponent: 1;

    @if $power > 0 {
        @for $i from 1 through $power {
            $exponent: $exponent * $number;
        }
    } @else if $power < 0 {
        @for $i from 1 through $power {
            $exponent: $exponent / $number;
        }
    }

    @return $exponent;
}




@function type-scale($base, $level , $scale) {
  @return ($base * pow($scale, $level)+px);
}

$type-scale-mob: 1.200; //1.200 — Minor Third
$type-scale-tab: 1.333; //1.333 — Perfect Fourth
$f-size-mob: $rem*0.875;
$f-size-tab: $rem;

$f-mob-sm: type-scale($f-size-mob, 0 , $type-scale-mob);
$f-mob-md: type-scale($f-size-mob, 1 , $type-scale-mob);
$f-mob-lg: type-scale($f-size-mob, 2 , $type-scale-mob);
$f-mob-xl: type-scale($f-size-mob, 3 , $type-scale-mob);

$f-tab-sm: type-scale($f-size-tab, 0 , $type-scale-tab);
$f-tab-md: type-scale($f-size-tab, 1 , $type-scale-tab);
$f-tab-lg: type-scale($f-size-tab, 2 , $type-scale-tab);
$f-tab-xl: type-scale($f-size-tab, 3 , $type-scale-tab);

@mixin tablet-plus {
  @media (min-width: #{$tablet-width}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}


body {
  padding: 3%;

  line-height: 1.85;
  font-family: 'Libre Baskerville', serif;
  
  background: $color-background;
  color: $color-text;
}

.content-block {
  max-width: 40rem;
  margin: 0 auto;
  
  font-size: $f-mob-sm;
    @include tablet-plus { font-size: $f-tab-sm; }
}

a {
  color: $linkColour;
  text-decoration: none;
  // border-bottom: 3px solid $linkColour;
  box-shadow: inset 0 -1px 0 $linkColour;
  // text-decoration-color: $linkColour;
  
  
  &:hover,
  &:focus{
    // background-color: rgba($linkColour, 0.1);
    box-shadow: inset 0 1.1em 0 rgba($linkColour, 0.25);
  }
}


.content-block * {
  margin: 0;
}

.abstract {
  font-size: $f-mob-md;
    @include tablet-plus { font-size: $f-tab-md; }
    line-height: 1.5;
    opacity: 0.75;
}

.caption {
  font-size: 0.9em;
  font-style: italic;
  color:#717171;
  em {
    font-style: normal;
  }
}
.content-block {
  h1 + p, h2 + p, h3 + p, h4 + p,
  h1 + h2, h2 + h3, h3 + h4 {
    margin-top: $line-height*1em;
  }
  p {
    margin-top: $line-height*1em;
  }
  img {
    max-width: 100%;
    margin-top: 56px;
    margin-bottom: 56px;
    display: block;
  }
  hr {
    border: none; 
    border-bottom: solid 1px;
    opacity: 0.5;
    margin-top: 56px;
    margin-bottom: calc(56px - 1px);
  }
  
  h1, h2, h3, h4 {
    font-weight: 700;
    margin-top: $line-height*1.4em;
    line-height: 1.5;
  }
  h1 {
    // font-size: 2.5em; line-height: 56px 
    font-size: $f-mob-xl;
      @include tablet-plus { font-size: $f-tab-xl; }
  }
  h2 {
    // font-size: 1.75em; line-height: 42px
    font-size: $f-mob-lg;
          @include tablet-plus { font-size: $f-tab-lg; }
  }
  h3 {
    // font-size: 1.1em; 
    font-size: $f-mob-md;
          @include tablet-plus { font-size: $f-tab-md; }
  }
  h4 {
    // font-size: 1.1em;
    font-size: $f-mob-md;
          @include tablet-plus { font-size: $f-tab-md; }
    opacity:0.75;
  }
}

.link {
    position: absolute;
    margin-left: -1em;
    opacity: 0.2;
}

.index-links {
  margin-top: 3rem;
  border-left: solid 2px;
  padding:0 1rem;
  
  h2 {
    font-size: 1rem;
    margin: 0;
    font-weight:bold;
  }
  ul {
    list-style:none;
    margin:0;
    padding: 0;
  }
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
  border-left: solid 1px;
  padding:0 0.5rem;
}
              
            
!

JS

              
                


$('h3[id]').each(function() {
  $( this ).prepend( "<a href='#"+ $(this).attr( "id" ) +"' class='link'>#</a>" );
});
              
            
!
999px

Console