elixir/templates/header.html
Franciszek Stachura 6a83ae7661 web: refactor message banners & support mobile
We had an hardcoded mobile banner that was nice looking but couldn't
deal with all the content for the various banners we want to display.

Also, it was a separate element to the desktop one. Unify them as a
single element that adapts (as it should) to desktop or mobile
viewports.
2025-07-25 12:26:04 +02:00

41 lines
1.8 KiB
HTML

<header class="header">
<nav>
<ul class="nav-links">
<li><a href="https://bootlin.com/">Home</a></li>
<li><a href="https://bootlin.com/engineering/">Engineering</a></li>
<li><a href="https://bootlin.com/training/">Training</a></li>
<li><a href="https://bootlin.com/docs/">Docs</a></li>
<li><a href="https://bootlin.com/community/">Community</a></li>
<li><a href="https://bootlin.com/company/">Company</a></li>
</ul>
<ul class="social-icons">
<li><a target="_blank" class="icon-twitter" href="http://twitter.com/bootlincom">twitter</a></li>
<li><a target="_blank" class="icon-mastodon" href="https://fosstodon.org/@bootlin">mastodon</a></li>
<li><a target="_blank" class="icon-linkedin" href="https://www.linkedin.com/company/bootlin/">linkedin</a></li>
<li><a target="_blank" class="icon-github" href="https://github.com/bootlin">github</a></li>
</ul>
</nav>
<div class="header-main">
<div class="banners">
<a class="message-link" target="_blank" href="https://bootlin.com/">
<div class="message-banner">
<div class="container">
<p class="title"></p>
<div class="subtitle"></div>
<div class="action">
<div class="action-inner">
</div>
</div>
</div>
</div>
</a>
</div>
<div class="header-logo">
<h1>
<img src="/static/img/bootlin-logo-white.svg" alt="Bootlin logo"/>
</h1>
<h2>Elixir Cross Referencer</h2>
</div>
<div></div>
</div>
</header>