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 { html, body {
font-size: 16px; font-size: 16px;
height: 100%; height: 100%;
@ -8,7 +10,7 @@ body {
line-height: 1.6; line-height: 1.6;
// from http://www.heropatterns.com // from http://www.heropatterns.com
background-color: #191919; 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; color: $foreground;

14
docs/sass/_header.scss
View File

@ -3,8 +3,15 @@ header {
border-bottom: none; border-bottom: none;
} }
nav a { ul {
margin-right: 2rem; padding-inline-start: 0;
display: flex;
gap: 1ch 2rem;
margin: 0;
}
li {
list-style: none;
} }
.header__logo { .header__logo {
@ -27,7 +34,8 @@ header {
.header__logo { .header__logo {
// to force menu links to be on a line below // to force menu links to be on a line below
display: block; text-align: center;
width: 100%;
} }
} }
} }

22
docs/sass/_layout.scss
View File

@ -1,5 +1,20 @@
header { header {
padding: 2rem 3rem; 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 { .container {
@ -7,9 +22,11 @@ header {
margin: 0 auto; margin: 0 auto;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.container { header {
max-width: 90%; max-width: 90%;
margin-inline: auto;
justify-content: center;
} }
} }
@ -22,7 +39,6 @@ header {
} }
} }
footer { footer {
text-align: center; text-align: center;
padding: 2rem 3rem; 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 { .search-container {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 300px; width: 100%;
max-width: 300px;
margin-left: auto;
input { input {
width: 100%; width: 100%;
@ -45,3 +47,9 @@
} }
} }
} }
@media only screen and (max-width: 1000px) {
.search-container {
margin-left: 0;
}
}

31
docs/templates/index.html vendored
View File

@ -7,19 +7,20 @@
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}"> <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
<meta name="author" content="{{ config.extra.author }}"> <meta name="author" content="{{ config.extra.author }}">
<title>{% block title %}{{ config.title }}{% endblock title %}</title> <title>{% block title %}{{ config.title }}{% endblock title %}</title>
<link rel="stylesheet" href="{{ get_url(path="site.css") }}"/> <link rel="stylesheet" href="{{ get_url(path='site.css') }}">
<link rel="icon" href="{{ get_url(path="favicon.ico") }}"> <link rel="icon" href="{{ get_url(path='favicon.ico') }}">
</head> </head>
<body> <body>
<header> <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="header__logo white" href="{{ config.base_url }}">Zola</a> <nav>
<a class="white" href="{{ get_url(path="@/documentation/_index.md") }}" class="nav-link">Docs</a> <ul>
<a class="white" href="{{ get_url(path="@/themes/_index.md") }}" class="nav-link">Themes</a> <li><a class="white" href="{{ get_url(path='@/documentation/_index.md') }}" class="nav-link">Docs</a></li>
<a class="white" href="https://zola.discourse.group/" class="nav-link">Forum</a> <li><a class="white" href="{{ get_url(path='@/themes/_index.md') }}" class="nav-link">Themes</a></li>
<a class="white" href="https://github.com/getzola/zola" class="nav-link">GitHub</a> <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"> <div class="search-container">
<input id="search" type="search" placeholder="🔎 Search the docs"> <input id="search" type="search" placeholder="🔎 Search the docs">
@ -37,7 +38,7 @@
<p class="hero__tagline"> <p class="hero__tagline">
Forget dependencies. Everything you need in one binary. Forget dependencies. Everything you need in one binary.
</p> </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>
<div class="inverted-colours selling-points"> <div class="inverted-colours selling-points">
@ -73,7 +74,7 @@
<p> <p>
From the CLI to the template engine, everything is designed to be intuitive. From the CLI to the template engine, everything is designed to be intuitive.
Don't take my word for it though, look at the 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> </p>
</div> </div>
@ -88,8 +89,8 @@
<div class="selling-point"> <div class="selling-point">
<h2>Augmented Markdown</h2> <h2>Augmented Markdown</h2>
<p> <p>
Zola comes with <a href="{{ get_url(path="@/documentation/content/shortcodes.md") }}">shortcodes</a> and 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> <a href="{{ get_url(path='@/documentation/content/linking.md') }}">internal links</a>
to make it easier to write your content. to make it easier to write your content.
</p> </p>
</div> </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> ©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> </footer>
<script type="text/javascript" src="{{ get_url(path="elasticlunr.min.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> <script type="text/javascript" src="{{ get_url(path='search.js') }}"></script>
</body> </body>
</html> </html>