@import 'node_modules/bulma/bulma';
@import 'node_modules/tippy.js/dist/tippy';
@import 'node_modules/tippy.js/themes/light-border';

:root {
  touch-action: manipulation;
  font-variant-numeric: tabular-nums;
  scroll-padding-top: $navbar-height;
}

body {
  $font-family: Helvetica, Arial, '-apple-system', 'BlinkMacSystemFont', system-ui, sans-serif;
  $font-family-tc: 'PingFang TC', 'Apple LiGothic Medium', 'Microsoft JhengHei', 'WenQuanYi Zen Hei', $font-family;

  @at-root :root:lang(zh-cn) & {
    font-family: 'Noto Sans SC', 'PingFang SC', $font-family;
  }

  @at-root :root:lang(zh-tw) & {
    font-family: 'Noto Sans TC', $font-family-tc;
  }

  @at-root :root:lang(zh-hk) & {
    font-family: 'Noto Sans HK', $font-family-tc;
  }

  > main {
    min-height: 100vh;
  }
}

main > .container {
  @include from($tablet) {
    max-width: $tablet !important;
  }
}

.content {
  $margins: h1 1em, h2 1.1428em, h3 1.3333em, h4 1em, h5 1em, h6 1em;
  @each $margin in $margins {
    #{nth($margin, 1)}:not(:first-child) {
      scroll-margin-top: nth($margin, 2) - 0.1em;
    }
  }
  table.table {
    &.is-align-middle td {
      vertical-align: middle;
    }
    &.is-no-wrap {
      white-space: nowrap;
    }
  }

  figure {
    margin-right: 0;
    margin-left: 0;
  }

  .card-image img {
    width: 100%;
  }

  dl.metadata {
    display: grid;
    overflow: hidden;

    word-break: break-all;

    grid-template-columns: max-content auto;

    dt {
      padding-right: 1em;

      text-align: end;

      grid-column-start: 1;
    }

    dd {
      margin-left: 0;

      grid-column-start: 2;
    }

    span {
      display: inline-block;
    }
  }

  .box {
    word-wrap: break-word;
  }

  li > ul:last-child,
  li > ol:last-child {
    margin-top: 0.25em;
  }
}

.content.archives {
  span.description {
    user-select: none;

    color: $grey-light;
  }
  p:hover span.description {
    color: $black;
  }
}