{% extends "main.html" %}

<!-- Render hero under tabs -->
{% block tabs %}
{{ super() }}

<!-- Additional styles for landing page -->
<style>

  /* Application header should be static for the landing page */
  .md-header {
    position: initial;
  }

  /* Remove spacing, as we cannot hide it completely */
  .md-main__inner {
    margin: 0;
  }

  /* Hide main content for now */
  .md-content {
    display: none;
  }

  /* Gradient background + blob */
  .tx-container {
    padding-top: 1rem;
    background:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: white' /></svg>") no-repeat bottom,
            linear-gradient(
                    to bottom,
                    var(--md-primary-fg-color),
                    hsla(280deg, 67%, 55%, 1) 99%,
                    white 99%
            );
  }

  /* Set inverted text color on hero */
  .tx-hero {
    margin: 0 .8rem;
    color: var(--md-primary-bg-color);
  }

  /* Make main headline thicker */
  .tx-hero h1 {
    margin-bottom: 1rem;
    color: currentColor;
    font-weight: 700;
  }

  /* Ensure that blob doesn't overlap buttons */
  .tx-hero__content {
    padding-bottom: 6rem;
  }

  /* Adjust spacing of buttons and invert them */
  .tx-hero .md-button {
    margin-top: .5rem;
    margin-right: .5rem;
    color: var(--md-primary-bg-color);
  }

  /* Invert primary button */
  .tx-hero .md-button--primary {
    background-color: var(--md-primary-bg-color);
    color: hsla(280deg, 37%, 48%, 1);
    border-color: var(--md-primary-bg-color);
  }

  /* Invert hover and focus button states */
  .tx-hero .md-button:hover,
  .tx-hero .md-button:focus {
    background-color: var(--md-accent-fg-color);
    color: var(--md-default-bg-color);
    border-color: var(--md-accent-fg-color);
  }

  /* [mobile portrait -]: Adjust headline */
  @media screen and (max-width: 30em) {

    /* Make main headline smaller */
    .tx-hero h1 {
      font-size: 1.4rem;
    }
  }

  /* [tablet landscape +]: Display content and image next to each other */
  @media screen and (min-width: 60em) {

    /* Hide table of contents */
    .md-sidebar--secondary {
      display: none;
    }

    /* Use flex layout to align items */
    .tx-hero {
      display: flex;
      align-items: stretch;
    }

    /* Increase bottom spacing and set dimensions */
    .tx-hero__content {
      max-width: 19rem;
      margin-top: 3.5rem;
      padding-bottom: 14vw;
    }

    /* Swap with teaser and set dimensions */
    .tx-hero__image {
      width: 38rem;
      order: 1;
      transform: translateX(4rem);
    }
  }

  /* [screen +]: Adjust spacing */
  @media screen and (min-width: 76.25em) {

    /* Hide navigation */
    .md-sidebar--primary {
      display: none;
    }

    /* Ensure the image aligns with the repository information */
    .tx-hero__image {
      transform: translateX(8rem);
    }
  }

  .tx-hero .capitalize {
    font-weight: bold;
    font-size: 1.4em;
  }
</style>

<!-- Hero for landing page -->
<section class="tx-container">
  <div class="md-grid md-typeset">
    <div class="tx-hero">

      <!-- Hero image -->
      <div class="tx-hero__image">
        <img src="assets/logo.png" alt="" draggable="false">
      </div>

      <!-- Hero content -->
      <div class="tx-hero__content">
        <h1>Diun</h1>
        <p><span class="capitalize">D</span> ocker <span class="capitalize">I</span> mage <span class="capitalize">U</span> pdate <span class="capitalize">N</span> otifier</p>
        <p>{{ config.site_description }}.</p>
        <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
          Get started
        </a>
        <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button">
          Go to GitHub
        </a>
      </div>
    </div>
  </div>
</section>
{% endblock %}

<!-- Content -->
{% block content %}{% endblock %}

<!-- Application footer -->
{% block footer %}{% endblock %}