JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div class="container">
<span class="h-xxl">Astronomy</span>
<h1>A peculiar atom shakes up assumptions of nuclear structure</h1>
<p>Physicists have found an exotic variant of potassium that is much longer-lived than predicted — hinting at the existence of other more-extreme atoms that stretch the known limits of nuclear structure.</p>
<p>Isotopes are alternative forms of a single chemical element, each with the same number of protons but differing numbers of neutrons. If an isotope has too few neutrons, the nucleus can no longer hold itself together. Such an isotope is said to be ‘beyond the proton dripline’.</p>
<p>Daria Kostyleva at the GSI Helmholtz Centre for Heavy Ion Research in Darmstadt, Germany, and her colleagues formed a beam of argon atoms. The atoms exchanged protons and neutrons, creating potassium-31, which has 12 neutrons and 19 protons. It is four neutrons beyond the dripline — meaning that it is four neutrons short of being stable.</p>
</div>

<div id="controls">
<span class="btn active" data-resize-type="fixed">Fixed</span>
<span class="btn" data-resize-type="responsive">Responsive</span>
<span class="btn" data-resize-type="fluid">Fluid</span>
</div>

SCSS

$vw-min: 360px;
$vw-max: 1200px;

body {
  margin: 0;
  padding: 0;
  background: #F2F2F2;
  color: #252525;
  font: 16px/1.5 'Avenir Next', sans-serif;
}

h1 {
  font-family: 'Abril Fatface', serif;
  line-height: 1.125;
  font-size: 2.3rem;
}

#controls {
  margin: 0 20px 20px;
}

.h-xxl {
  font-family: Avenir Next, sans-serif;
  font-size: 2.88rem;
  font-weight: 100;
}

.container {
  padding: 5vw;
  margin: 20px 20px 0;
  background: #FFF;
}

.btn {
  padding: 0.5rem 0.75rem;
  background: #DDD;
  display: inline-block;
  cursor: pointer;
  color: #666;
}

.btn.active {
  background: #FFF;
  color: #252525;
}

.fluid {
    .h-xxl {
      @include responsive-font(8vw, 24px, 88px);
    }
    h1 {
      @include responsive-font(5vw, 24px, 48px);
    }
}

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback), 
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;
  
  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }
  
  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;
    
    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }
  
  @if $fallback {
    font-size: $fallback;
  }
  
  font-size: $responsive;
}

JavaScript

$(function() {

	$('.btn').click(function(e) {
	  $(this).siblings().removeClass('active');
  	$(this).addClass('active');
    $('body').removeClass().addClass($(this).attr('data-resize-type'));
    
  });

});