JSFiddle - React, Tailwind, and code Playground

Me Likes

by Jennifer Perrin

HTML

<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
        
<div class="paper">
    <div id="fix-arrow">
        <img src="https://dl.dropboxusercontent.com/s/hm76ef01empjqp5/arrow-left.png" class='load' onload="this.className = this.className + ' loaded'" /> 
    </div>
    
    <header>

        <div class="header-logo">
            <img src="http://jenniferperrin.com/image/jperrin_diamond.png" class='load' onload="this.className = this.className + ' loaded'" />
        </div>
        
        
        <div class="header-menu">
            
            <div style='width: 63px;' class="header-divider">
                <img src="https://dl.dropboxusercontent.com/s/hm76ef01empjqp5/arrow-left.png" class='load' onload="this.className = this.className + ' loaded'" /> 
            </div>
            
            <div class='header-link about'>
                ABOUT
            </div>
            
            <div style='width: 39px;' class="header-divider">
                <img src="https://dl.dropboxusercontent.com/s/ibazrbngeh0oa9k/arrow-center.png" class='load' onload="this.className = this.className + ' loaded'" />    
            </div>
            
            <div class='header-link portfolio'>
                PORTFOLIO
                <div class="header-link-dropdown">
                    <div class="header-dd-link gra">
                        GRAPHIC DESIGN
                    </div>
                    <div class="header-dd-link ill">
                        ILLUSTRATION
                    </div>
                    <div class="header-dd-link pac">
                        PACKAGE
                    </div>
                    <div class="header-dd-link all">
                        ALL
                    </div>
                </div>
     ...

CSS

.pull-left {
  float: left;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
img.load {
  opacity: 0;
  -webkit-transition: opacity 150ms;
  -moz-transition: opacity 150ms;
  -ms-transition: opacity 150ms;
  transition: opacity 150ms;
}
img.load.loaded {
  opacity: 1;
}
* {
  box-sizing: border-box;
}
html,
body {
  color: #555555;
  font-family: 'Roboto Condensed', sans-serif;
  background: #aaaaaa;
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: 16px;
  line-height: 24px;
}
@media only screen and (max-width: 760px) {
  html,
  body {
    font-size: 14px;
    line-height: 21px;
  }
}
body {
  overflow-y: scroll;
  padding: 0px;
}
.paper {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  width: 70%;
  min-height: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 1100px) {
  .paper {
    width: 100%;
  }
}
@media only screen and (max-width: 350px) {
  .paper {
    width: 350px;
  }
}
.paper #fix-arrow {
  display: none;
  position: fixed;
  -webkit-transform: rotate(90deg) translate3d(0, 0, 0);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  opacity: 0.5;
  top: 60%;
  padding: 5px;
  cursor: pointer;
}
.paper #fix-arrow.scrolled {
  -webkit-transform: rotate(-90deg) translate3d(0, 0, 0);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}
.paper #fix-arrow.active {
  opacity: 0.9;
}
.paper #fix-arrow img {
  width: 60px;
}
header {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  padding-top: 2em;
  /*.header-palette {
    width: 101%;
    margin: 0 -0.5% 3em;
    height: 1em;
    td {
      height: 1em;
      &:nth-child(1)...

JavaScript

var $headerMenu = $('.header-menu');
var $headerLink = $headerMenu.find('.header-link');

$headerLink.click(function(){
  console.log('click');
  $headerLink.removeClass('active');
  $(this).addClass('active');
  
  return false;
});

// fix arrow
var savedOffset = 0;
var autoScroll = false;
window.onscroll = function(e) {
  if (autoScroll) {
    autoScroll = false;
  } else {
    savedOffset = 0;
    $('#fix-arrow').removeClass('active');
  }
  
  if (window.pageYOffset) {
    $('#fix-arrow').addClass('scrolled');
  } else {
    $('#fix-arrow').removeClass('scrolled');
  }
};

$('#fix-arrow').click(function() {
  if (savedOffset) {
    window.scrollTo(window.pageXOffset, savedOffset);
  } else {
    if (window.pageYOffset) {
      savedOffset = window.pageYOffset;
      autoScroll = true;
      $(this).addClass('active');
      window.scrollTo(window.pageXOffset, 0);
    }
  }
});
//