gardendocs.homepage.html

<div class="container">
  <div class="container_content">
    <h1>Welcome to the Gardenjs Demo</h1>
    <p>The demo shows the components of the <a href="https://gardenjs.org" target="_blank">Gardenjs documentation page</a>.</p>
    <p>The project is based on Svelte, but works same with Vue, React and other supported frameworks.</p>
    <p>Test Gardenjs and give us your feedback. We also appreciate your support. Thank you!</p>
    <h2>Further perspective:</h2>
    <p>Take a look at the <a href="https://github.com/gardenjs/docs" target="_blank">GitHub repository</a> to see how this demo was realized.</p>
  </div>
</div>

<style>
  .container {
    width: 90%;
    max-width: 1240px;
    background: var(--c-website-bg);
    margin: auto;
  }
  .container_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding: 2rem;
  }
  h1,
  h2,
  p {
    font-family:
      ui-monospace,
      Menlo,
      Monaco,
      'Cascadia Mono',
      'Segoe UI Mono',
      'Roboto Mono',
      'Oxygen Mono',
      'Ubuntu Monospace',
      'Source Code Pro',
      'Fira Mono',
      'Droid Sans Mono',
      Courier New,
      'monospace';
  }
  h1 {
    margin: 2rem 0 1.5rem;
    font-size: 2.25rem;
    color: hsl(185, 100%, 40%);
    text-align: center;
  }
  h2 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    text-align: center;
  }
  p {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
  }
</style>