198 lines
5.3 KiB
HTML
198 lines
5.3 KiB
HTML
<!--
|
|
Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
of this software and associated documentation files (the "Software"), to
|
|
deal in the Software without restriction, including without limitation the
|
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
sell copies of the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in
|
|
all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
IN THE SOFTWARE.
|
|
-->
|
|
|
|
{% 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),
|
|
var(--md-accent-fg-color) 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);
|
|
}
|
|
}
|
|
</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/images/illustration.png"
|
|
alt=""
|
|
width="1659"
|
|
height="1200"
|
|
draggable="false"
|
|
>
|
|
</div>
|
|
|
|
<!-- Hero content -->
|
|
<div class="tx-hero__content">
|
|
<h1>Neo</h1>
|
|
<p>{{ config.site_description }}</p>
|
|
<a
|
|
href="{{ page.next_page.url | url }}"
|
|
title="{{ page.next_page.title | striptags }}"
|
|
class="md-button md-button--primary"
|
|
>
|
|
Quickguide
|
|
</a>
|
|
<a
|
|
href="{{ config.repo_url }}"
|
|
title="{{ lang.t('source.link.title') }}"
|
|
class="md-button"
|
|
>
|
|
Git-Repo anzeigen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
<!-- Content -->
|
|
{% block content %}{% endblock %}
|
|
|
|
<!-- Application footer -->
|
|
{% block footer %}{% endblock %}
|