{% extends "main.html" %}
{% block extrahead %}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<!-- Determine title -->
{% set title = config.site_name %}
{% if page and page.title and not page.is_homepage %}
{% set title = config.site_name ~ " - " ~ page.title | striptags %}
{% endif %}

<!-- The image needs to have an absolute URL -->
{% set image = config.site_url ~ 'assets/logo.png' %}

<!-- Open graph meta tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ config.site_description }}" />
<meta property="og:url" content="{{ page.canonical_url }}" />
<meta property="og:image" content="{{ image }}" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1080" />
<meta property="og:image:height" content="568" />

<!-- Twitter meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@laszlocph" />
<meta name="twitter:creator" content="@laszlocph" />
<meta name="twitter:title" content="{{ title }}" />
<meta name="twitter:description" content="{{ config.site_description }}" />
<meta name="twitter:image" content="{{ image }}" />

{% endblock %}

{% block htmltitle %}
<title>{{ config.site_name }}</title>
{% endblock %}

{% block tabs %}
{{ super() }}

<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;
    }

    /* Hide table of contents */
    @media screen and (min-width: 60em) {
        .md-sidebar--secondary {
            display: none;
        }
    }

    /* Hide navigation */
    @media screen and (min-width: 76.25em) {
        .md-sidebar--primary {
            display: none;
        }
    }
</style>

<main class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 xl:mt-28">
    <div class="text-center">
        <h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
            One chart to rule them all
        </h2>
        <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
            A generic Helm chart for your application deployments - Because no-one can remember the Kubernetes yaml syntax
        </p>
    </div>
</main>

<div class="container mx-auto">
    <h2></h2>
    <h2> <br/> </h2>
</div>
{% endblock %}
{% block content %}{% endblock %}