<!-- Social Buttons for GeorgeSpake.com homepage -->

<div class="gs-social-cards-container">
    <div class="outer-grid-container">
      <a class="social-card follow" href="https://twitter.com/georgespake">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon">
                    <svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><title>Twitter_Logo_White</title><rect class="cls-1" width="400" height="400"/><path class="cls-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/></svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="gs-social-button-text">
                    <p href="#">Follow</p>
                </div>
            </div>
        </a>
      <a class="social-card connect" href="https://www.linkedin.com/in/georgespake">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>


                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>
                
                <div class="gs-social-button-text">
                    <p href="#">Connect</p>
                </div>
            </div>
        </a>
      <a class="social-card contact" href="https://georgespake.com/contact">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon">
                    <svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="m512 203.06v-.045c0-.427-.024-.85-.059-1.271-.01-.115-.025-.229-.037-.344-.036-.33-.082-.657-.139-.981-.021-.122-.042-.244-.066-.365-.08-.395-.171-.787-.282-1.172-.011-.038-.02-.077-.031-.115-.117-.394-.253-.781-.401-1.163-.056-.146-.118-.289-.179-.434-.109-.258-.226-.513-.35-.764-.072-.146-.141-.293-.217-.437-.187-.351-.386-.695-.6-1.031-.08-.125-.168-.245-.252-.368-.167-.245-.34-.485-.521-.719-.097-.125-.194-.249-.295-.372-.263-.319-.535-.631-.825-.928-.023-.023-.045-.047-.068-.07-.31-.315-.64-.612-.979-.9-.042-.036-.078-.076-.121-.111l-25.578-21.225v-65.229c0-19.299-15.701-35-35-35h-85.776l-69.1-57.345c-20.354-16.888-49.896-16.888-70.248 0l-69.1 57.344h-85.776c-19.299 0-35 15.701-35 35v65.229l-25.579 21.228c-.042.035-.079.075-.121.111-.339.288-.669.585-.979.9-.023.023-.045.047-.068.07-.289.297-.562.609-.825.928-.101.122-.198.247-.295.372-.181.235-.354.475-.521.719-.084.123-.172.243-.252.368-.214.335-.413.679-.6 1.031-.077.144-.146.291-.217.437-.124.251-.24.506-.35.764-.061.144-.123.288-.179.434-.148.382-.285.768-.401 1.163-.011.038-.02.076-.031.115-.111.385-.202.777-.282 1.172-.024.122-.045.243-.066.365-.057.324-.103.651-.139.981-.012.115-.027.229-.037.344-.034.419-.058.842-.058 1.269v.045.008 253.927c0 15.718 6.638 29.906 17.246 39.939.301.301.603.599.925.87 9.757 8.814 22.676 14.19 36.829 14.19h402c14.154 0 27.074-5.377 36.832-14.193.319-.27.619-.565.918-.864 10.61-10.033 17.25-24.223 17.25-39.943v-253.926c0-.002 0-.005 0-.008zm-446-103.045h380c2.757 0 5 2.243 5 5v116.682l-8.488 7.044-170.546 141.533c-9.251 7.677-22.681 7.676-31.932 0l-170.546-141.532-8.488-7.045v-116.682c0-2.757 2.243-5 5-5zm-36 356.98v-222.04l6.452 5.355c.004.003.008.007.012.01l146.469 121.551-151.397 103.752c-.993-2.69-1.536-5.597-1.536-8.628zm176.937-75.204 13.939 11.568c20.352 16.89 49.896 16.889 70.248 0l13.939-11.568 146.22 100.204h-390.567zm122.13-19.919 146.468-121.552c.004-.003.008-.007.012-.01l6.452-5.355v222.04c0 3.031-.543 5.938-1.536 8.628zm-89.033-326.114c9.251-7.677 22.681-7.677 31.932 0l41.281 34.258h-114.494z"/>
                        <path d="m131.5 164.995c0 8.284 6.716 15 15 15h142c8.284 0 15-6.716 15-15s-6.716-15-15-15h-142c-8.284 0-15 6.716-15 15z"/>
                        <path d="m146.5 239.995h219c6.988 0 12.843-4.786 14.509-11.254.309-1.2.491-2.45.491-3.746 0-8.284-6.716-15-15-15h-219c-8.284 0-15 6.716-15 15 0 1.296.182 2.547.491 3.746 1.666 6.469 7.521 11.254 14.509 11.254z"/>
                    </svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="gs-social-button-text">
                    <p href="#">Contact</p>
                </div>
            </div>
        </a>
    </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Oswald);

body {
  margin: 0;
  background: #1D2557;
}

.gs-social-cards-container {
  $primary-color: #2f3c89;
  $connect-color: #017bb6;
  $follow-color: #1da1f2;

  padding: 3em 0;
  width: 100%;
  background: #1D2557;
  background: -webkit-linear-gradient(top left, #1D2557 0%, #53e3a6 100%);
  background: -moz-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: -o-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: linear-gradient(to bottom right, #1D2557 0%, #5399e3 100%);

  .outer-grid-container {
    display: grid;
    grid-template-columns: [column] 1fr;
    grid-template-rows: [row] 100px;
    width: 90%;
    max-width: 450px;
    row-gap: 2em;
    margin: auto;
    min-width: 300px;
  }

  .social-card {
    text-decoration: none;
    
    .social-card-grid-container {
      display: grid;
      grid-template-columns: [column] 58px [column] 58px [column] auto [column] 58px [column] 68px;
      grid-template-rows: [row] 100px;
      min-width: 275px;
      cursor: pointer;
    }

    .social-card-bg-fill, .gs-social-button-text, .left-hex-bg, .icon-hex-bg, .icon, .right-hex-bg {
      grid-row: row 1;
    }

    .left-hex-bg, .icon-hex-bg, .right-hex-bg, .icon {
      height: 100px;

      svg {
        fill: #fff;
        height: 100%;
        transition-duration: .2s;
      }
    }

    .social-card-bg-fill {
      background: #fff;
      grid-column-start: column 2;
      grid-column-end: column -1;
      transition-duration: .2s;
    }

    .gs-social-button-text {
      grid-column-start: column 3;
      grid-column-end: column -1;
      text-align: center;

      p {
        font-family: Oswald;
        line-height: 100px;
        margin: 0;
        transition-duration: .2s;
        padding: 0 10px;
        color: $primary-color;
      }
    }

    .left-hex-bg {
      grid-column-start: column 1;
      grid-column-end: column 3;
    }

    .icon-hex-bg {
      grid-column-start: column 1;
      grid-column-end: column 3;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        margin-left: -2px;
        height: 85%;
        fill: $primary-color;
      }
    }

    .icon {
      grid-column-start: column 1;
      grid-column-end: column 3;
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        width: 40%;
      }
    }

    &.follow {
      .icon-hex-bg svg {
        fill: $follow-color;
      }
      .icon svg {
        width:50%;
      }
      .gs-social-button-text p {
        color: $follow-color;
      }
    }

    &.connect {
      .icon-hex-bg svg {
        fill: $connect-color;
      }
      .gs-social-button-text p {
        color: $connect-color;
      }
    }

    .right-hex-bg {
      grid-column: column 4 / span 2;
    }

    &:hover {
      .icon-hex-bg svg {
        height: 100%;
        transition-duration: .2s;
      }


      .icon svg {
        transform: rotate(7deg);
        transition-duration: .2s;
      }

      .right-hex-bg svg {
        padding-left: 10px;
        transition-duration: .2s;
      }

      .gs-social-button-text p {
        margin-left: 10px;
        transition-duration: .2s;
      }
      
      .social-card-bg-fill {
        -webkit-box-shadow: 0px 10px 30px -15px #060606;
        -moz-box-shadow: 0px 10px 30px -15px #060606;
        box-shadow: 0px 10px 30px -15px #060606;
        transition-duration: .2s;
      }
    }
  }

  @media screen and (max-width: 350px) {
    .social-card {
      .gs-social-button-text p {
        font-size: 2em;
        transition-duration: .2s;
      }

      .icon-hex-bg svg {
        margin-left: -4px;
      }
    }
  }

  @media screen and (min-width: 500px) {
    .gs-social-button-text p {
      font-size: 4em;
    }
  }
  
  @media screen and (max-width: 500px) {
    .gs-social-button-text p {
      font-size: 3em;
    }
  }
  @media screen and (max-width: 420px) {
    .gs-social-button-text p {
      font-size: 2.5em;
      transition-duration: .2s;
    }
  }

  @media screen and (max-width: 400px) {
    .outer-grid-container {
      grid-template-rows: [row] 80px;
    }

    .social-card {
      .social-card-grid-container {
        display: grid;
        grid-template-columns: [column] 48px [column] 48px [column] auto [column] 48px [column] 58px;
        grid-template-rows: [row] 80px;
      }

      .gs-social-button-text p {
        line-height: 80px;
        transition-duration: .2s;
      }

      .left-hex-bg, .right-hex-bg, .icon-hex-bg, .icon {
        height: 80px;
      }

      .icon-hex-bg svg {
        margin-left: -4px;
        height: 85%;
        transition-duration: .2s;
      }
    }
  }
}