mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-23 23:21:00 +01:00
Redesigned landing page
This commit is contained in:
squidfunk
parent
05114b9f2a
commit
1a88966e26
BIN
docs/assets/images/illustration.png
Normal file
BIN
docs/assets/images/illustration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 291 KiB |
@ -1,49 +1,4 @@
|
||||
---
|
||||
template: overrides/home.html
|
||||
title: Material for MkDocs
|
||||
---
|
||||
|
||||
# Material <small>for MkDocs</small>
|
||||
|
||||
## Create beautiful project documentation
|
||||
|
||||
Material is a theme for [MkDocs][1], an excellent static site generator geared
|
||||
towards project documentation. It is built using Google's [Material Design][2]
|
||||
guidelines.
|
||||
|
||||
[](assets/images/material.png)
|
||||
|
||||
[1]: https://www.mkdocs.org
|
||||
[2]: https://material.io/design/
|
||||
|
||||
## Quick start
|
||||
|
||||
Install the latest version of Material with `pip`:
|
||||
|
||||
``` sh
|
||||
pip install mkdocs-material
|
||||
```
|
||||
|
||||
Add the following line to `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
theme:
|
||||
name: material
|
||||
```
|
||||
|
||||
## What to expect
|
||||
|
||||
* Responsive design and fluid layout for all kinds of screens and devices,
|
||||
designed to serve your project documentation in a user-friendly way in 41
|
||||
languages with optimal readability.
|
||||
|
||||
* Easily customizable primary and accent color, fonts, favicon and logo;
|
||||
straight forward localization through theme extension; integrated with Google
|
||||
Analytics, Disqus and GitHub.
|
||||
|
||||
* Well-designed search interface accessible through hotkeys (<kbd>F</kbd> or
|
||||
<kbd>S</kbd>), intelligent grouping of search results, search term
|
||||
highlighting and lazy loading.
|
||||
|
||||
For detailed instructions see the [getting started guide][3].
|
||||
|
||||
[3]: getting-started.md
|
||||
|
||||
@ -1,7 +1,33 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% extends "base.html" %}
|
||||
{% block announce %}
|
||||
Material for MkDocs 5.0.0rc3
|
||||
{% extends "overrides/main.html" %}
|
||||
{% block tabs %}
|
||||
{{ super() }}
|
||||
<style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}.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='M1123.97,2.105c0.222,0 0,256.95 0,256.95l-1125.2,0l0,-48.177c0,0 15.954,4.645 54.489,4.645c116.177,0 196.902,-91.837 324.776,-91.837c120.62,0 113.834,45.468 254.071,45.468c140.237,0 214.262,-167.049 491.868,-167.049Z' style='fill: white' /></svg>") no-repeat bottom,linear-gradient(to bottom,var(--md-primary-fg-color),hsla(160deg,47%,55%,1) 99%,#fff 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}.tx-hero__content{padding-bottom:6rem}.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(193deg,37%,48%,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 (min-width:60em){.md-sidebar--secondary{display:none}.tx-hero{display:flex;align-items:stretch;justify-items:space-between}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{width:38rem;order:1;transform:translateX(4rem)}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}.tx-hero__image{transform:translateX(8rem)}}</style>
|
||||
<section class="tx-container">
|
||||
<div class="md-grid md-typeset">
|
||||
<div class="tx-hero">
|
||||
<div class="tx-hero__image">
|
||||
<img src="assets/images/illustration.png">
|
||||
</div>
|
||||
<div class="tx-hero__content">
|
||||
<h1>Beautiful and functional project documentation</h1>
|
||||
<p>
|
||||
Create a static site to host the documentation of your Open Source
|
||||
or commercial project in a matter of minutes – hackable,
|
||||
mobile-ready, translated into 41 languages, client-side search.
|
||||
</p>
|
||||
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
|
||||
Get started
|
||||
</a>
|
||||
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button">
|
||||
Go to GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
{% block footer %}{% endblock %}
|
||||
|
||||
7
material/overrides/main.html
Normal file
7
material/overrides/main.html
Normal file
@ -0,0 +1,7 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% extends "base.html" %}
|
||||
{% block announce %}
|
||||
Material for MkDocs 5.0.0rc3
|
||||
{% endblock %}
|
||||
@ -20,8 +20,167 @@
|
||||
IN THE SOFTWARE.
|
||||
-->
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% extends "overrides/main.html" %}
|
||||
|
||||
{% block announce %}
|
||||
Material for MkDocs 5.0.0rc3
|
||||
<!-- Render hero under tabs -->
|
||||
{% 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;
|
||||
}
|
||||
|
||||
/* 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='M1123.97,2.105c0.222,0 0,256.95 0,256.95l-1125.2,0l0,-48.177c0,0 15.954,4.645 54.489,4.645c116.177,0 196.902,-91.837 324.776,-91.837c120.62,0 113.834,45.468 254.071,45.468c140.237,0 214.262,-167.049 491.868,-167.049Z' style='fill: white' /></svg>") no-repeat bottom,
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--md-primary-fg-color),
|
||||
hsla(160deg, 47%, 55%, 1) 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(193deg, 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);
|
||||
}
|
||||
|
||||
/* [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;
|
||||
justify-items: space-between;
|
||||
}
|
||||
|
||||
/* 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">
|
||||
</div>
|
||||
|
||||
<!-- Hero content -->
|
||||
<div class="tx-hero__content">
|
||||
<h1>Beautiful and functional project documentation</h1>
|
||||
<p>
|
||||
Create a static site to host the documentation of your Open Source
|
||||
or commercial project in a matter of minutes – hackable,
|
||||
mobile-ready, translated into 41 languages, client-side search.
|
||||
</p>
|
||||
<a
|
||||
href="{{ page.next_page.url | url }}"
|
||||
title="{{ page.next_page.title | striptags }}"
|
||||
class="md-button md-button--primary"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a
|
||||
href="{{ config.repo_url }}"
|
||||
title="{{ lang.t('source.link.title') }}"
|
||||
class="md-button"
|
||||
>
|
||||
Go to GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
<!-- Content -->
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<!-- Application footer -->
|
||||
{% block footer %}{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user