#app
  button.reload(type="button" @click="reload()" :class="[bg(), pattern()]")
    i.fas.fa-redo-alt
  .quote
    template(v-for="(word, index) in words")
      .word(:key="`words_${index}`" :class="word")
        .letter(v-for="(letter, index) in word" :key="`letter_${index}`" :class="[rotate(), bg(), pattern()]" :data-letter="letter") {{letter}}
        span.space(v-if="index !== words.length - 1")  

// ~* for fun *~ //
$blend-mode: overlay;
$fill:'%23000';
$opacity: 0.33;

// start styles
@import 'https://use.typekit.net/swk3xjq.css';
html, body, #app {
  height: 100%;
}
body {
  background-color: #456;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 4 4'%3E%3Cpath fill='%23fff' fill-opacity='0.1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  margin: 0;
  overflow: hidden;
  text-align: center;
}
#app {
  display: grid;
  filter: drop-shadow(1vmin 1vmin 0 rgba(black, 0.5));
  font: 800 25vmin/1.25 rooney-web, serif;
  place-items: center;
}
.letter,
.word {
  display: inline-block;
}
.letter {
  background-position: center;
  background-size: 5vmin;
  position: relative;
  &,
  &::before {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.pattern::before {
  bottom: 0;
  content: attr(data-letter);
  left: 0;
  mix-blend-mode: $blend-mode;
  position: absolute;
  right: 0;
  top: 0;
}
.quote {
  user-select: none;
}
.reload {
  border: none;
  border-radius: 50em;
  cursor: pointer;
  font-size: 1.5rem;
  height: 3rem;
  outline: none;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 3rem;
  z-index: 1000;
  &::before {
    border-radius: 50em;
  }
  i {
    mix-blend-mode: overlay;
  }
}
// kerning?
[data-letter="f"] {width:0.51em;}
.deg-10 {
  margin-left:-0.06em;
  & + & {margin-left: 0}
}
.deg10 {
  margin-right:-0.07em;
    & + & {margin-left: 0}
}
// generate classes
$degs: (-10, -5, 0, 5, 10);
@each $deg in $degs {
  .deg#{$deg} {
    transform: rotate(#{$deg}deg);
  }
}
@for $i from 0 to 10 {
  $scale: 36;
  $hue: $i * $scale;
  $color: hsl($hue, 100%, 75%);
  .color-#{$i} {
    background-color: $color;
    transition: 300ms;
    &:active,
    &:focus {
      &:not(.letter) {
        box-shadow: 0 0 0 1vmin rgba($color, 0.5);
      }
    }
  }
}
$patterns: (
  // zig zag
  "data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm40 5.656L28.172 0h5.656L40 6.172v5.656zM6.172 12l12-12h3.656l12 12h-5.656L20 3.828 11.828 12H6.172zm12 0L20 10.172 21.828 12h-3.656z' fill='#{$fill}' fill-opacity='#{$opacity}' fill-rule='evenodd'/%3E%3C/svg%3E",
  // wiggle
"data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='#{$fill}' fill-opacity='#{$opacity}'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E",
  // bubbles
  "data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='#{$fill}' fill-opacity='#{$opacity}' fill-rule='evenodd'/%3E%3C/svg%3E",
  // diagnal stripes
  "data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{$fill}' fill-opacity='#{$opacity}' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E",
  // lines in motion
  "data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='#{$fill}' fill-opacity='#{$opacity}' fill-rule='evenodd'/%3E%3C/svg%3E"
);
@each $pattern in $patterns {
  $i: index($patterns, $pattern);
  .pattern-#{$i}::before {
    background-image: url("#{$pattern}");
    @if ($i == 1) {
      background-size: 13vmin;
    }
    @if ($i == 3) {
      background-size: 8vmin;
    }
    @if ($i == 5) {
      background-size: 10vmin;
    }
  }
}

// ~* for fun *~ //
const quotes = [
  'wash yer hands',
  'stay home',
  'take care of yourself',
  'we’re in this together',
  'don’t panic',
  'wear a mask'
]

// start js
const random = max => {
  return Math.floor(Math.random() * Math.floor(max))
}
const degs = [-10, -5, 0, 5, 10] // match $degs list
const numColors = 10
var colors = Array.from(Array(numColors).keys())
var app = new Vue({
  el: '#app',
  data: {
    colors: colors,
    degs: degs,
    quote: quotes[random(quotes.length)]
  },
  computed: {
    words: function() {
      return this.quote.split(' ')
    }
  },
  methods: {
    bg: function() {
      let n = this.colors[random(this.colors.length)]
      return `color-${n}`
    },
    pattern: function() {
      return `pattern pattern-${random(5) + 1}` // number of patterns
    },
    rotate: function() {
      return `deg${this.degs[random(degs.length)]}`
    },
    reload: function() {
      this.quote = quotes[random(quotes.length)]
    }
  }
});