<div class="logo texture">
  <div id="spanner-opening"></div>
  <div id="spanner-end"></div> 
  <div class="spanner">
  </div>
  <div class="title texture">
    <h1> Shop Talk</h1>
  </div>
  <p>Show</p> 
</div> 
<h3>CSS Only</h3>

<input id="logo-size" class="texture" type="range" min="30" value="60" max="170">

<div class="img-container">
  <img src="https://s.cdpn.io/31787/shoptalk.png" alt="" />
  <h3>Original Image</h3> 
  <input id="image-size" class="texture" type="range" min="100" value="200" max="550">
</div>

@import "compass/css3";

$shop-talk:  #f26906;
$background: #000;

*, *:after, *:before {
  box-sizing: border-box;
}

html {
  background: $background;
  color: $background;
  font-size: 6px;
}

#logo-size {
  width: 200px;
  margin-left: -100px;
  margin-top: -20px;
  left: 50%;
  position: absolute;
  
}

input[type='range'] {
  appearance: none !important;
  background: #444;
  height:15px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background:$shop-talk;
  height: 30px;
  width: 15px;
  border: 2px solid $background;
}


.logo {
  background: $shop-talk;
  border: 0.4rem solid $background;
  border-radius: 50%;
  box-shadow: 0 0 0 0.8rem $shop-talk;
  height: 23rem; 
  margin: 5rem auto;
  transform: rotate(-8deg);  
  width: 23rem;
  
  p {
    color: $background;
    font-weight: bold;
    font-family: 'Doppio One', sans-serif; 
    font-size: 2rem;
    font-weight: 700;  
    letter-spacing: 0.2rem;
    margin:-0.6rem 0 0 9rem;
    text-transform: uppercase;
    transform:scale(1.3,1);
    transform: rotate(-7deg); 
  }
}


.title {
  background: $shop-talk;
  border-top: 0.8rem solid $shop-talk;
  border-bottom: 0.8rem solid $shop-talk;
  font-family: 'Yanone Kaffeesatz', sans-serif; 
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  margin-left: -5.8rem;
  margin-top: 4rem; 
  text-align: center;
  text-transform: uppercase;
  transform:skew(-8deg,-8deg);
  width: 33rem;
}

h1 {
  border-top: 0.4rem solid $background;
  border-bottom: 0.4rem solid $background; 
  margin: 0 -40px;
  padding:0;
  transform:scale(0.8,1);
}




.spanner {
  background: $shop-talk;
  border: 0.4rem solid $background;
  height: 1rem;
  margin-top: 2rem; 
  margin-left: 7rem;
  position: absolute;
  transform: rotate(-8deg);
  width: 6rem;
  
  &:before {
      background: $background;
      border-radius: 50%;
      content: ' ';
      height: 1.8rem;   
      margin-left: -0.9rem;
      margin-top: -0.8rem;
      position: absolute;
      width:1.8rem;
    }
    
    &:after {
      border-radius: 50%;
      background: $background;
      content: ' ';
      height: 1.8rem;
      margin-left: 5rem; 
      margin-top: -0.8rem;
      position: absolute;
      width:1.8rem;
    }
}

#spanner-opening {
  background: $shop-talk;
  height:0.8rem;
  left: 6.4rem;
  margin-top: 2.5rem;
  position: absolute;
  transform: rotate(-8deg);
  width:1.1rem;  
  z-index: 5; 
}

#spanner-end {
  background: $shop-talk;
  height: 0.8rem;
  margin-top: 1.60rem; 
  margin-left: 12.8rem;
  position: absolute;
  text-align: center;
  width: 0.8rem;
  z-index: 9;
  
  &:before, &:after {
      background: $shop-talk; 
      content: "";
      height: 0.8rem;
      left: 0;
      position: absolute;
      top: 0;
      width: 0.8rem;
      
    }
    &:before {
      transform: rotate(30deg);
    }
    &:after {
      transform: rotate(60deg);
    }
}


.texture {
  position: relative;
  z-index: 1;
  
  
  &:before {
      bottom:0;
      content: "";
      left:0;
      opacity: 0.8;
      position: absolute;
      right:0;
      top:0;
      z-index: -1;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUU4M0I1RjJBMzYxMTFFMjk0NTRCQzUzNjI1MDQ3NEQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUU4M0I1RjFBMzYxMTFFMjk0NTRCQzUzNjI1MDQ3NEQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iOEQyOTkzNUREMjU5RUVENjNCQTIxRDQxNkY5NzE1NjAiIHN0UmVmOmRvY3VtZW50SUQ9IjhEMjk5MzVERDI1OUVFRDYzQkEyMUQ0MTZGOTcxNTYwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Y3oDSAAADrtJREFUeNrtXemSVrcRpco/Yjv2QFhMWJyYxcCw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);
    }
}
.img-container {
  text-align: center; 
  width:100%;
}
  
img {
  margin-top: 30px;
  width:200;
}
 

h3 {
  color: $shop-talk;
  font-size: 40px;
  text-align: center;
  margin-bottom: 30px; 
}

// JS only used to demonstrate that simply changing the base font value will increase the size of the logo


//author Hugo Darby Brown - Twitter @darbybrown 

$('#logo-size').change(function () {                    
  var fontsize = $(this).val()/10 + "px";
  $('html').css("font-size", fontsize );
});

$('#image-size').change(function () {                    
  var Width = $(this).val() + "px";
  $('img').css("width", Width );
});