reivilibre
/
mirror-zola
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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 2024-06-11 15:02:22 -07:00 committed by GitHub
parent 0056851e31
commit 606c2be425
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 59 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/sass/_base.scss
View File

@ -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;

14
docs/sass/_header.scss
View File

@ -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%;
}
}
}

20
docs/sass/_layout.scss
View File

@ -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 {
@ -8,8 +23,10 @@ header {
}
@media only screen and (max-width: 1000px) {
.container {
header {
max-width: 90%;
margin-inline: auto;
justify-content: center;
}
}
@ -22,7 +39,6 @@ header {
}
}
footer {
text-align: center;
padding: 2rem 3rem;

1
docs/sass/_pattern.scss Normal file
View File

@ -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");

10
docs/sass/_search.scss
View File

@ -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;
}
}

29
docs/templates/index.html vendored
View File

@ -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>
<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>