Skip to content

Commit 606c2be

Browse files
FireIsGoodFireIsGood
authored
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
1 parent 0056851 commit 606c2be

6 files changed

Lines changed: 59 additions & 23 deletions

File tree

‎docs/sass/_base.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "pattern";
2+
13
html, body {
24
font-size: 16px;
35
height: 100%;
@@ -8,7 +10,7 @@ body {
810
line-height: 1.6;
911
// from http://www.heropatterns.com
1012
background-color: #191919;
11-
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");
13+
background-image: $grid-pattern;
1214

1315
color: $foreground;
1416

‎docs/sass/_header.scss‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,15 @@ header {
33
border-bottom: none;
44
}
55

6-
nav a {
7-
margin-right: 2rem;
6+
ul {
7+
padding-inline-start: 0;
8+
display: flex;
9+
gap: 1ch 2rem;
10+
margin: 0;
11+
}
12+
13+
li {
14+
list-style: none;
815
}
916

1017
.header__logo {
@@ -27,7 +34,8 @@ header {
2734

2835
.header__logo {
2936
// to force menu links to be on a line below
30-
display: block;
37+
text-align: center;
38+
width: 100%;
3139
}
3240
}
3341
}

‎docs/sass/_layout.scss‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
header {
22
padding: 2rem 3rem;
3+
display: flex;
4+
flex-wrap: wrap;
5+
align-items: baseline;
6+
column-gap: 2rem;
7+
8+
// Container is reused elsewhere, so this must be declared here
9+
nav {
10+
display: flex;
11+
flex-grow: 1;
12+
flex-wrap: wrap;
13+
align-items: baseline;
14+
justify-content: center;
15+
gap: 1rem 2rem;
16+
margin: 0;
17+
}
318
}
419

520
.container {
621
max-width: 1000px;
722
margin: 0 auto;
823
}
924

10-
@media only screen and (max-width: 1000px) {
11-
.container {
25+
@media only screen and (max-width: 1000px) {
26+
header {
1227
max-width: 90%;
28+
margin-inline: auto;
29+
justify-content: center;
1330
}
1431
}
1532

@@ -22,7 +39,6 @@ header {
2239
}
2340
}
2441

25-
2642
footer {
2743
text-align: center;
2844
padding: 2rem 3rem;

‎docs/sass/_pattern.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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");

‎docs/sass/_search.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
.search-container {
22
display: inline-block;
33
position: relative;
4-
width: 300px;
4+
width: 100%;
5+
max-width: 300px;
6+
margin-left: auto;
57

68
input {
79
width: 100%;
@@ -45,3 +47,9 @@
4547
}
4648
}
4749
}
50+
51+
@media only screen and (max-width: 1000px) {
52+
.search-container {
53+
margin-left: 0;
54+
}
55+
}

‎docs/templates/index.html‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@
77
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
88
<meta name="author" content="{{ config.extra.author }}">
99
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
10-
<link rel="stylesheet" href="{{ get_url(path="site.css") }}"/>
11-
<link rel="icon" href="{{ get_url(path="favicon.ico") }}">
10+
<link rel="stylesheet" href="{{ get_url(path='site.css') }}">
11+
<link rel="icon" href="{{ get_url(path='favicon.ico') }}">
1212
</head>
1313
<body>
1414

1515
<header>
16-
<nav class="{% block extra_nav_class %}container{% endblock extra_nav_class %}">
17-
<a class="header__logo white" href="{{ config.base_url }}">Zola</a>
18-
<a class="white" href="{{ get_url(path="@/documentation/_index.md") }}" class="nav-link">Docs</a>
19-
<a class="white" href="{{ get_url(path="@/themes/_index.md") }}" class="nav-link">Themes</a>
20-
<a class="white" href="https://zola.discourse.group/" class="nav-link">Forum</a>
21-
<a class="white" href="https://github.com/getzola/zola" class="nav-link">GitHub</a>
22-
16+
<a class="header__logo white" href="{{ config.base_url }}">Zola</a>
17+
<nav>
18+
<ul>
19+
<li><a class="white" href="{{ get_url(path='@/documentation/_index.md') }}" class="nav-link">Docs</a></li>
20+
<li><a class="white" href="{{ get_url(path='@/themes/_index.md') }}" class="nav-link">Themes</a></li>
21+
<li><a class="white" href="https://zola.discourse.group/" class="nav-link">Forum</a></li>
22+
<li><a class="white" href="https://github.com/getzola/zola" class="nav-link">GitHub</a></li>
23+
</ul>
2324
<div class="search-container">
2425
<input id="search" type="search" placeholder="🔎 Search the docs">
2526

@@ -37,7 +38,7 @@ <h1>Your one-stop static site engine</h1>
3738
<p class="hero__tagline">
3839
Forget dependencies. Everything you need in one binary.
3940
</p>
40-
<a href="{{ get_url(path="@/documentation/_index.md") }}" class="button">Get started</a>
41+
<a href="{{ get_url(path='@/documentation/_index.md') }}" class="button">Get started</a>
4142
</div>
4243

4344
<div class="inverted-colours selling-points">
@@ -73,7 +74,7 @@ <h2>Easy to use</h2>
7374
<p>
7475
From the CLI to the template engine, everything is designed to be intuitive.
7576
Don't take my word for it though, look at the
76-
<a href="{{ get_url(path="@/documentation/_index.md") }}">documentation</a> and see for yourself.
77+
<a href="{{ get_url(path='@/documentation/_index.md') }}">documentation</a> and see for yourself.
7778
</p>
7879
</div>
7980

@@ -88,8 +89,8 @@ <h2>Flexible</h2>
8889
<div class="selling-point">
8990
<h2>Augmented Markdown</h2>
9091
<p>
91-
Zola comes with <a href="{{ get_url(path="@/documentation/content/shortcodes.md") }}">shortcodes</a> and
92-
<a href="{{ get_url(path="@/documentation/content/linking.md") }}">internal links</a>
92+
Zola comes with <a href="{{ get_url(path='@/documentation/content/shortcodes.md') }}">shortcodes</a> and
93+
<a href="{{ get_url(path='@/documentation/content/linking.md') }}">internal links</a>
9394
to make it easier to write your content.
9495
</p>
9596
</div>
@@ -102,7 +103,7 @@ <h2>Augmented Markdown</h2>
102103
©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>
103104
</footer>
104105

105-
<script type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
106-
<script type="text/javascript" src="{{ get_url(path="search.js") }}"></script>
106+
<script type="text/javascript" src="{{ get_url(path='elasticlunr.min.js') }}"></script>
107+
<script type="text/javascript" src="{{ get_url(path='search.js') }}"></script>
107108
</body>
108109
</html>

0 commit comments

Comments
 (0)