Improve docs header style (#2516)
* refactor: pattern to separate file causes a lot of lag and also probably isn't the best to inline since we have scss preprocessing * fix: escape quotes properly * feat: improve header styles
This commit is contained in:
FireIsGood
GitHub
parent
0056851e31
commit
606c2be425
|
|
@ -1,3 +1,5 @@
|
|||
@import "pattern";
|
||||
|
||||
html, body {
|
||||
font-size: 16px;
|
||||
height: 100%;
|
||||
|
|
@ -8,7 +10,7 @@ body {
|
|||
line-height: 1.6;
|
||||
// from http://www.heropatterns.com
|
||||
background-color: #191919;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234b4b4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
background-image: $grid-pattern;
|
||||
|
||||
color: $foreground;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,15 @@ header {
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin-right: 2rem;
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
display: flex;
|
||||
gap: 1ch 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
|
|
@ -27,7 +34,8 @@ header {
|
|||
|
||||
.header__logo {
|
||||
// to force menu links to be on a line below
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
header {
|
||||
padding: 2rem 3rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
column-gap: 2rem;
|
||||
|
||||
// Container is reused elsewhere, so this must be declared here
|
||||
nav {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 1rem 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -7,9 +22,11 @@ header {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.container {
|
||||
@media only screen and (max-width: 1000px) {
|
||||
header {
|
||||
max-width: 90%;
|
||||
margin-inline: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +39,6 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem 3rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
$grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234b4b4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
.search-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
|
|
@ -45,3 +47,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.search-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,19 +7,20 @@
|
|||
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
|
||||
<meta name="author" content="{{ config.extra.author }}">
|
||||
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
|
||||
<link rel="stylesheet" href="{{ get_url(path="site.css") }}"/>
|
||||
<link rel="icon" href="{{ get_url(path="favicon.ico") }}">
|
||||
<link rel="stylesheet" href="{{ get_url(path='site.css') }}">
|
||||
<link rel="icon" href="{{ get_url(path='favicon.ico') }}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="{% block extra_nav_class %}container{% endblock extra_nav_class %}">
|
||||
<a class="header__logo white" href="{{ config.base_url }}">Zola</a>
|
||||
<a class="white" href="{{ get_url(path="@/documentation/_index.md") }}" class="nav-link">Docs</a>
|
||||
<a class="white" href="{{ get_url(path="@/themes/_index.md") }}" class="nav-link">Themes</a>
|
||||
<a class="white" href="https://zola.discourse.group/" class="nav-link">Forum</a>
|
||||
<a class="white" href="https://github.com/getzola/zola" class="nav-link">GitHub</a>
|
||||
|
||||
<a class="header__logo white" href="{{ config.base_url }}">Zola</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a class="white" href="{{ get_url(path='@/documentation/_index.md') }}" class="nav-link">Docs</a></li>
|
||||
<li><a class="white" href="{{ get_url(path='@/themes/_index.md') }}" class="nav-link">Themes</a></li>
|
||||
<li><a class="white" href="https://zola.discourse.group/" class="nav-link">Forum</a></li>
|
||||
<li><a class="white" href="https://github.com/getzola/zola" class="nav-link">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="search-container">
|
||||
<input id="search" type="search" placeholder="🔎 Search the docs">
|
||||
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
<p class="hero__tagline">
|
||||
Forget dependencies. Everything you need in one binary.
|
||||
</p>
|
||||
<a href="{{ get_url(path="@/documentation/_index.md") }}" class="button">Get started</a>
|
||||
<a href="{{ get_url(path='@/documentation/_index.md') }}" class="button">Get started</a>
|
||||
</div>
|
||||
|
||||
<div class="inverted-colours selling-points">
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
<p>
|
||||
From the CLI to the template engine, everything is designed to be intuitive.
|
||||
Don't take my word for it though, look at the
|
||||
<a href="{{ get_url(path="@/documentation/_index.md") }}">documentation</a> and see for yourself.
|
||||
<a href="{{ get_url(path='@/documentation/_index.md') }}">documentation</a> and see for yourself.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -88,8 +89,8 @@
|
|||
<div class="selling-point">
|
||||
<h2>Augmented Markdown</h2>
|
||||
<p>
|
||||
Zola comes with <a href="{{ get_url(path="@/documentation/content/shortcodes.md") }}">shortcodes</a> and
|
||||
<a href="{{ get_url(path="@/documentation/content/linking.md") }}">internal links</a>
|
||||
Zola comes with <a href="{{ get_url(path='@/documentation/content/shortcodes.md') }}">shortcodes</a> and
|
||||
<a href="{{ get_url(path='@/documentation/content/linking.md') }}">internal links</a>
|
||||
to make it easier to write your content.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -102,7 +103,7 @@
|
|||
©2017-{{ now() | date(format="%Y") }} — <a class="white" href="https://www.vincentprouillet.com">Vincent Prouillet</a> and <a class="white" href="https://github.com/getzola/zola/graphs/contributors">contributors</a>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
|
||||
<script type="text/javascript" src="{{ get_url(path="search.js") }}"></script>
|
||||
<script type="text/javascript" src="{{ get_url(path='elasticlunr.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ get_url(path='search.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue