<script setup lang="ts"></script>
<template>
  <header>
    <h1>My Herb Garden</h1>
    <nav>
      <RouterLink to="/gardening" class="link-local">Back to my gardening page</RouterLink>
    </nav>
  </header>
  <main>
    <p>
      Towards the end of the western portion of the garden, I've set up a small patch of common
      kitchen herbs so that we don't have to buy overpriced stuff from grocery stores.
    </p>
    <p>
      As you can see, there's more here than we can use ourselves, so if you're in the area and
      would like some, feel free to get your scissors and take a bit for whatever you're cooking.
      All I ask is that you please
      <strong
        >only take what you need, and refrain from pruning anything that looks like it's not very
        abundant</strong
      >. With your respectful cooperation, I can easily maintain these herbs for many people to use.
    </p>
    <div class="status-note">
      <p>
        Note: At this time, I'm still trying to get the following herbs established, so please don't
        take any of these:
      </p>
      <ul>
        <li>Mojito Mint</li>
        <li>Peppermint</li>
        <li>Chocolate Mint</li>
        <li>Chamomile</li>
        <li>Basil</li>
      </ul>
      <p>I also just pruned the Oregano, so please don't take too much of that.</p>
    </div>
    <p>
      The image below provides a quick reference guide on which herbs are which, but if you have any
      other questions,
      <RouterLink to="/contact" class="link-local">feel free to ask.</RouterLink>
    </p>
    <img src="@/assets/images/herb-guide.jpg" />

    <section>
      <h2>Basic Herb Usage Guide</h2>
      <p>
        Since it might be helpful, here's a brief guide on where you might want to use the herbs
        growing in the garden:
      </p>
      <ul>
        <li>
          <strong><u>Mint and Chamomile</u></strong> can be used in various cocktails, or sparingly
          in baked goods, or added to tea.
        </li>
        <li>
          <strong><u>Chives</u></strong> add a splash of green, and a fresh allium flavor, and can
          be chopped finely to garnish pretty much any dish, especially things like stews, potatoes,
          or meats.
        </li>
        <li>
          <strong><u>Oregano</u></strong> is a great all-purpose herb that you can add to pizzas,
          sauces, and basically any Italian, Mexican, or Mediterranean dish.
        </li>
        <li>
          <strong><u>Rosemary</u></strong> has a strong, evergreen flavor that pairs well with beef
          dishes and slow-cooked stews and soups.
        </li>
        <li>
          <strong><u>Thyme</u></strong
          >, like rosemary, is quite universal in its applications, but works especially well on
          chicken, lamb, and other lighter meats, or when infused in oil for salad dressings.
        </li>
        <li>
          <strong><u>Basil</u></strong
          >, with its distinct, almost spicy aroma, can be added directly to salads or chopped up
          and thrown into a tomato sauce or onto a pizza.
        </li>
      </ul>
    </section>
  </main>
</template>
<style scoped>
h1,
h2 {
  text-align: center;
}

nav {
  max-width: 50ch;
  margin: 1rem auto;
  padding: 0 0.5rem;
}

p {
  max-width: 50ch;
  margin: 1rem auto;
  padding: 0 0.5rem;
}

ul {
  max-width: 50ch;
  margin: 1rem auto;
  padding: 0 0.5rem;
  padding-left: 2rem;
}

img {
  margin: 1rem auto;
  max-width: calc(min(95%, 80ch));
  display: block;
}

.status-note {
  margin: 1rem auto;
  font-weight: bold;
  background-color: var(--background-color-2);
  border-radius: 0.5rem;
  border: 0.25rem solid var(--code-color);
  max-width: 50ch;
}
</style>
