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.
41 lines
1.8 KiB
HTML
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>
|