home.html

---
layout: default
title: Home 🏡
---

<style>
  .page-content {
    max-width: initial;
  }
</style>

<div class="grid-container">
  <section class="Intro">
    <p class="fully-activated hide">
      You're all done with setting up. We'll send you an edition at the
      beginning of next month. If you need to change anything then look in the
      menu.
    </p>
    <section id="getting_started" class="hide">
      <h2>Getting Started</h2>

      <div class="onboarding-flow">
        <p>
          Before we can send you anything, we need two things from yo<a
            href="payment-beta"
            class="stealth-link"
            >u</a
          >:
        </p>

        <ul>
          <li>
            <strong>First this:</strong>

            <div>
              <span class="check pocket_access">❓</span>A connection to your
              Pocket account
            </div>
            <div class="auth-with-pocket">
              <a href="" class="button disabled" id="pocket-auth-link">
                Authenticate with
                <img
                  alt="pocket"
                  src="https://getpocket.com/i/v3/pocket_logo.png"
                />
              </a>
            </div>
          </li>

          <li>
            <strong>Then this:</strong>

            <div>
              <span class="check payment">❓</span>Some payment and address
              details

              <div class="subscribe-with-stripe">
                <a href="payment" class="button disabled" id="stripe-link">
                  Subscribe with
                  <img
                    alt="Stripe"
                    src="./img/Stripe logo - slate_sm.png"
                    style="transform: translateY(0.2em) scale(1.8)"
                  />
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <section id="regular-home" class="hide">
      <p>Welcome back to Walden Pond!</p>
      <p>
        I'd love to hear about how this is all going for you! Give
        <a
          href="mailto:ben@waldenpond.press?cc=user@email.com&subject=I had an idea!&body=What about more unicorns?"
          >me</a
        >
        suggestions and I'll do my best to make them happen.
      </p>
    </section>
  </section>

  <section id="history-data" class="History">
    <div id="articles-container" class="articles-container">
      {% include pocket_article_template.html %}
    </div>
  </section>

  <section id="editorial-control" class="hide Editorial">
    <h1>Editorial Controls</h1>
    {% include editorial.html %}
  </section>

  <section id="about-me" class="hide About-me">
    <h1>About Me</h1>
    {% include about_me.html %}
  </section>
</div>

{% include base-scripts.md %}

<script src="js/home.js"></script>
<script src="js/finalise-pocket.js"></script>
<script src="js/pocket.js"></script>
<script src="js/editorial.js"></script>