1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-24 07:30:12 +01:00

Updated anouncement bar

This commit is contained in:
squidfunk 2020-04-05 14:09:20 +02:00
parent 32f45d2060
commit 329d452c7f
5 changed files with 35 additions and 4 deletions

View File

@ -9,7 +9,7 @@ and is implemented using [lunr.js][2] which includes stemmers for the English
language by default, while stemmers for other languages are included with
[lunr-languages][3], both of which are integrated with this theme.
!!! tip "Add the [localsearch][4] plugin to support search from `file://`"
!!! tip "Make search work offline"
While search will not work for the `file://` protocol, as web workers and
the use of `XMLHTTPRequest` are both blocked by modern browsers for security

View File

@ -4,7 +4,7 @@
{% 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='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),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>
<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='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),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 (max-width:30em){.tx-hero h1{font-size:1.4rem}}@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">

View File

@ -24,5 +24,11 @@
<meta name="twitter:image" content="{{ image }}">
{% endblock %}
{% block announce %}
Material for MkDocs 5.0.0rc4
<style>.md-announce a{color:currentColor}.md-announce a:hover{color:#40bf79}.md-announce strong{display:inline-block}</style>
<a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">
Check out <strong>squidfunk</strong>'s latest blog post
<strong>
The Cognitive Complexity of CSS
</strong>
</a>
{% endblock %}

View File

@ -96,6 +96,15 @@
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) {

View File

@ -55,5 +55,21 @@
<!-- Announcement bar -->
{% block announce %}
Material for MkDocs 5.0.0rc4
<style>
.md-announce a {
color: currentColor;
}
.md-announce a:hover {
color: #40bf79;
}
.md-announce strong {
display: inline-block;
}
</style>
<a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">
Check out <strong>squidfunk</strong>'s latest blog post
<strong>
The Cognitive Complexity of CSS
</strong>
</a>
{% endblock %}