basic header styles

This commit is contained in:
Lyn Fugmann 2024-09-15 14:58:59 +02:00
parent e173a4aa6d
commit 0b7680f38f
2 changed files with 39 additions and 4 deletions

View file

@ -1,6 +1,33 @@
<header>
<div class="header-container">
<a href="{{ "/" | locale_url }}" title="home">ESE Logo</a>
<nav>
<nav id="mainNav">
{{ collections.mainNav | pageLang | eleventyNavigation | eleventyNavigationToHtml | safe }}
</nav>
</div>
</header>
{% css %}
header {
position: sticky;
backdrop-filter: blur(5px);
background-color: #ffffffcc;
top: 0;
padding: 2rem 0;
}
.header-container {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#mainNav ul {
margin: 0;
padding: 0;
}
#mainNav li {
display: inline;
}
{% endcss %}

View file

@ -9,6 +9,7 @@ eleventyComputed:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if title %}{{ title }} | {% endif %}ESE {{ year }}</title>
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
</head>
<body>
{% include 'header.njk' %}
@ -20,3 +21,10 @@ eleventyComputed:
{% include 'footer.njk' %}
</body>
</html>
{% css %}
body {
font-family: sans-serif;
margin: 0;
}
{% endcss %}