dash

HTML

<div class="container">
  <h1>Portal</h1>
  <div class="icon-container">
    <a href="http://app.plex.tv/web/app" class="icon">
      <div class="icon-img plex"></div>
      <div class="icon-text">Plex</div>
    </a>
    <a href="http://84.196.133.105:5050" class="icon">
      <div class="icon-img couch-potato"></div>
      <div class="icon-text">CouchPotato</div>
    </a>
    <a href="http://84.196.133.105:8081" class="icon">
      <div class="icon-img sick-rage"></div>
      <div class="icon-text">Sick Rage</div>
    </a>
    <a href="http://84.196.133.105:8081" class="icon">
      <div class="icon-img torrent"></div>
      <div class="icon-text">µTorrent</div>
    </a>
  </div>
</div>

SCSS

body {
  background-image: url('http://84.196.133.105:1985/portal/img/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a {
  text-decoration: none;
  color: black;
}
body.touch{
  .container {
    h1 {
      font-size: 3em;
    }
    .icon-container {
      .icon {
        width: 132px;  
        .icon-img {
          width: 128px;
          height: 128px;
          &.plex {
            background-size: 160px;
          }
          &.couch-potato {
            background-size:124px;
          }
          &.sick-rage {
            background-size: 104px;
          }
          &.torrent {
            background-size: 104px;
          }
        }
        .icon-text {
          font-size: 20px;
        }
      }
    }
  }
}

.container {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  h1 {
    padding: 0px;
    margin: 0px 0px 10px 0px;
  }
  .icon-container {
    .icon {
      width: 66px;  
      padding: 4px;
      display: inline-table;
      margin: 5px;
      
      &:hover {
        background-color: rgba(0, 66, 210, 0.4);
        border-radius: 0 10px;
        box-shadow: 0 0 0 1px rgba(0,38,121,0.7);
      }
      .icon-img {
        width: 64px;
        height: 64px;
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 0 7px;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
        border: 1px solid gray;
        &.plex {
          background-image: url('http://core0.staticworld.net/images/article/2015/12/plex-mac-icon-100634511-large.png');
          background-size: 80px;
        }
        &.couch-potato {
          background-image: url('https://superrepo.org/static/images/icons/original/xplugin.video.couchpotato_manager.png.pagespeed.ic.ETNL5rXT5N.png');
          background-size:...