Animation Library

<select id="select">
    <option value="all">ALL</option>
    <option value="value01">VALUE01</option>
    <option value="value02">VALUE02</option>
    <option value="value03">VALUE03</option>
    <option value="value04">VALUE04</option>
</select>

export const getStaticPaths: GetStaticPaths = async () => {
  const allPosts = await getAllPostsWithSlug()

  return {
    paths: allPosts.edges.map(({ node }) => `/posts/${node.slug}`) || [],
    fallback: true,
  }
}

.c-title-lv1 {
    color: $c-primary;
    text-align: center;
    font-size: 2.4rem;
    line-height: calc(40 / 24);
    font-weight: bold;
    background-color: $c-lightGreen;

    @include breakpoint(pc) {
        font-size: 2.8rem;
        line-height: calc(48 / 28);
    }
}