// Based on design by Patrick Moriarty https://dribbble.com/shots/4059798-Boulder-Badge

.patch-container
  .patch-top
    .patch-top-rounding
  .patch-base
    .mountains
      .mountain__left
      .mountain__right
      .mountain__middle
      .tent
        .tent__flag
      .tree__left
      .tree__right
  .ribbon
    span WONDER & WANDER
  .sun
    each rayNum in [1, 2, 3, 4, 5, 6, 7, 8]
      .ray(class="ray" + rayNum)
  .curved-text
    each letter in ['B','O','U','L','D','E','R',',','C','O','L','O','R','A','D','O']
      span=letter
  .moon
  .cloud__small.left
  .cloud__small.right
  .cloud__big.left
  .cloud__big.right
  .stars
    each num in [1, 2, 3, 4, 5, 6, 7, 8]
      .star(class="star"+num)
        .cover.left
        .cover.right
.link-container
  span Original artwork by 
  a(href='https://dribbble.com/shots/4059798-Boulder-Badge' target='_blank') Patrick Moriarty

$font-size: 10px; // Change to scale

$white: #faf7e8;
$aqua: #86beb3;
$blue: #395a6d;
$bgcolor: #DCC48E;
// Original background color: #9fcc71
// Alternative background colors: #779CAB, #DCC48E

@mixin absolute-horizontal-center {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}

@mixin absolute-vertical-center {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

@mixin centerAbsolute() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin circle($radius) {
  height: $radius;
  width: $radius;
  border-radius: 100%;
}

@mixin isosceles-triangle($height, $width, $color) {
  border-bottom: solid $height $color;
  border-left: solid ($width/2) transparent;
  border-right: solid ($width/2) transparent;
}

@mixin isosceles-triangle-pointed-right($height, $width, $color) {
  border-left: solid $height $color;
  border-top: solid ($width/2) transparent;
  border-bottom: solid ($width/2) transparent;
}

@mixin isosceles-triangle-pointed-left($height, $width, $color) {
  border-right: solid $height $color;
  border-top: solid ($width/2) transparent;
  border-bottom: solid ($width/2) transparent;
}

@mixin right-triangle($height, $width, $color) {
  border-bottom: solid $height $color;
  border-right: solid $width transparent;
}

@mixin right-triangle-pointed-left($height, $width, $color) {
  border-bottom: solid $height $color;
  border-left: solid $width transparent;
}

// Styles to extend

.pseudo {
  content: '';
  position: absolute;
}

// ===============================

.star {
  height: 2.5em;
  width: 2.5em;
  background: $white;
  position: absolute;
  
  &:before, &:after { @extend .pseudo; }
  
  &:before, &:after, .cover {
    @include circle(2.5em);
    background: $blue;
    position: absolute;
  }
  
  &:before {
    top: -1.25em;
    left: -1.25em;
  }
  &:after {
    top: -1.25em;
    right: -1.25em;
  }
  .cover.left {
    left: -1.25em;
    bottom: -1.25em;
  }
  .cover.right {
    bottom: -1.25em;
    right: -1.25em;
  }
}

.cloud-small {
  // Bigger half circle
  width: 4em;
  height: 2em;
  border-radius: 4em 4em 0 0;
  position: absolute;
  background: $aqua;
  
  &:before { // Small half circle
    @extend .pseudo;
    background: $aqua;
    height: 1em;
    width: 2em;
    border-radius: 2em 2em 0 0;
    left: -1.2em;
    bottom: 0;
  }
}

.cloud-big {
  @extend .cloud-small;
  
  &:after {
    @extend .pseudo;
    width: 4.2em;
    height: 2.1em;
    border-radius: 4.2em 4.2em 0 0;
    background: $aqua;
    position: absolute;
    right: -3.1em;
    bottom: 0;
  }
}

body {
  font-size: $font-size;
  min-height: 97vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #DCC48E;
}

.patch-container {
  position: relative;
  z-index: -2; // So ribbons sides will show
  height: 50em;
  width: 46em;
  top: -1em;
}

.patch-base {
  height: 45.5em;
  width: 40em;
  //background: #395a6d;
  background: linear-gradient(180deg, $blue 55%, $aqua 55%);
  @include absolute-horizontal-center;
  bottom: 0;
  border-radius: 0 0 20em 20em; 
  border: 1.3em solid $white;
  border-top: none;
  box-sizing: border-box;
}

.patch-top {
  height: 4.5em;
  width: 40em;
  @include absolute-horizontal-center;
  top: 0;
  overflow: hidden;
  
  .patch-top-rounding {
    @include circle(110em); // Calculated as 104
    background: $blue;
    @include absolute-horizontal-center;
    top: 0;
    border: 1.3em solid $white; 
  }
}

.ribbon {
  width: 42.5em;
  height: 7.6em;
  position: relative; // So that :before and :after can be positioned behind
  top: 26.5em;
  left: (46em - 42.5em) / 2;
  border: (7.6em / 2) solid $blue;
  border-right-width: 1em;
  border-right-color: $white;
  border-left-width: 1em;
  border-left-color: $white;
  box-sizing: border-box;
  
  text-align: center;

  &:before, &:after {
    @extend .pseudo;
    border: 5em solid $white;
    top: -5em;
    z-index: -1;
  }
  
  &:before {
    border-left-width: 1.3em;
    border-left-color: transparent;
    left: -2.7em;
  }
  
  &:after {
    border-right-width: 1.3em;
    border-right-color: transparent;
    right: -2.7em;
  }
}

// Text in ribbon
.ribbon span {
  @include centerAbsolute;
  width: 100%;
  font-size: 3.2em;
  font-family: 'Montserrat', sans-serif;    
  font-weight: 900;
  color: $white;
}

.sun {
  font-size: 1.05em;
  position: absolute;
  height: 0;
  width: 0;
  //@include circle(4em);
  //border: 0.6em solid $white;
  box-sizing: border-box;
  
  @include absolute-horizontal-center;
  bottom: 8.2em + 1.7em;
  
  &:after {
    @extend .pseudo;
    @include circle(2.8em);
    border: 0.6em solid $white;
    @include centerAbsolute;
    background: $aqua;
  }
  
  .ray {
    width: 0.55em;
    background: $white;
    border-radius: 1.1em;
    @include centerAbsolute;
  }

  .ray1 { height: 7.6em; width: 0.6em; }
  .ray2 {
    transform: translate(-50%, -50%) rotate(22.5deg);
    height: 8em;
    top: -0.05em;
    right: -0.05em;
  }
  .ray3 {
    transform: translate(-50%, -50%) rotate(2*22.5deg);
    height: 9.7em;
    top: -0.25em;
    left: 0.28em;
  }
  .ray4 {
    transform: translate(-50%, -50%) rotate(3 * 22.5deg);
    height: 15.6em;
    top: -0.585em;
    left: 1.4em;
  }
  .ray5 {
    transform: translate(-50%, -50%) rotate(4 * 22.5deg);
    height: 18.6em;
  }
  .ray6 {
    transform: translate(-50%, -50%) rotate(5 * 22.5deg);
    height: 15.6em;
    top: -0.585em;
    left: -1.4em;
  }
  .ray7 {
    transform: translate(-50%, -50%) rotate(6 * 22.5deg);
    height: 9.7em;
    top: -0.25em;
    left: -0.28em;
  }
  .ray8 {
    transform: translate(-50%, -50%) rotate(7 * 22.5deg);
    height: 8em;
  }
}

// Referenced: https://codepen.io/oloman/pen/sHGAl
.curved-text {
  font-family: 'Montserrat', sans-serif;  
  font-weight: 800;
  color: $white;
  
  //width: 32em;
  width: 36em;
  //height: 16em;
  height: 18em;
  position: relative;
  margin: 0 auto;
  //top: 30.2em;
  top: 22.6em;
  
  span {
    //font-size: 2.6em;
    font-size: 2.8em;
    position: absolute;
    top: 0;
    height: 7.4em;
    width: 1em;
    margin-left: -0.5em;
    //line-height: 12.4em;
    line-height: 11.5em;
    transform-origin: top center;
    @include absolute-horizontal-center;
    text-align: center;
    //border: 1px solid black;
  }
  
  // Python: [66.6 - (x * 7.4) for x in range(9)]
  // (180 - 2*23.25) / 15 = 8.9
  // >>> [66.75 - (x * 8.9) for x in range(8)]
// [66.75, 57.85, 48.95, 40.05, 31.15, 22.25, 13.35, 4.45]
  span:nth-child(1) { transform: rotate(66.75deg); } // B
  span:nth-child(2) { transform: rotate(57.85deg); } // O
  span:nth-child(3) { transform: rotate(48.95deg); } // U
  span:nth-child(4) { transform: rotate(40.05deg); } // L
  span:nth-child(5) { transform: rotate(31.15deg); } // D
  span:nth-child(6) { transform: rotate(22.25deg); } // E
  span:nth-child(7) { transform: rotate(13.35deg); } // R
  span:nth-child(8) { transform: rotate(4.45deg); } //
  span:nth-child(9) { transform: rotate(-4.45deg); } // C
  span:nth-child(10) { transform: rotate(-13.35deg); } // O
  span:nth-child(11) { transform: rotate(-22.25deg); } // L
  span:nth-child(12) { transform: rotate(-31.15deg); } // O
  span:nth-child(13) { transform: rotate(-40.05deg); } // R
  span:nth-child(14) { transform: rotate(-48.95deg); } // A
  span:nth-child(15) { transform: rotate(-57.85deg); } // D
  span:nth-child(16) { transform: rotate(-66.75deg); } // O*/
  
}

.moon {
  @include circle(6.2em);
  background: $white;
  position: absolute;
  @include absolute-horizontal-center;
  top: 4.7em;
  
  &:before {
    @extend .pseudo;
    @include circle(3.6em);
    background: $blue;
    @include absolute-vertical-center;
    right: -0.6em;
  }
}

.cloud__small {
  @extend .cloud-small;
  top: 7.4em;
  
  &.left { left: 12.5em; }
  &.right {
    transform: scaleX(-1);
    right: 12.5em;
  }
}

.cloud__big {
  @extend .cloud-big;
  top: 12.8em;
  
  &.left { left: 7.3em; }
  &.right {
    transform: scaleX(-1);
    right: 7.3em;
  }
}

.mountains {
  //z-index: 5;
  height: 13em;
  width: 37.4;
  position: absolute;
  @include absolute-horizontal-center;
  top: 9em;
  
  .mountain__left, .mountain__right, .mountain__middle {
    position: absolute;
    bottom: 0;
  }
  
  .mountain__left {
    @include right-triangle-pointed-left(9.2em, 9.3em, $aqua);
    
    &:before {
      @extend .pseudo;
      @include right-triangle(9.2em, 9.3em, $white);
    }
  }
  
  .mountain__right {
    @include right-triangle(9.2em, 9.3em, $white);
    right: 0;
    
    &:before {
      @extend .pseudo;
      @include right-triangle-pointed-left(9.2em, 9.3em, $aqua);
      left: -9.3em;
    }
  }
  
  .mountain__middle {
    @include isosceles-triangle(13em, 26em, $aqua);
    @include absolute-horizontal-center;
    
    &:before {
      @extend .pseudo;
      @include right-triangle(13em, 13em, $white);
    }
  }
}

.tent {
  @include isosceles-triangle(4.5em, 9.6em, $blue);
  @include absolute-horizontal-center;
  bottom: 0;
  
  &:before, &:after {
    @extend .pseudo;
    bottom: -4.5em;
  }
  
  &:before {
    height: 1.7em;
    width: 1.7em;
    background: $aqua;
  }
  
  // Doorway
  &:after {
    @include absolute-horizontal-center;
    @include isosceles-triangle(1.7em, 3.4em, $white);
  }
  
  .tent__flag {
    @include isosceles-triangle-pointed-right(3em, 1.1em, $blue);
    position: absolute;
    bottom: 0;
  }
}

.tree__left, .tree__right {
  @include isosceles-triangle(1.4em, 3.2em, $blue);
  position: absolute;
  bottom: 0;
  
  &:before, &:after {
    @extend .pseudo;
    @include isosceles-triangle(1.4em, 3.2em, $blue);
    @include absolute-horizontal-center;
  }
  
  &:before { bottom: -0.15em; }
  &:after { bottom: 1.1em; }
}

.tree__left {
  right: 4.8em;
}

.tree__right {
    right: -4.8em - 3.2em;
}

// --- Stars ---
.stars {
  width: 32.5em;
  height: 16em;
  @include absolute-horizontal-center;
  top: 3em;
  
  .star1 { top: 2.7em; left: 0em; }
  .star2 { top: 0em; left: 9.3em; }
  .star3 { top: 0em; right: 9.3em; }
  .star4 { top: 2.7em; right: 0em; }
  .star5 { bottom: 0em; left: 0em; }
  .star6 { top: 8.2em; left: 9em; }
  .star7 { top: 8.2em; right: 9em; }
  .star8 { bottom: 0em; right: 0em; } 
}

.link-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: auto;
  padding: 0.75em;
  font-size: 1.5em;
  color: $blue;
  font-family: sans-serif;
  
  a {
    color: darken($aqua, 25);
    font-weight: 600;
    text-decoration: none;
    
    &:hover, &:focus {
      color: darken($aqua, 10);
    }
  }
}

// ¯\_(ツ)_/¯