123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<main>
<h1>Exoplanet 2K</h1>
<div role="supplementary">
  <time datetime="2015-03-06">March 6, 2015</time>
  <a rel="author" href="https://plus.google.com/+DudleyStorey">Dudley Storey</a>
</div>
  <p>Sometime this year the two thousandth planet will be discovered outside our solar system. The vast range of discoveries that have been confirmed are almost certainly outliers in the billions of worlds thought to exist, brought into focus by relatively weak technologies that are biased in favor of anomalies. So far, these include:
<ul>
  <li>the burnt cinder of PSR B1257+12 B, whirling around a pulsar: the first exoplanet, discovered in 1992.
  <li>massive “hot Jupiters” that circle their stars well inside the orbit of Mercury, drawing bow wakes of stellar material behind them.
  <li>Systems with seven detected planets (HD 10180).
</ul>
  <h2>Discovery Techniques</h2>
 <img src="miridian-VI-square.jpg" class="planet-wrap" alt="Artist's impression of the exoplanet Miridian VI">
 <p>Pulsar timing remains the easiest method to find exoplanets, but the inimical nature of their parent stars make the worlds extremely unlikely candidates as sources for life. More recent detection techniques have their own limitations:
  <h3>Radial velocity</h3>
  <p>The measurement of a planet’s orbital tug on its star, causing a rhythmic “wobble” in the position of the parent star. Due to their differences in mass, the technique is best at detecting exoplanets that are very large (Jupiter mass or above) and/or very close to their star.
  <h3>Transit</h3>
  <p>A exoplanet moving in the same plane as our line of sight will partially “eclipse” its star during moments of its orbit. If this dip in perceived brightness occurs at regular intervals, an orbiting body can be inferred. Obviously the larger the planet and/or the further it orbits from its star, the greater the dip in received light and the easier the detection.
  <h3>Reflected light</h3>
  <p>A planet will reflect the light of its star in phases as it orbits, just as the moon does as it circles the Earth. While the amount of reflected light will be very small compared to the central star (the common comparison is the ability to perceive the glow of a lit match held at arms length from a lighthouse beam), the method is useful for large Jupiter-sized bodies orbiting relatively close to their host star.
  <h3>Gravitational microlensing</h3>
  <p>Light can be bent by its transmission medium (such as water) or by passing beside a large gravitational mass. The most extreme variations of the latter effect are observed around supermassive black holes and galaxies, but planets have the same effect on starlight, albeit much more subtly.
  <p>Because such alignments of exoplanets and background stars are very rare, the most likely opportunities come from observations directed toward the galactic core, where the density of stars is highest.
  <p>Exoplanet detection is a long, slow process: a candidate will need to complete at least one full orbit (its own relative “year”) before it can be confirmed. While terrestrial equipment has been used in the hunt for planets, the greatest gains in exoplanet detection have come from satellites, particularly the Kepler <abbr title="National Aeronautics and Space Administration">NASA</abbr> space observatory and <abbr title="COnvection ROtation et Transits planétaires; English: COnvection ROtation and planetary Transits">COROT</abbr> (led by the French Space Agency). Other projects with greater resolution, such as the Terrestrial Planet Finder and Darwin, are unfortunately on hold or cancelled at this time. The <a href="http://www.jwst.nasa.gov/">James Webb Space Telescope</a>, a visible-wavelength-to-infrared detector, should also have the opportunity for imaging planets after it is launched in 2018.
  <h2>Possible Detection of Life?</h2>
  <p>So far we have have a dataset of just one planet confirmed to support life: we know it exists on Earth. The flourishing evolutionary diversity of life on Earth is entirely dependant on water, which implies that other planets capable of supporting biological life must be within the “habitable zone” of their parent stars (neither so close as to boil, or freezing when they are too far out). Other heating methods to produce liquid water are possible, from vulcanism to the gravitational tugging of a large planet on a smaller ice-covered worldlet, seen in Saturn’s moons Enceladus and <a href="http://saturn.jpl.nasa.gov/science/moons/mimas/">Mimas</a>.
    <img src="occupied-1x.jpg" srcset="occupied-1x.jpg 1x, occupied-2x.jpg 2x" alt="Lights of an alien city in a crater" id="occupied">
  <p>While projects such as <abbr title="Search for Extraterrestial Life">SETI</abbr> have so far failed to detect the presence of intelligent extraterrestrial life using radio frequencies, there exists the intriguing possibility that we may detect intelligent life by observing the atmosphere of an exoplanet.
  <p>Such detection is not likely to be achieved by seeing the night-glow of an alien city through a telescope: the power to resolve those kinds of details is more than a century away, if it is achievable at all. Rather, alien life might be inferred through the presence of elements, via spectrography.
  <p>As a planet transits past its parent star, light is refracted through its atmosphere. By teasing apart the spectrum of the light received here on Earth and observing the absorption lines, it is possible to determine the chemical composition of a planet’s atmosphere, together with information like wind speed and direction. As our instruments become more precise, we should be able to resolve the atmospheres of ever-smaller planets… and if we ever find oxygen, or a high proportion of methane, we will have found life, as it is only biological life that can produce those elements.
  <p>Taking this a step further, we should also be able to detect the presence of artificial chemicals in an atmosphere, such as vinyl chloride mononomers. This will be an unmistakable sign of an industrial society, as no natural process that produces such compounds.
  <p>Given the increasingly desperate state of our own planet’s ecosystem, it is deeply ironic that our discovery of intelligent life elsewhere in the Universe may come from the detection of another world’s pollution.
    <div role="supplementary">
  <p>Images by <a href="//flickr.com/photos/blile59/">Bille Lille</a>, licensed under Creative Commons.
</div>
</main>
            
          
!
            
              @font-face {
    font-family: 'Moonlight';
    src: url('//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon-light-webfont.woff2') format('woff2'),
         url('//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon-light-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

body { 
  font-family: Avenir, sans-serif;
  background: #000;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}
main { 
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.2rem;
  background: #222;
  padding: 2rem;
}
h1 { 
  text-align: center; 
  margin-top: 0;
}
h1, h2, h3 {
  font-family: Moonlight, sans-serif;
}
h1 { font-size: 4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }
.planet-wrap {
  float: right;
  border-radius: 50%;
  overflow: hidden;
  border: 20px solid #000;
  margin-left: 2rem;
  -webkit-shape-outside:circle();
  shape-outside:circle();
}
div[role="supplementary"] {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  margin-bottom: 2rem;
}
#occupied { 
  width: 100%;
  height: auto;
  margin: 2rem 0;
}
a { 
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dashed;
  transition: .3s border-bottom-color;
  &:hover {
    border-bottom-color: 1px dashed red;
  }
}
abbr { font-style: italic; }

@media all and (max-width: 600px) {
  .planet-wrap { 
    float: none;
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  h1 { font-size: 3rem; line-height: 1.2; }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console