wip3

overrides/landing.html

@@ -0,0 +1,74 @@
+{% extends "base.html" %}
+
+{% block content %}
+<style>
+  .tx-hero {
+    margin: -2.4rem -1.6rem 2.4rem;
+    padding: 3.5rem 1.6rem;
+    /* text-align: center; */
+    /* background: linear-gradient(135deg, #00695c 0%, #00897b 50%, #009688 100%); */
+    /* color: #fff; */
+  }
+  /* [data-md-color-scheme="slate"] .tx-hero {
+    background: linear-gradient(135deg, #004d40 0%, #00695c 50%, #00796b 100%);
+  } */
+  .tx-hero h1 {
+    margin: 0 0 0.5rem;
+    font-size: 3rem;
+    font-weight: 700;
+    /* color: #fff; */
+    line-height: 1.1;
+  }
+  .tx-hero p {
+    /* margin: 0 auto 2rem; */
+    max-width: 40rem;
+    font-size: 1.15rem;
+    /* color: rgba(255, 255, 255, 0.85); */
+    line-height: 1.5;
+  }
+  .tx-hero__buttons {
+    display: flex;
+    gap: 1rem;
+    /* justify-content: center; */
+    /* flex-wrap: wrap; */
+  }
+  /* .tx-hero .md-button {
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+  .tx-hero .md-button:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+    border-color: #fff;
+  }
+  .tx-hero .md-button--primary {
+    background-color: #fff;
+    color: var(--md-accent-fg-color);
+    border-color: #fff;
+  }
+  .tx-hero .md-button--primary:hover {
+    background-color: rgba(255, 255, 255, 0.9);
+  }*/
+  .tx-hero h1 {
+    display: none;
+  }
+  [data-md-color-scheme=slate] {
+
+  }
+</style>
+
+<div class="tx-hero">
+  <div class="tx-hero__inner">
+    <h1>{{ page.meta.hero.title }}</h1>
+    <p>{{ page.meta.hero.subtitle }}</p>
+    <div class="tx-hero__buttons">
+      {% for btn in page.meta.hero.buttons %}
+      <a href="{{ btn.url }}" class="md-button{% if btn.primary %} md-button--primary{% endif %}">
+        {{ btn.text }}
+      </a>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+{{ super() }}
+{% endblock %}