//App.vue
<template>
  <div id="app">
    <nav class="navbar">
      <a href="/" class="navbar__header">
        <img src="./assets/logo.png" alt="CoinCap" class="navbar__logo">
        <span>CoinCap Display</span>
      </a>
    </nav>

    <CurrencyTable/>
  </div>
</template>

<script>
import CurrencyTable from "./components/CurrencyTable.vue";

export default {
  name: "app",
  components: {
    CurrencyTable
  }
};
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Raleway:700|Roboto&display=swap');

$color-primary-900: hsl(159, 70, 19);
$color-primary-700: hsl(159, 70, 39);
$color-primary-500: hsl(159, 70, 62);
$color-primary-300: hsl(159, 70, 77);
$color-primary-100: hsl(159, 70, 92);

$color-text: #333;

body {
  font-family: 'Roboto', Arial, sans-serif;
  max-width: 1200px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  min-height: 100vh;
  margin: auto;
  color: $color-text;
}

.navbar {
  border-radius: 0 0 5px 5px;
  background: $color-primary-500;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);

  &__logo {
    display: inline-block;
    max-height: 50px;
    padding: 1rem;
    padding-left: 3rem;
    vertical-align: middle;
  }

  &__header {
    text-decoration: none;
    color: $color-text;
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 50px;
    padding: 1rem 0;
    vertical-align: middle;
  }
}

</style>


//CurrencyTable.vue
<template>
    <div class="table">
        <div class="table__row table__row_header">
            <div class="table__cell table__cell_header">Name</div>
            <div class="table__cell table__cell_header">Price</div>
            <div class="table__cell table__cell_header">Market Cap</div>
            <div class="table__cell table__cell_header">Volume (24h)</div>
        </div>

        <ul class="table__body">
            <li class="table__row">
                <div class="table__cell table__cell_body">Bitcoin</div>
                <div class="table__cell table__cell_body">$9,716</div>
                <div class="table__cell table__cell_body">$173.24b</div>
                <div class="table__cell table__cell_body">$6.55b</div>
            </li>
            <li class="table__row">
                <div class="table__cell table__cell_body">Ethereum</div>
                <div class="table__cell table__cell_body">$206.90</div>
                <div class="table__cell table__cell_body">$22.14b</div>
                <div class="table__cell table__cell_body">$2.31b</div>
            </li>
            <li class="table__row">
                <div class="table__cell table__cell_body">Ethereum</div>
                <div class="table__cell table__cell_body">$206.90</div>
                <div class="table__cell table__cell_body">$22.14b</div>
                <div class="table__cell table__cell_body">$2.31b</div>
            </li>
            <li class="table__row">
                <div class="table__cell table__cell_body">Ethereum</div>
                <div class="table__cell table__cell_body">$206.90</div>
                <div class="table__cell table__cell_body">$22.14b</div>
                <div class="table__cell table__cell_body">$2.31b</div>
            </li>
            <li class="table__row">
                <div class="table__cell table__cell_body">Ethereum</div>
                <div class="table__cell table__cell_body">$206.90</div>
                <div class="table__cell table__cell_body">$22.14b</div>
                <div class="table__cell table__cell_body">$2.31b</div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
$color-primary-900: hsl(159, 70, 19);
$color-primary-300: hsl(159, 70, 77);
$color-primary-100: hsl(159, 70, 92);

.table {
    max-width: 100%;
    width: 60%;
    margin: 10vh auto 0;

    &__body {
        list-style-type: none;
        padding: 0;
        max-height: 25vh;
        overflow: hidden;
        overflow-y: scroll;
        padding: 10px;
        padding-right: 5px;

        &::-webkit-scrollbar {
            width: 5px;
        }

        &:hover::-webkit-scrollbar-thumb {
            background: rgba($color-primary-900, 0.3);
            border-radius: 5px;
        }
    }

    &__row {
        display: flex;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 0.25rem;

        &_header {
            background: $color-primary-300;
        }

        &:not(&_header):hover {
            background: $color-primary-100;
        }

        &:not(:last-of-type) {
            margin-bottom: 1rem;
        }
    }

    &__cell {
        flex-basis: 25%;
        padding: 0.5rem;

        &_header {
            font-family: 'Raleway', sans-serif;
            font-weight: bold;
        }
    }
}

@media (max-width: 767px) {
    .table {
        &__cell {
            flex-basis: 50%;

            &:nth-of-type(n+3) {
                display: none;
            }
        }
    }
}
</style>