<script>
  import Icon from './Icon.svelte';
</script>

<style lang="scss">
  @import 'sass/_variables';

  #footer {
    border-top: 1px solid $primary-color;
    background-color: $gray-color;
  }

  #right-column {
    padding: 2rem;
  }

  #footer .panel {
    border: 0px;
    border-radius: 0px;
    font-size: 20px !important;
    text-shadow: 2px 2px $gray-color-dark;
  }

</style>

<div id="footer" class="columns col-gapless">
  <div class="column col-8">
    <div class="panel">
      <div class="panel-header">
        This website and all content is Copyright &copy; Zed A. Shaw since 2020 and beyond.
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>

  <div class="column col-4" id="right-column">
    <a alt="Twitter @lzsthw" aria-label="Twitter @lzsthw" rel="external" href="https://twitter.com/lzsthw"><Icon size="48" name="twitter" light={true} /></a>
      <a alt="The git repository" aria-label="The git repository" rel="external" href="https://git.learnjsthehardway.com/zedshaw/buttons-computer"><Icon size="48" name="code"  light={true} /></a>
      <a alt="Read the blog" aria-label="Read the blog" rel="external" href="https://git.learnjsthehardway.com/zedshaw/buttons-computer"><Icon size="48" name="book-open"  light={true} /></a>
  </div>
</div>
