Add a message banner and hyperlink to the header
- This allows to make some announcements Signed-off-by: Michael Opdenacker <michael.opdenacker@bootlin.com>
This commit is contained in:
Michael Opdenacker
parent
1637e1eca6
commit
0eea6aa35f
5 changed files with 138 additions and 10 deletions
115
http/banner.css
Normal file
115
http/banner.css
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
.message-banner-desktop {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||
font-size: 30px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
left: 10px;
|
||||
bottom: 30px;
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
background: rgba(255,255,255,1);
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
|
||||
}
|
||||
.message-banner-desktop p.title {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.message-banner-desktop .subtitle {
|
||||
width: 150px;
|
||||
padding: 0 10px;
|
||||
background: #fe003e;
|
||||
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
|
||||
-webkit-transform: rotate(-15deg);
|
||||
-moz-transform: rotate(-15deg);
|
||||
-o-transform: rotate(-15deg);
|
||||
-ms-transform: rotate(-15deg);
|
||||
transform: rotate(-15deg);
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
z-index: 999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-banner-mobile {
|
||||
display: none;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: #fe003e;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
-webkit-transform:rotate(-90deg);
|
||||
-moz-transform:rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
-ms-transform:rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
left: -58px;
|
||||
bottom: 58px;
|
||||
padding: 5px;
|
||||
}
|
||||
.message-banner-mobile .title {
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
}
|
||||
.message-banner-mobile .subtitle {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
.message-banner-mobile:hover {
|
||||
background: #f37b30;
|
||||
}
|
||||
.message-banner-mobile .message-link,
|
||||
.message-banner-desktop .message-link {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
header.header h2 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.icon-googleplus:before,
|
||||
.icon-mastodon:before {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
}
|
||||
.select-projects {
|
||||
background-position: bottom 0.15em right 0.3em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.message-banner-desktop {
|
||||
display: none;
|
||||
}
|
||||
.message-banner-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
.message-banner-mobile {
|
||||
bottom: 50px;
|
||||
}
|
||||
.message-banner-mobile .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.message-banner-mobile .subtitle {
|
||||
font-size: 9.5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
/* Tags menu filter */
|
||||
|
||||
var versions = document.querySelector('.versions')
|
||||
var dropdown = document.querySelector('.select-projects')
|
||||
|
||||
var div = document.createElement('div')
|
||||
var button = document.createElement('button')
|
||||
|
|
@ -25,8 +26,11 @@ div.appendChild(input)
|
|||
div.appendChild(button)
|
||||
div.appendChild(a)
|
||||
var sidebar = document.querySelector('.sidebar')
|
||||
var detachDropdown = dropdown.parentElement.removeChild(dropdown)
|
||||
div.insertBefore(detachDropdown, div.firstChild)
|
||||
sidebar.insertBefore(div, sidebar.firstChild)
|
||||
|
||||
|
||||
var nav = document.querySelector('.sidebar nav')
|
||||
var results = document.createElement('div')
|
||||
results.className = 'filter-results'
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ if mode == 'source':
|
|||
lines[0] = 'back - -'
|
||||
|
||||
print ('<div class="lxrtree">')
|
||||
print ('<table>\n')
|
||||
print ('<table><tbody>\n')
|
||||
for l in lines:
|
||||
type, name, size = l.split (' ')
|
||||
|
||||
|
|
@ -232,7 +232,7 @@ if mode == 'source':
|
|||
print (' <td><a tabindex="-1" class="size" href="'+version+'/source'+path2+'">'+size+'</a></td>\n')
|
||||
print (' </tr>\n')
|
||||
|
||||
print ('</table>', end='')
|
||||
print ('</tbody></table>', end='')
|
||||
print ('</div>')
|
||||
|
||||
elif type == 'blob':
|
||||
|
|
|
|||
|
|
@ -1,4 +1,14 @@
|
|||
<header class="header">
|
||||
<div class="message-banner-mobile">
|
||||
<p class="title">We're hiring!</p>
|
||||
<p class="subtitle">Embedded and Linux kernel jobs</p>
|
||||
<a class="message-link" target="_blank" href="https://bootlin.com/company/careers/"></a>
|
||||
</div>
|
||||
<div class="message-banner-desktop">
|
||||
<p class="title">We're hiring!</p>
|
||||
<div class="subtitle"><p>Embedded and Linux kernel jobs</p></div>
|
||||
<a class="message-link" target="_blank" href="https://bootlin.com/company/careers/"></a>
|
||||
</div>
|
||||
<h1>
|
||||
<object data="/images/bootlin-logo-white.svg" type="image/svg+xml">
|
||||
<!-- If the browser doesn't support SVG -->
|
||||
|
|
@ -17,7 +27,7 @@
|
|||
</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">google+</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/groups/4501089">linkedin</a></li>
|
||||
<li><a target="_blank" class="icon-github" href="https://github.com/bootlin">github</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<meta name="description" content="Elixir Cross Referencer">
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
|
||||
<link rel="stylesheet" href="/style.css?v=3">
|
||||
<link rel="stylesheet" href="/banner.css">
|
||||
<base href="{{baseurl}}"/>
|
||||
<script>document.documentElement.className = 'js'</script>
|
||||
</head>
|
||||
|
|
@ -16,13 +17,6 @@
|
|||
<![endif]-->
|
||||
<div class="wrapper">
|
||||
{% include 'header.html' %}
|
||||
<header class="sub-header">
|
||||
<select class="select-projects" onchange="window.location.href=this.value">
|
||||
{%- for p in projects %}
|
||||
<option{% if p == project %} selected{% endif %} value="/{{p}}/latest/source">{{p}}</option>
|
||||
{%- endfor %}
|
||||
</select>
|
||||
</header>
|
||||
<header class="topbar">
|
||||
<div class="breadcrumb">
|
||||
<a href="{{version}}/{{url}}#menu" class="open-menu icon-menu screenreader" title="Open Menu">Open Menu</a>
|
||||
|
|
@ -40,6 +34,11 @@
|
|||
{{main}}
|
||||
</div>
|
||||
<aside class="sidebar" id="menu">
|
||||
<select class="select-projects" onchange="window.location.href=this.value">
|
||||
{%- for p in projects %}
|
||||
<option{% if p == project %} selected{% endif %} value="/{{p}}/latest/source">{{p}}</option>
|
||||
{%- endfor %}
|
||||
</select>
|
||||
<nav>
|
||||
<h3 class="screenreader">Projects</h3>
|
||||
<ul class="projects">
|
||||
|
|
|
|||
Loading…
Reference in a new issue