<div class="wrapper">
  <h1>Here's a Big Heading</h1>
  <h2>Some Smaller Heading</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
  </p>
  <h2>Another Heading Here</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
  </p>
  <button>
    Some Button
  </button>
</div>

<div id="font-size-toggle" aria-hidden="true">
  <div class="font-size-toggle__label-wrap">
	  <a href="javascript:void(0)" class="font-size-toggle__label">Change Font Size</a>
  </div>
	<div class="font-size-toggle__control-panel">
		<a href="javascript:void(0)" class="font-size-toggle__increase">
			<i class="fas fa-arrow-up"></i>
		</a>
		
		<div class="font-size-toggle__scale">
			<span class="font-size-toggle__value">100</span>%
		</div>
		
		<a href="javascript:void(0)" class="font-size-toggle__decrease">
			<i class="fas fa-arrow-down"></i>
		</a>
	</div>
</div>

$text-color: black;
$text-color-inverse: white;

.wrapper {
  width: 90%;
  max-width: 45rem;
  margin: auto;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

//
//
// BEGIN: widget CSS

#font-size-toggle {
  position: fixed;
  right: 0;
  top: 30%;
  display: flex;
  background: #34ebb1;
  color: $text-color;
  transform: translate(calc(20px + 2.7em));
  transition: 0.3s;
}

#font-size-toggle.expanded {
  transform: none;
}

.font-size-toggle__label-wrap {
  width: 2.5em;
  height: 10em;
}

.font-size-toggle__label.font-size-toggle__label {
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-decoration: none;
  color: $text-color;
  transition: 0.2s;
  height: 100%;
  width: 100%;
  opacity: 0.6;
  font-weight: bold;
}

.font-size-toggle__label.font-size-toggle__label:hover,
.font-size-toggle__label.font-size-toggle__label:focus {
  opacity: 1;
}

.font-size-toggle__control-panel {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.font-size-toggle__increase.font-size-toggle__increase,
.font-size-toggle__decrease.font-size-toggle__decrease {
  background: none;
  border: solid 2px $text-color;
  color: $text-color;
  height: 1.6em;
  width: 1.6em;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.2s;
}

.font-size-toggle__increase.font-size-toggle__increase:hover,
.font-size-toggle__decrease.font-size-toggle__decrease:hover,
.font-size-toggle__increase.font-size-toggle__increase:focus,
.font-size-toggle__decrease.font-size-toggle__decrease:focus {
  background: $text-color;
  color: $text-color-inverse;
}

.font-size-toggle__scale {
  padding: 10px 0;
}

@media (max-width: 767px) {
  #font-size-toggle {
    top: auto;
    bottom: 0;
    flex-flow: column;
    transform: translateY(calc(10px + 2.5em));
    padding: 0 10px 10px 0;
  }
  .font-size-toggle__label.font-size-toggle__label {
    writing-mode: initial;
    transform: none;
  }
  .font-size-toggle__control-panel {
    flex-flow: row;
  }
  .font-size-toggle__scale {
    padding: 0 10px;
  }
  .font-size-toggle__label-wrap {
    height: 2.5em;
    width: 10em;
  }
}

// END: widget CSS

$(function() {
  let toggle = $('#font-size-toggle'),
      trigger = toggle.find('.font-size-toggle__label'),
      incBtn = toggle.find('.font-size-toggle__increase'),
      decBtn = toggle.find('.font-size-toggle__decrease'),
      indicator = toggle.find('.font-size-toggle__value'),
      initialSizes = {},
      fontSizeSetting = parseFloat(localStorage.getItem('codepenFontSizeSetting'));

  // These are all the CSS selectors for things we want to scale.
  let selectorsToScale = [
    'p',
    'button'
  ];

  // Get initial font sizes.
  for (const selector of selectorsToScale) {
    let fontSize = $(selector).css('font-size');

    if (fontSize) {
      fontSize = fontSize.slice(0, fontSize.length - 2);
    } else {
      fontSize = '';
    }

    initialSizes[selector] = fontSize;
  }

  // If the user previously changed font size, resize text. For page loads and new browsing sessions.
  if (fontSizeSetting) {
    setFontSizes(fontSizeSetting);
  } else {
    fontSizeSetting = 100.0;
  }

  // Toggle visibility of controls.
  trigger.click(function() {
    toggle.toggleClass('expanded');
  });

  // Increase font sizes.
  incBtn.click(function() {
    changeFontSizes('up');
  });

  // Decrease font sizes.
  decBtn.click(function() {
    changeFontSizes('down');
  });
  
  // Handler for increase/decrease buttons.
  function changeFontSizes(direction) {
    if (direction === 'down') {
      fontSizeSetting -= 10;
    } else {
      fontSizeSetting += 10;
    }
    localStorage.setItem('codepenFontSizeSetting', fontSizeSetting);
    setFontSizes(fontSizeSetting);
  }

  // Set font sizes based on provided scale factor.
  function setFontSizes(setting) {
    const resizeFactor = setting / 100.0;

    indicator.html(parseInt(setting));

    for (const selector of selectorsToScale) {
      let initialSize = initialSizes[selector];

      initialSize = parseFloat(initialSize);

      let newSize = initialSize * resizeFactor;

      $(selector).css('font-size', newSize + 'px');
    }
  }
});