Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add: the navigation in the same style as on the rest of developers. #105

Merged
merged 3 commits into from
Jan 20, 2025
+340 −47
Merged

Add: the navigation in the same style as on the rest of developers. #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9991b5b
Add: the navigation in the same style as on the rest of developers.
steven-noorbergen Jan 19, 2025
e2a5115
Fix: Don't pad the sidebar too much, tweak font-size/weight a bit more
steven-noorbergen Jan 20, 2025
9bd099b
Fix: Adjust copy
steven-noorbergen Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions docs/assets/stylesheet/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,53 @@ body::before {
height: 36px;
}

.esi-hero {
min-height: 82px;
margin-top: 72px;
padding: 0 16px;
display: grid;
grid-template-areas: "title cta" "subtitle cta";
grid-template-columns: 1fr min-content;
grid-template-rows: 1fr min-content;
row-gap: 8px;
min-height: 80px;
column-gap: 24px;
max-width: 1632px;
align-self: center;
width: 100%;
box-sizing: border-box;
}

.esi-hero > * {
padding: 0;
margin: 0;
color: #FFF;
}

.esi-hero h1 {
grid-area: title;
font-weight: 500;
font-size: 48px;
line-height: 48px;
text-transform: uppercase;
}
.esi-hero h3 {
grid-area: subtitle;
font-weight: 500;
font-size: 26px;
line-height: 26px;
text-transform: uppercase;
}
.esi-hero > div {
grid-area: cta;
}

.md-main {
padding: 0 16px;
}

.md-main > .md-grid {
margin-top: 40px;
padding: 32px;
max-width: 1600px;
background-color: color-mix(in srgb, var(--esi-paper), transparent 10%)
Expand Down Expand Up @@ -383,6 +429,14 @@ body::before {
font-size: 26px;
font-weight: 600;
}
.md-content h2 {
font-size: 24px;
font-weight: 600;
}
.md-content h3 {
font-size: 22px;
font-weight: 600;
}

.md-content .md-icon:active,
.md-content .md-icon:focus,
Expand Down Expand Up @@ -651,4 +705,104 @@ body::before {
.md-content a:hover {
color: var(--esi-accent);
text-decoration: underline;
}

.esi-sidebar {
padding: 0;
}
.esi-sidebar-nav {
padding: 0;
font-size: 18px;
font-weight: 400;
line-height: 22px;
color: #FFF;
}
.esi-sidebar .esi-sidebar-close,
.esi-sidebar .esi-sidebar-extra-nav {
display: none;
}
.esi-sidebar-nav .esi-sidebar-nav-item {
padding: 10px 0 0 0;
}
.esi-sidebar-nav .esi-sidebar-nav-item-active,
.esi-sidebar-nav .esi-sidebar-nav-item:hover {
color: var(--esi-accent);
}
.esi-sidebar-nav li {
list-style: none;
}
.esi-sidebar-nav ul {
padding-left: 16px;
}
.esi-sidebar-close-button {
display: flex;
cursor: pointer;
width: 28px;
height: 28px;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.esi-sidebar-close-button:hover {
background-color: #2e2e2e;
}
.esi-sidebar-close-button > svg {
width: 20px;
height: 20px;
color: #b8b8b8;
}
.esi-sidebar-close-button > svg path {
fill: currentColor;
}

.esi-sidebar-extra-nav {
border-top: 1px solid #2e2e2e;
}
.esi-sidebar-extra-nav .esi-sidebar-nav-extra {
padding: 0;
}
.esi-sidebar-extra-nav ul {
margin: 0;
}
.esi-sidebar-extra-nav h3 {
margin-top: 16px;
margin-bottom: 8px;
font-size: 24px;
font-weight: 500;
}

@media screen and (max-width: 1200px) {
[data-md-toggle=drawer]:checked~.md-container .md-main .esi-sidebar {
left: 0;
transform: unset;
}
.esi-sidebar-nav {
font-size: 20px;
font-weight: 400;
}
.esi-sidebar .esi-sidebar-close {
position: absolute;
right: 16px;
display: block;
width: 28px;
height: 28px;
}
.esi-sidebar-nav .esi-sidebar-nav-item {
padding: 16px 0 0 0;
}
.esi-sidebar .esi-sidebar-extra-nav {
display: block;
}
.md-main .esi-sidebar {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
bottom: 0;
width: 80%;
left: -80%;
transition: left 0.3s ease-in-out;
padding: 24px 16px 32px 24px;
overflow: auto;
}
}
3 changes: 3 additions & 0 deletions mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ extra:
analytics:
provider: custom
property: !ENV [GTM_ID, 'GTM-XXXXXXX']
hero:
title: "EVE Developer Documentation"
subtitle: "Crowdsourced documentation for third-party developers"
footer:
title: Follow EVE Online
socials:
Expand Down
53 changes: 20 additions & 33 deletions overrides/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{% extends "base.html" %}
{%- extends "base.html" -%}

{% import "partials/language.html" as lang with context %}
{%- import "partials/language.html" as lang with context -%}

{% block scripts %} {{ super() }}
{%- block scripts -%} {{ super() }}
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
Expand All @@ -13,16 +13,25 @@
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endblock %}
{%- endblock -%}

{% block extrahead %}
{%- block extrahead -%}
{{ super() }}
{% include "partials/social.html" %}
{% endblock %}
{%- endblock -%}

{% block site_nav %}
{%- block tabs -%}{%- endblock -%}

{%- block hero -%}
{{ super() }}
<div class="esi-hero">
{% include "partials/hero.html" %}
</div>
{%- endblock -%}

{%- block site_nav -%}
<!-- Navigation -->
{% if nav %}
{%- if nav -%}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
{% endif %}
Expand All @@ -31,29 +40,7 @@
data-md-type="navigation"
{{ hidden }}
>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
</div>
</div>
</div>
{% endif %}

<!-- Table of contents -->
{% if "toc.integrate" not in features %}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "toc" in page.meta.hide %}
{% endif %}
<div
class="md-sidebar md-sidebar--secondary"
data-md-type="toc"
{{ hidden }}
>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
</div>
</div>
{% include "partials/sidebar-nav.html" %}
</div>
{% endif %}
{% endblock %}
{%- endif -%}
{%- endblock -%}
22 changes: 8 additions & 14 deletions overrides/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,23 @@
<div class="title">
<div class="follow">{{ config.extra.footer.title }}</div>
<div class="socials">
{% for social in config.extra.footer.socials %}
{%- for social in config.extra.footer.socials %}
<div class="social-{{ social.icon }}">
<a href="{{ social.url }}" target="_blank" rel="noopener">
{% include ".icons/fontawesome/brands/" + social.icon + ".svg" %}
</a>
<a href="{{ social.url }}" target="_blank" rel="noopener">{% include ".icons/fontawesome/brands/" + social.icon + ".svg" %}</a>
</div>
{% endfor %}
{%- endfor %}
</div>
</div>
{% for col in config.extra.footer.columns %}
{%- for col in config.extra.footer.columns -%}
<div class="column">
<ul>
<li>{{ col.title }}</li>
{% for link in col.links %}
<li>
<a href="{{ link.url }}" target="_blank" rel="noopener"
>{{ link.title }}</a
>
</li>
{% endfor %}
{%- for link in col.links %}
<li><a href="{{ link.url }}" target="_blank" rel="noopener">{{ link.title }}</a></li>
{%- endfor %}
</ul>
</div>
{% endfor %}
{%- endfor -%}
</div>
</div>
</footer>
2 changes: 2 additions & 0 deletions overrides/partials/hero.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<h1>{{ config.extra.hero.title }}</h1>
<h3>{{ config.extra.hero.subtitle }}</h3>
52 changes: 52 additions & 0 deletions overrides/partials/sidebar-nav-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{% macro rendertoc(ref) %}
{% if ref.active %}
{% set toc = page.toc %}
{% set first = toc | first %}
{% if first and first.level == 1 %}
{% set toc = first.children %}
{% endif %}
<ul class="esi-nav-item-children">
{% for toc_item in toc %}
{{ render(toc_item, toc_item) }}
{% endfor %}
</ul>
{% endif %}
{% endmacro %}

{% macro render_children(item) %}
{% if item.children %}
AAAAAAAAAA
<ul class="esi-nav-item-children">
{% for child in item.children %}
{{ render(child, item) }}
{% endfor %}
</ul>
{% endif %}
{% endmacro %}

{% macro render(nav_item, ref = nav_item) %}
{% set class = "esi-nav-item" %}
{% if ref.active %}
{% set class = class ~ " esi-nav-item-active" %}
{% endif %}
{% if nav_item.children %}
{% set first = nav_item.children | first %}
{% if first.children %}
{{ render(first, ref) }}
{% else %}
<li class="{{ class }}">
<a href="{{ first.url | url }}" class="esi-nav-item-link">
{{ ref.title }}
</a>
{{ render_children(first) }}
</li>
{% endif %}
{% else %}
<li class="{{ class }}">
<a href="{{ nav_item.url | url }}" class="esi-nav-item-link">
{{ ref.title }}
</a>
{{ render_children(ref) }}
</li>
{% endif %}
{% endmacro %}
Loading
Loading