131 lines
3.6 KiB
HTML
131 lines
3.6 KiB
HTML
{% macro render_header(path) %}
|
|
{% set root = get_section(path="_index.md") %}
|
|
<a href="{{ root.permalink | safe }}">
|
|
<div class="logo">
|
|
<img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo">
|
|
{{ config.extra.juice_logo_name }}
|
|
</div>
|
|
</a>
|
|
|
|
<nav>
|
|
{% if config.extra.juice_extra_menu %}
|
|
{% for menu in config.extra.juice_extra_menu %}
|
|
<a class="nav-item subtitle-text" href="{{ menu.link | safe }}#top">{{ menu.title }}</a>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
|
|
{% for page in root.pages %}
|
|
{% if lang == "en" %}
|
|
<a class="nav-item subtitle-text" href="{{ page.permalink | safe }}#top">{{ page.title }}</a>
|
|
{% else %}
|
|
<a class="nav-item subtitle-text" href="/{{lang}}{{ page.path }}#top">{{ page.title }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% for path in root.subsections %}
|
|
{% set child = get_section(path=path) %}
|
|
{% if lang == "en"%}
|
|
<a class="nav-item subtitle-text" href="{{ child.permalink | safe }}#top">{{ child.title }}</a>
|
|
{% else %}
|
|
<a class="nav-item subtitle-text" href="/{{lang}}{{ child.path }}#top">{{ child.title }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if lang == "en"%}
|
|
<a class="nav-item subtitle-text" href="/sv{{ path }}"><img alt="swedish" class="flag"
|
|
src="/flag-for-sweden-svgrepo-com.svg"></a>
|
|
{% else %}
|
|
<a class="nav-item subtitle-text" href="{{ path }}"><img alt="english" class="flag"
|
|
src="/flag-for-united-kingdom-svgrepo-com.svg"></a>
|
|
{% endif %}
|
|
|
|
|
|
<div class='toggle-dark'>
|
|
<label>
|
|
<input type='checkbox' _="on click
|
|
log(the first <body/>) then
|
|
if me.checked
|
|
log('checked')
|
|
add .dark to the closest <body/>
|
|
else
|
|
remove .dark from the closest <body/>
|
|
end
|
|
end
|
|
on load
|
|
if (the first <body/> match .dark)
|
|
log('loaded as dark') then
|
|
set me.checked to true then
|
|
log(me)
|
|
">
|
|
<span class='slider'></span>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
<!-- if i am <:checked/> -->
|
|
</nav>
|
|
{% endmacro render_header %}
|
|
|
|
|
|
{% macro render_toc(toc) %}
|
|
<div class="toc">
|
|
<div class="toc-sticky">
|
|
{% for h in toc %}
|
|
<div class="toc-item">
|
|
<a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a>
|
|
</div>
|
|
{% if h.children %}
|
|
{% for h2 in h.children %}
|
|
<div class="toc-item-child">
|
|
<a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endmacro render_toc %}
|
|
|
|
|
|
{% macro hero(slogan, intro)%}
|
|
<div class="hero">
|
|
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<section class="text-center">
|
|
<h1 class="heading-text" style="font-size: 50px">
|
|
{{ slogan }}
|
|
</h1>
|
|
<h3 class="title-text">
|
|
{{ intro | safe }}
|
|
</h3>
|
|
<div>
|
|
<!-- <a class="github-button" href="https://github.com/huhu/juice" data-size="large" data-show-count="true" -->
|
|
<!-- aria-label="Star huhu/juice on GitHub">Star</a> -->
|
|
<!-- <a class="github-button" href="https://github.com/huhu/juice/fork" data-size="large" data-show-count="true" -->
|
|
<!-- aria-label="Fork huhu/juice on GitHub">Repos</a> -->
|
|
</div>
|
|
</section>
|
|
<img class="hero-image" style="width: 50%" src="{{ get_url(path='build-blocks.svg') }}">
|
|
|
|
<div class="explore-more text" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
|
|
Explore More ⇩
|
|
</div>
|
|
<style>
|
|
.hero section {
|
|
padding: 0 5rem;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.hero section {
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.hero-image {
|
|
display: none
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</div>
|
|
{% endmacro hero %} |