55 lines
2.1 KiB
Text
55 lines
2.1 KiB
Text
<header>
|
|
<nav>
|
|
<div class="nav-categories">
|
|
<a href="{{ "/" | url }}">{{ site.title }}</a>
|
|
<a href="{{ "/posts" | url }}">/posts</a>
|
|
<a href="{{ "/timeline" | url }}">/timeline</a>
|
|
<a href="{{ "/recipes" | url }}">/recipes</a>
|
|
<a href="{{ "/music" | url }}">/music</a>
|
|
<a href="{{ "/books" | url }}">/books</a>
|
|
</div>
|
|
<div class="nav-languages">
|
|
<label class="nav-language-button" data-font="english">English<input type="radio" name="language" value="english"/></label>
|
|
<label class="nav-language-button" data-font="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
|
|
<script type="text/javascript">
|
|
const initialLanguage = localStorage.getItem("language") ?? 'english'
|
|
document.body.setAttribute('data-font', initialLanguage);
|
|
document.querySelectorAll("input[name=language]").forEach(input => {
|
|
if (input.value === initialLanguage) {
|
|
input.checked = true;
|
|
}
|
|
input.addEventListener('change', function () {
|
|
const newValue = this.value;
|
|
localStorage.setItem("language", newValue);
|
|
document.body.setAttribute('data-font', newValue);
|
|
})
|
|
})
|
|
</script>
|
|
</div>
|
|
</nav>
|
|
<div class="scene">
|
|
<div class="sky">
|
|
<div id="brand">
|
|
<h1>{{ tag | capitalize if tag else title }}</h1>
|
|
<div class="header-meta">
|
|
{%- if author -%}
|
|
<author>{{ author }}</author>
|
|
{%- endif -%}
|
|
{%- if date -%}
|
|
<date>{{ date | formatDate("MMMM D, YYYY") }}</date>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
<div class="cloud" style="--n: 0"></div>
|
|
<div class="cloud" style="--n: 1"></div>
|
|
<div class="cloud" style="--n: 2"></div>
|
|
<div class="cloud" style="--n: 3"></div>
|
|
<div class="cloud" style="--n: 4"></div>
|
|
<div class="cloud" style="--n: 5"></div>
|
|
<div class="cloud" style="--n: 6"></div>
|
|
<div class="cloud" style="--n: 7"></div>
|
|
<div class="cloud" style="--n: 8"></div>
|
|
<div class="cloud" style="--n: 9"></div>
|
|
</div>
|
|
</div>
|
|
</header>
|