Prepare docs

- Homepage

docs/overwrites/home.html

@@ -1,16 +1,128 @@
 {% extends "main.html" %}
+{% block tabs %}
+{{ super() }}
+<style>
 
-<!-- Show tabs -->
-{% block tabs %}{{ super() }}{% endblock %}
-<!-- Disable Site-Navigation -->
-{% block site_nav %}{% endblock %}
+  .md-main {
+    flex-grow: 0
+  }
 
-<!-- Content -->
-{% block content %}
-ToDo: Create Home Page ;)
-{% endblock %}
+  .md-main__inner,
+  .md-footer__inner:not([hidden]) {
+    display: none;
+  }
+
+  .tx-container {
+    padding-top: .0rem;
+    background: linear-gradient(to bottom, var(--md-primary-fg-color), hsla(163, 15%, 53%) 100%);
+    flex: 1;
+  }
+
+  .tx-hero {
+    margin: 60px 2.8rem;
+    color: var(--md-primary-bg-color);
+    justify-content: center;
+  }
+
+  .tx-hero h1 {
+    margin-bottom: 1rem;
+    color: currentColor;
+    font-weight: 700
+  }
+
+  .tx-hero__content {
+    padding-bottom: 1rem;
+    margin: 0 auto;
+  }
+
+  .tx-hero__image{
+    width:17rem;
+    height:17rem;
+    order:1;
+    padding-right: 2.5rem;
+  }
+
+  .tx-hero .md-button {
+    margin-top: .5rem;
+    margin-right: .5rem;
+    color: var(--md-primary-bg-color)
+  }
+
+  .tx-hero .md-button--primary {
+    background-color: var(--md-primary-bg-color);
+    color: hsla(262deg, 47%, 55%, 1);
+    border-color: var(--md-primary-bg-color)
+  }
+
+  .tx-hero .md-button:focus,
+  .tx-hero .md-button:hover {
+    background-color: var(--md-accent-fg-color);
+    color: var(--md-default-bg-color);
+    border-color: var(--md-accent-fg-color)
+  }
+
+  @media screen and (max-width:30em) {
+    .tx-hero h1 {
+      font-size: 1.4rem
+    }
+  }
+
+  @media screen and (max-width:60em) {
+    .tx-hero {
+      margin: 50px 1.25rem;
+    }
+
+    .tx-hero__image {
+      width: 100%;
+      height: 15rem;
+      padding: 0 0 2.5rem;
+    }
+
+    .tx-hero__image img {
+      display: block;
+      margin: 0 auto;
+      height: 100%;
+    }
+  }
+
+  @media screen and (min-width:60em) {
+
+    .tx-hero {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .tx-hero__content {
+      max-width: 22rem;
+      margin-top: 3.5rem;
+      margin-bottom: 3.5rem;
+      margin-left: 1.0rem;
+      margin-right: 4.0rem;
+      align-items: center;
+    }
+  }
+</style>
+
+<div class="tx-container">
+  <div class="md-grid md-typeset">
+    <div class="tx-hero">
+      <div class="tx-hero__image">
+        <img src="assets/logo.svg" draggable="false">
+      </div>
+      <div class="tx-hero__content">
+        <h1>Contao ThemeManager Dokumentation</h1>
+        <p>Diese Dokumentation ist eine Sammlung von Ressourcen, die Ihnen den Einstieg in den Contao-Themenmanager erleichtern.</p>
+        <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
+          Jetzt lesen
+        </a>
+        <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button">
+          Zu GitHub
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 
-<!-- Footer -->
-{% block footer %}
-{{ super() }}
 {% endblock %}
+{% block content %}{% endblock %}