overrides/home.en.html

{#-
This file was automatically generated - do not edit
-#}
{% extends "main.en.html" %}
{% 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;
    }

    @media screen and (min-width:60em) {
        .md-sidebar--secondary {
            display: none
        }
        .mdx-hero {
            display: flex;
            align-items: stretch
        }
        .mdx-hero__content {
            max-width: 40rem;
            margin-top: 3.5rem;
            padding-bottom: 14vw
        }
        .mdx-hero__image {
            width: 30rem;
            order: 1;
            margin-top: 3.5rem;
            transform: translateX(4rem)
        }
    }

    @media screen and (min-width:76.25em) {
        .md-sidebar--primary {
            display: none
        }
        .mdx-hero__image {
            transform: translateX(8rem);
            margin-top: 3.5rem;
        }
    }

    .mdx-hero__content a, .mdx-hero__content a:focus, .mdx-hero__content a:hover  {
        color: var(--md-primary-bg-color)
    }

    .mdx-hero .md-button {
        margin-top: .5rem;
        margin-right: .5rem;
        color: var(--md-primary-bg-color)
    }

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

    .md-button:focus,
    .mdx-hero .md-button:hover {
        background-color: var(--md-accent-fg-color);
        color: var(--md-default-bg-color);
        border-color: var(--md-accent-fg-color)
    }

</style>
<section class="mdx-container">
    <div class="md-grid md-typeset">
        <div class="mdx-hero">
            <div class="mdx-hero__image">
                <img src="../../assets/illustration.png" alt="" draggable="false">
            </div>
            <div class="mdx-hero__content">
                <h1>New possibilities!</h1>
                <p>{{ config.hot_news_en }} </p>
                <a href="../../history" class="md-button">
                    Full history changes
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}